/* Tonton Pognon — V3.0 « Le surligneur », 7 novembre 2026.
   Une famille de caractères, une couleur de marque, une couleur par question.
   Les classes sont celles des contenus de content/ ; seule l'apparence change. */

@font-face{font-family:Bricolage;src:url('assets/fonts/bricolagegrotesque/BricolageGrotesque-variable.woff2') format('woff2');font-weight:200 800;font-stretch:75% 100%;font-display:swap}

:root{
  --encre:#141318;--blanc:#FBFAF7;--pur:#FFFFFF;--gris:#5E5B66;--filet:#D9D6CF;--filet-fort:#B9B5AD;
  --surligneur:#FFE44D;
  --quotidien:#FF8F5E;--temps:#8C9BFF;--petites:#5CD6E6;--deux:#FFA3D1;
  --rubrique:var(--surligneur);
  --trait:3px;--radius:14px;--radius-s:8px;--wrap:1240px;--gutter:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.8,.2,1);--t-rapide:200ms;--t-etat:420ms;--t-trait:900ms;
  --ink:var(--encre);--plum:var(--encre);--paper:var(--blanc);--white:var(--pur);--muted:var(--gris);--line:var(--filet)
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:144px;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}body{margin:0;background:var(--blanc);color:var(--encre);font-family:Bricolage,system-ui,sans-serif;font-optical-sizing:auto;font-size:18px;line-height:1.55;overflow-wrap:break-word}
@media(max-width:640px){body{font-size:17px}}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
h1,h2,h3,h4{line-height:1.04;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.6rem,7vw,5.8rem)}h2{font-size:clamp(2rem,4.6vw,3.4rem)}h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}h4{font-size:1.12rem;line-height:1.2}
p+p,p+div,p+figure,p+details,p+section,div+p,figure+p,details+p,section+p,p+.callout,p+.prediction,p+.answer-note{margin-top:1em}
strong{font-weight:700}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--rubrique)}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px;border-radius:4px;box-shadow:0 0 0 6px var(--surligneur)}
button{font:inherit;color:inherit}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.small{font-size:.84rem;color:var(--gris)}
.skip{position:absolute;left:12px;top:-60px;background:var(--surligneur);padding:10px 14px;z-index:50;font-weight:700}.skip:focus{top:12px}
.eyebrow,.kicker,.number-label,.story-rubric{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:0;line-height:1.3}
.eyebrow.plum{color:var(--encre)}
.text-link{font-weight:700;display:inline-flex;align-items:center;gap:.4em;min-height:44px}
.text-link span[aria-hidden]{display:none}
.r-quotidien,[data-page=budget],[data-page=epargne-de-precaution]{--rubrique:var(--quotidien)}
.r-temps,[data-page=capitalisation]{--rubrique:var(--temps)}
.r-petites,[data-page=petites-sommes]{--rubrique:var(--petites)}
.r-deux,[data-page=budget-couple]{--rubrique:var(--deux)}

/* Le geste de marque : le surligneur */
.hl{background-image:linear-gradient(transparent 52%,var(--surligneur) 52%,var(--surligneur) 94%,transparent 94%);background-repeat:no-repeat;background-size:100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.06em}
html.js[data-motion=on] .hl:not(.on){background-size:0% 100%}
html.js .hl{transition:background-size var(--t-trait) var(--ease)}
.num{font-weight:800;font-stretch:78%;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.03em;line-height:.95}

