/* Layout : feuille de cahier quadrillée ; accueil = intro dessinée + recherche, puis cartes par catégorie ;
   page outil = carte « calculatrice » (formulaire | résultat + graphique), explications, outils liés. */
:root {
  --paper: #f8faff;
  --grid: rgba(43, 80, 232, .075);
  --margin-line: rgba(236, 71, 102, .28);
  --surface: #ffffff;
  --surface-2: #eef2fb;
  --ink: #1a1f36;
  --muted: #5b6384;
  --line: #d8deee;
  --accent: #2b50e8;
  --marker: rgba(255, 214, 10, .55);
  --tape: rgba(255, 221, 87, .7);
  --skin: #f3c9a8;
  --hair: #2a2e47;
  --wood: #d9a877;
  --money: #10a058;
  --everyday: #ec8a00;
  --health: #e8445e;
  --dates: #7a5af8;
  --math: #0a9cb4;
  --local: #c0268f;
  --study: #b97800;
  --convert: #2f6bff;
  --games: #d4380d;
  --business: #0f766e;
  --science: #4338ca;
  --food: #4d7c0f;
  --code: #334155;
  --shadow: 0 1px 0 rgba(26, 31, 54, .06), 0 10px 30px -12px rgba(26, 31, 54, .18);
  --shadow-pop: 4px 4px 0 var(--ink);
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --r-sketch: 18px 12px 20px 14px / 14px 20px 12px 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #11152b; --grid: rgba(255, 255, 255, .045); --margin-line: rgba(255, 112, 136, .25);
    --surface: #181d38; --surface-2: #212848; --ink: #eef1ff; --muted: #a0a8c8; --line: #2c3458; --accent: #7c95ff;
    --marker: rgba(255, 214, 10, .28); --tape: rgba(255, 221, 87, .45); --hair: #0b0d1c; --wood: #8a6440;
    --money: #3ddc8c; --everyday: #ffb13d; --health: #ff7189; --dates: #a993ff; --math: #3fd3e8; --local: #f06bc8; --study: #f2c14e; --convert: #7aa2ff; --games: #ff7a45; --code: #a5b4cf; --business: #2dd4bf; --science: #8b93ff; --food: #a3d65c;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #11152b; --grid: rgba(255, 255, 255, .045); --margin-line: rgba(255, 112, 136, .25);
  --surface: #181d38; --surface-2: #212848; --ink: #eef1ff; --muted: #a0a8c8; --line: #2c3458; --accent: #7c95ff;
  --marker: rgba(255, 214, 10, .28); --tape: rgba(255, 221, 87, .45); --hair: #0b0d1c; --wood: #8a6440;
  --money: #3ddc8c; --everyday: #ffb13d; --health: #ff7189; --dates: #a993ff; --math: #3fd3e8; --local: #f06bc8; --study: #f2c14e; --convert: #7aa2ff; --games: #ff7a45; --code: #a5b4cf; --business: #2dd4bf; --science: #8b93ff; --food: #a3d65c;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font: 16px/1.6 var(--font-body);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
a { color: var(--accent); }
img { max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.hand { font-family: var(--font-hand); }

/* ---------- header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--paper); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 2px solid var(--ink); }
.site-header .wrap { display: flex; align-items: center; gap: 12px; padding-block: 10px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 800 21px/1 var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.logo-mark { display: grid; grid-template-columns: repeat(2, 11px); gap: 3px; transform: rotate(-6deg); }
.logo-mark i { width: 11px; height: 11px; border-radius: 3px; display: block; border: 1.5px solid var(--ink); }
.logo-mark i:nth-child(1) { background: var(--money); } .logo-mark i:nth-child(2) { background: var(--health); }
.logo-mark i:nth-child(3) { background: var(--dates); } .logo-mark i:nth-child(4) { background: var(--everyday); }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.search-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px 7px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 14px; }
.search-btn:hover { border-color: var(--ink); color: var(--ink); }
.search-btn svg, .icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
kbd { font: 600 11px var(--font-num); padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2); color: var(--muted); }
.icon-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink); font-size: 20px; line-height: 1; }
.icon-btn:hover { border-color: var(--ink); }
.cur-select { appearance: none; font: 700 13px var(--font-body); padding: 9px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.lang-switch { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.lang-switch a { padding: 4px 10px; border-radius: 999px; font: 700 13px/1.2 var(--font-body); letter-spacing: .04em; text-decoration: none; color: var(--muted); }
.lang-switch a[aria-current="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 640px) { .search-btn .label, .search-btn kbd, .cur-select { display: none; } .search-btn { padding: 9px; } }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: center; padding-block: 48px 28px; }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); padding-block: 28px 12px; } }
.hero-kicker { font: 700 24px/1 var(--font-hand); color: var(--health); transform: rotate(-2deg); display: inline-block; margin-bottom: 8px; }
.hero h1 { font: 800 clamp(38px, 5.6vw, 64px)/1.02 var(--font-display); letter-spacing: -.04em; margin: 0 0 16px; text-wrap: balance; }
.hl { background: linear-gradient(176deg, transparent 58%, var(--marker) 58%, var(--marker) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .08em; }
.hero-p { margin: 0 0 22px; color: var(--muted); font-size: 18px; max-width: 52ch; }
.search { position: relative; max-width: 560px; }
.search input { width: 100%; padding: 16px 18px 16px 50px; font: 500 17px var(--font-body); color: var(--ink); background: var(--surface); border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-pop); }
.search input:focus { outline: none; box-shadow: 6px 6px 0 var(--accent); }
.search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.hero-stats b { color: var(--ink); font-family: var(--font-num); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 8px 4px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.chip:hover { border-color: var(--cat); }
.chip b { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--cat); }

/* ---------- sections accueil ---------- */
.section-title { display: flex; align-items: center; gap: 10px; font: 800 24px/1.2 var(--font-display); letter-spacing: -.02em; margin: 0 0 14px; }
.section-title .note { font: 700 22px/1 var(--font-hand); color: var(--muted); letter-spacing: 0; transform: rotate(-2deg); }
.mine { padding-block: 18px 6px; display: grid; gap: 22px; }
.mine-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hist-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.hist-item { display: grid; gap: 2px; padding: 12px 14px; background: var(--surface); border: 1.5px dashed var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.hist-item:hover { border-color: var(--ink); border-style: solid; }
.hist-item strong { font-size: 14px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-item span { font: 600 15px var(--font-num); overflow-wrap: anywhere; }
.hist-item small { color: var(--muted); font-size: 12.5px; }

.cat { padding-block: 22px; scroll-margin-top: 80px; }
.cat-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font: 800 18px/1 var(--font-display); color: #fff; background: var(--cat); border: 2px solid var(--ink); transform: rotate(-4deg); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; }
.card-wrap { position: relative; min-width: 0; }
.card { height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 16px 44px 16px 18px; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-sketch); text-decoration: none; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translate(-2px, -2px) rotate(-.4deg); box-shadow: 5px 5px 0 var(--cat, var(--accent)); }
.card strong { font: 700 16.5px/1.3 var(--font-body); }
.card .desc { color: var(--muted); font-size: 14px; line-height: 1.45; }
.card::before { content: ""; width: 30px; height: 6px; border-radius: 6px; background: var(--cat, var(--accent)); margin-bottom: 8px; }
.star { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 19px; line-height: 1; }
.star:hover { background: var(--surface-2); color: var(--everyday); }
.star.on { color: var(--everyday); }
.star::before { content: "☆"; }
.star.on::before { content: "★"; }
.no-result { color: var(--muted); padding-block: 16px; font: 700 22px var(--font-hand); }

.c-money { --cat: var(--money); } .c-everyday { --cat: var(--everyday); } .c-health { --cat: var(--health); } .c-dates { --cat: var(--dates); }
.c-math { --cat: var(--math); } .c-local { --cat: var(--local); } .c-study { --cat: var(--study); } .c-convert { --cat: var(--convert); } .c-games { --cat: var(--games); } .c-business { --cat: var(--business); } .c-code { --cat: var(--code); } .c-science { --cat: var(--science); } .c-food { --cat: var(--food); }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding-block: 26px; }
.feature { padding: 16px 18px; border-left: 4px solid var(--cat); background: var(--surface); border-radius: 0 12px 12px 0; }
.feature strong { display: block; font: 700 16px var(--font-body); margin-bottom: 2px; }
.feature span { color: var(--muted); font-size: 14.5px; }

/* ---------- page outil ---------- */
.crumbs { padding-block: 22px 0; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.tool-head { padding-block: 10px 22px; max-width: 800px; display: grid; gap: 10px; }
.tool-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px/1 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--cat); }
.tool-title { display: flex; align-items: flex-start; gap: 10px; }
.tool-head h1 { font: 800 clamp(30px, 5vw, 50px)/1.04 var(--font-display); letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.tool-title .star { position: static; flex: none; width: 42px; height: 42px; font-size: 24px; border: 1.5px solid var(--line); background: var(--surface); margin-top: 4px; }
.tool-head p { margin: 0; color: var(--muted); font-size: 18px; }

.tool-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
@media (max-width: 980px) { .tool-layout { grid-template-columns: minmax(0, 1fr); } }

#calc { position: relative; background: var(--surface); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--cat); padding: 24px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; }
#calc::before { content: ""; position: absolute; width: 110px; height: 28px; background: var(--tape); top: -15px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
@media (max-width: 760px) { #calc { grid-template-columns: minmax(0, 1fr); padding: 18px; } }
.calc-form { display: grid; gap: 14px; align-content: start; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 700; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; padding: 12px 14px; font: 600 17px var(--font-body); color: var(--ink);
  background: var(--surface-2); border: 2px solid transparent; border-radius: 12px; appearance: none;
}
.field textarea { font: 500 16px/1.55 var(--font-num); resize: vertical; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cat, var(--accent)); background-color: var(--surface); }
.calc-out { display: grid; gap: 14px; align-content: start; min-width: 0; }
.calc-result { background: var(--surface-2); border-radius: 16px; padding: 18px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.res { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 9px; border-bottom: 1.5px dashed var(--line); flex-wrap: wrap; }
.res:last-child { border-bottom: 0; }
.res-k { color: var(--muted); font-size: 14.5px; }
.res-v { font: 600 16px/1.3 var(--font-num); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.res-big { flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 2px 14px; border-bottom: 2px solid var(--line); }
.res-big .res-k { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; color: var(--cat); }
.res-big .res-v { font: 700 clamp(28px, 5vw, 42px)/1.1 var(--font-num); text-align: left; letter-spacing: -.03em; position: relative; }
.res-big .res-v.pop { animation: num-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes num-pop { from { transform: scale(.92); opacity: .4; } to { transform: none; opacity: 1; } }
.calc-empty { color: var(--muted); margin: 0; font: 700 21px/1.3 var(--font-hand); }
.calc-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; border-top: 1.5px dashed var(--line); padding-top: 16px; }
.btn { display: inline-flex; align-items: center; gap: 7px; font: 700 14px var(--font-body); padding: 9px 15px; border-radius: 999px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); cursor: pointer; transition: transform .1s ease, box-shadow .1s ease; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: none; box-shadow: none; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn-ghost { border-color: transparent; color: var(--muted); }
.btn-ghost:hover { box-shadow: none; color: var(--ink); }
.btn-primary { background: var(--cat, var(--accent)); color: #fff; }

/* graphiques */
.chart-box { display: grid; gap: 14px; }
.chart { background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; min-width: 0; }
.chart svg { display: block; width: 100%; height: auto; max-width: 100%; }
.chart .ax { font: 500 14px var(--font-num); fill: var(--muted); }
.legend-unit { margin-left: auto; color: var(--muted); font-size: 13px; }
.chart-donut { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; }
.chart-donut svg { width: 120px; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.legend b { margin-left: auto; font: 600 13.5px var(--font-num); }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.gauge { position: relative; height: 18px; border-radius: 999px; background: var(--surface-2); border: 1.5px solid var(--line); margin-block: 6px 26px; }
.gauge-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--cat, var(--accent)); transition: width .4s ease; }
.gauge-mark { position: absolute; top: 22px; transform: translateX(-50%); font: 600 11px var(--font-num); color: var(--muted); }
.gauge-mark::before { content: ""; position: absolute; left: 50%; top: -22px; height: 18px; border-left: 1.5px dashed var(--muted); }
.chart-note { margin: 0; color: var(--muted); font-size: 14px; }
.bands { position: relative; display: flex; height: 16px; border-radius: 999px; overflow: visible; margin-top: 34px; }
.bands i { display: block; height: 100%; }
.bands i:first-child { border-radius: 999px 0 0 999px; } .bands i:last-of-type { border-radius: 0 999px 999px 0; }
.pin { position: absolute; top: -32px; transform: translateX(-50%); background: var(--ink); color: var(--paper); font: 700 12px var(--font-num); padding: 3px 7px; border-radius: 6px; transition: left .4s ease; }
.pin::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.band-ticks { position: relative; height: 18px; margin-top: 4px; }
.band-ticks span { position: absolute; transform: translateX(-50%); font: 500 11px var(--font-num); color: var(--muted); }

.side { display: grid; gap: 16px; }
.related { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-sketch); padding: 16px; }
.related h2 { font: 700 23px/1.1 var(--font-hand); margin: 0 0 8px; }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.related a { display: block; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 15px; }
.related a:hover { background: var(--surface-2); }
.tip-card { background: var(--marker); border-radius: 4px; padding: 14px 16px; transform: rotate(-1deg); font: 600 20px/1.25 var(--font-hand); color: var(--ink); }
.tip-card kbd { font-size: 12px; }

.explain { max-width: 780px; padding-block: 30px 8px; }
.explain h2 { font: 800 24px/1.2 var(--font-display); letter-spacing: -.02em; margin: 0 0 10px; }
.explain p { margin: 0 0 16px; }
.formula { font: 500 15px/1.65 var(--font-num); background: var(--surface); border: 2px solid var(--ink); border-left: 8px solid var(--cat); border-radius: 12px; padding: 14px 16px; overflow-x: auto; }

/* publicités (affichées seulement quand AdSense est configuré) */
.ad { display: block; min-height: 120px; border-radius: 12px; overflow: hidden; }
.ad-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ad-wide { margin-block: 24px; }

/* ---------- palette Ctrl+K ---------- */
.palette { position: fixed; inset: 0; z-index: 60; background: rgba(10, 12, 28, .45); display: grid; justify-items: center; align-items: start; padding: max(70px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); }
.palette-card { width: 100%; max-width: 620px; background: var(--surface); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 8px 8px 0 var(--accent); overflow: hidden; }
.palette-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1.5px solid var(--line); }
.palette-search svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; }
.palette-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 600 18px var(--font-body); color: var(--ink); }
.palette-search input:focus { outline: none; }
.palette-list { list-style: none; margin: 0; padding: 6px; max-height: min(60vh, 460px); overflow-y: auto; }
.palette-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.palette-list li.sel { background: var(--surface-2); }
.palette-list .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cat); flex: none; }
.palette-list span { display: grid; min-width: 0; }
.palette-list strong { font-size: 15.5px; }
.palette-list small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.star-mini { margin-left: auto; color: var(--everyday); }
.palette-none { color: var(--muted); justify-content: center; }

