:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(/assets/fonts/bricolage.woff2) format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:100 1000;src:url(/assets/fonts/dmsans.woff2) format('woff2');}
@font-face{font-family:'DM Sans';font-style:italic;font-display:swap;font-weight:100 1000;src:url(/assets/fonts/dmsans-italic.woff2) format('woff2');}

:root {
  --bg: #F3F6FC;
  --surface: #FFFFFF;
  --surface2: #E7EEFB;
  --ink: #101A45;
  --ink2: #35407A;
  --muted: #566091;
  --line: #D3DCF0;
  --link: #2D47D1;
  --accent: #C8331A;
  --good: #1F5FD6;
  --bad: #C8331A;
  --sun: #FFC93C;
  --sun-ink: #101A45;
  --night: #101A45;
  --night-ink: #F3F6FC;
  --shadow: 0 1px 2px rgba(16,26,69,.07);
  --focus: #2D47D1;
  --rule: #BAC4E4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1030; --surface: #131C4C; --surface2: #1B2663; --ink: #F3F6FC; --ink2: #C9D2F3; --muted: #9FABDC;
    --line: #2A3680; --link: #9DB1FF; --accent: #FF7358; --good: #8FA9FF; --bad: #FF7358;
    --night: #070B22; --night-ink: #F3F6FC; --shadow: 0 1px 2px rgba(0,0,0,.4);
    --focus: #FFC93C; --rule: #34408F; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A1030; --surface: #131C4C; --surface2: #1B2663; --ink: #F3F6FC; --ink2: #C9D2F3; --muted: #9FABDC;
  --line: #2A3680; --link: #9DB1FF; --accent: #FF7358; --good: #8FA9FF; --bad: #FF7358;
  --night: #070B22; --night-ink: #F3F6FC; --shadow: 0 1px 2px rgba(0,0,0,.4);
  --focus: #FFC93C; --rule: #34408F; color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "DM Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.65; text-rendering: optimizeLegibility;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 60; }
h1, h2, h3, h4 { font-family: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -.015em; }
p { margin: 0; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
img, svg { max-width: 100%; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 10px 14px; z-index: 100; border-radius: 6px; }
.skip:focus { left: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- En-tête ---------- */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar-in { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; white-space: nowrap; }
.brand .mark { flex: none; }
.nav { display: none; gap: 2px; margin-left: auto; align-items: center; }
.nav a { color: var(--ink2); text-decoration: none; padding: 8px 9px; border-radius: 8px; font-weight: 500; font-size: .96rem; }
.nav a:hover { background: var(--surface2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--surface2); font-weight: 700; }
.mode { display: none; margin-left: 10px; border: 1px solid var(--rule); border-radius: 10px; padding: 2px; gap: 0; }
.mode button, .mmode button { font: inherit; font-size: .86rem; font-weight: 600; border: 0; background: transparent; color: var(--ink); padding: 5px 12px; border-radius: 10px; cursor: pointer; }
.mode button[aria-pressed="true"], .mmode button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.burger { margin-left: auto; border: 1px solid var(--rule); background: transparent; color: var(--ink); border-radius: 6px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.drawer { display: none; border-top: 1px solid var(--line); padding-block: 10px 18px; }
.drawer.open { display: block; }
.drawer a { display: block; padding: 11px 4px; text-decoration: none; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); }
.mmode { display: inline-flex; border: 1px solid var(--rule); border-radius: 10px; padding: 2px; margin-top: 14px; }
@media (min-width: 1200px) { .nav, .mode { display: flex; } }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; padding: 13px 22px; border-radius: 6px; text-decoration: none; border: 2px solid var(--ink); cursor: pointer; line-height: 1.2; }
.btn.solid { background: var(--ink); color: var(--bg); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.sun { background: var(--sun); color: var(--sun-ink); border-color: var(--sun-ink); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.link-arrow { font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.link-arrow::after { content: "→"; transition: transform .15s; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Héros ---------- */
.hero { background: var(--sun); color: var(--sun-ink); overflow: hidden; position: relative; }
.hero-grid { display: grid; gap: 8px; align-items: end; padding-block: clamp(28px, 6vw, 70px) 0; }
.hero-copy { padding-bottom: clamp(24px, 5vw, 64px); }
.hero h1 { font-size: clamp(3.1rem, 11vw, 7.6rem); font-weight: 800; font-stretch: 78%; letter-spacing: -.035em; line-height: .92; }
.hero .lead { font-size: clamp(1.15rem, 2.2vw, 1.4rem); margin-top: 22px; max-width: 34ch; font-weight: 500; line-height: 1.4; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero .btn.solid { background: var(--night); color: #F3F6FC; border-color: var(--night); }
.hero .btn.ghost { color: var(--sun-ink); border-color: var(--sun-ink); }
.hero-art { width: min(92vw, 560px); justify-self: center; margin-bottom: -2px; }
.hero-art svg { display: block; width: 100%; height: auto; }
.facts { background: var(--night); color: var(--night-ink); }
.facts ul { list-style: none; margin: 0; padding: 14px 0; display: flex; flex-wrap: wrap; gap: 4px 28px; font-weight: 600; font-size: .98rem; }
.facts b { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.15em; color: var(--sun); margin-right: 4px; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 24px; }
  .hero-art { width: 100%; max-width: 560px; justify-self: end; }
}
.hero-art .arc { transform-box: fill-box; transform-origin: 50% 100%; }
.hero-art .hero-rays { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero.play .hero-art .arc { animation: rise 1.25s cubic-bezier(.16,.84,.3,1) both; }
  .hero.play .hero-art .a4 { animation-delay: .05s; } .hero.play .hero-art .a3 { animation-delay: .17s; }
  .hero.play .hero-art .a2 { animation-delay: .29s; } .hero.play .hero-art .a1 { animation-delay: .41s; } .hero.play .hero-art .a0 { animation-delay: .53s; }
  .hero.play .hero-art .hero-rays { animation: fadein 1.2s .9s both; }
  @keyframes rise { from { transform: scale(.35); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes fadein { from { opacity: 0; } to { opacity: .55; } }
  .view { animation: viewin .22s ease-out both; }
  @keyframes viewin { from { opacity: 0; } to { opacity: 1; } }
  .bar-fill { transition: width .55s cubic-bezier(.2,.8,.2,1), left .55s cubic-bezier(.2,.8,.2,1); }
}

/* ---------- Sections ---------- */
.sec { padding-block: clamp(44px, 7vw, 92px); }
.sec.alt { background: var(--surface2); }
.sec.night { background: var(--night); color: var(--night-ink); }
.sec.night a { color: var(--sun); }
.sec h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); font-weight: 800; font-stretch: 85%; }
.sec .intro { margin-top: 14px; max-width: 62ch; color: var(--ink2); font-size: 1.12rem; }
.sec.night .intro { color: #C9D2F3; }
.sec-head { margin-bottom: clamp(24px, 4vw, 44px); }

.trio { display: grid; gap: 18px; }
.trio .t { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 26px 24px 28px; position: relative; box-shadow: var(--shadow); }
.trio .t .dot { width: 44px; height: 22px; border-radius: 10px 44px 0 0; margin-bottom: 14px; }
.trio h3 { font-size: 1.55rem; font-weight: 800; margin-bottom: 10px; }
.trio p { color: var(--ink2); }
@media (min-width: 820px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.logic { margin-top: 28px; font-weight: 700; font-size: 1.1rem; display: flex; gap: 12px; align-items: center; }
.logic::before { content: ""; width: 38px; height: 4px; background: var(--accent); border-radius: 4px; flex: none; }

/* cartes chapitres */
.chap-grid { display: grid; gap: 22px; }
@media (min-width: 700px) { .chap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .chap-grid { grid-template-columns: repeat(3, 1fr); } }
.chap-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; }
.chap-card:hover { transform: translateY(-3px); }
.chap-card .pic { aspect-ratio: 4/3; border-bottom: 1px solid var(--rule); overflow: hidden; }
.chap-card .pic svg { width: 100%; height: 100%; display: block; }
.chap-card .body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.chap-card h3 { font-size: 1.45rem; font-weight: 800; }
.chap-card .pr { color: var(--ink2); }
.chap-card .num { align-self: flex-start; font-weight: 700; font-size: .85rem; padding: 3px 11px; border-radius: 10px; background: var(--chap); color: var(--on); }
.chap-card .more { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--link); }
.chap-card .more::after { content: " →"; }
.c-aube { --chap: #FFC93C; --on: #101A45; } .c-coquelicot { --chap: #C8331A; --on: #FFFFFF; }
.c-outremer { --chap: #2D47D1; --on: #FFFFFF; } .c-ciel { --chap: #BFD4F7; --on: #101A45; }
.c-nuit { --chap: #101A45; --on: #FFFFFF; } .c-mandarine { --chap: #FF8A3D; --on: #101A45; }

/* bande histoire */
.split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } .split.flip .pic { order: 2; } }
.pic { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.pic svg { display: block; width: 100%; height: auto; aspect-ratio: 4/3; }
.tag-imag { display: inline-block; font-size: .8rem; font-weight: 600; padding: 3px 10px; border-radius: 10px; background: var(--surface2); color: var(--ink2); border: 1px solid var(--line); }
.sec.alt .tag-imag { background: var(--surface); }
.prose p + p { margin-top: 14px; }
.big-quote { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.18; letter-spacing: -.01em; }

/* chiffres */
.numbers { display: grid; gap: 14px; margin-top: 6px; }
@media (min-width: 760px) { .numbers { grid-template-columns: repeat(3, 1fr); } }
.num { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 22px; }
.sec.night .num { background: #18225A; border-color: #3A47A0; }
.num .v { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.num .t { margin-top: 10px; color: var(--ink2); font-size: .98rem; }
.sec.night .num .t { color: #C9D2F3; }

/* lignes rouges */
.reds { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 800px) { .reds { grid-template-columns: repeat(2, 1fr); } }
.reds li { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 18px 20px; font-weight: 600; }
.reds li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); margin-top: 7px; }

/* précédents */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; padding: 8px 15px; border-radius: 10px; border: 1px solid var(--rule); text-decoration: none; font-weight: 600; color: var(--ink); background: var(--surface); font-size: .95rem; }
.chip:hover { background: var(--sun); color: var(--sun-ink); }
.prec-grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .prec-grid { grid-template-columns: repeat(2, 1fr); } }
.prec { display: grid; grid-template-columns: 96px 1fr; gap: 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 20px; }
.prec .pays-art { width: 96px; height: 64px; border-radius: 6px; border: 1px solid var(--rule); display: block; }
.prec h3 { font-size: 1.4rem; font-weight: 800; }
.prec .dans { color: var(--muted); font-size: .92rem; font-weight: 600; }
.prec p { margin-top: 8px; }
.prec .m { margin-top: 10px; font-weight: 700; }
.prec .links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }

/* histoires */
.story-cards { display: grid; gap: 20px; }
@media (min-width: 760px) { .story-cards { grid-template-columns: repeat(3, 1fr); } }
.scard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.scard .pic { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none; }
.scard .b { padding: 16px 18px 20px; }
.scard h3 { font-size: 1.2rem; font-weight: 800; margin: 6px 0; }
.scard .who { font-size: .9rem; color: var(--muted); font-weight: 600; }
.story { padding-block: clamp(36px, 6vw, 72px); border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.story:first-of-type { border-top: 0; }
.story h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; font-stretch: 85%; margin: 10px 0 14px; }
.story .who { font-weight: 700; color: var(--ink2); }
.story h3 { font-size: 1.05rem; font-weight: 800; margin: 20px 0 6px; display: flex; align-items: center; gap: 10px; }
.story h3::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--accent)); flex: none; }
.story h3.after { --c: var(--good); }
.story-links { margin-top: 18px; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* ---------- Chapitre ---------- */
.chap-hero { background: var(--chap); color: var(--on); overflow: hidden; }
.chap-hero .grid { display: grid; gap: 28px; padding-block: clamp(30px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .chap-hero .grid { grid-template-columns: 1.1fr .9fr; gap: 56px; } }
.chap-hero .kick { font-weight: 700; font-size: 1rem; opacity: .9; }
.chap-hero h1 { font-size: clamp(2.3rem, 6.2vw, 4.6rem); font-weight: 800; font-stretch: 80%; letter-spacing: -.03em; margin: 8px 0 14px; line-height: .98; }
.chap-hero .prom { font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 600; line-height: 1.3; }
.chap-hero .pic { border-color: var(--on); }
.c-ciel.chap-hero .pic, .c-aube.chap-hero .pic, .c-mandarine.chap-hero .pic { border-color: #101A45; }
.chap-hero p.intro { margin-top: 14px; max-width: 58ch; opacity: .95; }
.quick { margin-top: -26px; position: relative; z-index: 2; }
.quick-in { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 24px; display: grid; gap: 22px; box-shadow: var(--shadow); }
@media (min-width: 900px) { .quick-in { grid-template-columns: 1.3fr 1fr; padding: 30px; gap: 40px; } }
.quick h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 12px; }
.quick ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.quick li { display: flex; gap: 12px; }
.quick li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--chap); border: 1px solid var(--rule); flex: none; margin-top: 8px; }
.keyfig { border-left: 4px solid var(--chap); padding-left: 20px; align-self: center; }
.keyfig .v { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -.03em; }
.keyfig .t { margin-top: 8px; color: var(--ink2); font-size: .98rem; }
.toc { margin-block: 34px 6px; }

.rub { padding-block: clamp(34px, 5vw, 64px); border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.rub:first-of-type { border-top: 0; }
.rub h2 { font-size: clamp(1.7rem, 3.8vw, 2.7rem); font-weight: 800; font-stretch: 84%; margin: 6px 0 22px; max-width: 24ch; }
.rub .who { display: inline-flex; font-weight: 700; font-size: .88rem; padding: 3px 11px; border-radius: 10px; background: var(--chap); color: var(--on); }
.rub-grid { display: grid; gap: 22px; }
@media (min-width: 900px) { .rub-grid { grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: start; } .rub-grid > .blk:first-child { position: sticky; top: 84px; } }
.blk h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; }
.blk h3::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--accent)); flex: none; }
.blk.mes h3 { --c: var(--good); }
.blk.rea h3 { --c: var(--sun); }
.blk ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.blk li { padding-left: 22px; position: relative; }
.blk li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 8px; height: 8px; border-radius: 2px; background: var(--good); }
.fig { margin-top: 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 16px 18px; display: grid; gap: 4px; }
.fig .v { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1.05; letter-spacing: -.02em; }
.fig .t { color: var(--ink2); font-size: .95rem; }
.why-row { margin-top: 26px; display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .why-row { grid-template-columns: 1.15fr 1fr; gap: 44px; } }
.change { background: var(--surface2); border-radius: 8px; padding: 18px 20px; }
.change p { font-weight: 600; }
.sec.alt .change, .change.on-bg { background: var(--surface); }
.prec-line { margin-top: 10px; font-size: .95rem; color: var(--ink2); }
.prec-line b { color: var(--ink); }
.rub-foot { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
details.detail { margin-top: 22px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
details.detail > summary { cursor: pointer; padding: 14px 18px; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
details.detail > summary::-webkit-details-marker { display: none; }
details.detail > summary::after { content: "+"; font-size: 1.5rem; line-height: 1; font-weight: 500; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: var(--sun-ink); }
details.detail[open] > summary::after { content: "−"; }
.detail-in { padding: 4px 20px 22px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .detail-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.detail-in h4 { font-size: .98rem; font-weight: 800; margin-bottom: 6px; }
.detail-in ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.detail-in .full { grid-column: 1 / -1; }
.src { color: var(--ink2); font-size: .95rem; }
.lines { display: grid; gap: 6px; font-size: .95rem; }
.lines .l { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.lines .r { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.neg { color: var(--bad); } .pos { color: var(--good); }

.pager { display: grid; gap: 14px; padding-block: 36px 60px; }
@media (min-width: 700px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager a { display: block; border: 1px solid var(--rule); border-radius: 8px; padding: 18px 22px; text-decoration: none; color: var(--ink); background: var(--surface); }
.pager a:hover { background: var(--sun); color: var(--sun-ink); }
.pager small { display: block; color: var(--muted); font-weight: 600; }
.pager a:hover small { color: var(--sun-ink); }
.pager b { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.25rem; }
.pager .next { text-align: right; }

/* ---------- Pages ---------- */
.page-head { background: var(--night); color: var(--night-ink); padding-block: clamp(36px, 6vw, 80px); }
.page-head h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); font-weight: 800; font-stretch: 80%; letter-spacing: -.03em; line-height: .98; }
.page-head p { margin-top: 16px; max-width: 60ch; color: #C9D2F3; font-size: 1.15rem; }
.page-head .arcs { display: flex; gap: 0; margin-bottom: 18px; }
.page-body { padding-block: clamp(28px, 5vw, 60px) clamp(48px, 7vw, 96px); }

.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details { border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.faq summary { cursor: pointer; font-weight: 700; padding: 16px 20px; list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.5rem; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: var(--sun-ink); line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 20px 20px; color: var(--ink2); }
.faq .a p + p { margin-top: 10px; }
.faq .a .link-arrow { margin-top: 12px; }

.one { width: 100%; border-collapse: collapse; font-size: .97rem; }
.one-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.one th, .one td { text-align: left; padding: 12px 16px; vertical-align: top; border-bottom: 1px solid var(--line); }
.one th { background: var(--surface2); font-weight: 800; }
.one td:first-child { font-weight: 700; min-width: 200px; }
.one tr.ch td { background: var(--chap); color: var(--on); font-family: "Bricolage Grotesque", sans-serif; font-size: 1.15rem; font-weight: 800; }
.one td a { color: inherit; }
.one tr:last-child td { border-bottom: 0; }

.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 700; }
.field input, .field select, .field textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink); width: 100%; }
.field textarea { min-height: 150px; resize: vertical; }
.form-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.ways { display: grid; gap: 14px; margin-top: 18px; }
.way { border: 1px solid var(--rule); border-radius: 8px; padding: 16px 18px; background: var(--surface); }
.way b { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.15rem; display: block; margin-bottom: 4px; }
.out { margin-top: 20px; border: 1.5px dashed var(--ink); border-radius: 8px; padding: 16px; background: var(--surface); }
.out textarea { width: 100%; min-height: 170px; font: inherit; font-size: .95rem; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
.out .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: center; }
.status { font-weight: 600; color: var(--good); }

.elus-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .elus-grid { grid-template-columns: repeat(2, 1fr); } }
.elu { border: 1px solid var(--rule); border-radius: 8px; padding: 20px; background: var(--surface); }
.elu h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 8px; }
.elu p { color: var(--ink2); }

.search { width: 100%; max-width: 560px; font: inherit; padding: 13px 16px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink); }
.det-list { display: grid; gap: 0; margin-top: 22px; }
.det-item { padding-block: 28px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.det-item h2 { font-size: 1.7rem; font-weight: 800; margin: 6px 0 14px; font-stretch: 88%; }
.det-item .detail-in { padding: 0; }
.det-item h4 { margin-top: 0; }
.empty { padding: 28px; border: 1.5px dashed var(--ink); border-radius: 8px; text-align: center; color: var(--ink2); margin-top: 20px; }

.method { border-left: 4px solid var(--sun); padding-left: 18px; display: grid; gap: 10px; max-width: 760px; }
.src-ch { margin-top: 40px; }
.src-ch h2 { font-size: 1.7rem; font-weight: 800; margin-bottom: 14px; }
.src-ch h3 { font-size: 1.05rem; font-weight: 800; margin: 16px 0 6px; }
.src-ch ul { margin: 0; padding-left: 20px; color: var(--ink2); display: grid; gap: 4px; }

/* ---------- Chiffrage ---------- */
.ctrl { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 26px; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 10px; padding: 3px; background: var(--surface); }
.seg button { font: inherit; font-weight: 700; border: 0; background: transparent; color: var(--ink); padding: 9px 18px; border-radius: 10px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.ledger { border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); padding: 24px; box-shadow: var(--shadow); }
.ledger-nums { display: grid; gap: 18px; }
@media (min-width: 800px) { .ledger-nums { grid-template-columns: repeat(3, 1fr); } }
.ledger-nums .k { font-weight: 700; color: var(--ink2); font-size: .95rem; }
.ledger-nums .v { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ledger-nums .s { font-size: .9rem; color: var(--muted); margin-top: 4px; }
.track { position: relative; height: 40px; background: var(--surface2); border-radius: 6px; margin-top: 26px; overflow: visible; }
.bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 6px 0 0 10px; }
.bar-fill.gain { background: var(--good); left: 0; }
.bar-fill.rest { background: repeating-linear-gradient(135deg, var(--accent) 0 8px, color-mix(in srgb, var(--accent) 70%, var(--bg)) 8px 16px); border-radius: 0 10px 10px 0; }
.bar-fill.rest.full { border-radius: 6px; }
.marker { position: absolute; top: -10px; bottom: -10px; width: 0; border-left: 3px solid var(--ink); }
.marker span { position: absolute; top: calc(100% + 4px); left: 6px; font-size: .82rem; font-weight: 700; white-space: nowrap; color: var(--ink); }
.track-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 46px; font-size: .92rem; color: var(--ink2); }
.track-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; }
.read { margin-top: 18px; padding: 14px 18px; background: var(--surface2); border-radius: 6px; color: var(--ink2); font-size: .97rem; }

.secbars { margin-top: 36px; display: grid; gap: 6px; }
.secbars h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; }
.sb { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .sb { grid-template-columns: 230px 1fr 90px; align-items: center; gap: 18px; } }
.sb .n { font-weight: 700; }
.sb .z { position: relative; height: 22px; }
.sb .z::before { content: ""; position: absolute; left: var(--zero); top: -3px; bottom: -3px; border-left: 1px solid var(--rule); opacity: .5; }
.sb .b { position: absolute; top: 3px; height: 16px; border-radius: 4px; }
.sb .b.p { background: var(--good); } .sb .b.m { background: var(--bad); }
.sb .w { position: absolute; top: 10px; height: 2px; background: var(--ink); opacity: .55; }
.sb .w::before, .sb .w::after { content: ""; position: absolute; top: -4px; height: 10px; border-left: 2px solid var(--ink); }
.sb .w::after { right: 0; }
.sb .val { font-variant-numeric: tabular-nums; font-weight: 800; text-align: right; }

.mlist { margin-top: 34px; }
.mlist h2 { font-size: 1.6rem; font-weight: 800; }
.msec { margin-top: 26px; }
.msec h3 { font-size: 1.15rem; font-weight: 800; padding: 8px 0; border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; gap: 12px; }
.mrow { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: start; }
.mrow.off { opacity: 1; background: color-mix(in srgb, var(--line) 38%, transparent); }
.mrow input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--good); }
.mrow .lab { font-weight: 600; cursor: pointer; }
.mrow .rng { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; white-space: nowrap; }
.mrow .rng small { display: block; font-weight: 500; color: var(--muted); font-size: .85rem; }
.mrow .why-l { grid-column: 2 / 4; color: var(--ink2); font-size: .93rem; }
.note-box { margin-top: 34px; border: 1px solid var(--rule); border-radius: 8px; padding: 20px; background: var(--surface); display: grid; gap: 10px; }
.note-box h3 { font-size: 1.2rem; font-weight: 800; }