/* En-tête */
.site-header{position:sticky;top:0;z-index:30;background:var(--blanc);border-bottom:var(--trait) solid var(--encre)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-weight:800;font-stretch:90%;font-size:1.32rem;letter-spacing:-.035em;white-space:nowrap}
.brand svg{width:44px;height:auto;flex:none}
.main-nav{display:flex;gap:clamp(10px,2.4vw,28px);font-weight:600;font-size:.95rem}
.main-nav a{text-decoration:none;padding:6px 2px;border-bottom:3px solid transparent;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.main-nav a[aria-current=page],.main-nav a:hover{border-bottom-color:var(--encre)}
.menu-toggle{display:none}
.reading-progress{position:absolute;left:0;bottom:calc(-1*var(--trait) - 5px);height:5px;width:0;background:var(--surligneur)}
@media(max-width:540px){.brand-mot{display:none}.brand svg{width:48px}.main-nav{font-size:.9rem;gap:12px}.header-inner{gap:8px}.article-nav{position:static}html{scroll-padding-top:84px}}
@media(max-width:370px){.brand svg{width:40px}.main-nav{font-size:.82rem;gap:10px}}
@media(max-width:420px){.article-hero h1 br,.hero h1 br,.article-body h2 br{display:none}}

/* Boutons */
.button,.btn{display:inline-flex;align-items:center;gap:.55em;min-height:48px;padding:.7em 1.15em;border-radius:99px;border:var(--trait) solid var(--encre);background:var(--encre);color:var(--blanc);font-weight:700;text-decoration:none;cursor:pointer;transition:transform var(--t-rapide) var(--ease),box-shadow var(--t-rapide) var(--ease)}
.button:hover,.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--surligneur)}
.btn.clair{background:var(--pur);color:var(--encre)}.btn.clair:hover{box-shadow:4px 4px 0 var(--encre)}
.button span[aria-hidden]{display:none}
.link-button{background:none;border:0;padding:0;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer;min-height:44px}
.preset{border:2px solid var(--encre);background:var(--pur);border-radius:99px;padding:.45em .9em;font-weight:700;cursor:pointer;min-height:44px}
.preset:hover{background:var(--surligneur)}

/* Champs */
input[type=number],input[type=search],textarea{font:inherit;color:inherit;background:var(--pur);border:2px solid var(--encre);border-radius:var(--radius-s);padding:10px 12px;width:100%;min-height:48px}
input[aria-invalid=true]{border-color:#B3261E;border-width:3px}
.error-message{color:#8A1C14;font-weight:700;margin-top:10px}
.money-field{display:block;margin-bottom:18px}.money-field>span{display:block;font-weight:700;margin-bottom:6px}
.input-unit,.input-shell{display:flex;align-items:center;gap:8px}
.input-unit>span,.input-shell>span[aria-hidden]{font-weight:800;font-size:1.2rem}
.input-shell{margin-top:6px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:var(--filet)}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:var(--filet)}
input[type=range]::-moz-range-progress{height:8px;border-radius:99px;background:var(--encre)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:var(--surligneur);border:var(--trait) solid var(--encre)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--surligneur);border:var(--trait) solid var(--encre)}
input[type=range]:focus-visible{box-shadow:none;outline-offset:2px}
.control{display:grid;gap:4px;margin-bottom:12px}
.control label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:700}
.control output{font-weight:800;font-stretch:78%;font-size:1.5rem;font-variant-numeric:tabular-nums}

/* Accueil : l'opération */
.hero{padding:clamp(28px,6vw,72px) 0 clamp(40px,7vw,88px);border-bottom:var(--trait) solid var(--encre)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.7rem,7.4vw,6.4rem);margin:18px 0 20px}
.hero .intro{font-size:clamp(1.08rem,1.6vw,1.3rem);max-width:34ch}
.hero-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:24px}
.chip{display:inline-flex;align-items:center;gap:.5em;font-size:.8rem;font-weight:700;padding:.32em .75em;border-radius:99px;background:var(--rubrique);color:var(--encre);border:2px solid var(--encre)}
.chip.nu{background:transparent}
.operation{background:var(--pur);border:var(--trait) solid var(--encre);border-radius:var(--radius);padding:clamp(18px,3vw,30px);box-shadow:8px 8px 0 var(--encre);margin:0 8px 0 0}
.operation-titre{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:14px}
.operation-titre h2{font-size:1.05rem;font-weight:700;letter-spacing:0}
.op-ligne{display:grid;grid-template-columns:1.6em minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:12px 0;border-bottom:2px solid var(--filet);margin:0}
.op-signe{font-weight:800;font-size:1.6rem;line-height:1}
.op-label{font-weight:600}
.op-valeur{font-size:clamp(1.9rem,4.6vw,2.8rem);text-align:right}
.op-ligne input[type=range]{grid-column:2/-1}
.op-total{border-bottom:0;border-top:var(--trait) solid var(--encre);margin-top:6px;padding-top:16px}
.op-total .op-valeur{font-size:clamp(2.6rem,7vw,4.2rem)}
.op-verdict{font-weight:700;margin:8px 0 0;min-height:1.55em}
.op-note{margin-top:12px}