/* ---------- toast ---------- */
.toast-box { position: fixed; z-index: 70; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 14.5px; animation: toast-in .25s ease; transition: opacity .3s, transform .3s; }
.toast.out { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- pages texte & footer ---------- */
.page { max-width: 780px; padding-block: 32px; }
.page h1 { font: 800 38px/1.1 var(--font-display); letter-spacing: -.03em; }
.page h2 { font: 700 21px/1.2 var(--font-display); margin-top: 28px; }
.site-footer { margin-top: 56px; border-top: 2px solid var(--ink); background: var(--surface); }
.site-footer .wrap { padding-block: 28px calc(28px + 70px); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 14px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.footer-note { font: 700 20px/1 var(--font-hand); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =================== HERO : populaires + calculatrice =================== */
.popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.popular .hand { font-size: 22px; color: var(--muted); margin-right: 2px; }
.pop { padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--cat); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700; background: color-mix(in srgb, var(--cat) 10%, var(--surface)); transition: background .15s ease, transform .15s ease; }
.pop:hover { background: color-mix(in srgb, var(--cat) 22%, var(--surface)); transform: translateY(-1px); }
.hero-calc { position: relative; justify-self: center; width: 100%; max-width: 360px; display: grid; gap: 8px; justify-items: center; }
.hero-calc [data-calc-widget] { width: 100%; transform: rotate(2deg); }
.hero-calc .tape { position: absolute; z-index: 2; width: 96px; height: 26px; background: var(--tape); top: -10px; left: 50%; transform: translateX(-50%) rotate(-4deg); }
.hero-calc-note { margin: 6px 0 0; font-size: 21px; color: var(--muted); }
.replay { font-size: 13px; }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; } .hero-calc [data-calc-widget] { transform: none; } }