/* ---------- Pied ---------- */
.foot { background: var(--night); color: var(--night-ink); padding-block: 48px 40px; }
.foot-grid { display: grid; gap: 30px; }
@media (min-width: 820px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h3 { font-size: 1rem; margin-bottom: 10px; color: var(--sun); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.foot a { color: #DDE4FB; text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .b { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.5rem; font-weight: 800; display: flex; gap: 10px; align-items: center; }
.foot p { color: #B9C4EC; margin-top: 10px; max-width: 42ch; font-size: .97rem; }
.foot .legal { margin-top: 34px; padding-top: 18px; border-top: 1px solid #2A3680; font-size: .88rem; color: #9FABDC; }

.cta-band { background: var(--sun); color: var(--sun-ink); border-radius: 10px; padding: clamp(24px, 4vw, 48px); display: grid; gap: 18px; border: 1.5px solid var(--sun-ink); }
.cta-band h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.cta-band p { max-width: 58ch; font-size: 1.1rem; }
.cta-band .btn.solid { background: var(--night); color: #F3F6FC; border-color: var(--night); justify-self: start; }

.stack-sm > * + * { margin-top: 14px; }
.hide { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

[tabindex="-1"]:focus { outline: none; }
@media (max-width: 700px) { .marker span { left: auto; right: 6px; width: 9.5em; white-space: normal; text-align: right; } }
@media (max-width: 700px) { .track-legend { margin-top: 70px; } }

/* ===================== Ajouts : FNGE, flux, mesures, pour vous ===================== */
:root { --k-epargne: #2D47D1; --k-impot: #6B76A8; --k-cotis: #D96A12; --k-saisie: #D93A1B; --k-surplus: #B88700; --k-reserve: #0E8F7A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --k-epargne: #8FA9FF; --k-impot: #9FABDC; --k-cotis: #FF9A52; --k-saisie: #FF7358; --k-surplus: #FFC93C; --k-reserve: #4FD1B8; } }
:root[data-theme="dark"] { --k-epargne: #8FA9FF; --k-impot: #9FABDC; --k-cotis: #FF9A52; --k-saisie: #FF7358; --k-surplus: #FFC93C; --k-reserve: #4FD1B8; }

/* problème = solution */
.bim { display: grid; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin: 0 0 22px; background: var(--surface); }
.bim > div { padding: 14px 18px; display: grid; gap: 2px; align-content: start; }
.bim small { font-size: .78rem; font-weight: 700; color: var(--muted); }
.bim .p { border-left: 6px solid var(--accent); }
.bim .p span { color: var(--ink2); }
.bim .s { background: var(--sun); color: var(--sun-ink); border-top: 1px solid var(--rule); }
.bim .s small { color: var(--sun-ink); opacity: .75; }
.bim .s span { font-weight: 700; }
@media (min-width: 760px) { .bim { grid-template-columns: 1fr 1fr; } .bim .s { border-top: 0; border-left: 1px solid var(--rule); } }
.bim.big { margin-top: 34px; } .bim.big > div { padding: 20px 24px; } .bim.big span { font-size: 1.2rem; font-family: "Bricolage Grotesque", sans-serif; line-height: 1.25; }
.choc-grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .choc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .choc-grid { grid-template-columns: repeat(3, 1fr); } }
a.choc { display: block; text-decoration: none; color: inherit; }
.choc .bim { margin: 0; height: 100%; grid-template-columns: 1fr; transition: transform .15s; }
.choc .bim .s { border-left: 0; border-top: 1px solid var(--rule); }
a.choc:hover .bim { transform: translateY(-3px); }
.rchip { display: inline-flex; font-size: .84rem; font-weight: 700; padding: 3px 11px; border-radius: 10px; background: var(--chap); color: var(--on); text-decoration: none; line-height: 1.4; }
.rchip:hover { filter: brightness(1.08); text-decoration: underline; }
.chip.sm { padding: 4px 11px; font-size: .86rem; }
.rf-l { font-weight: 700; color: var(--ink2); }
.rub-foot { margin-top: 20px; }

/* dossiers */
.dos { display: grid; gap: 16px; }
@media (min-width: 900px) { .dos { grid-template-columns: 1fr 1fr; gap: 18px 34px; } }
.dos > div { border-left: 4px solid var(--sun); padding-left: 14px; }
.dos b { display: block; margin-bottom: 2px; }
.dos p { color: var(--ink2); font-size: .97rem; }
.detail-in ul.mini { padding-left: 0; list-style: none; gap: 0; }
.mini li { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
@media (min-width: 700px) { .mini li { grid-template-columns: 1fr 1.3fr; gap: 24px; } }
.mini .p { color: var(--ink2); } .mini .s { font-weight: 600; }

/* FNGE */
.fh { background: var(--night); color: var(--night-ink); overflow: hidden; }
.fh-grid { display: grid; gap: 28px; padding-block: clamp(32px, 6vw, 72px); align-items: center; }
@media (min-width: 900px) { .fh-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; } }
.fh .kick, .fn-teaser .kick { color: var(--sun); font-weight: 700; }
.fh h1 { font-size: clamp(2.1rem, 5.2vw, 3.8rem); font-weight: 800; font-stretch: 82%; letter-spacing: -.03em; line-height: 1; margin: 10px 0 16px; }
.fh .lead { color: #C9D2F3; font-size: 1.15rem; max-width: 56ch; }
.fh .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.fh .btn.solid { background: var(--sun); color: var(--sun-ink); border-color: var(--sun); }
.fh .btn.ghost, .btn.ghost-n { color: #F3F6FC; border-color: #F3F6FC; background: transparent; }
.sec.night a.btn.sun { color: var(--sun-ink); } .sec.night a.btn.ghost-n { color: #F3F6FC; }
.fh-art svg, .fn-art svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.fh-art svg .arc, .fn-art svg .arc { transform-box: fill-box; transform-origin: 50% 100%; }
.fsec { padding-block: clamp(34px, 5vw, 62px); border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.fsec > h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; font-stretch: 85%; max-width: 26ch; }
.wrap > .fsec:first-of-type { border-top: 0; }
.fintro { margin-top: 12px; color: var(--ink2); max-width: 64ch; font-size: 1.08rem; }
.fnote { margin-top: 18px; padding: 14px 18px; background: var(--surface2); border-radius: 6px; color: var(--ink2); font-size: .97rem; max-width: 80ch; }
.numbers.three { margin-top: 24px; }
.sbars { margin-top: 26px; display: grid; gap: 18px; }
.sbar .l { font-weight: 700; }
.sbar .tr { position: relative; height: 44px; background: var(--surface2); border-radius: 6px; margin-top: 6px; overflow: hidden; }
.sbar .f { position: absolute; inset: 0 auto 0 0; background: var(--good); border-radius: 6px; transform-origin: left; animation: grow .9s cubic-bezier(.2,.8,.2,1) both; }
.sbar.ref .f { background: var(--ink2); }
.sbar.tout .f { background: var(--sun); }
.sbar .tr b { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--ink); background: var(--bg); padding: 1px 10px; border-radius: 999px; white-space: nowrap; }
.sbar.tout .tr b { color: var(--ink); }
.sbar .n { font-size: .92rem; color: var(--muted); margin-top: 4px; }
@keyframes grow { from { transform: scaleX(0); } }
.pouv { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 760px) { .pouv { grid-template-columns: repeat(2, 1fr); } }
.pv { background: var(--surface); border: 1px solid var(--rule); border-top: 9px solid var(--chap); border-radius: 8px; padding: 22px; }
.pv h3 { font-size: 1.35rem; font-weight: 800; margin-bottom: 8px; } .pv p { color: var(--ink2); }
.pv .dot { display: none; }
.steps4 { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; counter-reset: s; }
@media (min-width: 900px) { .steps4 { grid-template-columns: repeat(4, 1fr); } }
.steps4 li { counter-increment: s; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 18px; display: grid; gap: 6px; align-content: start; }
.steps4 li::before { content: counter(s); width: 34px; height: 34px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); display: grid; place-items: center; font-weight: 800; font-family: "Bricolage Grotesque", sans-serif; }
.steps4 b { font-size: 1.1rem; } .steps4 span { color: var(--ink2); font-size: .97rem; }
.cmp { margin-top: 0; } .fsec .one-wrap { margin-top: 22px; }
.cmp th[scope="row"] { font-weight: 800; background: var(--surface2); min-width: 130px; }
.cmp td.hl { background: color-mix(in srgb, var(--sun) 26%, var(--surface)); font-weight: 600; }
.simu { margin-top: 22px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); padding: clamp(18px, 3vw, 30px); box-shadow: var(--shadow); }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.presets .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.sliders { display: grid; gap: 22px; }
@media (min-width: 900px) { .sliders { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.sl { display: grid; gap: 6px; align-content: start; min-width: 0; }
.sl label { font-weight: 700; }
.sl output { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1; letter-spacing: -.02em; }
.sl small { color: var(--muted); font-size: .88rem; }
.sl input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 8px; background: linear-gradient(to right, var(--good) var(--k, 50%), var(--surface2) var(--k, 50%)); margin: 10px 0; }
.sl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sun); border: 2.5px solid var(--sun-ink); cursor: pointer; }
.sl input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--sun); border: 2.5px solid var(--sun-ink); cursor: pointer; }
.res { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 800px) { .res { grid-template-columns: repeat(3, 1fr); } }
.r1 { background: var(--surface2); border-radius: 8px; padding: 18px; min-width: 0; }
.r1.hot { background: var(--sun); color: var(--sun-ink); }
.r1 .k { font-weight: 700; font-size: .95rem; }
.r1 .v { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.05; margin-top: 4px; letter-spacing: -.02em; }
.r1 .s { font-size: .92rem; margin-top: 6px; color: var(--ink2); }
.r1.hot .s { color: var(--sun-ink); }
.garde { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
@media (min-width: 800px) { .garde { grid-template-columns: repeat(2, 1fr); } }
.garde li { position: relative; padding: 14px 16px 14px 44px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
.garde li::before { content: ""; position: absolute; left: 16px; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: var(--sun); border: 2px solid var(--ink); }
.fsec .faq { margin-top: 22px; }
.fsec.last { padding-bottom: 60px; } .fsec.last h2 { font-size: 1.6rem; margin-bottom: 14px; }

/* accueil : FNGE */
.fn-nums { display: grid; gap: 10px; margin-top: 22px; }
@media (min-width: 560px) { .fn-nums { grid-template-columns: repeat(3, 1fr); } }
.fn-nums div { background: #18225A; border: 1.5px solid #3A47A0; border-radius: 8px; padding: 12px 14px; display: grid; }
.fn-nums b { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.45rem; font-weight: 800; color: var(--sun); }
.fn-nums span { font-size: .88rem; color: #C9D2F3; }

/* flux */
.lecture { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 80ch; }
.lecture li { padding-left: 22px; position: relative; color: var(--ink2); }
.lecture li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 9px; height: 9px; border-radius: 2px; background: var(--sun); border: 1px solid var(--rule); }
.trace { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trace-k { font-weight: 700; margin-right: 4px; }
.trace .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.trace-phrase { margin-top: 12px; padding: 12px 16px; background: var(--surface2); border-radius: 6px; color: var(--ink2); min-height: 4.2em; }
.fx-scroll { margin-top: 18px; overflow-x: auto; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.fx-inner { min-width: 880px; padding: 10px; }
.fx-svg { width: 100%; height: auto; display: block; }
.fx-svg text { font-family: "DM Sans", system-ui, sans-serif; }
.fx-svg .grp { fill: var(--surface2); stroke: var(--line); stroke-width: 1.5; }
.fx-svg .gt1 { font: 800 15px "Bricolage Grotesque", "DM Sans", sans-serif; fill: var(--ink); }
.fx-svg .gt2 { font-size: 12.5px; fill: var(--muted); }
.fx-svg .ed { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; opacity: .8; transition: opacity .25s, stroke-width .25s; }
.k-epargne { --kc: var(--k-epargne); } .k-impot { --kc: var(--k-impot); } .k-cotis { --kc: var(--k-cotis); } .k-saisie { --kc: var(--k-saisie); } .k-surplus { --kc: var(--k-surplus); } .k-reserve { --kc: var(--k-reserve); }
.fx-svg .ed { stroke: var(--kc); } .fx-svg .stripe { fill: var(--kc); }
.fx-legend i { background: var(--kc); }
.fx-svg .n-poche, .fx-svg .n-src { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.fx-svg .n-emp { fill: var(--sun); stroke: var(--sun-ink); stroke-width: 1.5; }
.fx-svg .n-spine { stroke: var(--ink); stroke-width: 1.5; }
.fx-svg .n-spine.g-fnge { fill: #2D47D1; } .fx-svg .n-spine.g-fsf { fill: #FFC93C; } .fx-svg .n-spine.g-etat { fill: #101A45; }
.fx-svg .nt { font: 700 13.5px "Bricolage Grotesque", "DM Sans", sans-serif; fill: var(--ink); }
.fx-svg .ns { font-size: 11.5px; fill: var(--muted); }
.fx-svg .nt.on-spine { fill: #fff; } .fx-svg .ns.on-spine { fill: #DCE8FB; }
.fx-svg .on-spine.g-fsf { fill: #101A45; }
.fx-svg .nt.on-emp { fill: var(--sun-ink); } .fx-svg .ns.on-emp { fill: var(--sun-ink); opacity: .85; }
.fx-svg .lb rect { fill: var(--surface); stroke: var(--line); } .fx-svg .lb text { font-size: 10.5px; font-weight: 700; fill: var(--ink2); }
.fx-svg a { cursor: pointer; } .fx-svg a:hover rect.n-poche, .fx-svg a:hover rect.n-spine { stroke-width: 3; }
.fx-svg .nd, .fx-svg .lb { transition: opacity .25s; }
.fx-svg.tracing .nd, .fx-svg.tracing .ed, .fx-svg.tracing .lb { opacity: .13; }
.fx-svg.tracing .nd.on, .fx-svg.tracing .lb.on { opacity: 1; }
.fx-svg.tracing .ed.on { opacity: 1; stroke-width: 6; }
.fx-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: .92rem; color: var(--ink2); }
.fx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fx-legend i { display: inline-block; width: 24px; height: 5px; border-radius: 3px; }
.fx-mobile { display: none; margin-top: 24px; }
.fx-mobile h2, .fiches-t { font-size: 1.6rem; font-weight: 800; margin-bottom: 14px; }
.trace-cards { display: grid; gap: 12px; }
.trace-card { border: 1px solid var(--rule); border-radius: 8px; padding: 16px 18px; background: var(--surface); }
.trace-card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 6px; } .trace-card .via { margin-top: 8px; font-size: .95rem; color: var(--ink2); }
@media (max-width: 700px) { .trace, .trace-phrase, .fx-scroll, .fx-legend { display: none; } .fx-mobile { display: block; } }
.fiches-t { margin-top: 44px; }
.fiches { display: grid; gap: 16px; }
@media (min-width: 900px) { .fiches { grid-template-columns: repeat(2, 1fr); } }
.fiche { border: 1px solid var(--rule); border-radius: 8px; padding: 20px; background: var(--surface); display: grid; gap: 10px; align-content: start; scroll-margin-top: 80px; }
.fiche:target { outline: 3px solid var(--sun); }
.fiche h3 { font-size: 1.3rem; font-weight: 800; } .fiche .role { font-weight: 600; }
.fcols { display: grid; gap: 12px; } @media (min-width: 520px) { .fcols { grid-template-columns: 1fr 1fr; } }
.fiche h4 { font-size: .92rem; font-weight: 800; margin-bottom: 4px; }
.fiche ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .95rem; color: var(--ink2); }
.fiche .anc { color: var(--ink2); font-size: .95rem; }

/* mesures */
.mz-ctrl { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-bottom: 16px; }
.chk { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.chk input { width: 20px; height: 20px; accent-color: var(--good); }
.mz-th .chip[aria-pressed="true"], .mz-an .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.mz-th, .mz-an { gap: 8px; }
.mz-th .chip, .mz-an .chip { padding: 6px 12px; font-size: .9rem; gap: 7px; align-items: center; }
.mz-th .chip b, .mz-an .chip b { font-weight: 700; font-size: .78rem; opacity: .75; }
.mz-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--chap); flex: none; }
.mz-lab { margin: 16px 0 8px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mz-also { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: .8rem; color: var(--muted); }
@media (min-width: 860px) { .mz-also { justify-content: flex-end; } }
.mz-a { font: inherit; font-size: .8rem; font-weight: 600; padding: 1px 9px; border-radius: 99px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink2); cursor: pointer; }
.mz-a:hover, .mz-a:focus-visible { background: var(--sun); color: var(--sun-ink); border-color: var(--sun); }
.mz-dup { border-left: 3px solid var(--rule); padding-left: 12px; }
.mz-sec { margin-top: 38px; scroll-margin-top: 80px; }
.mz-sec h2 { font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 3px solid var(--chap); }
.mz-n { width: 34px; height: 34px; border-radius: 50%; background: var(--chap); color: var(--on); display: grid; place-items: center; font-size: 1rem; flex: none; }
.mz-sec h2 small { margin-left: auto; font-size: .9rem; color: var(--muted); font-weight: 600; }
.mz-list { list-style: none; margin: 0; padding: 0; }
.mz { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .mz { grid-template-columns: 1fr 1.3fr 170px; gap: 26px; align-items: start; } .mz small { display: none; } .mz .f { align-items: flex-end !important; } }
.mz small { display: block; font-size: .76rem; font-weight: 700; color: var(--muted); }
.mz .p span { color: var(--ink2); } .mz .s span { font-weight: 700; }
.mz .f { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.chf { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: .92rem; background: var(--surface2); padding: 2px 10px; border-radius: 8px; text-align: right; }

/* pour vous */
.pv-grid { display: grid; gap: 14px; margin-top: 20px; }
@media (min-width: 620px) { .pv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pv-grid { grid-template-columns: repeat(3, 1fr); } }
.pcard { display: grid; gap: 6px; align-content: start; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 18px 18px 16px 26px; text-decoration: none; color: var(--ink); position: relative; overflow: hidden; }
.pcard .b { position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: var(--chap); }
.pcard h3 { font-size: 1.2rem; font-weight: 800; }
.pcard p { color: var(--ink2); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard small { color: var(--muted); font-weight: 600; }
.pcard:hover { background: var(--surface2); }
.pt { margin-top: 48px; } .pt h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 14px; }
.reds li span { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.pf { margin-top: 34px; }
.pf-h { display: none; }
@media (min-width: 860px) { .pf-h { display: grid; grid-template-columns: 1fr 1.4fr; gap: 34px; font-weight: 800; font-family: "Bricolage Grotesque", sans-serif; font-size: 1.05rem; padding-bottom: 10px; border-bottom: 3px solid var(--chap); } }
.pf-list { list-style: none; margin: 0; padding: 0; }
.pf-list li { display: grid; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .pf-list li { grid-template-columns: 1fr 1.4fr; gap: 34px; } .pf-list small { display: none; } }
.pf-list small { display: block; font-size: .76rem; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.pf-list .v p { color: var(--ink2); border-left: 4px solid var(--accent); padding-left: 14px; }
.pf-list .s p { font-weight: 600; margin-bottom: 10px; }
.pf-story { margin-top: 44px; display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) { .pf-story { grid-template-columns: 1fr 1fr; gap: 50px; } }
.pf-story h2 { font-size: 1.7rem; font-weight: 800; margin: 10px 0 8px; } .pf-story .who { font-weight: 700; color: var(--ink2); margin-bottom: 8px; }
.pf-all, .pf-near { margin-top: 44px; } .pf-all h2, .pf-near h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 14px; }
@media (min-width: 820px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
@media (min-width: 860px) { .pf-list small, .mz small { display: none; } }
.chf { line-height: 1.3; max-width: 100%; font-weight: 700; }
@media (min-width: 860px) { .mz { grid-template-columns: 1fr 1.3fr 220px; } }
.choc .bim { grid-template-rows: auto 1fr; }
.cmp { min-width: 600px; }
@media (max-width: 700px) { .lecture { display: none; } }

.orow .lab .hz { display: block; font-weight: 500; font-size: .85rem; color: var(--muted); margin-top: 2px; }
.orow .why-l.lec { font-style: italic; }
.opts .read { margin-top: 14px; }

/* Plans détaillés (grandes fortunes) */
.plan { border-top: 1px solid var(--line); padding-top: 18px; }
.pl-intro { color: var(--ink2); margin: 4px 0 14px; }
.pl-steps { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
@media (min-width: 900px) { .pl-steps { grid-template-columns: repeat(3, 1fr); } }
.pl-steps li { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.pl-steps .q { align-self: start; justify-self: start; background: var(--sun); color: var(--sun-ink); font-weight: 800; border-radius: 10px; padding: 1px 12px; font-size: .88rem; }
.pl-steps b { font-size: 1.02rem; } .pl-steps li > span:last-child { color: var(--ink2); font-size: .95rem; }
.pl-bar { display: grid; gap: 22px; margin: 20px 0; }
@media (min-width: 900px) { .pl-bar { grid-template-columns: 1fr 1fr; gap: 34px; } }
.plan h5 { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.05rem; margin: 0 0 8px; }
.pl-t { width: 100%; border-collapse: collapse; font-size: .96rem; }
.pl-t th { text-align: left; font-size: .82rem; color: var(--muted); font-weight: 600; padding: 4px 8px 6px 0; border-bottom: 2px solid var(--ink); }
.pl-t td { padding: 7px 8px 7px 0; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.pl-cols { display: grid; gap: 14px; }
@media (min-width: 900px) { .pl-cols { grid-template-columns: repeat(3, 1fr); } }
.pl-col { border-radius: 8px; padding: 16px 18px; background: var(--surface); border: 1.5px solid var(--line); border-top: 6px solid var(--ink); }
.pl-col.ok { border-top-color: var(--good); } .pl-col.ko { border-top-color: var(--bad); } .pl-col.eq { border-top-color: var(--sun); }
.pl-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pl-col li { display: grid; gap: 1px; } .pl-col li b { font-size: .98rem; } .pl-col li span { color: var(--ink2); font-size: .92rem; }

.pl-t td.up { font-weight: 800; color: var(--bad); }
.pl-t .pct { color: var(--muted); font-size: .88rem; }

/* ================= Expérience : navigation, recherche, hubs ================= */
[hidden] { display: none !important; }
.sbtn { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font: inherit; font-weight: 600; font-size: .92rem; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 7px 12px; cursor: pointer; }
.sbtn:hover { background: var(--sun); color: var(--sun-ink); }
.sbtn span { display: none; }
.burger { margin-left: 0; }
@media (min-width: 520px) { .sbtn span { display: inline; } }
@media (min-width: 1200px) { .nav { margin-left: auto; } .sbtn { margin-left: 4px; } .burger { margin-left: 0; } .sbtn span { display: none; } }
@media (min-width: 1380px) { .sbtn span { display: inline; } }
.drawer .dg { margin: 16px 0 2px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.drawer .dg:first-child { margin-top: 4px; }
.drawer a[aria-current="page"] { color: var(--link); }
.facts li a { color: inherit; text-decoration: none; }
.facts li a:hover { text-decoration: underline; text-decoration-color: var(--sun); text-underline-offset: 4px; }
.hero .cta .btn { padding: 12px 18px; }

/* recherche */
.sov { position: fixed; inset: 0; z-index: 100; background: rgba(7, 11, 34, .62); display: flex; justify-content: center; align-items: flex-start; padding: max(10px, 4vh) 12px 12px; }
html.so { overflow: hidden; }
.sbox { width: 100%; max-width: 720px; max-height: calc(100vh - 8vh); max-height: calc(100dvh - 8vh); display: flex; flex-direction: column; background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); overflow: hidden; }
.srow { display: flex; gap: 10px; padding: 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.srow input { flex: 1; min-width: 0; font: inherit; font-size: 1.1rem; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 6px; background: var(--bg); color: var(--ink); }
.sx { font: inherit; font-weight: 700; border: 1px solid var(--rule); background: transparent; color: var(--ink); border-radius: 6px; padding: 0 14px; cursor: pointer; }
.sx:hover { background: var(--sun); color: var(--sun-ink); }
#sres { overflow-y: auto; padding: 6px 14px 18px; overscroll-behavior: contain; }
.sg h3 { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; }
.sg h3 small { font-weight: 700; margin-left: 6px; background: var(--surface2); border-radius: 10px; padding: 1px 8px; letter-spacing: 0; }
.sg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sg a { display: grid; gap: 1px; padding: 9px 12px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.sg a b { font-weight: 700; }
.sg a span { color: var(--ink2); font-size: .92rem; line-height: 1.4; }
.sg a:hover, .sg a:focus-visible { background: var(--sun); color: var(--sun-ink); outline: none; }
.sg a:hover span, .sg a:focus-visible span { color: var(--sun-ink); }
.s-empty { padding: 18px 2px 4px; color: var(--ink2); }
.s-empty .chips { margin-top: 12px; }
button.chip { font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; }
button.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
button.chip[aria-pressed="true"]:hover { background: var(--ink); color: var(--bg); }

/* glossaire */
abbr.g { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--link); cursor: help; }
abbr.g:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
#gtip { position: fixed; z-index: 90; max-width: min(320px, calc(100vw - 16px)); background: var(--night); color: var(--night-ink); padding: 10px 13px; border-radius: 6px; font-size: .92rem; line-height: 1.45; box-shadow: 0 14px 34px -10px rgba(0,0,0,.55); pointer-events: none; border: 1px solid #3A47A0; }
.gl { display: grid; gap: 0; margin: 20px 0 0; max-width: 860px; }
.gl-i { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .gl-i { grid-template-columns: 200px 1fr; gap: 20px; } }
.gl dt { font-weight: 800; font-family: "Bricolage Grotesque", sans-serif; font-size: 1.1rem; }
.gl dd { margin: 0; color: var(--ink2); }
.gloss { margin-top: clamp(36px, 6vw, 64px); scroll-margin-top: 84px; }
a.xref { font-weight: 700; text-underline-offset: 3px; }

/* hubs */
.hub-h { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; font-stretch: 88%; margin: clamp(30px, 5vw, 52px) 0 16px; }
.hub-h:first-child { margin-top: 0; }
.hub-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .hub-grid { grid-template-columns: repeat(3, 1fr); } }
.hub-grid.slim { margin-top: 16px; }
.hcard { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 8px; text-decoration: none; background: #18225A; color: #F3F6FC; border: 1.5px solid #3A47A0; transition: transform .15s; }
.hcard:hover { transform: translateY(-3px); border-color: var(--sun); }
.hcard .hk { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #C9D2F3; }
.hcard b { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.02; font-weight: 800; letter-spacing: -.02em; color: var(--sun); }
.hcard p { color: #E3E8FA; font-size: .98rem; margin: 0; flex: 1; }
.hcard .more { font-weight: 700; color: var(--sun); display: inline-flex; gap: 6px; }
.hcard .more::after { content: "→"; transition: transform .15s; }
.hcard:hover .more::after { transform: translateX(4px); }
.hub-grid.light .hcard { background: var(--surface); color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow); }
.hub-grid.light .hcard .hk { color: var(--muted); }
.hub-grid.light .hcard b { color: var(--ink); }
.hub-grid.light .hcard p { color: var(--ink2); }
.hub-grid.light .hcard .more { color: var(--link); }
.hub-grid.light .hcard:hover { background: var(--sun); border-color: var(--sun-ink); }
.hub-grid.light .hcard:hover * { color: var(--sun-ink); }
.hub-grid.slim .hcard b { font-size: 1.4rem; }
.sec.night .hcard:hover { background: #1E2A6E; }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 860px; }
.qlist li a { display: flex; gap: 10px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; }
.qlist li a::after { content: "→"; margin-left: auto; color: var(--link); }
.qlist li a:hover { border-color: var(--ink); background: var(--sun); color: var(--sun-ink); }
.more-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.reds-t { margin: clamp(30px, 5vw, 48px) 0 14px; font-size: 1.4rem; font-weight: 800; }
.sub-t { margin: clamp(34px, 5vw, 56px) 0 18px; font-size: 1.4rem; font-weight: 800; }
.duo { display: grid; gap: 40px; }
@media (min-width: 960px) { .duo { grid-template-columns: 1fr 1fr; gap: 64px; } }
.sec h2 + .intro { margin-top: 10px; }
.sec-head .kick { color: var(--sun); font-weight: 700; margin-bottom: 8px; }

/* filtres */
.fbar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.btn.sm { padding: 8px 14px; font-size: .92rem; border-width: 1.5px; }
.page-body .search { margin-top: 4px; }

/* histoires regroupées */
.st-sec { margin-top: clamp(30px, 5vw, 52px); scroll-margin-top: 84px; }
.st-sec > h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; font-stretch: 88%; }
.st-sec > .intro { color: var(--ink2); margin: 6px 0 18px; max-width: 62ch; }
.sd-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .sd-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.story-d { border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); scroll-margin-top: 84px; }
.story-d > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px; align-items: start; }
.story-d > summary::-webkit-details-marker { display: none; }
.story-d > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.sd-pic { display: block; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; aspect-ratio: 1; background: var(--surface2); }
.sd-pic svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.sd-t { display: grid; gap: 4px; min-width: 0; }
.sd-t b { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.2rem; line-height: 1.12; font-weight: 800; }
.sd-t .who { font-size: .88rem; color: var(--muted); font-weight: 600; }
.sd-t .tz { font-size: .95rem; color: var(--ink2); }
.sd-t::after { content: "Lire l'histoire"; font-weight: 700; color: var(--link); font-size: .92rem; }
.story-d[open] .tz { display: none; }
.story-d[open] .sd-t::after { content: "Replier"; }
.sd-b { padding: 4px 18px 20px; display: grid; gap: 14px; border-top: 1px solid var(--line); margin-top: 2px; }
.sd-b h3 { font-size: 1.02rem; font-weight: 800; margin: 14px 0 6px; display: flex; align-items: center; gap: 10px; }
.sd-b h3::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; }
.sd-b h3.after::before { background: var(--good); }
.sd-l { margin-top: 4px; }

/* questions regroupées */
.qtop, .qgroup { margin-top: clamp(26px, 4vw, 44px); scroll-margin-top: 84px; }
.qtop h2, .qgroup h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 800; font-stretch: 88%; margin-bottom: 14px; }
.qa { scroll-margin-top: 84px; }

/* sommaire de chapitre collant + rubriques */
.toc { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 30; background: var(--bg); margin-block: 22px 0; padding-block: 10px; border-bottom: 1px solid var(--line); scroll-margin-top: 70px; }
.toc .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.toc .chip { white-space: nowrap; flex: none; }
.toc .chip.on { background: var(--ink); color: var(--bg); }
.rub { scroll-margin-top: 130px; }
.rub-nav { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; font-weight: 700; }
.rub-nav a:not(.link-arrow) { text-decoration: none; }
.rub-nav a:not(.link-arrow):hover { text-decoration: underline; }
.seealso { margin-top: 22px; padding: 16px 18px; border: 1.5px dashed var(--ink); border-radius: 8px; background: var(--surface); }
.seealso h3 { font-size: 1rem; font-weight: 800; margin-bottom: 8px; }
.seealso ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.seealso li a { font-weight: 700; }
.seealso li span { color: var(--ink2); }
.seealso li span::before { content: " — "; }
.seealso .sa-q { margin: 12px 0 4px; font-weight: 700; font-size: .9rem; color: var(--muted); }
.det-item .seealso { margin-top: 0; }
@media (max-width: 520px) { .story-d > summary { grid-template-columns: 76px 1fr; } }

.sd-grid { grid-auto-flow: dense; }
.story-d[open] { grid-column: 1 / -1; }
@media (min-width: 900px) { .sd-b { grid-template-columns: 1fr 1fr; gap: 10px 40px; } .sd-l { grid-column: 1 / -1; } }
.sbtn, .burger { flex: none; }
.brand { min-width: 0; }
.brand-name { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 519px) { .bar-in { gap: 8px; } .brand { font-size: 1rem; gap: 8px; } .burger { padding: 8px 12px; } .sbtn { padding: 8px 10px; } }

/* ================= Graphiques, exemples, « Pourquoi » ================= */
.chg-row { margin-top: 26px; }
.viz-row { margin-top: 30px; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
.viz-row > * { min-width: 0; }
@media (min-width: 1000px) { .viz-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .viz-row > .vday, .viz-row > .vtl { grid-column: 1 / -1; } }
.viz { margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 18px 20px 16px; box-shadow: var(--shadow); }
.viz figcaption { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.15rem; line-height: 1.2; margin-bottom: 14px; }
.vn { margin: 12px 0 0; font-size: .92rem; color: var(--ink2); }
.vs { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }
/* barres */
.vb { display: grid; grid-template-columns: minmax(96px, 36%) 1fr 6.6em; gap: 10px; align-items: center; padding: 5px 0; }
.vb .l { font-size: .92rem; font-weight: 600; line-height: 1.25; }
.vb .tr { height: 20px; background: var(--surface2); border-radius: 6px; overflow: hidden; display: block; }
.vb .tr i { display: block; height: 100%; background: color-mix(in srgb, var(--link) 55%, var(--surface)); border-radius: 6px; }
.vb.us .tr i { background: var(--accent); }
.vb.ok .tr i { background: var(--good); }
.vb b { font-family: "Bricolage Grotesque", sans-serif; font-size: 1rem; white-space: nowrap; min-width: 4.6em; text-align: right; }
@media (max-width: 520px) { .vb { grid-template-columns: 1fr auto; } .vb .tr { grid-column: 1 / -1; grid-row: 2; } }
/* avant / après */
.vba-g { display: grid; gap: 14px; }
@media (min-width: 700px) { .vba-g { grid-template-columns: 1fr 1fr; } }
.vba-a, .vba-b { border-radius: 8px; padding: 14px 16px; }
.vba-a { background: var(--surface2); }
.vba-b { background: color-mix(in srgb, var(--sun) 28%, var(--surface)); border: 1.5px solid var(--sun-ink); }
.vba-g h4 { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; margin-bottom: 8px; }
.vba-g ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.vba-b li { font-weight: 600; }
/* emploi du temps */
.vd-g { display: grid; grid-template-columns: 40px 1fr 1fr; gap: 8px; }
.vd-g.three { grid-template-columns: 40px 1fr 1fr 1fr; }
.vd-c h4 { font-size: .95rem; font-weight: 800; margin-bottom: 8px; text-align: center; }
.vd-ax { padding-top: 28px; }
.vd-t { position: relative; }
.vd-ax .vd-t span { position: absolute; right: 0; transform: translateY(-50%); font-size: .75rem; color: var(--muted); font-weight: 700; }
.vd-c .vd-t { border-radius: 6px; }
.vd-b { position: absolute; left: 0; right: 0; border-radius: 8px; padding: 3px 8px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; border: 1px solid var(--rule); }
.vd-b .tm { font-size: .7rem; font-weight: 700; opacity: .75; }
.vd-b .lb { font-size: .84rem; font-weight: 700; }
.vd-b.k-c, .vd-leg .k-c { background: color-mix(in srgb, var(--link) 22%, var(--surface)); }
.vd-b.k-r, .vd-leg .k-r { background: var(--surface2); }
.vd-b.k-d, .vd-leg .k-d { background: var(--sun); color: var(--sun-ink); }
.vd-b.k-a, .vd-leg .k-a { background: color-mix(in srgb, var(--good) 38%, var(--surface)); }
.vd-b.k-g, .vd-leg .k-g { background: repeating-linear-gradient(135deg, var(--surface) 0 6px, var(--surface2) 6px 12px); border-style: dashed; }
.vd-leg { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; font-weight: 600; }
.vd-leg span { display: inline-flex; gap: 6px; align-items: center; }
.vd-leg i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--rule); display: inline-block; }
@media (max-width: 560px) { .vd-b .tm { display: none; } .vd-b .lb { font-size: .74rem; } .vd-g { grid-template-columns: 30px 1fr 1fr; gap: 5px; } }
/* calendrier */
.vtl ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-left: 3px solid var(--ink); margin-left: 6px; }
.vtl li { display: grid; gap: 2px; padding: 4px 0 14px 18px; position: relative; }
.vtl li::before { content: ""; position: absolute; left: -9px; top: 9px; width: 15px; height: 15px; border-radius: 50%; background: var(--sun); border: 2px solid var(--ink); }
.vtl b { font-family: "Bricolage Grotesque", sans-serif; }
@media (min-width: 700px) { .vtl li { grid-template-columns: 150px 1fr; gap: 16px; } }
/* pourquoi */
details.why { margin-top: 22px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
details.why > summary { cursor: pointer; padding: 14px 18px; list-style: none; display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; }
details.why > summary::-webkit-details-marker { display: none; }
details.why > summary::after { content: "+"; margin-left: auto; align-self: center; font-size: 1.5rem; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: var(--sun-ink); line-height: 1; }
details.why[open] > summary::after { content: "−"; }
details.why > summary b { font-size: 1.05rem; }
details.why > summary span { color: var(--muted); font-size: .92rem; }
.why-in { padding: 2px 20px 20px; display: grid; gap: 14px; }
.why-in .lg { font-weight: 600; }
.ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ev li { display: grid; gap: 6px; padding: 12px 14px; border-radius: 6px; background: var(--surface2); }
@media (min-width: 700px) { .ev li { grid-template-columns: 104px 1fr; gap: 14px; } }
.ev b { font-weight: 800; }
.ev p { margin: 3px 0 0; color: var(--ink2); }
.evs { font-size: .82rem !important; color: var(--muted) !important; }
.evk { align-self: start; justify-self: start; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface); }
.evk.k-etude { background: color-mix(in srgb, var(--link) 20%, var(--surface)); }
.evk.k-pays { background: color-mix(in srgb, var(--good) 30%, var(--surface)); }
.evk.k-chiffre { background: var(--sun); color: var(--sun-ink); }
.evk.k-droit { background: var(--surface2); }
details.mwhy { margin-top: 6px; }
details.mwhy > summary { cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--link); list-style: none; display: inline-flex; gap: 6px; align-items: center; }
details.mwhy > summary::-webkit-details-marker { display: none; }
details.mwhy > summary::before { content: "+"; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: var(--sun-ink); font-size: 1rem; line-height: 1; }
details.mwhy[open] > summary::before { content: "−"; }
details.mwhy > div { margin-top: 8px; padding: 10px 14px; border-left: 4px solid var(--sun); background: var(--surface2); border-radius: 0 10px 10px 0; font-size: .95rem; }
details.mwhy p { margin: 0; color: var(--ink2); }
details.mwhy p + p { margin-top: 4px; }

.blk li.mh { padding-left: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.blk li.mh::before { display: none; }
.blk li.mh:first-child { margin-top: 0; }

/* mobile : haut d'accueil plus court */
@media (max-width: 700px) {
  .hero-grid { padding-block: 22px 0; gap: 0; }
  .hero h1 { font-size: clamp(2.7rem, 13vw, 3.6rem); }
  .hero .lead { margin-top: 14px; font-size: 1.08rem; }
  .hero .cta { margin-top: 18px; }
  .hero-copy { padding-bottom: 14px; }
  .hero-art { width: 78vw; max-height: 210px; overflow: hidden; }
}

/* ===================== Refonte « sérieux » : même identité, moins de jouet ===================== */
.c-aube { --chap2: #FFC93C; } .c-coquelicot { --chap2: #FF7358; } .c-outremer { --chap2: #8FA9FF; }
.c-ciel { --chap2: #BFD4F7; } .c-nuit { --chap2: #FFC93C; } .c-mandarine { --chap2: #FF8A3D; }

/* Titres : moins gras, moins comprimés */
h1, h2, h3, h4 { letter-spacing: -.02em; }
.hero h1, .sec h2, .rub h2, .chap-hero h1, .page-head h1, .fh h1, .fsec > h2, .story h2, .det-item h2 { font-weight: 700; font-stretch: 92%; }
.trio h3, .chap-card h3, .prec h3, .pv h3, .elu h3, .scard h3 { font-weight: 700; }
.num .v, .keyfig .v, .fig .v, .ledger-nums .v, .r1 .v, .sl output { font-weight: 700; }

/* Titres de section : filet jaune éditorial */
.sec-head h2::before, .rub h2::before { content: ""; display: block; width: 40px; height: 4px; background: var(--sun); margin-bottom: 16px; border-radius: 0; }
.sec.night .sec-head h2::before { background: var(--sun); }

/* En-tête : plus fin */
.bar { background: color-mix(in srgb, var(--bg) 96%, transparent); }
.brand { font-weight: 700; letter-spacing: -.01em; }
.nav a { border-radius: 6px; font-size: .95rem; }
.nav a[aria-current="page"] { background: transparent; box-shadow: inset 0 -3px 0 var(--sun); border-radius: 0; }
.mode { border-radius: 8px; } .mode button, .mmode button { border-radius: 6px; font-weight: 600; }

/* Boutons */
.btn { border-width: 1.5px; border-radius: 6px; padding: 12px 20px; font-weight: 600; letter-spacing: .005em; }
.btn:hover { transform: none; filter: brightness(1.06); }
.btn.sun { border-color: var(--sun); }

/* Accueil : bandeau marine, jaune en accent */
.hero { background: var(--night); color: var(--night-ink); position: relative; }
.hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--sun); }
.hero-grid { padding-block: clamp(36px, 6vw, 84px) 0; align-items: center; }
.hero-copy { padding-bottom: clamp(32px, 5vw, 72px); }
.hero .eyebrow { color: var(--sun); font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.hero .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--sun); }
.hero h1 { color: #fff; font-size: clamp(2.7rem, 6.4vw, 5.4rem); line-height: 1; letter-spacing: -.03em; font-stretch: 90%; }
.hero h1 .pt { color: var(--sun); }
.hero .lead { color: #C9D2F3; font-weight: 400; font-size: clamp(1.08rem, 1.8vw, 1.28rem); line-height: 1.5; max-width: 48ch; margin-top: 24px; }
.hero .btn.solid { background: var(--sun); color: var(--sun-ink); border-color: var(--sun); }
.hero .btn.ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.hero .btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.hero-art { align-self: end; }
.facts { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--rule); }
.facts ul { padding: 0; gap: 0; flex-wrap: wrap; }
.facts li { padding: 16px 24px 16px 0; margin-right: 24px; font-weight: 500; font-size: .95rem; line-height: 1.3; border-right: 1px solid var(--rule); }
.facts li:last-child { border-right: 0; }
.facts a { color: var(--ink2); text-decoration: none; display: inline-flex; gap: 10px; align-items: baseline; }
.facts a:hover { color: var(--ink); }
.facts b { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.35rem; font-weight: 700; color: var(--ink); margin: 0; white-space: nowrap; box-shadow: inset 0 -.38em 0 color-mix(in srgb, var(--sun) 70%, transparent); }
@media (max-width: 700px) { .facts li { border-right: 0; width: 100%; padding: 10px 0; margin: 0; border-bottom: 1px solid var(--rule); } .facts li:last-child { border-bottom: 0; } }

/* Les trois idées */
.trio .t { border-radius: 6px; box-shadow: none; padding: 0 0 26px; overflow: hidden; }
.trio .t .dot { width: 100%; height: 6px; border-radius: 0; margin: 0 0 22px; }
.trio .t h3, .trio .t p { padding-inline: 24px; }
.trio h3 { font-size: 1.4rem; }
.reds li { border-radius: 6px; font-weight: 600; background: var(--surface); }
.reds li::before { border-radius: 0; width: 10px; height: 10px; margin-top: 8px; }

/* Cartes chapitres */
.chap-card { box-shadow: none; }
.chap-card:hover { transform: none; border-color: var(--ink); }
.chap-card .pic { aspect-ratio: 16/10; }
.chap-card .num { border-radius: 4px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; }
.pic { box-shadow: none; }
.pic svg, .art { filter: saturate(.82); }
.scard, .pv, .prec, .elu, .way, .note-box, .fiche { box-shadow: none; }

/* Pastilles et étiquettes : rectangulaires, sobres */
.chip, .rchip { border-radius: 4px; font-weight: 600; font-size: .9rem; }
.chip { border: 1px solid var(--rule); }
.chip:hover { background: var(--sun); color: var(--sun-ink); border-color: var(--sun); }
.rub .who { background: none; color: var(--ink2); border-radius: 0; border-left: 4px solid var(--chap2, var(--chap)); padding: 1px 0 1px 10px; text-transform: uppercase; letter-spacing: .1em; font-size: .76rem; }
.tag-imag { border-radius: 4px; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.kick { letter-spacing: .08em; }

/* Fiches de rubrique */
.bim { border-radius: 6px; }
.bim .s { border-top: 1px solid var(--rule); }
.fig { border-radius: 6px; border-left: 4px solid var(--sun); }
.change { border-radius: 6px; background: var(--surface2); border-left: 4px solid var(--sun); }
details.detail, .faq details { border-radius: 6px; }
details.detail > summary::after, .faq summary::after { border-radius: 4px; background: var(--ink); color: var(--bg); }

/* Chapitres : marine + trait de couleur */
.chap-hero { background: var(--night); color: #fff; border-top: 8px solid var(--chap2, var(--sun)); }
.chap-hero .kick { color: var(--chap2, var(--sun)); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; opacity: 1; }
.chap-hero h1 { color: #fff; font-size: clamp(2.2rem, 5.2vw, 4rem); line-height: 1.02; letter-spacing: -.028em; }
.chap-hero .prom { color: #fff; font-weight: 500; }
.chap-hero p.intro { color: #C9D2F3; }
.chap-hero .pic, .c-ciel.chap-hero .pic, .c-aube.chap-hero .pic, .c-mandarine.chap-hero .pic { border-color: rgba(255,255,255,.18); }
.quick-in { border-radius: 8px; box-shadow: none; }
.keyfig { border-left-color: var(--chap2, var(--chap)); }
.quick li::before { border-radius: 0; background: var(--chap2, var(--chap)); border: 0; width: 10px; height: 10px; margin-top: 9px; }
.blk h3::before { border-radius: 0; width: 10px; height: 10px; }
.blk li::before { border-radius: 0; }
.toc .chip[aria-current], .toc .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* Pages */
.page-head { border-top: 8px solid var(--sun); }
.page-head h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.ledger, .simu, .out, .field input, .field select, .field textarea, .search { border-radius: 6px; box-shadow: none; }
.mz-n { border-radius: 4px; }
.pager a { border-radius: 6px; }
.cta-band { border-radius: 8px; background: var(--night); color: #fff; border: 0; border-left: 8px solid var(--sun); }
.cta-band p { color: #C9D2F3; }
.cta-band .btn.solid { background: var(--sun); color: var(--sun-ink); border-color: var(--sun); }

/* Mobile */
@media (max-width: 700px) {
  .hero::before { width: 5px; }
  .hero-grid { padding-block: 26px 0; gap: 0; }
  .hero h1 { font-size: clamp(2.4rem, 11.5vw, 3.2rem); }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero .lead { margin-top: 16px; }
  .hero-art { width: 70vw; max-height: 190px; overflow: hidden; margin-left: auto; }
}
.facts ul { display: grid; grid-template-columns: repeat(5, 1fr); }
.facts li { margin-right: 0; padding: 16px 18px 16px 0; margin-left: 0; }
.facts li + li { padding-left: 18px; }
@media (max-width: 1100px) { .facts ul { grid-template-columns: repeat(2, 1fr); } .facts li { border-right: 0; border-bottom: 1px solid var(--rule); padding-left: 0 !important; } }
@media (max-width: 700px) { .facts ul { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.3fr .7fr; } }
.hero .cta .btn { padding: 12px 18px; }
.fh h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.04; }
@media (max-width: 700px) {
  .facts ul { grid-template-columns: 1fr 1fr; }
  .facts li { width: auto; padding: 12px 10px 12px 0 !important; border-bottom: 1px solid var(--rule); }
  .facts li:nth-child(odd) { border-right: 1px solid var(--rule); }
  .facts li:nth-child(even) { padding-left: 14px !important; }
  .facts li:nth-last-child(-n+2) { border-bottom: 0; }
  .facts a { flex-direction: column; gap: 2px; font-size: .86rem; }
}
/* tableau de preuves */
.viz-row > .vtab { grid-column: 1 / -1; }
.vtab-w { overflow-x: auto; }
.vtab table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vtab th, .vtab td { text-align: left; padding: 9px 12px 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.3; }
.vtab thead th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; color: var(--muted); border-bottom: 2px solid var(--ink); }
.vtab tbody th { font-weight: 700; }
.vtab td:nth-child(2) { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; white-space: nowrap; }
.vtab tr.hi { background: color-mix(in srgb, var(--sun) 24%, var(--surface)); }
@media (max-width: 560px) { .vtab table { font-size: .86rem; } .vtab td:nth-child(2) { white-space: normal; } }
.vtab.plain td:nth-child(2) { font-family: inherit; font-weight: 400; white-space: normal; }
.vtab.plain td:last-child { font-weight: 700; }
.vtab.plain tr.hi td:last-child { color: var(--ink); }

/* ===================== Chiffrage : calculateur ===================== */
.mx-tiers { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 14px; }
.mx-tc { border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); padding: 14px 16px; }
.mx-tc b { display: block; margin: 8px 0 4px; font-size: 1.05rem; }
.mx-tc p { margin: 0; font-size: .93rem; color: var(--ink2); }
.tier { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .01em; padding: 3px 9px; border-radius: 999px; border: 1.5px solid currentColor; white-space: nowrap; }
.tier.t1 { color: #1B6E3C; } .tier.t2 { color: #1F5FD6; } .tier.t3 { color: #8A4B00; }
:root[data-theme="dark"] .tier.t1 { color: #7FD6A0; } :root[data-theme="dark"] .tier.t2 { color: #8FA9FF; } :root[data-theme="dark"] .tier.t3 { color: #FFC268; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tier.t1 { color: #7FD6A0; } :root:not([data-theme="light"]) .tier.t2 { color: #8FA9FF; } :root:not([data-theme="light"]) .tier.t3 { color: #FFC268; } }
.mx-rule { font-size: .95rem; color: var(--ink2); margin: 0 0 22px; }
.mx-bar { display: grid; gap: 16px; margin-bottom: 26px; padding: 16px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.mx-g { display: grid; gap: 8px; }
.mx-gl { font-weight: 800; font-size: .9rem; color: var(--ink2); }
.mx-scen { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.mx-scen button { font: inherit; text-align: left; border: 1.5px solid var(--rule); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; }
.mx-scen button small { color: var(--muted); font-size: .8rem; font-weight: 500; line-height: 1.25; }
.mx-scen button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mx-scen button[aria-pressed="true"] small { color: inherit; opacity: .8; }
.mx-bar .seg { flex-wrap: wrap; width: fit-content; max-width: 100%; }
.mx-bar .seg button, .mx-perim .seg button { padding: 8px 14px; }
.mx-res h2, .mx-set h2, .mx-lines h2, .mx-facts h2 { font-size: 1.6rem; font-weight: 800; margin: 34px 0 10px; }
.mx-lead { font-size: 1.12rem; line-height: 1.5; max-width: 62ch; margin: 0 0 18px; }
.mx-kpi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 20px; }
.mx-k { border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); padding: 14px 16px; box-shadow: var(--shadow); }
.mx-k .k { font-weight: 700; color: var(--ink2); font-size: .9rem; }
.mx-k .v { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; margin: 4px 0; font-variant-numeric: tabular-nums; }
.mx-k .v small { font-size: .45em; font-weight: 700; letter-spacing: 0; }
.mx-k .s { font-size: .85rem; color: var(--muted); }
.mx-chart { margin: 0 0 22px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); padding: 14px 14px 10px; }
.mx-svg { width: 100%; height: auto; display: block; }
.mx-svg .gl { stroke: var(--line); stroke-width: 1; opacity: .5; }
.mx-svg .ax { fill: var(--muted); font-size: 11.5px; font-family: inherit; }
.mx-svg .l3 { stroke: var(--ink2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.mx-svg .l3t { fill: var(--ink2); font-weight: 700; }
.mx-svg .ln { stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.mx-svg .ln.s-a { stroke: var(--good); } .mx-svg .ln.s-b { stroke: var(--bad); stroke-dasharray: 7 5; }
.mx-svg .dot.s-a { fill: var(--good); } .mx-svg .dot.s-b { fill: var(--bad); }
.mx-svg .vl { font-weight: 800; font-size: 13px; } .mx-svg .vl.s-a { fill: var(--good); } .mx-svg .vl.s-b { fill: var(--bad); }
.mx-leg { margin-top: 6px !important; } .mx-leg .lg-a { background: var(--good); } .mx-leg .lg-b { background: var(--bad); }
.mx-chart figcaption { font-size: .88rem; color: var(--muted); margin-top: 6px; }
.mx-two { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 18px; }
.mx-two h3 { font-size: 1.15rem; margin: 0 0 4px; }
.mx-tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
.mx-trh { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.mx-trh b.neg, .val.neg { color: var(--bad); }
.mx-trb { position: relative; height: 12px; margin: 8px 0 4px; background: var(--surface2); border-radius: 4px; }
.mx-trb span { position: absolute; top: 0; height: 12px; border-radius: 4px; }
.mx-trb .g { left: 50%; background: var(--good); } .mx-trb .c { right: 50%; background: var(--bad); }
.mx-tr small { color: var(--muted); font-size: .85rem; }
.mx-yearly { margin: 8px 0 0; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.mx-yearly summary { padding: 12px 16px; font-weight: 700; cursor: pointer; }
.mx-yearly .vtab-wrap { padding: 0 12px 12px; overflow-x: auto; }
.mx-yearly table { min-width: 640px; }
.mx-panel { border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); margin-bottom: 12px; }
.mx-panel > summary { padding: 13px 16px; font-weight: 800; cursor: pointer; font-size: 1.05rem; }
.mx-panel > p.src { padding: 0 16px 14px; margin: 0; }
.mx-grid { display: grid; gap: 18px 26px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); padding: 4px 16px 18px; }
.mx-f { display: grid; gap: 6px; align-content: start; }
.mx-fl { font-weight: 700; font-size: .95rem; }
.mx-f small, .mx-sw small { color: var(--muted); font-size: .84rem; line-height: 1.35; display: block; font-weight: 400; }
.mx-f output { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.mx-f input[type=range] { width: 100%; accent-color: var(--good); }
.mx-f select, .mx-hl select { font: inherit; padding: 8px 10px; border: 1.5px solid var(--rule); border-radius: 8px; background: var(--bg); color: var(--ink); max-width: 100%; }
.mx-sw { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; cursor: pointer; }
.mx-sw input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--good); }
.mx-perim { display: grid; gap: 8px; margin: 14px 0 6px; }
.mx-lines .msec { margin-top: 24px; }
.mx-lines .msec h3 { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 1.15rem; margin: 0 0 2px; }
.mx-lines .msec .sec-total { font-variant-numeric: tabular-nums; font-size: .95rem; color: var(--ink2); }
.mx-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: start; }
.mx-row.off { opacity: 1; background: color-mix(in srgb, var(--line) 38%, transparent); } .mx-row.off .mx-nom { color: var(--muted); font-style: italic; }
.mx-row > input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--good); }
.mx-nom { font-weight: 600; cursor: pointer; }
.mx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.tag-s { font-size: .76rem; font-weight: 700; color: var(--ink2); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 8px; }
.mx-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-val .mv { font-weight: 800; display: block; } .mx-val .mh { display: block; color: var(--muted); font-size: .8rem; max-width: 150px; white-space: normal; margin-left: auto; }
.mx-det summary { cursor: pointer; font-size: .9rem; font-weight: 700; color: var(--link, var(--good)); padding: 2px 0; }
.mx-detb { padding: 8px 0 4px; font-size: .93rem; }
.mx-detb p { margin: 0 0 8px; }
.mx-pcf { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; background: var(--surface2); padding: 8px 10px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.mx-pcf small { flex-basis: 100%; color: var(--muted); }
.mx-hl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 600; margin-bottom: 8px; }
.mx-src { margin: 0; padding-left: 18px; font-size: .88rem; } .mx-src li { margin: 2px 0; }
.mx-facts table { width: 100%; }
.mx-non { padding-left: 18px; } .mx-non li { margin: 6px 0; }
@media (max-width: 560px) { .mx-row { grid-template-columns: auto 1fr; } .mx-val { grid-column: 2; text-align: left; } .mx-val .mh { margin-left: 0; max-width: none; } .mx-k .v { font-size: 1.7rem; } }
.vtab td.pos { color: var(--good); font-weight: 800; } .vtab td.neg { color: var(--bad); font-weight: 800; }
.vtab tr.dim th, .vtab tr.dim td { color: var(--muted); font-weight: 500; }
.mx-two .sb { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) auto; align-items: center; gap: 10px; }
@media (max-width: 560px) { .mx-two .sb { grid-template-columns: 1fr auto; } .mx-two .sb .z { grid-column: 1 / -1; order: 3; } }

.mx-bar .seg, .mx-perim .seg { flex-wrap: wrap; max-width: 100%; }
.mx-bar .seg button { flex: 1 1 auto; }
.mx-scroll { overflow-x: auto; max-width: 100%; }
.mx-scroll .vtab { min-width: 440px; }

.mx-betsec { margin-top: 34px; }
.mx-bets { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); margin-top: 14px; }
.mx-bet { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); padding: 18px 20px; box-shadow: var(--shadow); min-width: 0; }
.mx-bet h3 { font-size: 1.08rem; margin: 0 0 10px; }
.mx-bet dt { font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); margin-top: 10px; }
.mx-bet dd { margin: 3px 0 0; }
.mx-fx { margin: 12px 0 6px; padding: 8px 10px; border-left: 4px solid var(--sun-ink); background: var(--surface2); font-weight: 600; }
.mx-pnote { margin: 0 18px 4px; }

/* calendrier de l'accueil */
.cal { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.cal-col { border-top: 4px solid var(--sun-ink); background: var(--surface); border-radius: 0 0 10px 10px; box-shadow: var(--shadow); padding: 14px 18px 18px; min-width: 0; }
.cal-y { display: grid; margin-bottom: 10px; }
.cal-y b { font-size: 2rem; line-height: 1.1; font-weight: 800; font-stretch: 88%; }
.cal-y span { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.cal-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cal-col li { line-height: 1.4; }
.cal-c { display: block; margin-top: 2px; color: var(--ink2); font-size: .86rem; }
.cal-c::before { content: "Condition : "; font-weight: 700; }
.cal-col a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* carte à partager */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 16px 0 4px; }
.share-row small { color: var(--ink2); max-width: 46ch; }
.carte-dlg { border: 0; border-radius: 12px; padding: 0; width: min(94vw, 620px); max-height: 94vh; background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.carte-dlg::backdrop { background: rgba(7,11,34,.72); }
.carte-in { padding: 22px 22px 20px; display: grid; gap: 12px; justify-items: center; overflow: auto; max-height: 94vh; }
.carte-in h2 { margin: 0; font-size: 1.3rem; justify-self: start; }
.carte-n { margin: 0; color: var(--ink2); justify-self: start; }
.carte-in img { width: min(100%, 440px); height: auto; border-radius: 8px; border: 1px solid var(--rule); background: #101A45; aspect-ratio: 4 / 5; }
.carte-act { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.mx-more { margin-top: 30px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.mx-more > summary { cursor: pointer; font-weight: 800; padding: 16px 20px; }
.mx-more > section, .mx-more > .note-box { margin-inline: 20px; }
.mx-more[open] > summary { border-bottom: 1px solid var(--rule); margin-bottom: 18px; }
.mx-more > :last-child { margin-bottom: 20px; }

/* ===================== Lot 27 : pages du fond (foyers, successions, capitalisation, mairie, planning, budget consolidé) ===================== */
.fy-pos { color: var(--good); font-weight: 700; }
.fy-neg { color: var(--bad); font-weight: 700; }
.fy-t th.n, .fy-t td.n { text-align: right; font-variant-numeric: tabular-nums; }
.vtab.fy-t td.n { white-space: nowrap; font-family: inherit; font-weight: 600; }
.fy-t tr.fy-sum th, .fy-t tr.fy-sum td { border-top: 2px solid var(--ink); font-weight: 800; }
.fy-t tr.fy-sum.hi { background: color-mix(in srgb, var(--sun) 24%, var(--surface)); }
.fy-t td { overflow-wrap: anywhere; }
.fy-tag { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .03em; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--rule); white-space: nowrap; }
.fy-tag.pub { background: var(--surface2); }
.fy-tag.prog { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fy-tag.hyp { border-style: dashed; }
.numbers.four { grid-template-columns: 1fr; }
@media (min-width: 640px) { .numbers.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .numbers.four { grid-template-columns: repeat(4, 1fr); } }
.fy-nums .num .v { font-size: clamp(2rem, 4vw, 3rem); }
.fy-nums .num .v small, .numbers .num .v small { font-size: .45em; font-weight: 700; letter-spacing: 0; }
.fy-d { color: var(--muted); font-size: .9rem; }
.fy-n-g { border-top: 5px solid var(--good); }
.fy-n-n { border-top: 5px solid var(--muted); }
.fy-n-p { border-top: 5px solid var(--sun); }
.fy-n-b { border-top: 5px solid var(--bad); }
.fy-bar { display: flex; gap: 3px; margin-top: 18px; height: 46px; }
.fy-seg { display: flex; align-items: center; justify-content: center; min-width: 0; border-radius: 6px; font-size: .95rem; color: var(--bg); }
.fy-seg b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; }
.fy-seg.g { background: var(--good); } .fy-seg.n { background: var(--muted); } .fy-seg.p { background: var(--sun); color: var(--sun-ink); } .fy-seg.b { background: var(--bad); color: #fff; }
.fy-simu .presets { margin-bottom: 18px; }
.fy-ctl { display: grid; gap: 18px; margin-bottom: 20px; }
@media (min-width: 800px) { .fy-ctl { grid-template-columns: 2fr 1fr; align-items: start; } }
.fy-per small { display: block; color: var(--muted); font-size: .88rem; margin-top: 6px; }
.fy-card h3 { font-size: 1.5rem; font-weight: 800; }
.fy-verdict { margin: 10px 0 14px; font-size: 1.18rem; }
.fy-hyp { margin-top: 12px; color: var(--ink2); font-size: .95rem; max-width: 80ch; }
.fy-h3 { font-size: 1.3rem; font-weight: 800; margin: 28px 0 10px; }
.fy-ul { margin: 14px 0 0; padding-left: 1.2em; display: grid; gap: 8px; max-width: 80ch; }
.fy-q .sbar .tr b { color: var(--bg); }
.fy-ctl2 { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 900px) { .fy-ctl2 { grid-template-columns: auto 1fr; align-items: end; gap: 28px; } }
.su-ctl { display: grid; gap: 18px; }
@media (min-width: 900px) { .su-ctl { grid-template-columns: 2fr 1fr 1fr 1fr; align-items: start; } }
.su-two { display: grid; gap: 24px; margin-top: 18px; }
@media (min-width: 900px) { .su-two { grid-template-columns: 1fr 1fr; align-items: start; } }
.fy-sures { margin-top: 20px; }
.ca-ctl { margin-bottom: 14px; }
.fy-legend { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .9rem; color: var(--ink2); }
.fy-lg { display: inline-flex; align-items: center; gap: 6px; }
.fy-lg i, .fy-ms.k-loi::before, .fy-ms.k-test::before, .fy-ms.k-bascule::before, .fy-ms.k-revue::before, .fy-ms.k-jalon::before { content: ""; width: 12px; height: 12px; flex: none; border: 2px solid var(--ink); background: var(--surface); }
.fy-lg.k-loi i { background: var(--ink); }
.fy-lg.k-test i { border-radius: 50%; }
.fy-lg.k-bascule i { background: var(--sun); transform: rotate(45deg); }
.fy-lg.k-revue i { border-style: dashed; }
.fy-lg.k-jalon i { border-radius: 50%; background: var(--good); border-color: var(--good); }
.fy-pan { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.fy-pan h3 { font-size: 1.35rem; font-weight: 800; margin: 2px 0 8px; }
.fy-pan p { margin-top: 8px; }
.fy-pan .kick { font-weight: 800; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink2); margin: 0; }
.fy-pan .chips { margin-top: 6px; }
.fy-cnd { padding: 8px 12px; background: var(--surface2); border-radius: 6px; }
.fy-src { color: var(--muted); font-size: .9rem; }
.fy-years { display: grid; gap: 16px; margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.fy-yr { border-top: 4px solid var(--ink); background: var(--surface); border-radius: 0 0 8px 8px; padding: 12px 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.fy-yr h3 { font-size: 2rem; font-weight: 800; font-stretch: 88%; }
.fy-yr h3 small { font-size: .45em; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.fy-yr ul, .fy-trk ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.fy-ms { all: unset; box-sizing: border-box; display: grid; gap: 2px; width: 100%; padding: 10px 12px 10px 34px; position: relative; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); cursor: pointer; line-height: 1.3; }
.fy-ms:hover { border-color: var(--ink); }
.fy-ms:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fy-ms[aria-pressed="true"] { background: var(--sun); color: var(--sun-ink); border-color: var(--sun-ink); }
.fy-ms::before { position: absolute; left: 11px; top: 14px; }
.fy-ms.k-loi::before { background: var(--ink); }
.fy-ms.k-test::before { border-radius: 50%; }
.fy-ms.k-bascule::before { background: var(--sun); transform: rotate(45deg); }
.fy-ms.k-revue::before { border-style: dashed; }
.fy-ms.k-jalon::before { border-radius: 50%; background: var(--good); border-color: var(--good); }
.fy-ms .fy-k { font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink2); }
.fy-ms[aria-pressed="true"] .fy-k, .fy-ms[aria-pressed="true"] small { color: var(--sun-ink); }
.fy-ms small { color: var(--muted); font-size: .82rem; }
.fy-ms em { font-style: normal; border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; margin-left: 4px; text-transform: none; letter-spacing: 0; font-weight: 700; }
.fy-tracks { display: grid; gap: 22px; margin-top: 22px; }
.fy-trk h3 { font-size: 1.3rem; font-weight: 800; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.fy-trk li { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: start; }
.fy-trk .fy-y { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.25rem; padding-top: 8px; }
.fy-load { display: inline-block; width: 90px; height: 10px; background: var(--surface2); border-radius: 4px; vertical-align: middle; margin-right: 8px; overflow: hidden; }
.fy-load i { display: block; height: 100%; background: var(--ink); }
.fy-risq { margin-top: 18px; }
.fy-risq .pv p + p { margin-top: 8px; }
.fy-lines { display: grid; gap: 14px; margin-top: 12px; }
@media (min-width: 900px) { .fy-lines { grid-template-columns: 1fr 1fr; } }
.fy-line { border: 1px solid var(--rule); border-radius: 8px; padding: 16px; background: var(--surface); min-width: 0; }
.fy-line.off { background: var(--bg); border-style: dashed; }
.fy-line h4 { font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
.fy-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.fy-st { font-size: .85rem; font-weight: 700; }
.fy-line dl { display: grid; gap: 2px; margin: 12px 0 0; }
.fy-line dt { font-weight: 800; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); margin-top: 8px; }
.fy-line dd { margin: 0; font-size: .96rem; }
.fy-nums { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .95rem; }
.mx-cons { margin-top: 8px; }
.fy-cons td.n, .fy-cons th.n { min-width: 70px; }
.pf-calc { margin-top: 30px; padding: 20px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.pf-calc h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; }
.elu-gain { border-top: 5px solid var(--good); }
.elu-cout { border-top: 5px solid var(--sun); }
.elu-reste { border-top: 5px dashed var(--muted); }
.co-nums, .ma-nums { margin-top: 18px; }
.hide { display: none !important; }
.fy-t { width: 100%; border-collapse: collapse; font-size: .95rem; }
.fy-t tbody th { font-weight: 600; }
.vtab.fy-t td:last-child { font-weight: 400; }
.vtab.fy-t td.n:last-child { font-weight: 600; }
.fy-t tr.fy-sum th, .fy-t tr.fy-sum td, .vtab.fy-t tr.fy-sum td:last-child { font-weight: 800; }
.fy-per { display: grid; gap: 6px; align-content: start; }
@media (max-width: 560px) { .fy-t { font-size: .86rem; } .fy-t th, .fy-t td { padding: 8px 8px 8px 6px; } }
.su-ctl > * { min-width: 0; }
.su-ctl select { width: 100%; text-overflow: ellipsis; }
.su-two > * { min-width: 0; }
.mx-f { min-width: 0; }
.mx-f select { width: 100%; text-overflow: ellipsis; }
.fy-t.fy-eq { table-layout: fixed; }
.fy-t.fy-eq th:first-child { width: 14%; }
.fy-t.fy-eq th, .fy-t.fy-eq td { overflow-wrap: anywhere; }
@media (min-width: 900px) { .fy-ctl2 { grid-template-columns: auto 1fr; align-items: start; } }
.fy-ctl2 .chips { margin-top: 0; }
.sbar .tr.sh b { color: var(--ink); }
.sbar.tout .tr.sh b { color: var(--ink); }
.fy-sures.su-two-cards { grid-template-columns: 1fr; }
@media (min-width: 700px) { .fy-sures.su-two-cards { grid-template-columns: 1fr 1fr; } }
.fy-nat { margin-top: 12px; padding: 10px 14px; border-left: 4px solid var(--good); background: var(--surface2); font-size: .98rem; max-width: 80ch; }
.fy-det .detail-in { display: block; }
.fy-det .detail-in > * + * { margin-top: 14px; }

/* Statut des mesures */
.stb { display: inline-block; font-weight: 800; font-size: .74rem; line-height: 1.5; padding: 1px 10px; border-radius: 99px; border: 1.5px solid currentColor; white-space: nowrap; }
.st-g .stb { color: var(--good); } .st-m .stb { background: var(--sun); color: var(--sun-ink); border-color: var(--sun); }
.st-n .stb { background: var(--ink); color: var(--bg); border-color: var(--ink); } .st-s .stb { color: var(--bad); }
.mz .stt { margin-top: 8px; } .mz .stx { margin: 4px 0 0; font-size: .92rem; color: var(--ink2); font-weight: 400; }
.mz .stx b { color: var(--ink); }
.stbk { margin: 18px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 0 16px; }
.stbk > summary { cursor: pointer; padding: 14px 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.stbk > summary::-webkit-details-marker { display: none; }
.stbk > summary h3 { margin: 0; font-size: 1.05rem; }
.stsum { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .86rem; color: var(--ink2); }
.stc { display: inline-flex; gap: 6px; align-items: center; }
.stl { list-style: none; margin: 0; padding: 0 0 8px; }
.stl > li { padding: 12px 0; border-top: 1px solid var(--line); }
.stl .stt { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-weight: 700; }
.stl .stt > span:last-child { min-width: 0; flex: 1 1 240px; }
.stl p { margin: 4px 0 0; font-size: .92rem; color: var(--ink2); }
.stl p b { color: var(--ink); }
.mz-st { margin-bottom: 8px; }
.stb.in, .st-g > .stb, .st-m > .stb, .st-n > .stb, .st-s > .stb { }
.st-g > .stb { color: var(--good); } .st-m > .stb { background: var(--sun); color: var(--sun-ink); border-color: var(--sun); }
.st-n > .stb { background: var(--ink); color: var(--bg); border-color: var(--ink); } .st-s > .stb { color: var(--bad); }
li > span[class^="st-"] { margin-right: 4px; }

/* ================= Menu complet sur ordinateur ================= */
@media (min-width: 1200px) {
  .drawer .wrap { column-count: 4; column-gap: 40px; padding-block: 6px 10px; }
  .drawer .dg { break-before: column; break-after: avoid; margin-top: 4px; }
  .drawer .dg:first-child { break-before: auto; }
  .drawer a { break-inside: avoid; }
  .drawer .mmode { display: none; }
  .drawer { box-shadow: 0 14px 30px rgba(16,26,69,.12); }
}

/* ================= La carte de la souveraineté ================= */
:root { --d0: #2f9e6e; --d1: #86b84a; --d2: #e0a419; --d3: #ec7a2b; --d4: #cf2f2f; --seaf: #E7EEFB; --landf: #FFFFFF; --cf: #DDE5F6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --d0: #4cc38a; --d1: #a5d65b; --d2: #f5c451; --d3: #f59a4a; --d4: #ff6b5e; --seaf: #0E1640; --landf: #1B2663; --cf: #26327A; } }
:root[data-theme="dark"] { --d0: #4cc38a; --d1: #a5d65b; --d2: #f5c451; --d3: #f59a4a; --d4: #ff6b5e; --seaf: #0E1640; --landf: #1B2663; --cf: #26327A; }
.sv { --gap: 14px; }
.sv-nav { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; position: sticky; top: 64px; z-index: 4; background: var(--bg); scrollbar-width: thin; }
.sv-nav .chip { white-space: nowrap; cursor: pointer; font: inherit; font-weight: 600; font-size: .86rem; }
.sv .fsec { margin-block: 40px; }
.sv-stats { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 18px 0 8px; }
@media (min-width: 900px) { .sv-stats { grid-template-columns: repeat(4, 1fr); } }
.sv-sc { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 16px; box-shadow: var(--shadow); }
.sv-sc b { display: block; font-size: clamp(1.35rem, 5vw, 1.9rem); line-height: 1.1; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.sv-sc span { display: block; margin-top: 6px; font-size: .88rem; color: var(--ink2); line-height: 1.4; }
.sv-nb { font-size: .84rem; color: var(--muted); margin: 8px 0 0; line-height: 1.45; }
.sv-prin { margin-top: 18px; }
.sv-ctl { margin: 14px 0 6px; }
.sv-ctl .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-ctl .chip { cursor: pointer; font: inherit; font-weight: 600; font-size: .86rem; }
.sv-ctl .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sv-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 14px; font-size: .84rem; color: var(--ink2); }
.sv-leg span { display: inline-flex; align-items: center; gap: 6px; }
.sv-leg i { width: 11px; height: 11px; border-radius: 3px; background: var(--c, var(--muted)); display: inline-block; }
.sv-leg .d0 { --c: var(--d0); } .sv-leg .d1 { --c: var(--d1); } .sv-leg .d2 { --c: var(--d2); } .sv-leg .d3 { --c: var(--d3); } .sv-leg .d4 { --c: var(--d4); }
.sv-grp { margin-top: 16px; }
.sv-grp h3 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 800; margin: 0 0 8px; }
.sv-tiles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sv-tile { --c: var(--muted); text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--c); border-radius: 10px; padding: 9px 10px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; min-height: 84px; transition: transform .12s, box-shadow .12s; }
.sv-tile:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,26,69,.12); }
.sv-tile.on { outline: 3px solid var(--ink); outline-offset: 1px; background: var(--surface2); }
.sv-tile.d0 { --c: var(--d0); } .sv-tile.d1 { --c: var(--d1); } .sv-tile.d2 { --c: var(--d2); } .sv-tile.d3 { --c: var(--d3); } .sv-tile.d4 { --c: var(--d4); }
.sv-tn { font-weight: 700; font-size: .93rem; line-height: 1.2; }
.sv-tm { display: flex; align-items: center; gap: 7px; }
.sv-mt { display: inline-flex; gap: 2px; }
.sv-mt i { width: 11px; height: 7px; border-radius: 2px; background: var(--line); }
.sv-mt i.f { background: var(--c); }
.sv-dl { font-size: .76rem; color: var(--ink2); font-weight: 600; }
.sv-tf { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.sv-gb { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: .72rem; font-weight: 800; background: var(--ink); color: var(--bg); }
.sv-gb.gB { background: var(--ink2); } .sv-gb.gC { background: var(--muted); }
.sv-at, .sv-rk { font-size: .68rem; font-weight: 800; padding: 1px 7px; border-radius: 99px; line-height: 1.6; }
.sv-at { background: var(--d0); color: #06251a; }
.sv-rk { background: var(--sun); color: var(--sun-ink); }
.sv-split { display: grid; gap: 18px; margin-top: 14px; }
@media (min-width: 1000px) { .sv-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } .sv-mapcol { position: sticky; top: 76px; } }
.sv-mapcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); }
.sv-mhd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sv-mhd b { font-size: 1.05rem; }
.seg.sm button { padding: 5px 12px; font-size: .84rem; }
.sv-map { position: relative; aspect-ratio: 2 / 1; border-radius: 10px; overflow: hidden; background: var(--seaf); }
.sv-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sv-map path.land { fill: var(--landf); stroke: none; }
.sv-map path.c { fill: var(--landf); stroke: var(--cf); stroke-width: .6px; vector-effect: non-scaling-stroke; transition: fill .2s; }
.sv-map path.c.fr { fill: var(--ink); stroke: var(--ink); }
.sv-map path.c.hi { fill: color-mix(in srgb, var(--accent) 30%, var(--landf)); }
.sv-map path.c.he { fill: color-mix(in srgb, var(--good) 30%, var(--landf)); }
.sv-map path.fb { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .62; }
.sv-map path.fb.i { stroke: var(--accent); } .sv-map path.fb.e { stroke: var(--good); }
.sv-map path.fl { fill: none; stroke: #fff; stroke-width: 2.2px; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1 13; animation: svflow 1.2s linear infinite; }
@keyframes svflow { to { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: reduce) { .sv-map path.fl { animation: none; stroke-dasharray: 1 13; } .sv-tile { transition: none; } }
.sv-ov { position: absolute; inset: 0; pointer-events: none; }
.sv-fr, .sv-bd { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sv-fr b { background: var(--ink); color: var(--bg); font-size: .66rem; padding: 2px 7px; border-radius: 99px; transform: translateY(-17px); border: 2px solid var(--bg); }
.sv-bd b { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; font-size: .68rem; color: #fff; border: 2px solid var(--landf); }
.sv-bd.i b { background: var(--accent); } .sv-bd.e b { background: var(--good); }
.sv-bd em { font-style: normal; font-size: .64rem; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--surface) 86%, transparent); padding: 0 5px; border-radius: 5px; display: none; }
@media (min-width: 560px) { .sv-bd em { display: inline; } }
.sv-nomsg { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); margin: 0; font-size: .8rem; background: var(--surface); padding: 5px 10px; border-radius: 8px; max-width: 90%; text-align: center; color: var(--ink2); }
.sv-lgd { display: flex; gap: 18px; margin: 10px 2px 0; font-size: .84rem; color: var(--ink2); }
.sv-lgd span { display: inline-flex; align-items: center; gap: 7px; }
.sv-lgd i { width: 26px; height: 4px; border-radius: 2px; display: inline-block; }
.sv-lgd .i i { background: var(--accent); } .sv-lgd .e i { background: var(--good); }
.sv-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); min-width: 0; }
.sv-panel:focus { outline: none; }
.sv-gn { margin: 0; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--muted); }
.sv-ph h3 { margin: 2px 0 8px; font-size: 1.4rem; line-height: 1.15; }
.sv-bdg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sv-bdg > span { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; border: 1.5px solid var(--line); display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.sv-dp i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.sv-dp.d0 { --c: var(--d0); } .sv-dp.d1 { --c: var(--d1); } .sv-dp.d2 { --c: var(--d2); } .sv-dp.d3 { --c: var(--d3); } .sv-dp.d4 { --c: var(--d4); }
.sv-gv b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: .7rem; }
.sv-atg { background: var(--d0); color: #06251a; border-color: var(--d0) !important; }
.sv-rkg { background: var(--sun); color: var(--sun-ink); border-color: var(--sun) !important; }
.sv-stat { display: flex; gap: 12px; align-items: baseline; background: var(--surface2); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.sv-stat b { font-size: 1.6rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.sv-stat span { font-size: .9rem; color: var(--ink2); line-height: 1.35; }
.sv-dls { margin: 0 0 12px; display: grid; gap: 10px; }
.sv-dls div { border-left: 4px solid var(--line); padding-left: 10px; }
.sv-dls div.w { border-left-color: var(--accent); }
.sv-dls dt { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sv-dls dd { margin: 2px 0 0; line-height: 1.5; }
.sv-k { background: color-mix(in srgb, var(--sun) 22%, var(--surface)); border-radius: 10px; padding: 9px 12px; font-size: .92rem; margin: 0 0 8px; }
.sv-panel h4 { margin: 18px 0 8px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.sv-fl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sv-fl li { display: flex; gap: 10px; align-items: flex-start; }
.sv-n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: .74rem; font-weight: 800; margin-top: 1px; }
.sv-n.i { background: var(--accent); } .sv-n.e { background: var(--good); }
.sv-fi { flex: 1; min-width: 0; }
.sv-fh { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.sv-fh b { font-size: .95rem; }
.sv-nt { font-size: .82rem; color: var(--muted); }
.sv-p { margin-left: auto; font-weight: 800; font-size: .9rem; }
.sv-bar { height: 6px; border-radius: 3px; background: var(--line); margin-top: 4px; overflow: hidden; }
.sv-bar i { display: block; height: 100%; border-radius: 3px; }
.sv-bar.i i { background: var(--accent); } .sv-bar.e i { background: var(--good); }
.sv-pg { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sv-pg li { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; line-height: 1.45; }
.sv-pg .stb { margin-top: 2px; }
.sv-h { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sv-h li { display: grid; grid-template-columns: 82px 1fr; gap: 10px; line-height: 1.4; font-size: .93rem; }
.sv-h li b { font-size: .8rem; color: var(--ink2); padding-top: 2px; }
.sv-src { font-size: .8rem; color: var(--muted); margin: 16px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.sv-more { margin: 12px 0 0; }
.sv-lk { font: inherit; font-weight: 700; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.sv-lk:hover { text-decoration-color: var(--sun); }
.sv-tg { font-weight: 800; font-size: .8rem; padding: 2px 9px; border-radius: 99px; border: 1.5px solid currentColor; white-space: nowrap; }
.sv-tg.gA { color: var(--bad); } .sv-tg.gB { color: var(--ink2); }
.sv-q { margin: 18px 0; padding: 14px 18px; border-left: 6px solid var(--sun); background: var(--surface); border-radius: 0 12px 12px 0; font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
.sv-h3 { margin: 32px 0 10px; font-size: 1.2rem; }
.sv-tps { display: grid; gap: 12px; }
@media (min-width: 900px) { .sv-tps { grid-template-columns: repeat(3, 1fr); } }
.sv-tp { background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--good); border-radius: 12px; padding: 14px; }
.sv-tp:nth-child(2) { border-top-color: var(--sun); } .sv-tp:nth-child(3) { border-top-color: var(--d0); }
.sv-ty { font-size: .8rem; font-weight: 800; color: var(--muted); letter-spacing: .04em; }
.sv-tp h3 { margin: 4px 0 6px; font-size: 1.1rem; }
.sv-tp p { margin: 0 0 8px; line-height: 1.45; }
.sv-rg2 { font-size: .9rem; background: var(--surface2); padding: 8px 10px; border-radius: 8px; }
.sv-lv { display: grid; gap: 10px; }
@media (min-width: 760px) { .sv-lv { grid-template-columns: 1fr 1fr; } }
.sv-l { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.sv-ln { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--bg); font-weight: 800; }
.sv-l h4 { margin: 0 0 4px; font-size: 1rem; }
.sv-l p { margin: 0 0 6px; font-size: .92rem; line-height: 1.45; }
.sv-stk { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.sv-stk li { display: grid; grid-template-columns: 38% 1fr 84px; gap: 12px; align-items: center; font-size: .9rem; }
.sv-stk .m { font-weight: 800; font-size: .84rem; text-align: right; }
.sv-rg { position: relative; height: 12px; border-radius: 6px; background: var(--line); }
.sv-rg i { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--good); }
.sv-ax { display: flex; justify-content: space-between; margin: 4px calc(84px + 12px) 0 calc(38% + 12px); font-size: .74rem; color: var(--muted); }
.sv-sim { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-top: 8px; }
.sv-sim-r { margin-top: 12px; padding: 12px 14px; border-radius: 10px; border-left: 6px solid var(--muted); background: var(--surface2); }
.sv-sim-r.pay { border-left-color: var(--accent); } .sv-sim-r.zero { border-left-color: var(--d0); } .sv-sim-r.gain { border-left-color: var(--good); }
.sv-sim-r p { margin: 4px 0 0; line-height: 1.45; }
.sv-sim-p { font-size: .9rem; color: var(--ink2); }
.sv-gd, .sv-cq, .sv-cr { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: sg; display: grid; gap: 8px; }
.sv-gd li, .sv-cq li, .sv-cr li { counter-increment: sg; position: relative; padding: 10px 12px 10px 46px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; line-height: 1.45; }
.sv-gd li::before, .sv-cq li::before, .sv-cr li::before { content: counter(sg); position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
.sv-gd li b, .sv-cq li b { display: block; }
.sv-gd li span, .sv-cq li span { color: var(--ink2); font-size: .93rem; }
.sv-bgt { display: grid; gap: 14px; margin-top: 12px; }
@media (min-width: 900px) { .sv-bgt { grid-template-columns: 1fr 1fr; } }
.sv-notes { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; color: var(--ink2); }
.sv-no { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }
.sv-no.ok { list-style: none; padding: 0; }
.sv-no.ok li { padding: 8px 12px; border-left: 5px solid var(--bad); background: var(--surface); border-radius: 0 8px 8px 0; font-weight: 600; }
.sv-vd { font-weight: 800; font-size: .8rem; padding: 2px 10px; border-radius: 99px; border: 1.5px solid currentColor; white-space: nowrap; }
.sv-vd.ok { background: var(--d0); color: #06251a; border-color: var(--d0); } .sv-vd.mid { color: var(--ink2); } .sv-vd.ko { color: var(--bad); }
.sv-hero { display: grid; gap: 14px; background: var(--night); color: var(--night-ink); border-radius: 18px; padding: 22px; margin-block: 26px; }
.sv-hero h2 { margin: 0; font-size: clamp(1.4rem, 4.5vw, 2rem); line-height: 1.12; color: inherit; }
.sv-hero p { margin: 0; line-height: 1.5; opacity: .92; }
.sv-hero .btn { justify-self: start; }
.sv-hero-k { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-hero-k span { font-size: .82rem; font-weight: 700; padding: 3px 11px; border-radius: 99px; background: rgba(255,255,255,.12); }
.sv-home { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .sv-home { grid-template-columns: 1fr 1.1fr; gap: 40px; } }
.sv-hk { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.sv-hk li { display: flex; gap: 12px; align-items: baseline; line-height: 1.4; }
.sv-hk b { flex: none; min-width: 2.2ch; font-size: 1.5rem; font-weight: 800; }
.sv-hm { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); }
.sv-hm:hover { box-shadow: 0 6px 18px rgba(16,26,69,.16); }
.sv-hmt { display: block; font-weight: 800; margin: 0 0 8px; }
.sv-hm .sv-map { display: block; }
.sv-hm .sv-lgd { margin-top: 10px; }
.sv-bgt, .sv-split, .sv-lv, .sv-tps, .sv-home { grid-template-columns: minmax(0, 1fr); }
.sv-bgt > div, .sv-split > *, .sv-home > * { min-width: 0; }
@media (min-width: 760px) { .sv-lv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 900px) { .sv-bgt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sv-tps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sv-home { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
@media (min-width: 1000px) { .sv-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.mx-scroll .sv-bgt .vtab, #sv-obj .mx-scroll .vtab { min-width: 0; }
.sv .mx-scroll .vtab { min-width: 0; } @media (max-width: 700px) { .sv #sv-failles .mx-scroll .vtab, .sv #sv-edf .mx-scroll .vtab { min-width: 560px; } }

/* ================= Finitions d'accessibilité ================= */
.sec:not(.night) .sec-head .kick { color: var(--ink2); }
.mx-scroll:focus-visible, .vtab-w:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.hi .fy-pos, tr.hi .fy-pos { color: var(--ink); }
.sv-bdg > .sv-atg { color: #06251a; } .sv-bdg > .sv-rkg { color: var(--sun-ink); }

/* Barre de chiffres clés : 6 éléments = 3 colonnes x 2 lignes (pas d'élément isolé) */
@media (min-width: 1101px) {
  .facts ul { grid-template-columns: repeat(3, 1fr); }
  .facts li:nth-child(3n) { border-right: 0; }
  .facts li:nth-child(-n+3) { border-bottom: 1px solid var(--rule); }
  .facts li:nth-child(3n+1) { padding-left: 0; }
}

/* Accueil : par où commencer (4 profils) */
.who { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .who { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.who .wc { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--sun); border-radius: 8px; }
.who h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.who p { margin: 0; color: var(--ink2); font-size: .98rem; }
.who .wl { margin-top: auto; padding-top: 6px; display: grid; gap: 6px; }
.who-sec { padding-bottom: 0; }

/* Colonnes qui ne dépassent jamais l'écran (320 px) */
.det-list { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 759px) { .prec-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 760px) { .prec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pl-bar > div { min-width: 0; }
@media (max-width: 420px) { .pl-t { font-size: .84rem; } .pl-t th { font-size: .74rem; padding-right: 4px; } .pl-t td { padding-right: 4px; } }

/* Programme en une page : résumé court */
.sum1 { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 820px; }
.sum1 li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.sum1 .n { width: 44px; height: 44px; border-radius: 50%; background: var(--chap, #FFC93C); color: var(--on, #101A45); font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.25rem; display: grid; place-items: center; }
.sum1 h2 { margin: 0 0 4px; font-size: 1.25rem; line-height: 1.25; }
.sum1 p { margin: 0; }
.sum1 .pr { font-weight: 600; color: var(--ink); }
.sum1 .ex { color: var(--ink2); margin-top: 4px; font-size: .98rem; }
.sum-note { max-width: 820px; margin: 22px 0 0; padding: 14px 16px; border-left: 4px solid var(--sun); background: var(--surface); }
.page-head p a { color: var(--sun); text-decoration: underline; text-underline-offset: 3px; }

/* Barre du haut : jamais de retour à la ligne, nom du site entier */
.nav a, .mode button { white-space: nowrap; }
.brand { flex: none; }
.brand-name { overflow: visible; text-overflow: clip; white-space: nowrap; }
@media (min-width: 1200px) { .sbtn span { display: none !important; } }
@media (min-width: 1200px) and (max-width: 1379px) { .nav a { padding: 8px 7px; font-size: .92rem; } .bar-in { gap: 12px; } }
@media (max-width: 519px) { .brand-name { overflow: hidden; text-overflow: ellipsis; } .brand { flex: 0 1 auto; min-width: 0; } }

/* Résumé étoffé + fil rouge « se sentir français » */
.sum-h { margin: 28px 0 10px; font-size: 1.35rem; max-width: 820px; }
.sum-h:first-child { margin-top: 0; }
.sum-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 820px; }
.sum-rules li { padding: 10px 14px; border-left: 4px solid var(--sun); background: var(--surface); }
.sum-fil { max-width: 820px; margin: 28px 0 0; padding: 18px 20px; border-radius: 14px; background: var(--night); color: #fff; }
.sum-fil h2 { margin: 0 0 8px; font-size: 1.25rem; color: #fff; }
.sum-fil p { margin: 0 0 8px; color: #E4E8FA; }
.sum-fil .more-row { margin: 10px 0 0; }
.sum-fil a { color: var(--sun); }
.sum1 h3 { margin: 0 0 4px; font-size: 1.25rem; line-height: 1.25; }
.sum-num { margin-top: 12px; }
.unis-box { border-radius: 18px; background: var(--night); color: #fff; padding: clamp(22px, 4vw, 44px); }
.unis-head { max-width: 760px; }
.unis-box .kick { color: var(--sun); }
.unis-box h2 { color: #fff; margin: 6px 0 12px; }
.unis-box .intro { color: #E4E8FA; }
.unis-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.uc { padding: 16px 18px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.uc h3 { margin: 0 0 6px; font-size: 1.1rem; color: var(--sun); }
.uc p { margin: 0; color: #E4E8FA; font-size: .98rem; }
.unis-box .more-row a { color: var(--sun); }
@media (max-width: 820px) { .unis-cards { grid-template-columns: minmax(0, 1fr); } }

/* Le programme en 5 minutes */
.sum-num { max-width: 820px; }

/* ===================== Le programme en 5 minutes (cq-) ===================== */
.cq-hero { background: var(--sun); color: #101A45; padding: clamp(32px, 6vw, 64px) 0 clamp(28px, 5vw, 52px); border-bottom: 1px solid rgba(16,26,69,.2); }
.cq-hero h1 { margin: 6px 0 14px; font-size: clamp(2.3rem, 7.5vw, 4.4rem); line-height: 1.02; letter-spacing: -.02em; color: #101A45; }
.cq-hk { margin: 0; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .82rem; }
.cq-hp { margin: 0; max-width: 720px; font-size: 1.12rem; color: #101A45; }
.cq { padding-bottom: 40px; }
.cq-nav { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); margin: 22px 0 14px; }
@media (min-width: 560px) { .cq-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .cq-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cq-nav a { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; color: var(--ink); text-decoration: none; }
.cq-nav a:hover { border-color: var(--ink); }
.cq-nav .cq-nn { grid-row: span 2; font: 800 1.5rem/1 "Bricolage Grotesque", "DM Sans", system-ui, sans-serif; background: var(--sun); color: #101A45; border-radius: 8px; padding: 8px 10px; }
.cq-nav b { font-size: 1.02rem; }
.cq-nav small { color: var(--ink2); font-size: .86rem; }
.cq-read { max-width: 820px; margin: 14px 0 6px; color: var(--ink2); }
.cq-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; vertical-align: middle; border: 1px solid currentColor; white-space: nowrap; }
.cq-tag.ok { color: #0E6B4F; background: rgba(31,160,110,.12); }
.cq-tag.st { color: #8A5A00; background: rgba(255,201,60,.22); }
:root[data-theme="dark"] .cq-tag.ok { color: #7FD6A0; } :root[data-theme="dark"] .cq-tag.st { color: #FFC268; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cq-tag.ok { color: #7FD6A0; } :root:not([data-theme="light"]) .cq-tag.st { color: #FFC268; } }
.cq-sec { margin: 46px 0 0; scroll-margin-top: 84px; }
.cq-k { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-weight: 700; color: var(--ink2); font-size: .9rem; letter-spacing: .03em; text-transform: uppercase; }
.cq-n { background: var(--ink); color: var(--bg); border-radius: 6px; padding: 2px 8px; font-size: .85rem; }
.cq-ouv { font-weight: 500; text-transform: none; letter-spacing: 0; }
.cq-h { margin: 0 0 12px; font-size: clamp(1.45rem, 4.2vw, 2.1rem); line-height: 1.15; max-width: 880px; }
.cq-lead { max-width: 780px; margin: 0 0 18px; font-size: 1.08rem; }
.cq-sm { max-width: 820px; margin: 12px 0 0; color: var(--ink2); font-size: .98rem; }
.cq-sm.cq-first { margin-top: 0; }
.cq-links { max-width: 880px; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .95rem; }
.cq-cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cq-cards { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } }
.cq-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 20px 22px; }
.cq-card h3 { margin: 0 0 12px; font-size: 1.18rem; line-height: 1.25; }
.cq-card > p { margin: 0 0 8px; }
.cq-card dl { margin: 0; display: grid; gap: 12px; }
.cq-card dt { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.cq-card dd { margin: 0; }
.cq-card .pg { padding-left: 12px; border-left: 4px solid var(--sun); }
.cq-card .pg dt { color: var(--ink); }
.cq-card .ch { background: var(--surface2); border-radius: 8px; padding: 10px 12px; }
.cq-card .ch dt { color: var(--ink); }
.cq-card .ch dd { font-weight: 600; }
.cq-two { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .cq-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cq-more { max-width: 880px; margin-top: 16px; }
.cq-more-b { padding: 0 18px 16px; }
.cq-more-b p { margin: 10px 0 0; }
.cq-ul { margin: 10px 0 0; padding-left: 20px; } .cq-ul li { margin: 6px 0; }
.cq-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .cq-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cq-steps li { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 18px; }
.cq-sn { flex: none; font: 800 1.6rem/1 "Bricolage Grotesque", "DM Sans", system-ui, sans-serif; background: var(--sun); color: #101A45; border-radius: 10px; padding: 10px 12px; }
.cq-steps h3 { margin: 0 0 6px; font-size: 1.1rem; } .cq-steps p { margin: 0; }
.cq-rules { max-width: 820px; padding-left: 20px; } .cq-rules li { margin: 10px 0; }

/* FNGE : la vitrine */
.cq-fnge { background: var(--night); color: var(--night-ink); border-radius: 18px; padding: clamp(22px, 4.5vw, 44px); border: 1px solid var(--line); }
.cq-fnge .cq-k { color: #C9D2F3; } .cq-fnge .cq-n { background: var(--sun); color: #101A45; }
.cq-fnge .cq-h { color: var(--sun); font-size: clamp(1.7rem, 5.2vw, 2.9rem); max-width: 960px; }
.cq-fnge .cq-lead { color: #F3F6FC; }
.cq-fnge .cq-sm { color: #C9D2F3; }
.cq-fnge a { color: #FFC93C; }
.cq-fnge .cq-tag.ok { color: #7FD6A0; }
.cq-h3 { margin: 30px 0 12px; font-size: 1.25rem; color: #fff; }
.cq-big { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cq-big { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cq-big li { background: var(--sun); color: #101A45; border-radius: 14px; padding: 16px 18px; display: flex; align-items: baseline; gap: 12px; }
@media (min-width: 640px) { .cq-big li { flex-direction: column; gap: 2px; } }
.cq-big b { font: 800 clamp(2.2rem, 6vw, 3.3rem)/1 "Bricolage Grotesque", "DM Sans", system-ui, sans-serif; }
.cq-big span { font-weight: 600; }
.cq-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cq-bars li { display: grid; gap: 6px 14px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cq-bl { grid-column: 1 / -1; display: flex; flex-direction: column; } .cq-bl b { font-size: 1.05rem; } .cq-bl span { color: #C9D2F3; font-size: .9rem; max-width: 640px; }
.cq-bar { height: 22px; background: rgba(255,255,255,.1); border-radius: 6px; overflow: hidden; display: flex; }
.cq-bar i { background: #8FA9FF; display: block; } .cq-bar u { background: repeating-linear-gradient(135deg, rgba(255,201,60,.9) 0 6px, rgba(255,201,60,.35) 6px 12px); display: block; }
.cq-bars .win .cq-bar i { background: var(--sun); }
.cq-bv { font: 800 1.5rem/1 "Bricolage Grotesque", "DM Sans", system-ui, sans-serif; text-align: right; min-width: 6.2rem; }
.cq-bv small { display: block; font: 600 .78rem/1.2 "DM Sans", system-ui, sans-serif; color: #FFC93C; margin-top: 2px; }
.cq-bars .win .cq-bv { color: var(--sun); }
.cq-gain { max-width: 820px; margin: 14px 0 0; color: #F3F6FC; }
.cq-flow { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 900px) { .cq-flow { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1.3fr) 36px minmax(0, 1.5fr); } }
.cq-fb { border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); }
.cq-fb b { font-size: 1.05rem; } .cq-fb span { color: #D9E0F7; font-size: .93rem; }
.cq-fb.c { background: var(--sun); color: #101A45; border-color: var(--sun); } .cq-fb.c span { color: #101A45; }
.cq-fb.d { background: rgba(79,209,184,.16); border-color: #4FD1B8; }
.cq-out { display: grid; gap: 10px; }
.cq-ar { position: relative; min-height: 28px; }
.cq-ar::before { content: "↓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; color: var(--sun); }
@media (min-width: 900px) { .cq-ar::before { content: "→"; } }
.cq-sov { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cq-sov li { padding: 12px 16px; border-left: 4px solid var(--sun); background: rgba(255,255,255,.07); border-radius: 0 10px 10px 0; max-width: 860px; }
.cq-pot { display: grid; gap: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; overflow: hidden; max-width: 860px; }
.cq-pot .r { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 8px; padding: 12px 14px; align-items: start; }
.cq-pot .r + .r { border-top: 1px solid rgba(255,255,255,.18); }
.cq-pot .h { background: rgba(255,255,255,.1); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #C9D2F3; }
.cq-pot b { display: block; font-size: 1.1rem; } .cq-pot small { display: block; color: #C9D2F3; font-size: .8rem; line-height: 1.3; }
.cq-pot .r:not(.h) span:nth-child(n+2) b { color: var(--sun); font-size: 1.3rem; }
.cq-warn { margin: 24px 0 0; padding: 16px 18px; border-radius: 12px; background: #F3F6FC; color: #101A45; border-left: 6px solid #D9482B; max-width: 860px; }
.cq-warn.st { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-left: 6px solid var(--sun); }
.cq-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.cq-btn { display: inline-block; padding: 12px 20px; border-radius: 999px; background: var(--sun); color: #101A45 !important; font-weight: 700; text-decoration: none; border: 2px solid var(--sun); }
.cq-btn:hover { filter: brightness(1.06); }
.cq-fnge a.cq-btn.alt { background: transparent; color: #FFC93C !important; border-color: #FFC93C; }

/* financement */
.cq-fin { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .cq-fin { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cq-fin .col { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; }
.cq-fin h3 { margin: 0 0 10px; font-size: 1.1rem; }
.cq-fin .stack { display: flex; height: 26px; border-radius: 6px; overflow: hidden; margin-bottom: 12px; gap: 2px; }
.cq-fin .stack i { display: block; }
.cq-fin .s1 { background: #2D47D1; } .cq-fin .s2 { background: #6B76A8; }
.cq-fin .u1 { background: #FFC93C; } .cq-fin .u2 { background: #D96A12; } .cq-fin .u3 { background: #0E8F7A; } .cq-fin .u4 { background: #8FA9FF; } .cq-fin .u5 { background: #6B76A8; }
.cq-fin ul { margin: 0; padding-left: 18px; } .cq-fin li { margin: 5px 0; }

/* calendrier */
.cq-tl { list-style: none; margin: 0; padding: 0 0 0 4px; max-width: 860px; border-left: 3px solid var(--sun); }
.cq-tl li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0 0 22px 22px; }
.cq-tl li::before { content: ""; position: absolute; left: -11px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--sun); border: 3px solid var(--bg); }
@media (min-width: 640px) { .cq-tl li { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; } }
.cq-y { font: 800 1.35rem/1.2 "Bricolage Grotesque", "DM Sans", system-ui, sans-serif; }
.cq-tl h3 { margin: 0 0 4px; font-size: 1.08rem; } .cq-tl p { margin: 0; }
.cq-sum { border-top: 1px solid var(--rule); padding-top: 26px; }
@media (max-width: 420px) { .cq-pot .r { grid-template-columns: 1.2fr 1fr 1fr; padding: 10px; } .cq-bv { font-size: 1.25rem; min-width: 5rem; } }
.cq-hero + .page-body { padding-top: 18px; }
.cq-fnge { background: linear-gradient(160deg, #101A45 0%, #1B2663 100%); }

/* ===================================================================================
   MOBILE (≤ 700 px) : même identité, une lecture pensée pour le pouce.
   Barre d'onglets en bas, en-tête fin qui se range, cartes qui défilent, tableaux en cartes,
   rubriques repliables. Rien de ce qui suit ne s'applique sur ordinateur.
   =================================================================================== */
.m-detbtn, .tabbar, .totop, .m-dots, .m-rubtoggle, .m-more, .foot-mini, .m-pill, .mmini, .m-rubfull, .m-modehint { display: none; }

@media (max-width: 700px) {
  :root { --hbar: calc(56px + env(safe-area-inset-top, 0px)); --hh: var(--hbar); --tb: 62px; --tbs: calc(62px + env(safe-area-inset-bottom, 0px)); }
  :root.m-hhide { --hh: 0px; }
  html { scroll-padding-top: calc(var(--hh) + 10px); }
  body { padding-top: var(--hbar); padding-bottom: var(--tbs); }
  input, select, textarea { font-size: max(16px, 1em) !important; }
  a, button, summary, label, .chip { -webkit-tap-highlight-color: rgba(255, 201, 60, .35); }
  button, summary, .chip, .btn { touch-action: manipulation; }

  /* ---------- En-tête fin ---------- */
  .bar { position: fixed; top: 0; left: 0; right: 0; padding-top: env(safe-area-inset-top, 0px); background: var(--bg); backdrop-filter: none; transition: top .26s ease; z-index: 50; }
  .bar.m-hide { top: calc(-1 * var(--hbar) - 2px); }
  .bar-in { min-height: 56px; gap: 10px; }
  .brand { font-size: .98rem; gap: 9px; }
  .brand .logo-slot svg { width: 34px; height: auto; }
  .burger, .mode { display: none !important; }
  .sbtn { margin-left: auto; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 12px; }
  .skip { top: calc(var(--hh) + 6px); }

  /* ---------- Barre d'onglets ---------- */
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; height: var(--tbs); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--rule); box-shadow: 0 -6px 18px rgba(16, 26, 69, .08); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 6px 2px 4px; font: inherit; font-size: .7rem; font-weight: 600; letter-spacing: .01em; color: var(--ink2); background: none; border: 0; text-decoration: none; cursor: pointer; }
  .tabbar .ti { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 16px; transition: background .18s; }
  .tabbar [aria-current="page"], .tabbar .on { color: var(--ink); font-weight: 800; }
  .tabbar [aria-current="page"] .ti, .tabbar .on .ti { background: var(--sun); color: var(--sun-ink); }
  body.m-kb .tabbar { display: none; }
  body.m-kb { padding-bottom: 0; }
  .totop { display: grid; place-items: center; position: fixed; right: 14px; bottom: calc(var(--tbs) + 14px); z-index: 65; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--bg); border: 0; box-shadow: 0 6px 18px rgba(16, 26, 69, .3); cursor: pointer; }
  .totop[hidden] { display: none; }
  body.m-drawer .totop, body.m-kb .totop { display: none; }

  /* ---------- Menu plein écran ---------- */
  .drawer { position: fixed; top: var(--hbar); left: 0; right: 0; bottom: var(--tbs); z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-top: 1px solid var(--line); padding-block: 0 24px; -webkit-overflow-scrolling: touch; }
  body.m-drawer { overflow: hidden; }
  .drawer .wrap { display: flex; flex-direction: column; }
  .drawer .mmode { order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 14px 0 4px; padding: 4px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
  .drawer .mmode button { padding: 12px 10px; font-size: .98rem; border-radius: 10px; min-height: 46px; }
  .drawer .dg { margin: 22px 0 6px; padding-inline: 2px; }
  .drawer a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 4px; font-size: 1.04rem; }
  .drawer a::after { content: "›"; font-size: 1.5rem; line-height: 1; color: var(--muted); }

  /* ---------- Recherche : plein écran ---------- */
  .sov { padding: 0; align-items: stretch; }
  .sbox { max-width: none; max-height: none; height: 100%; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top, 0px); }
  .srow { padding: 10px 12px; gap: 8px; }
  .srow input { padding: 14px; border-radius: 12px; }
  .sx { min-width: 76px; border-radius: 12px; }

  /* ---------- Pied de page ---------- */
  .foot { padding-block: 28px 24px; }
  .foot-grid > div:nth-child(n+2) { display: none; }
  .foot .b { font-size: 1.25rem; }
  .foot-mini { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 18px 0 0; }
  .foot-mini a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot .legal { margin-top: 12px; }

  /* ---------- Rythme général ---------- */
  .wrap { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  .sec { padding-block: 34px; }
  .sec h2 { font-size: 1.62rem; }
  .sec .intro { font-size: 1.02rem; margin-top: 10px; }
  .sec-head { margin-bottom: 18px; }
  .page-body { padding-block: 22px 40px; }
  .btn, .hero .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
  p, li { overflow-wrap: break-word; hyphens: auto; }

  /* ---------- Titres de page compacts ---------- */
  .page-head { padding-block: 22px 24px; }
  .page-head .arcs { display: none; }
  .page-head h1 { font-size: clamp(1.95rem, 9vw, 2.5rem); }
  .page-head p { margin-top: 10px; font-size: 1.02rem; line-height: 1.5; }
  .m-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .m-clamp.m-open { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; }
  .m-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; padding: 0; font: inherit; font-weight: 700; font-size: .95rem; background: none; border: 0; color: var(--sun); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
  .chap-hero .m-more { color: inherit; }
  .cq-hero .m-more { color: #101A45; }

  /* ---------- Accueil ---------- */
  .hero-grid { padding-block: 24px 0; gap: 0; }
  .hero-art { display: none; }
  .hero-copy { padding-bottom: 26px; }
  .hero h1 { font-size: clamp(2.7rem, 15vw, 3.4rem); }
  .hero .lead { font-size: 1.08rem; margin-top: 14px; }
  .hero .cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
  .hero .cta .btn:first-child { grid-column: 1 / -1; }
  .facts ul { display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 0 !important; padding: 0 !important; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -16px; }
  .facts ul::-webkit-scrollbar { display: none; }
  .facts ul li { flex: 0 0 44%; scroll-snap-align: start; width: auto !important; margin: 0 !important; padding: 14px 16px !important; border: 0 !important; border-right: 1px solid #2A3680 !important; font-size: .86rem; line-height: 1.3; }
  .facts ul li:first-child { padding-left: 16px !important; }
  .facts ul li b { display: block; font-size: 1.5rem; margin: 0 0 2px; }
  .facts ul li a { display: block; }
  .trio .t { padding: 20px 20px 22px; }
  .trio h3 { font-size: 1.35rem; }
  .reds { gap: 10px; }
  .reds li { padding: 14px 16px; font-size: .98rem; }

  /* chapitres : une ligne par chapitre, vignette à gauche */
  .chap-grid { gap: 12px; }
  .chap-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); border-radius: 14px; }
  .chap-card .pic { aspect-ratio: auto; height: 100%; min-height: 128px; border-bottom: 0; border-right: 1px solid var(--rule); }
  .chap-card .pic svg { object-fit: cover; }
  .chap-card .body { padding: 14px 14px 14px; gap: 6px; }
  .chap-card h3 { font-size: 1.12rem; line-height: 1.15; }
  .chap-card .pr { font-size: .92rem; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .chap-card .num { font-size: .66rem; padding: 3px 8px; }
  .chap-card .body > *:not(h3):not(.num):not(.pr):not(.more) { display: none; }
  .chap-card .more { padding-top: 0; font-size: .92rem; }

  /* cartes qui défilent */
  .m-car { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -16px; padding: 2px 16px 10px; scroll-padding-inline: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .m-car::-webkit-scrollbar { display: none; }
  .m-car > * { flex: 0 0 min(82%, 330px) !important; width: auto !important; max-width: none; scroll-snap-align: start; scroll-snap-stop: normal; min-width: 0; }
  .m-car:focus-visible { outline-offset: -3px; }
  .m-car, .chips.m-line, .chips.m-rows, .facts ul { contain: inline-size; max-width: none; }
  .m-dots { display: flex; justify-content: center; align-items: center; gap: 7px; min-height: 18px; margin: 4px 0 2px; }
  .m-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); transition: width .2s, background .2s; }
  .m-dots i.on { width: 20px; border-radius: 6px; background: var(--ink); }
  .m-dots span { font-size: .84rem; font-weight: 700; color: var(--muted); }
  .sec.night .m-dots i { background: #3A47A0; } .sec.night .m-dots i.on { background: var(--sun); } .sec.night .m-dots span { color: #C9D2F3; }
  .cal-col { height: auto; }
  .cal-col .m-extra { display: none; }
  .m-moreli a { font-weight: 700; font-size: .92rem; }

  /* pastilles : une ligne qui défile, ou trois lignes */
  .chips.m-line { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 4px 16px 8px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 16px; }
  .chips.m-line::-webkit-scrollbar, .chips.m-rows::-webkit-scrollbar { display: none; }
  .chips.m-line .chip, .chips.m-rows .chip { flex: none; white-space: nowrap; scroll-snap-align: start; min-height: 44px; align-items: center; }
  .chips.m-rows { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-auto-columns: max-content; gap: 8px; overflow-x: auto; margin-inline: -16px; padding: 4px 16px 10px; scrollbar-width: none; justify-content: start; }
  .chip { padding: 9px 15px; font-size: .96rem; }

  /* ---------- Chapitres : en-tête, sommaire collant, rubriques repliables ---------- */
  .chap-hero .grid { padding-block: 24px 40px; gap: 0; }
  .chap-hero .pic, .chap-hero .grid > div:last-child:not(:first-child) { display: none; }
  .chap-hero h1 { font-size: clamp(2rem, 9.5vw, 2.6rem); margin: 6px 0 10px; }
  .chap-hero .prom { font-size: 1.1rem; }
  .quick { margin-top: -22px; }
  .quick-in { padding: 18px 16px; gap: 16px; border-radius: 14px; }
  .quick h2 { font-size: 1.2rem; }
  .quick li { gap: 10px; }
  .toc { position: sticky; top: var(--hh); z-index: 30; margin: 14px -16px 0; padding: 6px 16px 2px; background: var(--bg); border-bottom: 1px solid var(--line); transition: top .26s ease; }
  .toc .chips { margin-inline: -16px; }
  .rub { padding-block: 26px 20px; scroll-margin-top: calc(var(--hh) + 64px); }
  .rub h2 { font-size: 1.5rem; margin: 4px 0 14px; max-width: none; }
  .bim { margin-bottom: 14px; border-radius: 14px; }
  .rub:not(.m-open) > *:not(h2):not(.bim):not(.m-rubtoggle):not(.who) { display: none !important; }
  .m-rubtoggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 50px; padding: 12px 16px; font: inherit; font-weight: 800; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1.5px solid var(--ink); border-radius: 14px; cursor: pointer; }
  .m-rubtoggle svg { flex: none; transition: transform .2s; }
  .rub.m-open > .m-rubtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .m-rubtoggle.end { display: none; margin-top: 22px; }
  .rub.m-open > .m-rubtoggle.end { display: flex; }
  .rub.m-open > .m-rubtoggle:not(.end) { background: var(--ink); color: var(--bg); }
  .rub-grid { gap: 18px; margin-top: 18px; }
  .pager { padding-block: 24px 40px; }

  /* ---------- Tableaux : une carte par ligne ---------- */
  .m-cards-wrap { overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
  table.m-cards, .m-cards tbody, .m-cards tr, .m-cards td, .m-cards th { display: block; width: 100% !important; min-width: 0 !important; }
  .m-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .m-cards tr { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 12px 14px; margin: 0 0 10px; }
  .m-cards td, .m-cards th { border: 0 !important; padding: 5px 0 !important; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; text-align: right !important; white-space: normal !important; font-size: .96rem; }
  .m-cards td::before, .m-cards tbody th::before { content: attr(data-label); flex: 0 0 40%; text-align: left; font-weight: 600; font-size: .82rem; color: var(--muted); }
  .m-cards td:empty { display: none; }
  .m-cards tr > :first-child { display: block; text-align: left !important; font-weight: 800; font-size: 1.04rem; padding: 0 0 6px !important; margin-bottom: 4px; border-bottom: 1px solid var(--line) !important; }
  .m-cards tr > :first-child::before { display: none; }
  .m-cards.m-long td { display: block; text-align: left !important; }
  .m-cards.m-long td::before { display: block; margin-bottom: 2px; }
  .one-wrap.m-cards-wrap { margin: 0 -2px; }

  /* ---------- Cartes de contenu ---------- */
  .scard, .hcard, .num { border-radius: 14px; }
  .hcard { padding: 18px; }
  .hcard b { font-size: 1.7rem; }
  .story-cards, .choc-grid { gap: 12px; }
  .numbers { gap: 10px; }
  details.detail > summary { min-height: 52px; }
  details > summary { min-height: 44px; }

  /* ---------- Carte de la souveraineté, simulateurs ---------- */
  .sv-nav { top: var(--hh); margin-inline: -16px; padding-inline: 16px; transition: top .26s ease; }
  .sl input[type=range] { height: 10px; margin: 14px 0; }
  .sl input[type=range]::-webkit-slider-thumb { width: 34px; height: 34px; }
  .sl input[type=range]::-moz-range-thumb { width: 34px; height: 34px; }

  /* Page « Le programme » */
  .page-body section[class*="c-"] > .split { gap: 14px !important; }
  .page-body section[class*="c-"] > .split > .pic { max-width: none !important; aspect-ratio: 16/9; border-radius: 14px; }
  .page-body section[class*="c-"] > .split > .pic svg { width: 100%; height: 100%; object-fit: cover; }
  .m-prog { gap: 0 !important; border-top: 1px solid var(--rule); }
  .m-prog li { border-bottom: 1px solid var(--rule); }
  .m-prog li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 2px; text-decoration: none; font-weight: 600; font-size: .98rem; line-height: 1.3; color: var(--ink); }
  .m-prog li a::after { content: "›"; font-size: 1.4rem; color: var(--ink2); flex: none; }
  .m-prog .m-extra { display: none; }
  .m-prog.m-open .m-extra { display: list-item; }
  .m-progmore { margin-top: 6px; color: var(--link); }
  .m-prog li a { line-height: 1.35; }

  /* Page « Toutes les mesures » */
  .mz-sec { margin-top: 0; border-bottom: 1px solid var(--rule); }
  .mz-sec h2 { font-size: 1.1rem; padding: 0; border-bottom: 0; line-height: 1.2; display: block; }
  .m-acc { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 0; cursor: pointer; font: inherit; color: inherit; }
  .m-acc:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
  .mz-sec h2 small { margin-left: auto; padding-right: 2px; }
  .m-acc::after { content: ""; flex: none; width: 10px; height: 10px; margin: 0 6px 3px 4px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
  .mz-sec.m-open .m-acc::after { transform: rotate(-135deg); margin-bottom: -3px; }
  .mz-sec:not(.m-open) .mz-list { display: none; }
  .mz-sec.m-open { padding-bottom: 8px; }
  .mz-sec.m-open h2 { border-bottom: 3px solid var(--chap); }
  .mz-ctrl { gap: 10px; }
  .mz-ctrl .chk { font-size: .92rem; }

  /* Simulateurs */
  .m-pill { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tbs, 64px) + 10px); z-index: 60; display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 16px; background: var(--ink); color: var(--bg); text-decoration: none; box-shadow: 0 8px 24px rgba(10,20,60,.35); }
  .m-pill[hidden] { display: none; }
  .m-pill span { display: grid; line-height: 1.15; min-width: 0; }
  .m-pill small { font-size: .7rem; opacity: .8; font-weight: 600; white-space: nowrap; }
  .m-pill b { font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .m-pill em { margin-left: auto; font-style: normal; font-weight: 700; font-size: .9rem; color: var(--sun); }
  body.m-kb .m-pill, body.m-drawer .m-pill { display: none; }
  .mx-scen { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 -2px; padding: 2px 2px 6px; contain: inline-size; scrollbar-width: none; }
  .mx-scen::-webkit-scrollbar { display: none; }
  .mx-scen button { flex: 0 0 min(200px, 62vw); scroll-snap-align: start; }
  .mx-bar { padding: 14px; gap: 14px; }

  /* Bascule Essentiel / Détaillé toujours visible */
  .mmini { display: inline-flex; margin-left: auto; padding: 2px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); flex: none; }
  .mmini button { font: inherit; font-size: .76rem; font-weight: 700; border: 0; background: transparent; color: var(--ink); padding: 7px 10px; border-radius: 999px; min-height: 32px; cursor: pointer; }
  .mmini button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  .brand { font-size: .88rem; gap: 7px; min-width: 0; }
  .brand-name { display: none; }
  @media (min-width: 440px) { .brand-name { display: inline; } }
  .bar-in .sbtn { margin-left: 0; }

  /* Schéma des flux, en vertical */
  .fx-mobile { display: none !important; }
  .fm { margin: 4px 0 8px; }
  .fm-h { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; margin: 18px 0 10px; }
  .fm-h i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-size: .85rem; flex: none; }
  .fm-h small { margin-left: auto; color: var(--muted); font-weight: 600; font-size: .78rem; }
  .fm-src { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .fm-s { font: inherit; font-weight: 700; font-size: .92rem; text-align: left; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--rule); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; line-height: 1.2; }
  .fm-s span { width: 10px; height: 10px; border-radius: 50%; background: var(--kc); flex: none; }
  .fm-s[aria-pressed="true"] { background: var(--kc); border-color: var(--kc); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--kc) 40%, transparent); }
  .fm-s[aria-pressed="true"] span { background: #fff; }
  .fm-s.k-surplus[aria-pressed="true"], .fm-s.k-cotis[aria-pressed="true"] { color: #101A45; }
  .fm-s.k-surplus[aria-pressed="true"] span, .fm-s.k-cotis[aria-pressed="true"] span { background: #101A45; }
  .fm-ar { height: 30px; position: relative; margin: 6px 0 -6px; }
  .fm-ar::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 8px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--kc); }
  .fm-ar::after { content: ""; position: absolute; left: 50%; bottom: 0; margin-left: -9px; border: 9px solid transparent; border-top: 11px solid var(--kc); border-bottom: 0; }
  .fm-houses { display: grid; gap: 10px; }
  .fm-house { border: 1.5px solid var(--rule); border-radius: 16px; padding: 12px; background: var(--surface2, var(--surface)); transition: border-color .2s, box-shadow .2s; }
  .fm-house h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 1.02rem; font-weight: 800; margin-bottom: 8px; }
  .fm-house h3 small { font-weight: 600; font-size: .8rem; color: var(--muted); }
  .fm-house.on { border-color: var(--kc); box-shadow: 0 0 0 1px var(--kc); }
  .fm-pk, .fm-out { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .fm-n { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border: 1.5px solid var(--rule); border-radius: 11px; background: var(--surface); color: var(--ink); text-decoration: none; min-height: 48px; transition: opacity .2s, background .2s, border-color .2s; }
  .fm-n b { font-size: .84rem; line-height: 1.2; font-weight: 700; }
  .fm-n small { font-size: .72rem; color: var(--muted); line-height: 1.25; }
  .fm.tr .fm-n:not(.on) { background: transparent; border-style: dashed; color: var(--ink2); }
  .fm.tr .fm-n.on { opacity: 1; border-color: var(--kc); background: color-mix(in srgb, var(--kc) 14%, var(--surface)); box-shadow: inset 4px 0 0 var(--kc); }
  .fm.tr .fm-house:not(.on) { border-style: dashed; }
  .fm-out .fm-n { background: var(--surface); }
  .fm-say { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: var(--bg); }
  .fm-say p { margin: 0; font-size: .95rem; line-height: 1.4; font-weight: 600; }
  .fm-say .m-more { color: inherit; min-height: 36px; margin: 2px 0 -4px; }
  .fm-more[hidden] { display: none; }
  .fiche { gap: 6px; padding: 16px; border-radius: 14px; }
  .fiche h3 { font-size: 1.1rem; }
  .fiche .role { font-size: .95rem; font-weight: 500; }
  .fiche .m-more { color: var(--link); justify-self: start; }
  body.m-ess .fiche .m-fold { display: none; }
  body.m-ess .fiche.m-open .m-fold { display: grid; gap: 10px; }
  body:not(.m-ess) .fiche .m-more { display: none; }
  .fiches-t { margin-top: 32px; font-size: 1.3rem; }
  .fiches { gap: 10px; }

  /* Rubriques : essentiel = problème, mesure en gras, schéma, ce que ça change */
  body.m-ess .rub:not(.m-full) .m-rest { display: none; }
  body.m-ess .rub:not(.m-full) :is(.stbk, .why, .seealso, details.detail, .rub-foot, details.mwhy, .rub-nav) { display: none; }
  body.m-ess .rub .m-rubfull { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 14px; font: inherit; font-weight: 700; font-size: .95rem; color: var(--link); background: transparent; border: 1.5px dashed var(--rule); border-radius: 12px; cursor: pointer; }
  body.m-ess .rub.m-full .m-rubfull { border-style: solid; }
  body.m-ess .rub:not(.m-full) .m-rest > .m-keep, body.m-ess .rub:not(.m-full) .m-keep { display: inline; }
  body.m-ess .rub:not(.m-full) span.m-rest:has(> .m-keep) { display: inline; }
  body.m-ess .rub:not(.m-full) .rub-grid .blk:not(.mes) > h3, body.m-ess .rub:not(.m-full) .rub-grid .blk:not(.mes) > p { display: none; }
  body.m-ess .rub:not(.m-full) .fig .t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  body.m-ess .rub:not(.m-full) .viz > p:not(.vd-leg), body.m-ess .rub:not(.m-full) .viz .vsrc { display: none; }
  body.m-ess .rub:not(.m-full) .viz-row .viz:nth-child(n+2) { display: none; }

  body.m-ess .m-cut { display: none; }
  body.m-ess .page-body p.src { display: none; }
  body.m-ess .m-modehint { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 16px 8px; padding: 14px 16px; border: 1.5px dashed var(--rule); border-radius: 14px; }
  body.m-ess .m-modehint p { margin: 0; font-weight: 600; font-size: .9rem; color: var(--ink2); }
  body.m-ess .m-modehint button { font: inherit; font-weight: 700; font-size: .88rem; color: var(--bg); background: var(--ink); border: 0; border-radius: 999px; padding: 10px 14px; min-height: 40px; cursor: pointer; }
  body.m-ess .m-ulfold:not(.m-open) .m-li-more { display: none; }
  body:not(.m-ess) .m-ulmore { display: none; }
  .m-ulmore { color: var(--link); }
  body.m-ess .m-glfold:not(.m-open) .gl-i:nth-of-type(n+8) { display: none; }
  .m-glfold + .m-more { color: var(--link); }
  body.m-ess .cq-card dl > div:first-child { display: none; }
  .det-item { border: 1px solid var(--rule); border-radius: 14px; padding: 14px; background: var(--surface); margin-bottom: 10px; }
  .det-item h2 { font-size: 1.1rem; margin: 6px 0 10px; }
  .m-detbtn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 10px 14px; font: inherit; font-weight: 700; color: var(--link); background: transparent; border: 1.5px solid var(--rule); border-radius: 12px; cursor: pointer; }
  .det-item.m-open .m-detbtn { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .det-item.m-open .m-detbtn svg { transform: rotate(180deg); }
  .det-item:not(.m-open) .detail-in { display: none; }
  .det-item.m-open .detail-in { margin-top: 12px; }
  body.m-ess .mz .stx { display: none; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fm-s[aria-pressed="true"] { color: #101A45; } :root:not([data-theme="light"]) .fm-s[aria-pressed="true"] span { background: #101A45; } }
  :root[data-theme="dark"] .fm-s[aria-pressed="true"] { color: #101A45; } :root[data-theme="dark"] .fm-s[aria-pressed="true"] span { background: #101A45; }
}

/* ===================== Et si… on changeait ? (page ANSD, préfixe ec-) ===================== */
.ecbtn { display: none; position: relative; align-items: baseline; gap: 0; flex: none; margin-left: 4px; font: inherit; font-size: .86rem; font-style: italic; font-weight: 500; letter-spacing: .01em; color: var(--muted); text-decoration: none; padding: 6px 8px; border-radius: 6px; border: 0; background: transparent; white-space: nowrap; transition: color .25s ease; }
.ecbtn .ec-t { transition: letter-spacing .35s ease; }
.ecbtn .ec-d { display: inline-flex; width: 1.05em; justify-content: space-between; margin-left: 1px; }
.ecbtn .ec-d i { font-style: normal; opacity: .25; animation: ecdots 4.2s ease-in-out infinite; }
.ecbtn .ec-d i:nth-child(2) { animation-delay: .35s; }
.ecbtn .ec-d i:nth-child(3) { animation-delay: .7s; }
.ecbtn .ec-q { display: inline-block; margin-left: 3px; font-weight: 700; color: var(--ink2); transform-origin: 50% 85%; animation: ecq 8.4s ease-in-out infinite; }
.ecbtn::after { content: "une idée à débattre"; position: absolute; left: 50%; top: calc(100% + 4px); transform: translate(-50%, -3px); font-size: .72rem; font-style: normal; font-weight: 600; letter-spacing: .04em; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; white-space: nowrap; box-shadow: var(--shadow); }
.ecbtn:hover, .ecbtn:focus-visible { color: var(--ink); }
.ecbtn:hover .ec-t, .ecbtn:focus-visible .ec-t { letter-spacing: .04em; }
.ecbtn:hover .ec-d i, .ecbtn:focus-visible .ec-d i { opacity: 1; animation: none; }
.ecbtn:hover::after, .ecbtn:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.ecbtn[aria-current="page"] { color: var(--ink); }
.ecbtn[aria-current="page"] .ec-d i { opacity: 1; animation: none; }
@keyframes ecdots { 0%, 55%, 100% { opacity: .25; } 15%, 35% { opacity: 1; } }
@keyframes ecq { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-14deg); } 94% { transform: rotate(10deg); } 97% { transform: rotate(-4deg); } }
@media (min-width: 701px) { .ecbtn { display: inline-flex; } }
@media (max-width: 700px) { .bar-in .ecbtn { display: inline-flex; margin-left: 0; padding: 5px 6px; font-size: .8rem; } .bar-in .ecbtn::after { display: none; } .bar-in .ecbtn + .mmini { margin-left: 0; } .bar-in .mmini { margin-left: auto; } }
@media (max-width: 700px) { .bar-in .ecbtn { order: 5; } }
@media (max-width: 389px) { .bar-in .ecbtn { padding: 5px 4px; font-size: .76rem; } }
@media (prefers-reduced-motion: reduce) { .ecbtn .ec-d i, .ecbtn .ec-q { animation: none; } .ecbtn .ec-d i { opacity: .6; } }

.ec { --ec-gap: clamp(14px, 2.4vw, 22px); }
.ec h2 { scroll-margin-top: 84px; }
.ec .fsec > h2 { max-width: 30ch; }
.ec .fsec-k { font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.ec .fsec-k b { color: var(--accent); }
.ec-hero { background: var(--night); color: var(--night-ink); position: relative; overflow: hidden; }
.ec-hero::after { content: ""; position: absolute; inset: auto -10% -40% -10%; height: 70%; background: radial-gradient(60% 60% at 50% 100%, color-mix(in srgb, var(--sun) 22%, transparent), transparent 70%); pointer-events: none; }
.ec-hero-grid { display: grid; gap: 28px; padding-block: clamp(34px, 6vw, 76px); align-items: center; position: relative; z-index: 1; }
@media (min-width: 900px) { .ec-hero-grid { grid-template-columns: 1.15fr .85fr; } }
.ec-badge { display: inline-flex; align-items: center; gap: 9px; font-size: .84rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sun); border: 1.5px dashed color-mix(in srgb, var(--sun) 70%, transparent); border-radius: 999px; padding: 6px 14px; }
.ec-hero h1 { font-size: clamp(2.6rem, 7.4vw, 5.2rem); font-weight: 800; font-stretch: 80%; letter-spacing: -.035em; line-height: .98; margin: 16px 0 18px; color: #F3F6FC; }
.ec-hero h1 em { font-style: normal; color: var(--sun); }
.ec-hero .lead { color: #C9D2F3; font-size: clamp(1.08rem, 2.2vw, 1.3rem); max-width: 54ch; }
.ec-hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ec-hero .btn.solid { background: var(--sun); color: var(--sun-ink); border-color: var(--sun); }
.ec-hero .btn.ghost { color: #F3F6FC; border-color: #F3F6FC; background: transparent; }
.ec-hero-art svg { display: block; width: 100%; max-width: 440px; height: auto; margin-inline: auto; }
.ec-status { display: grid; gap: 12px; padding: 0 0 clamp(26px, 4vw, 44px); position: relative; z-index: 1; }
@media (min-width: 820px) { .ec-status { grid-template-columns: repeat(3, 1fr); } }
.ec-status > div { border: 1px solid rgba(243,246,252,.25); border-left: 5px solid var(--sun); border-radius: 8px; padding: 14px 16px; color: #E7EEFB; font-size: .98rem; line-height: 1.45; background: rgba(243,246,252,.05); }
.ec-status b { color: #fff; display: block; margin-bottom: 3px; }
.ec-toc { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.ec-toc a { flex: none; font-size: .88rem; font-weight: 600; color: var(--ink2); text-decoration: none; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); }
.ec-toc a:hover { background: var(--sun); color: var(--sun-ink); }
.ec-s20 { margin-top: 26px; background: var(--surface); border: 1px solid var(--rule); border-top: 9px solid var(--sun); border-radius: 8px; padding: 20px 22px; max-width: 920px; }
.ec-s20 h2 { font-size: 1.25rem; margin: 0 0 8px; }
.ec-s20 ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--ink2); }
.ec-s20 li::marker { color: var(--accent); }

/* onglets / boutons génériques */
.ec-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.ec-tab { font: inherit; font-weight: 700; font-size: .96rem; padding: 9px 16px; border-radius: 8px; border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; line-height: 1.25; }
.ec-tab:hover { background: var(--surface2); }
.ec-tab[aria-selected="true"], .ec-tab[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ec-tab:focus-visible, .ec-node:focus-visible, .ec-step:focus-visible, .ec-lvl:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ec-label-ill { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 6px; background: var(--surface2); color: var(--ink2); border: 1px solid var(--line); }

/* avant / après */
.ec-ba { display: grid; gap: var(--ec-gap); margin-top: 22px; }
@media (min-width: 900px) { .ec-ba { grid-template-columns: 1fr 1fr; } }
.ec-ba > section { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 20px; position: relative; }
.ec-ba .tag { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 11px; border-radius: 6px; margin-bottom: 10px; }
.ec-ba .av .tag { background: var(--bad); color: #fff; }
.ec-ba .ap .tag { background: var(--good); color: #fff; }
:root[data-theme="dark"] .ec-ba .tag { color: #0A1030; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ec-ba .tag { color: #0A1030; } }
.ec-ba h3 { font-size: 1.2rem; margin: 0 0 12px; font-weight: 800; }
.ec-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ec-chain li { position: relative; padding: 10px 12px; border: 1.5px solid var(--rule); border-radius: 8px; background: var(--bg); font-size: .96rem; line-height: 1.4; }
.ec-chain li b { display: block; }
.ec-chain li span { color: var(--ink2); }
.ec-chain li + li { margin-top: 20px; }
.ec-chain li + li::before { content: "relais ↓"; position: absolute; top: -19px; left: 14px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bad); }
.ec-hole { margin-top: 14px; padding: 12px 14px; border-radius: 8px; border: 1.5px dashed var(--bad); color: var(--ink); font-size: .96rem; background: color-mix(in srgb, var(--bad) 7%, var(--surface)); }
.ec-hole b { color: var(--bad); }
.ec-mission { border: 2px solid var(--good); border-radius: 10px; padding: 14px; background: color-mix(in srgb, var(--good) 6%, var(--surface)); }
.ec-mission > b { display: block; font-size: 1.05rem; margin-bottom: 10px; }
.ec-lev { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 560px) { .ec-lev { grid-template-columns: 1fr 1fr; } }
.ec-lev li { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 9px 11px; font-size: .93rem; line-height: 1.4; }
.ec-lev li b { display: block; color: var(--good); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.ec-note2 { display: grid; gap: 12px; margin-top: 14px; }
@media (min-width: 700px) { .ec-note2 { grid-template-columns: 1fr 1fr; } }
.ec-note2 > div { padding: 12px 14px; border-radius: 8px; background: var(--surface2); font-size: .96rem; color: var(--ink2); }
.ec-note2 b { color: var(--ink); display: block; }

/* le temps */
.ec-time { margin-top: 22px; display: grid; gap: 14px; }
.ec-time .row .l { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; font-weight: 700; }
.ec-time .row .l span { font-weight: 500; color: var(--muted); font-size: .92rem; }
.ec-time .tr { position: relative; height: 38px; background: var(--surface2); border-radius: 6px; margin-top: 6px; overflow: hidden; }
.ec-time .f { position: absolute; inset: 0 auto 0 0; border-radius: 6px; display: flex; align-items: center; padding-left: 12px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; color: #fff; animation: grow .9s cubic-bezier(.2,.8,.2,1) both; transform-origin: left; white-space: nowrap; }
.ec-time .f.a { background: var(--accent); } .ec-time .f.b { background: var(--good); } .ec-time .f.c { background: var(--ink); color: var(--bg); }
.ec-4 { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 640px) { .ec-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ec-4 { grid-template-columns: repeat(4, 1fr); } }
.ec-4 > div { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 16px; }
.ec-4 b { display: block; margin-bottom: 4px; }
.ec-4 span { color: var(--ink2); font-size: .95rem; }

/* rose des huit objectifs */
.ec-rose-grid { display: grid; gap: var(--ec-gap); margin-top: 24px; }
@media (min-width: 980px) { .ec-rose-grid { grid-template-columns: minmax(340px, 480px) 1fr; align-items: start; } }
.ec-rose { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 8px; }
.ec-rose svg { display: block; width: 100%; height: auto; }
.ec-rose .ln { fill: none; stroke-width: 2.4; transition: opacity .2s; }
.ec-rose .ln.p { stroke: var(--good); } .ec-rose .ln.m { stroke: var(--bad); stroke-dasharray: 7 6; } .ec-rose .ln.x { stroke: var(--muted); stroke-dasharray: 2 6; stroke-linecap: round; }
.ec-rose .ring { fill: none; stroke: var(--line); stroke-width: 1.5; }
.ec-rose .nd { cursor: pointer; outline: none; }
.ec-rose .nd circle { fill: var(--surface2); stroke: var(--ink); stroke-width: 2.5; transition: fill .15s; }
.ec-rose .nd text.n { font: 800 24px "Bricolage Grotesque", sans-serif; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.ec-rose .nd text.t { font: 700 15px "DM Sans", sans-serif; fill: var(--ink2); }
.ec-rose .nd.on circle { fill: var(--sun); stroke: var(--sun-ink); }
.ec-rose .nd.on text.n { fill: var(--sun-ink); }
.ec-rose .nd:hover circle { fill: var(--sun); }
.ec-rose .nd:focus-visible circle { stroke: var(--focus); stroke-width: 5; }
.ec-rose .core { fill: var(--ink); } .ec-rose .coret { font: 800 17px "Bricolage Grotesque", sans-serif; fill: var(--bg); text-anchor: middle; }
@media (max-width: 640px) { .ec-rose .nd text.t { display: none; } }
.ec-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 12px 10px; font-size: .85rem; color: var(--ink2); }
.ec-leg i { display: inline-block; width: 26px; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: 6px; }
.ec-leg .p i { border-color: var(--good); } .ec-leg .m i { border-color: var(--bad); border-top-style: dashed; } .ec-leg .x i { border-color: var(--muted); border-top-style: dotted; }
.ec-ob-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
@media (min-width: 560px) { .ec-ob-tabs { grid-template-columns: repeat(4, 1fr); } }
.ec-ob-tabs .ec-tab { display: flex; gap: 8px; align-items: center; padding: 8px 10px; font-size: .9rem; }
.ec-ob-tabs .ec-tab i { font-style: normal; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: var(--sun-ink); font-weight: 800; font-size: .82rem; }
.ec-panel { background: var(--surface); border: 1px solid var(--rule); border-left: 7px solid var(--sun); border-radius: 10px; padding: 18px 20px; }
.ec-panel h3 { font-size: 1.35rem; margin: 0 0 6px; font-weight: 800; }
.ec-panel .def { margin: 0 0 12px; color: var(--ink); font-size: 1.04rem; }
.ec-panel dl { display: grid; gap: 10px; margin: 0; }
.ec-panel dl div { background: var(--surface2); border-radius: 8px; padding: 10px 12px; }
.ec-panel dt { font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ec-panel dd { margin: 3px 0 0; font-size: .96rem; color: var(--ink); line-height: 1.45; }
.ec-rel { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.ec-rel li { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; font-size: .94rem; color: var(--ink2); }
.ec-rel .sg { font-weight: 800; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; color: #fff; white-space: nowrap; }
.ec-rel .sg.p { background: var(--good); } .ec-rel .sg.m { background: var(--bad); } .ec-rel .sg.x { background: var(--muted); }
:root[data-theme="dark"] .ec-rel .sg { color: #0A1030; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ec-rel .sg { color: #0A1030; } }
.ec-rel b { color: var(--ink); }
.ec-prop { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; border: 1.5px dashed var(--muted); color: var(--muted); margin-left: 6px; vertical-align: 1px; }

/* organisation */
.ec-layers { display: grid; gap: 0; margin-top: 24px; }
.ec-layer { position: relative; border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px 16px; background: var(--surface); }
.ec-layer + .ec-layer { margin-top: 26px; }
.ec-layer + .ec-layer::before { content: attr(data-rel); position: absolute; top: -22px; left: 18px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ec-layer h3 { font-size: .8rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.ec-layer.l-ansd { border: 2.5px solid var(--ink); background: color-mix(in srgb, var(--sun) 12%, var(--surface)); }
.ec-nodes { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-node { font: inherit; font-weight: 700; font-size: .94rem; padding: 9px 13px; border-radius: 8px; border: 1.5px solid var(--ink2); background: var(--bg); color: var(--ink); cursor: pointer; line-height: 1.25; text-align: left; }
.ec-node small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; }
.ec-node:hover { background: var(--sun); color: var(--sun-ink); border-color: var(--sun-ink); } .ec-node:hover small { color: var(--sun-ink); }
.ec-node[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } .ec-node[aria-pressed="true"] small { color: var(--bg); opacity: .8; }
.ec-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.ec-flow .ar { align-self: center; font-weight: 800; color: var(--muted); }
.ec-orgpanel { margin-top: 16px; }
.ec-cc { display: grid; gap: var(--ec-gap); margin-top: 26px; }
@media (min-width: 760px) { .ec-cc { grid-template-columns: 1fr 1fr; } }
.ec-cc > div { border-radius: 10px; padding: 18px 20px; border: 1px solid var(--rule); background: var(--surface); }
.ec-cc .ok { border-top: 9px solid var(--good); } .ec-cc .ko { border-top: 9px solid var(--bad); }
.ec-cc h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; }
.ec-cc ul { margin: 0; padding-left: 1.15em; display: grid; gap: 5px; color: var(--ink2); }

/* mission */
.ec-steps { display: grid; gap: 8px; margin-top: 24px; counter-reset: es; }
@media (min-width: 760px) { .ec-steps { grid-template-columns: repeat(6, 1fr); } }
.ec-step { counter-increment: es; font: inherit; text-align: left; cursor: pointer; border: 1.5px solid var(--rule); border-radius: 8px; background: var(--surface); padding: 10px 12px; color: var(--ink); display: grid; gap: 4px; align-content: start; }
.ec-step::before { content: counter(es); width: 28px; height: 28px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); display: grid; place-items: center; font-weight: 800; font-family: "Bricolage Grotesque", sans-serif; }
.ec-step b { font-size: 1rem; } .ec-step span { font-size: .82rem; color: var(--muted); }
.ec-step[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } .ec-step[aria-selected="true"] span { color: var(--bg); opacity: .8; }
.ec-fiche { margin-top: 22px; border: 2px solid var(--ink); border-radius: 10px; background: var(--surface); overflow: hidden; }
.ec-fiche > header { background: var(--ink); color: var(--bg); padding: 12px 18px; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; align-items: baseline; }
.ec-fiche > header b { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.25rem; }
.ec-fiche > header span { font-size: .84rem; opacity: .85; }
.ec-fiche dl { margin: 0; display: grid; }
@media (min-width: 760px) { .ec-fiche dl { grid-template-columns: 1fr 1fr; } }
.ec-fiche dl div { padding: 12px 18px; border-top: 1px solid var(--line); }
.ec-fiche dt { font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ec-fiche dd { margin: 3px 0 0; font-size: .96rem; }

/* argent */
.ec-circ { display: grid; gap: var(--ec-gap); margin-top: 24px; }
@media (min-width: 800px) { .ec-circ { grid-template-columns: 1fr 1fr; } }
.ec-circ > div { border: 1px solid var(--rule); border-radius: 10px; padding: 18px 20px; background: var(--surface); }
.ec-circ .c1 { border-top: 9px solid var(--good); } .ec-circ .c2 { border-top: 9px solid var(--accent); }
.ec-circ h3 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 800; }
.ec-circ p { margin: 6px 0; color: var(--ink2); }
.ec-circ .ex { font-size: .92rem; color: var(--muted); }
.ec-start { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 700px) { .ec-start { grid-template-columns: repeat(3, 1fr); } }
.ec-start .num .v { font-size: clamp(2rem, 4.5vw, 3rem); }
.ec-warn { margin-top: 18px; padding: 14px 18px; border-radius: 8px; border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); font-size: .98rem; max-width: 86ch; }
.ec-warn b { color: var(--accent); }
.ec-sim { margin-top: 26px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); padding: clamp(16px, 3vw, 26px); }
.ec-sim h3 { margin: 0 0 4px; font-size: 1.3rem; font-weight: 800; }
.ec-sim-grid { display: grid; gap: 22px; margin-top: 14px; }
@media (min-width: 900px) { .ec-sim-grid { grid-template-columns: 1fr 1fr; } }
.ec-sl { display: grid; gap: 4px; margin-bottom: 14px; }
.ec-sl label { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; font-size: .96rem; }
.ec-sl output { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; }
.ec-sl input[type=range] { width: 100%; accent-color: var(--link); min-height: 32px; }
.ec-sl small { color: var(--muted); font-size: .85rem; line-height: 1.35; }
.ec-out { display: grid; gap: 10px; align-content: start; }
.ec-out .o { background: var(--surface2); border-radius: 8px; padding: 12px 14px; }
.ec-out .o .v { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1.1; }
.ec-out .o .t { color: var(--ink2); font-size: .92rem; margin-top: 2px; }
.ec-out .o.neg .v { color: var(--accent); } .ec-out .o.pos .v { color: var(--good); }
.ec-spark { display: block; width: 100%; height: 90px; margin-top: 4px; }
.ec-spark path.a { fill: none; stroke: var(--good); stroke-width: 3; } .ec-spark path.b { fill: color-mix(in srgb, var(--good) 14%, transparent); stroke: none; }
.ec-houses { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 800px) { .ec-houses { grid-template-columns: repeat(3, 1fr); } }
.ec-houses > div { border: 1px solid var(--rule); border-radius: 10px; padding: 16px; background: var(--surface); }
.ec-houses h3 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 800; }
.ec-houses p { margin: 4px 0; color: var(--ink2); font-size: .96rem; }
.ec-houses .ne { font-size: .88rem; color: var(--muted); }

/* peuple */
.ec-today { display: grid; gap: 12px; margin-top: 22px; }
@media (min-width: 760px) { .ec-today { grid-template-columns: repeat(3, 1fr); } }
.ec-stairs { display: grid; gap: 8px; margin-top: 24px; }
@media (min-width: 900px) { .ec-stairs { grid-template-columns: repeat(4, 1fr); align-items: end; } }
.ec-lvl { font: inherit; text-align: left; cursor: pointer; border: 1.5px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); padding: 12px 14px; display: grid; gap: 4px; align-content: start; }
@media (min-width: 900px) { .ec-lvl:nth-child(1) { min-height: 110px; } .ec-lvl:nth-child(2) { min-height: 150px; } .ec-lvl:nth-child(3) { min-height: 190px; } .ec-lvl:nth-child(4) { min-height: 230px; } }
.ec-lvl i { font-style: normal; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ec-lvl b { font-size: 1.05rem; font-family: "Bricolage Grotesque", sans-serif; }
.ec-lvl span { font-size: .9rem; color: var(--ink2); }
.ec-lvl[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } .ec-lvl[aria-pressed="true"] i, .ec-lvl[aria-pressed="true"] span { color: var(--bg); opacity: .85; }
.ec-proj { margin-top: 26px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); padding: clamp(16px, 3vw, 24px); }
.ec-proj h3 { margin: 0 0 4px; font-size: 1.3rem; font-weight: 800; }
.ec-res { margin-top: 14px; padding: 14px 16px; border-radius: 8px; background: var(--surface2); border-left: 7px solid var(--sun); }
.ec-res b { display: block; margin-bottom: 4px; }
.ec-res ul { margin: 6px 0 0; padding-left: 1.15em; display: grid; gap: 4px; color: var(--ink2); }
.ec-opts { display: grid; gap: var(--ec-gap); margin-top: 24px; }
@media (min-width: 900px) { .ec-opts { grid-template-columns: repeat(3, 1fr); } }
.ec-opt { border: 1px solid var(--rule); border-radius: 10px; padding: 18px; background: var(--surface); position: relative; }
.ec-opt h3 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 800; }
.ec-opt.rec { border: 2.5px solid var(--sun-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 55%, transparent); }
.ec-opt .rb { position: absolute; top: -13px; right: 14px; background: var(--sun); color: var(--sun-ink); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 6px; border: 1.5px solid var(--sun-ink); }
.ec-opt p { margin: 6px 0; color: var(--ink2); font-size: .96rem; }
.ec-opt .pc { font-size: .92rem; color: var(--ink2); } .ec-opt .pc b { color: var(--good); } .ec-opt .pc b.c { color: var(--bad); }

/* garde-fous */
.ec-g10 { display: grid; gap: 12px; margin-top: 24px; counter-reset: eg; }
@media (min-width: 640px) { .ec-g10 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ec-g10 { grid-template-columns: repeat(3, 1fr); } }
.ec-g10 > div { counter-increment: eg; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 16px 16px 16px 58px; position: relative; }
.ec-g10 > div::before { content: counter(eg); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); display: grid; place-items: center; font-weight: 800; font-family: "Bricolage Grotesque", sans-serif; }
.ec-g10 b { display: block; margin-bottom: 3px; }
.ec-g10 span { color: var(--ink2); font-size: .95rem; }
.ec-add { margin-top: 28px; border: 2px dashed var(--muted); border-radius: 12px; padding: 18px 20px; }
.ec-add h3 { margin: 0 0 4px; font-size: 1.25rem; font-weight: 800; }
.ec-add ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
@media (min-width: 800px) { .ec-add ul { grid-template-columns: 1fr 1fr; } }
.ec-add li { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; font-size: .96rem; color: var(--ink2); }
.ec-add li b { color: var(--ink); display: block; }

/* risques */
.ec-traps { display: grid; gap: var(--ec-gap); margin-top: 24px; }
@media (min-width: 760px) { .ec-traps { grid-template-columns: repeat(2, 1fr); } }
.ec-trap { background: var(--surface); border: 1px solid var(--rule); border-top: 9px solid var(--accent); border-radius: 10px; padding: 18px 20px; }
.ec-trap .k { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ec-trap h3 { margin: 4px 0 6px; font-size: 1.2rem; font-weight: 800; }
.ec-trap p { margin: 6px 0; color: var(--ink2); font-size: .97rem; }
.ec-trap .gd { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--good) 9%, var(--surface)); font-size: .93rem; color: var(--ink); }
.ec-trap .gd b { color: var(--good); }
.ec-trap .src { font-size: .82rem; color: var(--muted); }
.ec .faq { max-width: 900px; margin-top: 20px; }

/* comparaison */
.ec-cmp { margin-top: 24px; display: grid; gap: 12px; }
.ec-cmp .r { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px; }
.ec-cmp .r.bad { border-left: 7px solid var(--accent); }
.ec-cmp .h { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.ec-cmp .h b { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.15rem; }
.ec-cmp .h span { color: var(--muted); font-size: .9rem; }
.ec-cmp .d { color: var(--ink2); font-size: .96rem; }
.ec-cmp .cols { display: grid; gap: 8px; }
@media (min-width: 760px) { .ec-cmp .cols { grid-template-columns: 1fr 1fr; } }
.ec-cmp .cols div { padding: 9px 12px; border-radius: 8px; font-size: .94rem; background: var(--surface2); }
.ec-cmp .cols .t b { color: var(--good); } .ec-cmp .cols .e b { color: var(--accent); }
.ec-cmp .cols b { display: block; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; }

/* composer le cap */

/* chemin */
.ec-path { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: ep; }
@media (min-width: 900px) { .ec-path { grid-template-columns: repeat(5, 1fr); } }
.ec-path li { counter-increment: ep; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 14px; display: grid; gap: 6px; align-content: start; }
.ec-path li::before { content: counter(ep); width: 30px; height: 30px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); display: grid; place-items: center; font-weight: 800; font-family: "Bricolage Grotesque", sans-serif; }
.ec-path li.vote { border: 2.5px solid var(--ink); background: color-mix(in srgb, var(--sun) 14%, var(--surface)); }
.ec-path b { font-size: 1.02rem; } .ec-path span { font-size: .93rem; color: var(--ink2); }
.ec-yn { display: grid; gap: var(--ec-gap); margin-top: 24px; }
@media (min-width: 760px) { .ec-yn { grid-template-columns: 1fr 1fr; } }
.ec-yn > div { border-radius: 10px; padding: 18px 20px; border: 1px solid var(--rule); background: var(--surface); }
.ec-yn .y { border-top: 9px solid var(--good); } .ec-yn .n { border-top: 9px solid var(--ink); }
.ec-yn h3 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 800; }
.ec-yn p { margin: 6px 0; color: var(--ink2); }
.ec-open { display: grid; gap: 12px; margin-top: 24px; }
.ec-open > div { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px; }
.ec-open b { display: block; }
.ec-open span { color: var(--ink2); font-size: .96rem; display: block; margin-top: 2px; }
.ec-open em { font-style: normal; display: block; margin-top: 6px; font-size: .9rem; color: var(--muted); }
.ec-src { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .95rem; }
.ec-src li { padding-left: 1.2em; position: relative; color: var(--ink2); }
.ec-src li::before { content: "·"; position: absolute; left: .3em; font-weight: 800; color: var(--accent); }
.ec-src a { color: var(--link); }
.ec-end { margin-top: 30px; border-radius: 12px; background: var(--night); color: var(--night-ink); padding: clamp(22px, 4vw, 40px); text-align: left; }
.ec-end h2 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin: 0 0 10px; max-width: 24ch; }
.ec-end p { color: #C9D2F3; max-width: 62ch; margin: 6px 0; }
.ec-end .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.ec-end .btn.solid { background: var(--sun); color: var(--sun-ink); border-color: var(--sun); }
.ec-end .btn.ghost { color: #F3F6FC; border-color: #F3F6FC; }

/* ===== Section « Concrètement » ===== */
.ec .ec-h3 { margin: 38px 0 0; font-size: 1.4rem; font-weight: 800; }
.ec-3 { display: grid; gap: var(--ec-gap); margin-top: 22px; }
@media (min-width: 820px) { .ec-3 { grid-template-columns: repeat(3, 1fr); } }
.ec-3 > div { background: var(--surface); border: 1px solid var(--rule); border-top: 7px solid var(--sun); border-radius: 10px; padding: 16px 18px; }
.ec-3 .k { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ec-3 p { margin: 0; color: var(--ink); }
.ec-formula { margin-top: var(--ec-gap); background: var(--night); color: #F3F6FC; border-radius: 12px; padding: clamp(20px, 3.4vw, 32px); }
.ec-formula .big { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(1.55rem, 3.8vw, 2.4rem); line-height: 1.12; letter-spacing: -.02em; }
.ec-formula .big em { font-style: normal; color: var(--sun); }
.ec-formula .sub { margin: 12px 0 0; color: #C9D2F3; max-width: 62ch; }
.ec-not { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 640px) { .ec-not { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ec-not { grid-template-columns: repeat(4, 1fr); } }
.ec-not > div { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px; display: grid; gap: 6px; align-content: start; }
.ec-not b { font-size: 1.05rem; }
.ec-not b::before { content: "✕"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--bad); color: #fff; font-size: .72rem; vertical-align: 1px; }
.ec-not span { color: var(--ink2); font-size: .95rem; }
.ec-not .is { border: 2.5px solid var(--ink); background: color-mix(in srgb, var(--sun) 14%, var(--surface)); }
.ec-not .is b::before { content: "✓"; background: var(--good); }
:root[data-theme="dark"] .ec-not b::before { color: #0A1030; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ec-not b::before { color: #0A1030; } }
.ec-crise { margin-top: 18px; }
.ec-crise h3 { margin: 0 0 10px; font-size: 1.25rem; font-weight: 800; }
.ec-crise .cols { display: grid; gap: var(--ec-gap); }
@media (min-width: 760px) { .ec-crise .cols { grid-template-columns: 1fr 1fr; } }
.ec-crise .cols > div { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; border-top: 8px solid var(--ink2); }
.ec-crise .cols .a { border: 2.5px solid var(--ink); border-top: 8px solid var(--sun); background: color-mix(in srgb, var(--sun) 12%, var(--surface)); }
.ec-crise .cols b { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ec-crise .cols p { margin: 6px 0 0; }
.ec-lim { margin: 12px 0 0; padding: 12px 14px; border-radius: 8px; border: 1.5px dashed var(--ink2); background: var(--surface2); font-size: .96rem; color: var(--ink); }
.ec-lim b { color: var(--ink); }
.ec-who { margin-top: 18px; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--surface); }
.ec-who > div { display: grid; gap: 2px 18px; padding: 11px 16px; border-top: 1px solid var(--line); }
.ec-who > div:first-child { border-top: 0; }
@media (min-width: 700px) { .ec-who > div { grid-template-columns: 1.25fr 1fr; align-items: center; } }
.ec-who span { color: var(--ink2); }
.ec-who b { font-weight: 800; }
.ec-who .me { background: color-mix(in srgb, var(--sun) 18%, var(--surface)); border-left: 6px solid var(--sun); }
.ec-pil { margin-top: 22px; }
.ec-roof { display: block; width: 100%; font: inherit; text-align: center; cursor: pointer; background: var(--ink); color: var(--bg); border: 2px solid var(--ink); border-radius: 12px 12px 4px 4px; padding: 11px 14px; }
.ec-roof b { display: block; font-family: "Bricolage Grotesque", sans-serif; font-size: 1.15rem; }
.ec-roof small { display: block; opacity: .85; font-size: .86rem; }
.ec-roof:hover { background: var(--sun); color: var(--sun-ink); border-color: var(--sun-ink); }
.ec-roof[aria-pressed="true"] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 65%, transparent); }
.ec-roof:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ec-pil .cols { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 620px) { .ec-pil .cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .ec-pil .cols { grid-template-columns: repeat(4, 1fr); } }
.ec-pil .col, .ec-pil .base { position: relative; border: 1px solid var(--rule); border-top: 8px solid var(--ink2); border-radius: 6px 6px 10px 10px; background: var(--surface); padding: 12px; display: grid; gap: 8px; align-content: start; }
.ec-pil h4 { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 800; }
.ec-pil .ec-node { width: 100%; }
.ec-pil .col.new { border: 2.5px solid var(--ink); border-top: 8px solid var(--sun); background: color-mix(in srgb, var(--sun) 14%, var(--surface)); }
.ec-pil .col.new .rb { position: absolute; top: -17px; right: 12px; background: var(--sun); color: var(--sun-ink); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 6px; border: 1.5px solid var(--sun-ink); }
.ec-pil .mini { margin: 0; font-size: .86rem; color: var(--ink2); }
.ec-pil .base { margin-top: 12px; border-top-color: var(--rule); border-top-width: 1px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .ec-pil .base { grid-template-columns: auto 1fr; align-items: center; } .ec-pil .base .ec-node { width: auto; justify-self: start; } }
#ec-plp { margin-top: 14px; }
.ec-qui { margin-top: 16px; }
.ec-qui table { width: 100%; border-collapse: collapse; margin-top: 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.ec-qui th, .ec-qui td { text-align: left; vertical-align: top; padding: 11px 14px; border-top: 1px solid var(--line); font-size: .95rem; }
.ec-qui thead th { background: var(--ink); color: var(--bg); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; border-top: 0; }
.ec-qui tbody th { font-weight: 800; width: 24%; }
.ec-qui td { color: var(--ink2); }
.ec-qui tr[data-ch="1"] td:last-child { color: var(--ink); background: color-mix(in srgb, var(--sun) 12%, var(--surface)); font-weight: 600; }
.ec-qui tr[data-ch="0"] { opacity: .8; }
.ec-qui .chg { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1px 8px; border-radius: 6px; background: var(--sun); color: var(--sun-ink); margin-right: 4px; }
.ec-qui[data-only="1"] tr[data-ch="0"] { display: none; }
@media (max-width: 699px) {
  .ec-qui thead { position: absolute; left: -9999px; }
  .ec-qui table, .ec-qui tbody, .ec-qui tr, .ec-qui th, .ec-qui td { display: block; width: auto; }
  .ec-qui tr { border-top: 1px solid var(--line); padding: 8px 0; }
  .ec-qui tr:first-child { border-top: 0; }
  .ec-qui tbody th { width: auto; border-top: 0; padding-bottom: 2px; }
  .ec-qui td { border-top: 0; padding: 3px 14px; }
  .ec-qui td::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
}
/* ===== Polissage ===== */
@media (min-width: 701px) { .fm { display: none !important; } }
p.who, span.who { display: block; grid-template-columns: none; gap: 0; }
@media (max-width: 700px) { .fbar > .chips.m-line { flex: 1 1 100%; min-width: 0; } .fbar > .btn { margin-left: auto; } }
@media (max-width: 700px) { .wrap.m-car { margin-inline: 0; } }
:root[data-theme="dark"] .ec-time .f.a, :root[data-theme="dark"] .ec-time .f.b { color: #0A1030; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ec-time .f.a, :root:not([data-theme="light"]) .ec-time .f.b { color: #0A1030; } }
@media (max-width: 340px) { .wrap.bar-in { padding-inline: 12px; gap: 6px; } .bar-in .brand { display: none; } .bar-in .ecbtn { padding: 5px 3px; } }
.cta-band { grid-template-columns: minmax(0, 1fr); } .cta-band p { overflow-wrap: anywhere; }

/* ===== ANSD · En pratique ===== */
.ec-formula .sub a { color: var(--sun); text-decoration: underline; }
.ec-mis { display: grid; gap: 16px; margin-top: 14px; }
.ec-mis .top { background: var(--surface); border: 1px solid var(--rule); border-top: 8px solid var(--sun); border-radius: 10px; padding: 16px 18px; }
.ec-mis .top h3 { margin: 10px 0 6px; font-size: 1.3rem; font-weight: 800; }
.ec-mis .top p { margin: 0; color: var(--ink2); }
.ec-mh { margin: 0 0 8px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ec-mis .ec-lev { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.ec-hzs { display: grid; gap: 10px; }
@media (min-width: 700px) { .ec-hzs { grid-template-columns: repeat(3, 1fr); } }
.ec-hzs > div { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; border-left: 6px solid var(--sun); }
.ec-hzs .y { display: block; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.25rem; }
.ec-hzs p { margin: 4px 0 0; color: var(--ink2); font-size: .95rem; }
.ec-chips-l { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0; font-size: .9rem; color: var(--ink2); }
.ec-chips-l > span:first-child { font-weight: 800; color: var(--muted); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; }
.ec-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); font-weight: 600; color: var(--ink); }
.ec-chip i, .ec-hz-list i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); display: inline-grid; place-items: center; font-weight: 800; font-size: .78rem; flex: none; }
.ec-tools { display: grid; gap: 12px; margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.ec-tool { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; }
.ec-tool .g { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ec-tool h4 { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.25; }
.ec-tool p { margin: 0; font-size: .94rem; color: var(--ink); }
.ec-tool .li { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--rule); color: var(--ink2); }
.ec-tool .ex b { color: var(--good); }
.ec-tool .li b { color: var(--ink); }
.ec-hz-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ec-hz-list li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: start; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 14px; }
.ec-hz-list i { grid-row: span 2; margin-top: 1px; }
.ec-hz-list b { font-weight: 800; }
.ec-hz-list span { color: var(--ink2); font-size: .95rem; }
@media (min-width: 900px) { .ec-hz-list li { grid-template-columns: auto 11em 1fr; align-items: center; } .ec-hz-list i { grid-row: auto; margin-top: 0; } }

/* Barre des chiffres phares : 7 éléments, le premier en vedette (4 colonnes x 2 lignes) */
@media (min-width: 1101px) {
  .facts ul { grid-template-columns: repeat(4, 1fr) !important; }
  .facts li { border-right: 1px solid var(--rule) !important; border-bottom: 0 !important; padding-left: 18px !important; }
  .facts li.fx-lead { grid-column: span 2; }
  .facts li:nth-child(-n+3) { border-bottom: 1px solid var(--rule) !important; }
  .facts li:nth-child(3), .facts li:nth-child(7) { border-right: 0 !important; }
  .facts li:nth-child(1), .facts li:nth-child(4) { padding-left: 0 !important; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .facts li.fx-lead { grid-column: 1 / -1; }
  .facts li:nth-child(even) { padding-left: 0 !important; border-right: 1px solid var(--rule) !important; }
  .facts li:nth-child(odd):not(.fx-lead) { padding-left: 18px !important; border-right: 0 !important; }
  .facts li:nth-last-child(-n+2) { border-bottom: 0 !important; }
}
@media (min-width: 701px) { .facts li.fx-lead b { font-size: 1.85rem; } .facts li.fx-lead a { font-size: 1.02rem; color: var(--ink); } }
@media (max-width: 700px) { .facts ul li.fx-lead { flex-basis: 66%; } .facts a > b { align-self: flex-start; width: max-content; } }

/* ===================== Lot 47 : version Simple, partage, tableaux mobiles ===================== */
.v-simple p, .v-simple li, .v-simple dd, .v-simple td { hyphens: manual; -webkit-hyphens: manual; }
.is-simple { font-size: 1.0625rem; line-height: 1.6; }
.is-simple .s-wrap { max-width: 780px; }
.s-hero { background: var(--night); color: var(--night-ink); padding-block: clamp(28px, 6vw, 64px) clamp(24px, 5vw, 48px); }
.s-hero h1 { font-size: clamp(2.2rem, 8vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-top: 8px; color: #F3F6FC; }
.s-hero .dot { color: var(--sun); }
.s-kick { font: 700 .78rem/1.2 "DM Sans", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--sun); margin: 0; }
.s-lead { font-size: 1.12rem; line-height: 1.5; margin: 12px 0 0; max-width: 40ch; color: var(--night-ink); }
.s-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.s-hero .btn.ghost { color: #F3F6FC; border-color: rgba(243,246,252,.6); }
.s-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.s-hero .s-tools .shr, .s-hero .s-listen { color: #F3F6FC; border-color: rgba(243,246,252,.45); background: transparent; }
.s-listen { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .9rem "DM Sans", system-ui, sans-serif; cursor: pointer; }
.s-listen[aria-pressed="true"] { background: var(--sun); color: var(--sun-ink); border-color: var(--sun); }
.s-h2 { font-size: clamp(1.45rem, 5vw, 1.9rem); margin: 34px 0 14px; }
.s-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px; margin: 22px 0; }
.s-box h2 { font-size: 1.3rem; margin: 0 0 10px; }
.s-dots { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.s-dots li { position: relative; padding-left: 18px; }
.s-dots li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--sun); }
.s-big { margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid var(--sun); background: var(--surface2); border-radius: 0 10px 10px 0; }
.s-big b { display: block; font: 800 1.7rem/1.1 "Bricolage Grotesque", system-ui, sans-serif; color: var(--ink); }
.s-end { margin: 26px 0 8px; }
.s-detail { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--link); text-decoration: none; min-height: 44px; }
.s-detail:hover { text-decoration: underline; }
/* chiffres */
.s-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.s-facts li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.s-facts a { display: grid; gap: 2px; padding: 14px 64px 14px 16px; color: var(--ink2); text-decoration: none; min-height: 44px; }
.s-facts a b { font: 800 clamp(1.7rem, 7vw, 2.2rem)/1.05 "Bricolage Grotesque", system-ui, sans-serif; color: var(--ink); box-shadow: inset 0 -.32em 0 color-mix(in srgb, var(--sun) 70%, transparent); justify-self: start; }
.s-facts .sf-k { font: 700 .72rem/1.2 "DM Sans", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.s-facts .shr { position: absolute; top: 10px; right: 10px; }
.s-facts .shr span, .sc-h .shr span, .s-tools .shr span:not(.keep) { display: none; }
.s-hero .s-tools .shr span { display: inline; }
@media (min-width: 760px) { .s-facts { grid-template-columns: 1fr 1fr; } .s-facts li:first-child { grid-column: 1 / -1; } }
/* chapitres */
.s-chs { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.s-chs a { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); min-height: 44px; }
.s-chs .n { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--night); color: var(--sun); display: grid; place-items: center; font: 800 1rem "Bricolage Grotesque", sans-serif; }
.s-chs b { display: block; font: 700 1.08rem/1.25 "Bricolage Grotesque", system-ui, sans-serif; }
.s-chs small { display: block; color: var(--muted); font-size: .93rem; margin-top: 3px; line-height: 1.4; }
.s-paid p { margin: 0 0 10px; }
.s-paid .btn { margin-top: 6px; }
.s-links { display: flex; flex-wrap: wrap; gap: 8px; }
.s-links a { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; min-height: 44px; display: inline-flex; align-items: center; }
/* sommaire de chapitre */
.s-toc { margin: 18px 0 6px; }
.s-toc p { margin: 0 0 8px; font: 700 .78rem "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.s-toc div { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-inline: -16px; padding-inline: 16px; scroll-snap-type: x proximity; }
.s-toc div::-webkit-scrollbar { display: none; }
.s-toc a { flex: 0 0 auto; scroll-snap-align: start; padding: 9px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; }
@media (min-width: 760px) { .s-toc div { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
/* carte de rubrique */
.sc { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 14px; margin: 16px 0; scroll-margin-top: 80px; box-shadow: 0 1px 0 var(--line); }
.sc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sc-t { font-size: clamp(1.3rem, 5vw, 1.55rem); margin: 0; }
.sc-lab { display: block; font: 700 .72rem/1.3 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.sc-pb { margin: 12px 0 0; color: var(--ink2); }
.sc-so { margin: 10px 0 0; padding: 10px 12px; background: color-mix(in srgb, var(--sun) 22%, var(--surface)); border-radius: 10px; font-weight: 700; color: var(--ink); }
.sc-so .sc-lab { color: var(--ink2); }
.sc-n { margin: 12px 0 0; display: grid; gap: 2px; }
.sc-n b { font: 800 1.6rem/1.1 "Bricolage Grotesque", system-ui, sans-serif; color: var(--ink); }
.sc-n span { color: var(--ink2); font-size: .95rem; }
.sc-l { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.sc-l li { position: relative; padding-left: 16px; line-height: 1.45; }
.sc-l li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink2); }
.sc-l .stb { font-size: .7rem; vertical-align: 1px; }
.sc-more { margin-top: 8px; }
.sc-more summary { cursor: pointer; font-weight: 700; color: var(--link); min-height: 40px; display: flex; align-items: center; }
.sc-pv { margin: 12px 0 0; }
.sc-f { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sc-fl { font: 700 .72rem "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sc-a { margin: 6px 0 0; }
/* C'est payé ? */
.sp-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 18px 0 14px; background: var(--surface2); padding: 5px; border-radius: 14px; }
.sp-tabs button { border: 0; background: transparent; border-radius: 10px; padding: 10px 6px; cursor: pointer; color: var(--ink); text-align: center; min-height: 54px; font-family: inherit; }
.sp-tabs b { display: block; font: 700 1rem/1.2 "Bricolage Grotesque", sans-serif; }
.sp-tabs small { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.sp-tabs [aria-selected="true"] { background: var(--night); color: #F3F6FC; }
.sp-tabs [aria-selected="true"] small { color: var(--sun); }
.sp-txt { margin: 0 0 12px; }
.sp-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-k > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 2px; }
.sp-k span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.sp-k b { font: 800 clamp(1.4rem, 6vw, 2rem)/1.1 "Bricolage Grotesque", system-ui, sans-serif; color: var(--ink); }
.sp-k small { font-size: .78rem; color: var(--ink2); line-height: 1.3; }
@media (max-width: 420px) { .sp-k { grid-template-columns: 1fr 1fr; } .sp-k > div:first-child { grid-column: 1 / -1; } }
.sp-chart { margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.sp-chart svg { width: 100%; height: auto; display: block; }
.sp-cap, .sp-n { font-size: .85rem; color: var(--muted); margin: 6px 0 0; }
.s-pay h3 { font-size: 1.15rem; margin: 22px 0 10px; }
.sp-t { display: grid; gap: 8px; }
.sp-t > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.sp-t b { font: 800 1.1rem "Bricolage Grotesque", sans-serif; }
.sp-t b.neg { color: var(--bad); } .sp-t b.pos { color: var(--good); }
.sp-rule { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--surface2); }
.sp-rule h3 { margin: 0 0 6px; }
.sp-rule p { margin: 0; }
.sp-act { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
/* pages repliées */
.fold-x { margin: 26px 0; padding: 18px; border-radius: 16px; border: 1px dashed var(--line); background: var(--surface); }
.fold-t { margin: 0 0 10px; font-weight: 700; color: var(--ink); }
.fold-c { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fold-c button { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 9px 13px; font: 600 .9rem "DM Sans", system-ui, sans-serif; cursor: pointer; min-height: 40px; text-align: left; }
/* bouton de partage */
.shr { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; min-width: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink2); font: 600 .88rem "DM Sans", system-ui, sans-serif; cursor: pointer; flex: 0 0 auto; }
.shr:hover { border-color: var(--ink2); color: var(--ink); }
.shr:focus-visible, .s-listen:focus-visible, .sp-tabs button:focus-visible { outline: 3px solid var(--focus, #2D47D1); outline-offset: 2px; }
.shr.mini { min-height: 32px; min-width: 32px; padding: 0 8px; }
.shr.mini span { display: none; }
.shr-in { margin-left: 6px; vertical-align: middle; }
/* message bas d'écran */
.s-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 90; background: var(--night); color: #F3F6FC; border-radius: 14px; padding: 10px 12px 10px 16px; display: flex; gap: 12px; align-items: center; box-shadow: 0 8px 30px rgba(10,16,48,.3); transition: .25s; max-width: calc(100vw - 32px); font-size: .92rem; }
.s-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.s-toast button { border: 0; background: var(--sun); color: var(--sun-ink); border-radius: 10px; padding: 8px 10px; font: 700 .85rem "DM Sans", sans-serif; cursor: pointer; white-space: nowrap; }
@media (min-width: 701px) { .s-toast { bottom: 24px; } }
/* feuille de partage */
.shs { border: 0; padding: 0; margin: auto; width: min(560px, 100vw); max-height: 100dvh; background: var(--surface); color: var(--ink); border-radius: 18px; box-shadow: 0 20px 60px rgba(10,16,48,.35); }
.shs::backdrop { background: rgba(10,16,48,.55); }
.shs-in { padding: 16px; display: grid; gap: 12px; }
.shs-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shs-h h2 { font-size: 1.2rem; margin: 0; }
.shs-x { border: 0; background: var(--surface2); color: var(--ink); width: 40px; height: 40px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; }
.shs-f { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--surface2); padding: 4px; border-radius: 12px; }
.shs-f button { border: 0; background: transparent; padding: 8px 4px; border-radius: 9px; font: 600 .86rem "DM Sans", sans-serif; color: var(--ink); cursor: pointer; min-height: 40px; }
.shs-f button small { display: block; font-weight: 500; font-size: .72rem; color: var(--muted); }
.shs-f [aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(10,16,48,.15); }
.shs-p { display: grid; place-items: center; background: var(--bg); border-radius: 12px; padding: 10px; min-height: 200px; }
.shs-p img { max-width: 100%; max-height: 46dvh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 4px 18px rgba(10,16,48,.2); }
.shs-n { font-size: .82rem; color: var(--muted); margin: 0; text-align: center; }
.shs-a { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shs-a .btn { min-height: 46px; justify-content: center; }
.shs-a .wide { grid-column: 1 / -1; }
.shs-t { width: 100%; min-height: 84px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: .9rem/1.45 "DM Sans", system-ui, sans-serif; background: var(--bg); color: var(--ink); resize: vertical; }
.shs-ok { font-size: .85rem; color: var(--good); min-height: 1.2em; margin: 0; text-align: center; }
@media (max-width: 600px) { .shs { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; } .shs-p img { max-height: 38dvh; } }
/* vérifier une image */
.vf { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.vf input { flex: 1 1 200px; min-height: 48px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; font: 700 1.1rem "DM Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; background: var(--surface); color: var(--ink); }
.vf-r { margin-top: 14px; }
.vf-r img { max-width: min(100%, 420px); border-radius: 10px; box-shadow: 0 4px 18px rgba(10,16,48,.2); }
/* tableaux sur téléphone : les tableaux de texte deviennent des fiches */
@media (max-width: 700px) {
  table.stk, table.stk tbody, table.stk tr, table.stk td, table.stk th { display: block; width: auto; }
  table.stk thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stk tr { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; background: var(--surface); }
  table.stk td, table.stk tbody th { border: 0 !important; padding: 4px 0 !important; text-align: left !important; }
  table.stk tbody th { font-weight: 700; font-size: 1.02rem; }
  table.stk td[data-l]::before { content: attr(data-l); display: block; font: 700 .7rem/1.3 "DM Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
  .stk-wrap { overflow: visible !important; }
  .scroll-hint { position: relative; }
}
.sh-row { margin: 10px 0 0; }
.page-head .sh-row .shr, .chap-hero .sh-row .shr { color: var(--night-ink); border-color: rgba(243,246,252,.45); background: transparent; }
.facts li { position: relative; }
.facts li > .shr.mini { position: absolute; top: 6px; right: 4px; opacity: .55; }
.facts li > .shr.mini:hover, .facts li > .shr.mini:focus-visible { opacity: 1; }
.facts li > a { padding-right: 34px; }
li.mz .f .shr.mini { margin-left: auto; }
h2 .shr-in { font-size: 1rem; }
.sc-n.txt b { font-size: 1.15rem; }
.is-simple .m-modehint { display: none; }
.sc .sc-more { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 2px; }
.sc .sc-more[open] summary { margin-bottom: 4px; }
.sc .sc-f { border-top: 0; padding-top: 0; }
@media (max-width: 700px) { .lines .l { grid-template-columns: minmax(0, 1fr) auto; } .lines .l > span:first-child { min-width: 0; overflow-wrap: anywhere; } .lines .l .r { white-space: nowrap; } }
@media (min-width: 701px) { .is-simple .s-hero .wrap { max-width: 780px; } }
:root[data-theme="dark"] .sc-so { background: var(--surface2); border-left: 4px solid var(--sun); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sc-so { background: var(--surface2); border-left: 4px solid var(--sun); } }