/* Accueil : chapitres */
.chapter{padding:clamp(48px,8vw,104px) 0}
.chapter.line{border-top:var(--trait) solid var(--encre)}
.chapter-head,.section-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 32px;margin-bottom:clamp(24px,4vw,44px)}
.chapter-head h2{max-width:16ch;margin-top:6px}.chapter-head p{max-width:38ch}
.questions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);list-style:none;margin:0;padding:0}
@media(max-width:720px){.questions{grid-template-columns:1fr}}
.question{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;min-height:250px;padding:clamp(20px,3vw,30px);border-radius:var(--radius);background:var(--rubrique);border:var(--trait) solid var(--encre);text-decoration:none;transition:transform var(--t-rapide) var(--ease),box-shadow var(--t-rapide) var(--ease)}
.question:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--encre)}
.question .chip{background:var(--pur);align-self:start;justify-self:start}
.question .symbole{font-size:clamp(3.4rem,8vw,5.6rem);grid-row:1/3;grid-column:2;align-self:start}
.question h3{grid-column:1/-1;align-self:end;font-size:clamp(1.7rem,3.2vw,2.45rem);margin-top:18px;max-width:15ch}
.question p{grid-column:1/-1;max-width:40ch;margin:0}
.question .format{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.92rem;padding-top:12px;border-top:2px solid var(--encre);margin-top:6px}
.library .text-link{margin-top:20px}
.library-list{display:grid;gap:0;border-top:2px solid var(--encre)}
.library-list a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:18px 0;border-bottom:2px solid var(--filet);text-decoration:none}
@media(max-width:600px){.library-list a{grid-template-columns:auto minmax(0,1fr)}.library-format{grid-column:2}}
.story-rubric::before{content:"";display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--rubrique);border:2px solid var(--encre);margin-right:.4em;vertical-align:baseline}
.library-list a:hover h3,.library-list a:hover h2{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--surligneur)}
.library-number{font-weight:800;font-stretch:78%;font-size:1.6rem;color:var(--gris)}
.library-list h2,.library-list h3{font-size:clamp(1.3rem,2.4vw,1.8rem);margin-top:2px}
.library-format{font-weight:700;font-size:.9rem;white-space:nowrap}.library-format span{display:none}
.guide-description{margin-top:6px;max-width:60ch}

/* Accueil : partage */
.feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);align-items:center}
@media(max-width:860px){.feature{grid-template-columns:1fr}}
.chapter.dark{background:var(--blanc)}
.feature h2{margin:10px 0 14px}
.bascule{display:inline-flex;border:var(--trait) solid var(--encre);border-radius:99px;padding:4px;background:var(--pur);margin:14px 0 18px}
.bascule button{border:0;background:transparent;padding:.55em 1.1em;border-radius:99px;font-weight:700;cursor:pointer;min-height:44px}
.bascule button[aria-pressed=true]{background:var(--encre);color:var(--blanc)}
.personnes{display:grid;gap:16px}
.personne{background:var(--pur);border:var(--trait) solid var(--encre);border-radius:var(--radius);padding:18px 20px}
.personne-tete{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.personne-tete .num{font-size:clamp(2rem,5vw,2.8rem)}
.jauge{position:relative;height:22px;margin:12px 0 8px;border:2px solid var(--encre);border-radius:99px;overflow:hidden;background:var(--blanc)}
.jauge span{position:absolute;inset:0 auto 0 0;width:0;background:var(--deux);border-right:2px solid var(--encre);transition:width 600ms var(--ease)}

/* Accueil : Tonton */
.about{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,5vw,64px);align-items:start}
@media(max-width:720px){.about{grid-template-columns:1fr}}
.about .lunettes{width:clamp(120px,18vw,220px)}
.about h2{max-width:14ch;margin-top:10px}.about .body{max-width:60ch}
.about .text-link{margin-top:10px}