/* =================== CALCULATRICE HOD-35 =================== */
.hc {
  --hc-body: #2a2f4a; --hc-body-2: #1d2136; --hc-key: #3a4066; --hc-key-2: #31365a; --hc-key-txt: #eef1ff; --hc-edge: #12152a;
  --hc-lcd: #c8d8b2; --hc-lcd-2: #b4c79a; --hc-lcd-ink: #1c2a14;
  position: relative; border-radius: 28px; padding: 18px 18px 20px;
  background: linear-gradient(160deg, var(--hc-body), var(--hc-body-2));
  border: 2px solid var(--ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 -4px 0 rgba(0, 0, 0, .25), 8px 8px 0 var(--ink);
  color: var(--hc-key-txt); display: grid; gap: 12px; outline: none;
}
.hc:focus-visible { box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -4px 0 rgba(0,0,0,.25), 8px 8px 0 var(--accent); }
.hc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hc-brand { font: 800 14px/1 var(--font-display); letter-spacing: .12em; color: #c9cfec; }
.hc-brand b { color: #ffd23f; }
.hc-solar { display: grid; grid-template-columns: repeat(4, 16px); gap: 2px; padding: 3px; border-radius: 5px; background: #0d0f1e; border: 1px solid #000; }
.hc-solar i { height: 12px; background: linear-gradient(180deg, #3b2a1c, #22170f); border-radius: 1px; }
.hc-screen { position: relative; border-radius: 12px; padding: 10px 14px 8px; background: linear-gradient(180deg, var(--hc-lcd), var(--hc-lcd-2)); color: var(--hc-lcd-ink); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .35); border: 2px solid #0b0d1a; font-family: var(--font-num); min-height: 92px; display: grid; align-content: end; text-align: right; overflow: hidden; }
.hc-ind { position: absolute; left: 12px; top: 8px; display: flex; gap: 8px; font: 700 10px var(--font-num); letter-spacing: .08em; opacity: .55; }
.hc-ind .on { opacity: 1; }
.hc-expr { font-size: 14px; min-height: 18px; opacity: .75; overflow-wrap: anywhere; }
.hc-res-wrap { position: relative; }
.hc-ghost, .hc-res { font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: clip; direction: rtl; text-align: right; }
.hc-ghost { position: absolute; inset: 0; opacity: .08; pointer-events: none; }
.hc-res { position: relative; }
.hc-res span { direction: ltr; unicode-bidi: embed; }
.hc-res.err { animation: lcd-shake .3s; }
@keyframes lcd-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.hc-row { display: flex; gap: 6px; }
.hc-pill { flex: 1; height: 26px; border-radius: 999px; border: 1.5px solid #000; background: #1b1f36; color: #aab1d6; font: 800 11px var(--font-body); letter-spacing: .1em; cursor: pointer; }
.hc-pill[aria-pressed="true"] { background: #ffd23f; color: #1a1f36; }
.hc-keys, .hc-sci { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.hc-sci { grid-template-columns: repeat(5, 1fr); gap: 7px; }
.hc-k { position: relative; height: 52px; border-radius: 14px; border: 1.5px solid var(--hc-edge); background: linear-gradient(180deg, var(--hc-key), var(--hc-key-2)); color: var(--hc-key-txt); font: 700 20px var(--font-num); cursor: pointer; box-shadow: 0 4px 0 var(--hc-edge), inset 0 1px 0 rgba(255, 255, 255, .14); transition: transform .06s ease, box-shadow .06s ease, filter .1s; user-select: none; -webkit-tap-highlight-color: transparent; }
.hc-k:hover { filter: brightness(1.12); }
.hc-k:active, .hc-k.down { transform: translateY(3px); box-shadow: 0 1px 0 var(--hc-edge), inset 0 1px 0 rgba(255, 255, 255, .1); }
.hc-sci .hc-k { height: 38px; font-size: 15px; border-radius: 11px; background: linear-gradient(180deg, #2b3052, #242848); color: #c9cfec; }
.hc-k.op { background: linear-gradient(180deg, #4a63ff, #3a50e0); color: #fff; }
.hc-k.fn { background: linear-gradient(180deg, #5a607f, #4b5070); color: #fff; }
.hc-k.ac { background: linear-gradient(180deg, #ff6a7f, #e8445e); color: #fff; }
.hc-k.eq { background: linear-gradient(180deg, #ffd23f, #f5b800); color: #1a1f36; }
.hc-hist { background: #151830; border: 1.5px solid #000; border-radius: 12px; padding: 8px; max-height: 170px; overflow-y: auto; }
.hc-hist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hc-hist li button { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: 500 13px var(--font-num); color: #9aa2c8; text-align: left; }
.hc-hist li button b { color: #fff; }
.hc-hist li button:hover { background: #22264a; }
.hc-hist .muted { color: #7880a8; font-size: 13px; padding: 6px 8px; }
.hc-hist-head { display: flex; justify-content: space-between; align-items: center; color: #9aa2c8; font: 700 12px var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px 6px; }
.hc-hist-head button { background: none; border: 0; color: #ff8fa1; font: 700 12px var(--font-body); cursor: pointer; }

/* fenêtre flottante */
.fab { position: fixed; z-index: 50; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 60px; height: 60px; border-radius: 20px; border: 2px solid var(--ink); background: linear-gradient(160deg, #2a2f4a, #1d2136); color: #ffd23f; display: grid; place-items: center; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: transform .12s ease; }
.fab:hover { transform: translate(-2px, -2px) rotate(-5deg); }
.fab svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fab[aria-expanded="true"] { background: var(--accent); color: #fff; }
.fcalc { position: fixed; z-index: 55; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(92px + env(safe-area-inset-bottom, 0px)); width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow-y: auto; transform-origin: bottom right; animation: fcalc-in .22s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes fcalc-in { from { opacity: 0; transform: scale(.85) translateY(10px); } }
.fcalc .hc { box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -4px 0 rgba(0,0,0,.25), 6px 6px 0 var(--ink); }
.hc-close { width: 28px; height: 28px; border-radius: 999px; border: 1.5px solid #000; background: #1b1f36; color: #c9cfec; cursor: pointer; font-size: 17px; line-height: 1; }

/* =================== CARTES (raffinées) =================== */
.card { padding: 16px 44px 16px 18px; gap: 6px; }
.card::before { content: none; }
.card-top { display: flex; align-items: center; gap: 10px; }
.card-badge { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--cat) 16%, var(--surface)); color: var(--cat); font: 800 15px/1 var(--font-display); border: 1.5px solid color-mix(in srgb, var(--cat) 45%, transparent); }
.card .go { margin-top: auto; padding-top: 6px; font: 700 13px var(--font-body); color: var(--cat); opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
.card:hover .go, .card:focus-visible .go { opacity: 1; transform: none; }

/* =================== INTRO PLEIN ÉCRAN =================== */
.intro { display: none; }
html.intro-on { overflow: hidden; }
html.intro-on .intro { display: block; animation: intro-safety 0s linear 9s forwards; }
.intro {
  position: fixed; inset: 0; z-index: 100; overflow: hidden; color: var(--ink);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  transition: opacity .5s ease, visibility .5s;
}
.intro.out { opacity: 0; visibility: hidden; }
.intro.reveal { background: transparent; }
.intro.reveal .ib-center, .intro.reveal .ib-bg, .intro.reveal .ib-glow, .intro.reveal .intro-skip { visibility: hidden; }
.ib-glow { position: absolute; left: 50%; top: 46%; width: min(900px, 140vw); aspect-ratio: 1; transform: translate(-50%, -50%) scale(.6); border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--health) 8%, transparent) 55%, transparent); }
.intro.run .ib-glow { animation: glow-in 1.6s ease-out .2s forwards; }
.ib-bg span { position: absolute; font: 700 calc(30px * var(--s)) / 1 var(--font-num); color: var(--accent); opacity: 0; transform: translate(-50%, -50%); }
.ib-bg span:nth-child(3n) { color: var(--health); } .ib-bg span:nth-child(3n+1) { color: var(--money); } .ib-bg span:nth-child(4n) { color: var(--dates); }
.intro.run .ib-bg span { animation: sym-in .8s ease .3s forwards, sym-float 5s ease-in-out var(--d) infinite alternate; }
.ib-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(14px, 2.4vh, 24px); padding: 24px 16px; text-align: center; }
.ib-lockup { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 26px); }
.ib-logo { --t: clamp(30px, 6.2vw, 62px); display: grid; grid-template-columns: repeat(2, var(--t)); gap: calc(var(--t) * .14); transform: rotate(-6deg); }
.ib-logo i { width: var(--t); height: var(--t); border-radius: calc(var(--t) * .24); border: 3px solid var(--ink); display: grid; place-items: center; opacity: 0; box-shadow: 3px 3px 0 var(--ink); }
.ib-logo i b { font: 800 calc(var(--t) * .5) / 1 var(--font-display); color: #fff; transform: scale(0); }
.ib-logo .t1 { background: var(--money); --fx: -46vw; --fy: -40vh; } .ib-logo .t2 { background: var(--health); --fx: 46vw; --fy: -44vh; }
.ib-logo .t3 { background: var(--dates); --fx: -44vw; --fy: 46vh; } .ib-logo .t4 { background: var(--everyday); --fx: 48vw; --fy: 42vh; }
.intro.run .ib-logo i { animation: tile-in .7s cubic-bezier(.2, 1.25, .4, 1) forwards; }
.intro.run .ib-logo .t2 { animation-delay: .08s; } .intro.run .ib-logo .t3 { animation-delay: .16s; } .intro.run .ib-logo .t4 { animation-delay: .24s; }
.intro.run .ib-logo { animation: logo-spin .6s cubic-bezier(.5, 0, .3, 1.4) .95s both; }
.intro.run .ib-logo i b { animation: pop .35s cubic-bezier(.34, 1.56, .64, 1) 1.25s forwards; }
.ib-word { display: flex; font: 800 clamp(44px, 10vw, 112px) / 1 var(--font-display); letter-spacing: -.045em; overflow: hidden; padding: .06em .04em .1em; }
.ib-word span { display: inline-block; transform: translateY(110%); }
.ib-word span:nth-child(n+5) { position: relative; color: var(--accent); }
.intro.run .ib-word span { animation: letter-up .55s cubic-bezier(.2, .9, .3, 1.2) calc(1.05s + var(--i) * 45ms) forwards; }
.ib-count { display: flex; align-items: baseline; gap: 12px; opacity: 0; transform: translateY(14px); }
.ib-count strong { font: 700 clamp(30px, 5vw, 52px) / 1 var(--font-num); letter-spacing: -.04em; min-width: 3ch; text-align: right; background: linear-gradient(transparent 62%, var(--marker) 62%); padding-inline: 4px; }
.ib-count span { font: 700 clamp(17px, 2.2vw, 22px) var(--font-body); color: var(--muted); }
.intro.run .ib-count { animation: rise .5s ease 1.75s forwards; }
.ib-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; }
.ib-cats span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); font: 600 clamp(12.5px, 1.5vw, 14px) var(--font-body); opacity: 0; transform: translateY(10px) scale(.9); }
.ib-cats b { width: 9px; height: 9px; border-radius: 50%; background: var(--cat); }
.intro.run .ib-cats span { animation: rise .4s cubic-bezier(.34, 1.4, .64, 1) calc(2s + var(--i) * 55ms) forwards; }
.ib-tag { margin: 6px 0 0; min-height: 1.3em; font: 700 clamp(22px, 3.2vw, 34px) / 1.2 var(--font-display); letter-spacing: -.02em; }
.ib-caret { display: inline-block; width: 3px; height: 1em; margin-left: 3px; vertical-align: -.12em; background: var(--accent); opacity: 0; }
.intro.run .ib-caret { animation: caret .9s steps(1) 2.75s infinite; }
.ib-sub { margin: 0; font: 600 14px var(--font-body); color: var(--muted); opacity: 0; }
.intro.run .ib-sub { animation: rise .5s ease 3.9s forwards; }
.ib-wipe { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); pointer-events: none; }
.ib-wipe i { transform: translateY(101%); }
.ib-wipe i:nth-child(1) { background: var(--money); } .ib-wipe i:nth-child(2) { background: var(--health); } .ib-wipe i:nth-child(3) { background: var(--accent); }
.ib-wipe i:nth-child(4) { background: var(--dates); } .ib-wipe i:nth-child(5) { background: var(--everyday); }
.intro.wipe .ib-wipe i { animation: wipe-in .42s cubic-bezier(.7, 0, .3, 1) calc(var(--w) * 55ms) forwards; }
.intro.reveal .ib-wipe i { transform: none; animation: wipe-out .5s cubic-bezier(.7, 0, .3, 1) calc(var(--w) * 55ms) forwards; }
.ib-wipe i:nth-child(1) { --w: 0; } .ib-wipe i:nth-child(2) { --w: 1; } .ib-wipe i:nth-child(3) { --w: 2; } .ib-wipe i:nth-child(4) { --w: 3; } .ib-wipe i:nth-child(5) { --w: 4; }
.intro-skip { position: absolute; z-index: 2; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); padding: 9px 16px; border-radius: 999px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font: 700 14px var(--font-body); cursor: pointer; }
.intro-skip:hover { box-shadow: 3px 3px 0 var(--ink); }
@media (max-width: 560px) { .ib-lockup { flex-direction: column; gap: 18px; } .ib-cats { max-width: 340px; } .ib-cats span:nth-child(n+7) { display: none; } }

@keyframes intro-safety { to { visibility: hidden; opacity: 0; } }
@keyframes glow-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes sym-in { to { opacity: .16; } }
@keyframes sym-float { from { margin-top: -10px; rotate: -6deg; } to { margin-top: 12px; rotate: 6deg; } }
@keyframes tile-in { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(-90deg) scale(.6); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes logo-spin { from { transform: rotate(-6deg); } to { transform: rotate(-96deg); } }
@keyframes pop { to { transform: scale(1) rotate(90deg); } }
@keyframes letter-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes caret { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes wipe-in { to { transform: none; } }
@keyframes wipe-out { from { transform: none; } to { transform: translateY(-101%); } }
@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } }

.chart-swatch { display: grid; gap: 10px; }
.swatch-main { height: 90px; border-radius: 12px; border: 1.5px solid var(--line); display: grid; place-items: center; font: 700 22px var(--font-body); }
.swatch-row { display: flex; height: 30px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--line); }
.swatch-row i { flex: 1; }
.card-badge { font-size: 13px; letter-spacing: -.04em; }

/* ---------- choix de catégorie (accueil) ---------- */
.picker { padding-block: 20px 6px; scroll-margin-top: 76px; }
.picker-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.tile { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "ico name" "ico count" "ex ex"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 16px; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-sketch); color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.tile:hover, .tile:focus-visible { transform: translate(-2px, -2px) rotate(-.5deg); box-shadow: 5px 5px 0 var(--cat); }
.tile-ico { grid-area: ico; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font: 800 20px/1 var(--font-display); letter-spacing: -.04em; color: #fff; background: var(--cat); border: 2px solid var(--ink); transform: rotate(-4deg); }
.tile strong { grid-area: name; font: 800 17px/1.2 var(--font-display); letter-spacing: -.01em; }
.tile small { grid-area: count; color: var(--cat); font: 700 13px var(--font-body); }
.tile-ex { grid-area: ex; margin-top: 10px; padding-top: 10px; border-top: 1.5px dashed var(--line); color: var(--muted); font-size: 13px; line-height: 1.4; }
.tile-all { --cat: var(--accent); background: var(--surface-2); border-style: dashed; }
#picker-change { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font: 700 14px var(--font-body); cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
#picker-change:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--accent); }
#picker-change[hidden] { display: none; }
.tile-all .tile-ico { background: var(--ink); color: var(--paper); }
/* une fois choisie : barre compacte */
.picker.compact .tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.picker.compact .tile { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-width: 1.5px; border-color: var(--line); border-radius: 999px; }
.picker.compact .tile:hover { transform: none; box-shadow: none; border-color: var(--cat); }
.picker.compact .tile-ico { width: 26px; height: 26px; border-radius: 999px; font-size: 12px; border-width: 1.5px; transform: none; }
.picker.compact .tile strong { font: 700 14px var(--font-body); }
.picker.compact .tile small { color: var(--muted); font-size: 12px; }
.picker.compact .tile-ex { display: none; }
.picker.compact .tile.on { border-color: var(--ink); background: color-mix(in srgb, var(--cat) 18%, var(--surface)); box-shadow: 3px 3px 0 var(--cat); }
.picking .cat:not(.on) { display: none; }
.picking.none-picked .cat { display: none; }
.picking.searching .cat { display: block; }
.picking.searching .cat[hidden] { display: none; }
@media (max-width: 640px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ico" "name" "count"; padding: 13px; row-gap: 6px; }
  .tile-ico { width: 40px; height: 40px; font-size: 17px; }
  .tile strong { font-size: 15.5px; }
  .tile-ex { display: none; }
  .picker.compact .tiles { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .picker.compact .tile { flex: none; }
  .picker.compact .tile small { display: none; }
  .picker-head .section-title { margin-bottom: 10px; }
}

/* résultats longs (code, listes) */
.res-long .res-v { width: 100%; font: 500 14px/1.55 var(--font-num) !important; letter-spacing: 0 !important; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; max-height: 420px; overflow: auto; padding: 12px 14px; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 12px; }
.res-long.res-big .res-v { font-size: 14px !important; }
.field[hidden] { display: none !important; }

/* ---------- monétisation & SEO ---------- */
.ad { min-height: 250px; }
.ad-sticky { position: sticky; top: 84px; min-height: 600px; }
@media (max-width: 980px) { .ad-sticky { position: static; min-height: 250px; } }
.example, .faq { max-width: 780px; padding-block: 18px 8px; }
.example h2, .faq h2 { font: 800 24px/1.2 var(--font-display); letter-spacing: -.02em; margin: 0 0 10px; }
.example p { margin: 10px 0 6px; color: var(--muted); }
.example ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.example li { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 9px 14px; border-radius: 10px; background: var(--surface); border: 1.5px solid var(--line); }
.example li span { color: var(--muted); font-size: 14.5px; }
.example li b { font: 600 15px var(--font-num); text-align: right; overflow-wrap: anywhere; }
.example .ex-out li { border-color: color-mix(in srgb, var(--cat) 45%, var(--line)); background: color-mix(in srgb, var(--cat) 7%, var(--surface)); }
.faq details { border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 8px; }
.faq summary { cursor: pointer; padding: 13px 16px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cat); font: 800 20px/1 var(--font-display); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 16px 14px; color: var(--muted); line-height: 1.55; }
.embed-box { margin-top: 14px; border: 1.5px dashed var(--line); border-radius: 12px; padding: 10px 14px; background: var(--surface); }
.embed-box summary { cursor: pointer; font-weight: 700; font-size: 14.5px; color: var(--muted); }
.embed-box summary span { font-family: var(--font-num); color: var(--cat); margin-right: 4px; }
.embed-box p { font-size: 14px; color: var(--muted); }
.embed-box textarea, .embed-gen textarea { width: 100%; font: 12.5px/1.5 var(--font-num); padding: 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); resize: vertical; }
.embed-box .btn { margin-top: 8px; }
.cat-head { display: flex; gap: 20px; align-items: flex-start; padding-block: 18px 6px; }
.cat-head h1 { font: 800 clamp(30px, 5vw, 44px)/1.1 var(--font-display); letter-spacing: -.03em; margin: 0 0 8px; }
.cat-head p { margin: 0 0 8px; max-width: 720px; color: var(--muted); line-height: 1.55; }
.cat-n { font: 700 14px var(--font-body); color: var(--cat); }
.cat-icon.big { width: 64px; height: 64px; font-size: 28px; border-radius: 16px; flex: none; }
.cat-list { padding-block: 16px; }
.cat-others { padding-block: 10px 30px; }
.page .perks { padding-left: 20px; line-height: 1.7; }
.embed-gen { display: grid; gap: 10px; padding: 18px; border: 2px solid var(--ink); border-radius: var(--r-sketch); background: var(--surface); }
.embed-gen select { padding: 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.contact-mail { font: 800 24px var(--font-display); }
@media (max-width: 640px) { .cat-head { flex-direction: column; gap: 12px; } }
/* page intégrée (iframe) */
html.embed, .embed-body { background: var(--paper); background-image: none; }
.embed-body { margin: 0; padding: 12px; }
.embed-head h1 { font: 800 20px/1.2 var(--font-display); margin: 0 0 10px; letter-spacing: -.02em; }
.embed-body #calc { box-shadow: none; }
.embed-credit { margin: 10px 2px 0; font-size: 13px; color: var(--muted); }
.embed-credit a { color: var(--accent); font-weight: 700; }