/* Guide : en-tête */
.article-hero{background:var(--rubrique);border-bottom:var(--trait) solid var(--encre);padding:clamp(24px,5vw,60px) 0 clamp(36px,6vw,72px)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:.88rem;font-weight:600;margin-bottom:22px}
.breadcrumb a{text-decoration:none;border-bottom:2px solid var(--encre);min-height:44px;display:inline-flex;align-items:center}
.article-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
@media(max-width:900px){.article-hero-grid{grid-template-columns:1fr}}
.article-hero h1{margin:14px 0 10px}
.article-sub{font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:600;margin-bottom:14px}
.article-lead{max-width:46ch}
.article-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin-top:14px;font-size:.86rem}
.article-meta a{min-height:44px;display:inline-flex;align-items:center}
.enonce{background:var(--pur);border:var(--trait) solid var(--encre);border-radius:var(--radius);padding:clamp(18px,3vw,28px);box-shadow:8px 8px 0 var(--encre);margin-right:8px}
.enonce-calc{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1em .3em;font-size:clamp(1.7rem,5.4vw,3.4rem);margin:6px 0 14px}
.enonce-calc .op{font-weight:400;color:var(--gris)}
.enonce-calc .inconnue{background:var(--surligneur);padding:0 .22em}
.enonce .article-symbol{font-size:clamp(3rem,8vw,5.5rem);font-weight:800;font-stretch:78%;letter-spacing:-.03em;line-height:1}
.enonce p{margin-top:10px}
.enonce .enonce-lead{margin:0 0 14px;font-size:1.05rem}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.enonce .text-link{margin:6px 22px 0 0}
.article-nav{position:sticky;top:71px;z-index:15;background:var(--blanc);border-bottom:2px solid var(--encre);display:flex;gap:6px;padding:10px max(var(--gutter),calc((100% - var(--wrap))/2));width:100%;margin:0;overflow-x:auto;scrollbar-width:none}
.article-nav::-webkit-scrollbar{display:none}
.article-nav a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:7px 12px 7px 6px;border-radius:99px;border:2px solid transparent;text-decoration:none;font-weight:600;font-size:.9rem}
.article-nav a span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--encre);font-size:.74rem;font-weight:800;font-variant-numeric:tabular-nums}
.article-nav a.actif{border-color:var(--encre);background:var(--surligneur)}
.article-nav a.actif span{background:var(--encre);color:var(--surligneur)}

/* Guide : étapes */
.article-section{padding:clamp(44px,7vw,88px) 0;border-bottom:var(--trait) solid var(--encre);display:grid;grid-template-columns:210px minmax(0,760px);gap:clamp(20px,5vw,72px)}
@media(max-width:860px){.article-section{grid-template-columns:1fr;gap:16px}}
.margin-note{display:flex;flex-direction:column;gap:6px}
.margin-note .eyebrow{font-size:.8rem;color:var(--gris);font-variant-numeric:tabular-nums}
.margin-note p{font-weight:700;font-size:1.02rem;line-height:1.3}
.margin-note .small{font-weight:400}
@media(max-width:860px){.margin-note{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 14px}.margin-note .eyebrow{flex-basis:100%}.margin-note .small{flex-basis:100%}}
.article-body{min-width:0}
.article-body h2{margin-bottom:.5em}
.article-body>p{max-width:64ch}
.prediction{margin:28px 0 8px;padding:clamp(18px,3vw,28px);border:var(--trait) solid var(--encre);border-radius:var(--radius);background:var(--pur)}
.prediction>.eyebrow{color:var(--gris)}
.prediction>h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-top:6px}
.prediction>h3{margin-top:6px;line-height:1.12}
.prediction>p{margin-top:8px;font-size:.95rem}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
@media(max-width:460px){.choices{grid-template-columns:1fr}}
.choice{position:relative;text-align:left;padding:14px 16px;min-height:56px;border-radius:var(--radius-s);border:2px solid var(--encre);background:var(--blanc);font-weight:700;font-size:1.02rem;cursor:pointer;transition:transform var(--t-rapide) var(--ease),box-shadow var(--t-rapide) var(--ease)}
.choice:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--encre)}
.choice[aria-pressed=true]{background:var(--encre);color:var(--blanc)}
.choice[data-correct=true]{background:var(--surligneur);color:var(--encre);border-width:var(--trait)}
.answer-tag{display:block;font-size:.76rem;font-weight:700;margin-top:4px}
.feedback{margin-top:16px;padding:16px 18px;border-left:6px solid var(--encre);background:var(--blanc);border-radius:0 var(--radius-s) var(--radius-s) 0}
.feedback h4{margin-bottom:.35em}.feedback .text-link{margin-top:6px}
html[data-motion=on] .feedback:not([hidden]){animation:monte var(--t-etat) var(--ease)}
@keyframes monte{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.answer-note{margin:24px 0;padding:18px 20px;border:2px dashed var(--encre);border-radius:var(--radius-s)}
.answer-note h3{font-size:1.25rem;margin-bottom:.3em}
.callout{margin:28px 0 0;padding:clamp(18px,3vw,26px);border-radius:var(--radius);background:var(--encre);color:var(--blanc)}
.callout h3{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:.4em}.callout a{color:var(--blanc)}
.hypothesis{border:2px dashed var(--encre);border-radius:var(--radius-s);padding:14px 16px;font-size:.95rem;margin:20px 0}
.tonton-note{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;align-items:center;margin:28px 0;padding:16px 18px;border:var(--trait) solid var(--encre);border-radius:var(--radius);background:var(--pur)}
.tonton-note img{display:none}
.tonton-note::before{content:"";width:54px;height:26px;background:url('assets/logos/tonton-lunettes.svg') center/contain no-repeat}
.tonton-note p{font-weight:700;font-size:1.12rem;line-height:1.35}
.local-hint{margin-top:10px}

/* Démontage année par année */
.annual{margin:28px 0;border:var(--trait) solid var(--encre);border-radius:var(--radius);background:var(--pur);padding:clamp(18px,3vw,28px)}
.annual-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;font-weight:700}
.step-controls{display:flex;gap:8px}
.icon-button{width:48px;height:48px;border-radius:50%;border:var(--trait) solid var(--encre);background:var(--blanc);font-weight:800;font-size:1.2rem;cursor:pointer}
.icon-button:disabled{opacity:.35;cursor:default}
.annual-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:12px}
.annual-flow .small{display:block}
.money{font-weight:800;font-stretch:78%;font-size:clamp(2.4rem,7vw,4rem);letter-spacing:-.03em;line-height:1;display:block;margin-top:4px;font-variant-numeric:tabular-nums}
.flow-arrow{font-size:2rem;font-weight:800;padding-bottom:.2em}
.annual-caption{margin-top:14px;font-weight:600}
.inkline{height:8px;border-radius:99px;background:var(--filet);margin-top:14px;overflow:hidden}
.inkline span{display:block;height:100%;background:var(--encre);transition:width var(--t-etat) var(--ease)}

/* Laboratoires */
.lab-shell,.recurring-work,.shared-tool,.budget-work,.project-grid{margin:28px 0;border:var(--trait) solid var(--encre);border-radius:var(--radius);background:var(--pur);overflow:hidden}
.lab-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:16px clamp(18px,3vw,28px);border-bottom:2px solid var(--encre);background:var(--rubrique)}
.lab-header h3{font-size:1.25rem}
.pill{font-size:.78rem;font-weight:700;padding:.32em .75em;border-radius:99px;background:var(--pur);border:2px solid var(--encre)}
.lab-task,.lab-explore,.lab-options,.chart-wrap,.chart-labels,.lab-results,.lab-shell>.small,.lab-shell>noscript{margin-inline:clamp(18px,3vw,28px)}
.lab-shell>.lab-task{margin-top:18px}
.lab-explore{margin-top:12px}
.lab-explore .control output{font-size:clamp(2rem,5vw,2.8rem)}
.lab-insight{font-weight:700;font-size:1.15rem;margin:12px 0 4px}
.lab-options,.data-details,.proof-details{border-top:2px solid var(--filet);margin-top:8px}
.lab-options summary,.data-details summary,.proof-details summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.lab-options summary::-webkit-details-marker,.data-details summary::-webkit-details-marker,.proof-details summary::-webkit-details-marker{display:none}
.lab-options summary::after,.data-details summary::after,.proof-details summary::after{content:"+";font-weight:800;font-size:1.3rem;line-height:1}
.lab-options[open] summary::after,.data-details[open] summary::after,.proof-details[open] summary::after{content:"−"}
.lab-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;padding-bottom:12px}
@media(max-width:560px){.lab-controls{grid-template-columns:1fr}}
.chart-wrap{margin-top:10px}.chart-svg{width:100%;height:auto;font:600 13px Bricolage,system-ui,sans-serif}
.chart-svg text{fill:var(--gris)}.chart-grid{stroke:var(--filet);stroke-width:1}
.chart-area{fill:var(--rubrique);opacity:.55}.chart-cap{fill:none;stroke:var(--encre);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.chart-side{fill:none;stroke:var(--encre);stroke-width:2.5;stroke-dasharray:7 6}
.chart-labels{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.88rem;font-weight:600;margin-top:8px}
.chart-key::before{content:"";display:inline-block;width:26px;height:0;border-top:4px solid var(--encre);vertical-align:middle;margin-right:8px}
.chart-key.dashed::before{border-top:3px dashed var(--encre)}
.lab-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;margin-bottom:18px}
@media(max-width:460px){.lab-results{grid-template-columns:1fr}}
.lab-result{border:2px solid var(--encre);border-radius:var(--radius-s);padding:14px 16px}
.lab-result:first-child{background:var(--surligneur);border-width:var(--trait)}
.lab-result span{display:block;font-weight:600;font-size:.9rem}
.lab-result strong{display:block;font-weight:800;font-stretch:78%;font-size:clamp(2.2rem,6vw,3.1rem);letter-spacing:-.03em;line-height:1;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.lab-result p{font-size:.9rem;margin:0}
.data-details{margin:20px 0;border-bottom:2px solid var(--encre);border-top-color:var(--encre)}
.table-scroll{overflow-x:auto;padding-bottom:12px}
.table-scroll:focus-visible{outline-offset:-3px}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:.95rem}
th,td{text-align:right;padding:8px 10px;border-bottom:1px solid var(--filet);white-space:nowrap}
th:first-child,td:first-child{text-align:left}thead th{border-bottom:2px solid var(--encre)}
caption{text-align:left;padding-bottom:8px}

/* Petites sommes */
.calendar-paper{margin:28px 0;border-top:var(--trait) solid var(--encre);padding:14px 0 0}
.month-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:14px}
@media(max-width:560px){.month-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.month-grid div{border:2px solid var(--encre);border-radius:var(--radius-s);padding:8px 6px;text-align:center;background:var(--rubrique)}
.month-grid span{display:block;font-size:.74rem;font-weight:700}.month-grid strong{display:block;font-weight:800;font-stretch:78%;font-size:1.2rem}
.calendar-rule{display:none}
.calendar-paper figcaption{margin-top:14px;font-size:.95rem}
.recurring-controls{padding:clamp(18px,3vw,28px);border-bottom:2px solid var(--encre)}
.recurring-controls .lab-options{margin:0}
.recurring-result{padding:clamp(18px,3vw,28px)}
.recurring-total{display:block;font-weight:800;font-stretch:78%;font-size:clamp(2.6rem,7vw,4.2rem);letter-spacing:-.03em;line-height:1;margin:6px 0;font-variant-numeric:tabular-nums}
.contribution-bar{display:flex;height:22px;border:2px solid var(--encre);border-radius:99px;overflow:hidden;margin:14px 0 10px}
.contribution-bar span{display:block;transition:width var(--t-etat) var(--ease)}
.contribution-bar span:first-child{background:var(--encre)}.contribution-bar span:last-child{background:var(--surligneur)}
.contribution-key{display:flex;flex-wrap:wrap;gap:6px 24px}.contribution-key p{margin:0;font-weight:600}
.paid-dot,.interest-dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--encre);vertical-align:middle;margin-right:6px}
.paid-dot{background:var(--encre)}.interest-dot{background:var(--surligneur)}
.recurring-comparison{margin:28px 0 0;border:2px dashed var(--encre);border-radius:var(--radius);padding:clamp(18px,3vw,26px)}
.recurring-comparison h3{margin-bottom:.3em}
.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:14px 0}
@media(max-width:480px){.comparison-grid{grid-template-columns:1fr}}
.comparison-grid h4{margin-bottom:8px}.comparison-grid dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px}.comparison-grid dd{overflow-wrap:anywhere}.comparison-grid dd{font-weight:800;font-stretch:78%;font-size:1.3rem;font-variant-numeric:tabular-nums}

/* Budget et projet */
.budget-work,.project-grid{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:780px){.budget-work,.project-grid{grid-template-columns:1fr}}
.budget-inputs,.project-controls{padding:clamp(18px,3vw,28px);border-right:2px solid var(--encre)}
@media(max-width:780px){.budget-inputs,.project-controls{border-right:0;border-bottom:2px solid var(--encre)}}
.budget-receipt,.project-card{padding:clamp(18px,3vw,28px);background:var(--surligneur)}
.budget-receipt.negative{background:var(--pur)}
.balance,.months{font-weight:800;font-stretch:78%;font-size:clamp(2.8rem,7vw,4.6rem);letter-spacing:-.03em;line-height:1;margin:8px 0;font-variant-numeric:tabular-nums}
.balance.is-long,.months.is-long{font-size:clamp(1.8rem,5vw,2.8rem)}
.budget-bars{display:flex;height:22px;border:2px solid var(--encre);border-radius:99px;overflow:hidden;margin:14px 0 10px;background:var(--pur)}
.budget-bars span{display:block;transition:width var(--t-etat) var(--ease)}
.budget-bars .housing{background:var(--encre)}.budget-bars .travel{background:var(--gris)}.budget-bars .left{background:var(--surligneur)}
.annotation{font-weight:700;margin-top:10px}
.project-line{display:flex;flex-wrap:wrap;gap:4px;margin:14px 0 10px}
.project-line i{width:14px;height:14px;border-radius:50%;border:2px solid var(--encre);background:var(--pur)}

/* Budget à deux */
.shared-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:clamp(18px,3vw,28px);border-bottom:2px solid var(--encre)}
@media(max-width:780px){.shared-controls{grid-template-columns:1fr}}
.shared-controls label{display:block;font-weight:700}.shared-controls .small{display:block;font-weight:400}
.shared-context{padding:14px clamp(18px,3vw,28px);font-weight:700;border-bottom:2px solid var(--filet);margin:0}
.shared-tool .error-message{padding:0 clamp(18px,3vw,28px)}
.shared-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px clamp(18px,3vw,28px)}
.shared-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:640px){.shared-methods{grid-template-columns:1fr}}
.shared-method{padding:clamp(18px,3vw,28px);border-top:2px solid var(--encre)}
.shared-method+.shared-method{border-left:2px solid var(--encre)}
@media(max-width:640px){.shared-method+.shared-method{border-left:0}}
.shared-method.proportional{background:var(--surligneur)}
.shared-method h3{margin-bottom:0}
.shared-person{margin-top:16px;padding-top:12px;border-top:2px solid var(--encre)}
.shared-person h4{font-size:.95rem}
.shared-person p{display:flex;justify-content:space-between;gap:10px;margin:4px 0}
.shared-person strong{font-weight:800;font-stretch:78%;font-size:1.5rem;font-variant-numeric:tabular-nums}
.effort-track{height:14px;border:2px solid var(--encre);border-radius:99px;overflow:hidden;background:var(--pur);margin:6px 0}
.effort-track span{display:block;height:100%;background:var(--encre);transition:width var(--t-etat) var(--ease)}
.remaining{border-top:1px solid var(--filet);padding-top:6px}
.negative-value{color:#8A1C14}
.shared-insight{padding:14px clamp(18px,3vw,28px);font-weight:700;border-top:2px solid var(--encre);margin:0}
.shared-tool .hypothesis,.shared-tool .local-hint,.shared-tool>noscript{margin:14px clamp(18px,3vw,28px)}
.decision-list{padding-left:1.2em;display:grid;gap:10px;margin:14px 0}
.section-subtitle{font-weight:700;margin-top:18px}

/* Épargne de précaution : paliers, dépliant des dépenses, résultat en phrase */
.cushion-levels{list-style:none;margin:14px 0 0;padding:0;border-top:2px solid var(--encre)}
.cushion-levels li{display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--encre);font-size:.95rem}
.cushion-levels li span{font-weight:600}.cushion-levels li strong{font-weight:800;text-align:right}
.cushion-levels li.covered strong{font-weight:600}
.cushion-caption{margin-top:12px}
.months.is-text{font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.15;font-stretch:100%;letter-spacing:-.01em}
.cushion-helper{margin:-6px 0 18px;border-top:0;border-bottom:2px solid var(--filet)}
.cushion-helper>.small{margin:0 0 8px}
.cushion-parts{display:grid;gap:10px;margin:8px 0 12px}
.cushion-parts label{display:block;font-weight:600;font-size:.95rem}.cushion-parts label>span{display:block;margin-bottom:4px}
.link-list{display:grid;gap:2px;margin-top:8px}
.article-body h3.section-subtitle{font-size:1.2rem;margin:26px 0 8px;letter-spacing:-.01em}

/* Preuves */
.proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}
@media(max-width:720px){.proof-grid{grid-template-columns:1fr}}
.proof-item{border-top:var(--trait) solid var(--encre);padding:14px 0 0}
.proof-item .eyebrow{color:var(--gris)}
.proof-item h3{font-size:1.35rem;margin:8px 0 .4em}
.proof-code{font-variant-numeric:tabular-nums;background:var(--blanc);border-radius:var(--radius-s);padding:12px 14px;margin-top:10px;line-height:1.7}
.proof-details{margin:12px 0}.proof-details p{padding-bottom:14px}
.correction-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 18px;margin-top:20px;padding-top:14px;border-top:2px solid var(--encre);font-size:.86rem;color:var(--gris)}

/* Suite et guides voisins */
.next-read{display:block;background:var(--encre);color:var(--blanc);text-decoration:none;padding:clamp(40px,7vw,80px) var(--gutter);margin:0 calc(-1*var(--gutter));transition:background var(--t-etat) var(--ease)}
.next-read:hover{background:#24222B}
.next-read .eyebrow{color:var(--surligneur)}
.next-read h2{font-size:clamp(2.2rem,6vw,4.6rem);margin:14px 0;max-width:18ch;color:var(--blanc)}
.next-read .text-link{color:var(--surligneur)}
.related-guides{padding:clamp(36px,6vw,64px) 0}
.related-guides h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:14px}
.related-guides ul{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:2px solid var(--encre)}
.related-guides li a{display:block;padding:14px 0;border-bottom:2px solid var(--filet);font-weight:700;font-size:1.15rem;text-decoration:none}
.related-guides li a:hover{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--surligneur)}
.related-guides li a span{display:none}
.related-guides .text-link{margin-top:14px}

/* Bibliothèque */
.guide-directory{padding:clamp(28px,5vw,60px) 0}
.directory-head{margin-bottom:24px}.directory-head h1{margin:10px 0 14px;max-width:14ch}.directory-head p{max-width:60ch}
.guide-search{border-top:var(--trait) solid var(--encre);padding:18px 0 8px;margin-bottom:28px}
.guide-search label{display:block;font-weight:700;margin-bottom:8px}
.search-row{display:flex;gap:10px}
#search-status,#search-empty{margin-top:8px;font-size:.9rem}
.tool-directory{margin-top:48px;padding-top:28px;border-top:var(--trait) solid var(--encre)}
.tool-directory ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:0;border-top:2px solid var(--encre)}
.tool-directory li a{display:block;padding:12px 0;border-bottom:2px solid var(--filet);font-weight:700;text-decoration:none}
.tool-directory li a:hover{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--surligneur)}

/* Pages d'information */
.info-page{padding:clamp(28px,5vw,60px) 0;max-width:72ch}
.info-page header{margin-bottom:28px}.info-page h1{margin:10px 0 14px}
.info-page section{padding:20px 0;border-top:2px solid var(--filet)}
.info-page h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:.4em}

/* Pied de page */
.footer{background:var(--encre);color:var(--blanc);padding:clamp(48px,7vw,88px) 0 32px}
.footer a{color:var(--blanc)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-bottom:40px}
.footer-logo{display:none}
.footer-top p{font-size:clamp(2.2rem,6vw,4.6rem);font-weight:800;letter-spacing:-.03em;line-height:1;max-width:14ch}
.footer-top p .hl{color:var(--encre);background-image:linear-gradient(var(--surligneur),var(--surligneur));padding:0 .12em .06em}.footer-top p .hl:not(.on){color:inherit}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 24px;align-items:center;border-top:2px solid #3A3840;padding-top:24px;font-size:.92rem}
.footer-bottom .links{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.footer-bottom .links>a{min-height:44px;display:inline-flex;align-items:center}
.motion-toggle{border:2px solid var(--blanc);background:transparent;color:var(--blanc);padding:.55em 1em;border-radius:99px;cursor:pointer;min-height:44px}

/* Signalement */
dialog{border:var(--trait) solid var(--encre);border-radius:var(--radius);background:var(--blanc);color:var(--encre);max-width:560px;width:calc(100% - 32px);padding:28px;box-shadow:10px 10px 0 var(--encre)}
dialog::backdrop{background:rgba(20,19,24,.55)}
.dialog-top{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:12px}
.dialog-top h2{font-size:1.6rem}
.close-dialog{width:44px;height:44px;border-radius:50%;border:2px solid var(--encre);background:var(--pur);font-size:1.4rem;cursor:pointer}
dialog label{display:block;font-weight:700;margin:14px 0 6px}
dialog textarea{min-height:120px;resize:vertical}
.correction-actions{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;margin-top:14px}
.status{font-weight:700;min-height:1.5em;margin-top:8px}

/* Mouvement : le surligneur, les chiffres, le volet entre les pages */
.reveal{opacity:1;transform:none}
@view-transition{navigation:auto}
::view-transition-old(root){animation:220ms var(--ease) both sortie}
::view-transition-new(root){animation:520ms var(--ease) both entree}
@keyframes sortie{to{opacity:0;transform:translateY(-12px)}}
@keyframes entree{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}
html:not(.js) .lab-explore,html:not(.js) .lab-options,html:not(.js) .chart-wrap,html:not(.js) .chart-labels,html:not(.js) .data-details,html:not(.js) .recurring-controls,html:not(.js) .choices,html:not(.js) .step-controls{display:none}
@media print{.site-header,.footer,.motion-toggle,.correction-line,dialog,.article-nav{display:none}.wrap{width:100%}.article-section{break-inside:avoid}}