/* fiche.css — style partagé des fiches de révision CAPa (responsive + accessible).
   Utilisé par toutes les pages fiches-revision/*.html. Design validé sur « ménage & revenus ». */
:root{
  --ink:#15181B; --ink-2:#4a5157; --rule:#d7dbd7; --paper:#ffffff; --panel:#f1f3f0; --bg:#eef0ec;
  --accent:#0B5D3B; --accent-2:#094a2f; --accent-soft:#e6f1ea; --alert:#B3261E;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','Courier New',monospace;
  --fs:17px; --lh:1.6; --ls:0em; --ws:0em; --maxw:820px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--body);font-size:var(--fs);line-height:var(--lh);letter-spacing:var(--ls);word-spacing:var(--ws);
  background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
body.dys{font-family:'Atkinson Hyperlegible',var(--body);--ls:0.03em;--ws:0.09em;--lh:1.8}
body.contrast{--bg:#000;--paper:#0e1113;--panel:#161a1d;--ink:#fff;--ink-2:#ffd54a;--rule:#fff;--accent:#7Cf0b0;--accent-2:#7cf0b0;--accent-soft:#10241a}
body.tint-creme{--bg:#efe7d4;--paper:#fbf5e8;--panel:#f3ead6}
body.tint-bleu{--bg:#e3ecf6;--paper:#f4f9ff;--panel:#e8f1fb}
b,strong{font-weight:700}
em{font-style:normal;font-weight:600;color:var(--ink)}
sup{font-size:.7em}

.crumb{background:var(--accent-2);color:#fff;font-size:13px;padding:8px 16px;line-height:1.4}
.crumb a{color:#ffe08a;text-decoration:none;font-weight:700}
.crumb .sep{opacity:.55;margin:0 6px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:16px 14px 70px}

/* barre d'accessibilité (injectée par fiche.js) */
.tools{position:sticky;top:0;z-index:30;display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--bg);padding:10px 2px;margin-bottom:4px}
.tools .grp{display:flex;gap:6px;align-items:center;background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:5px 8px;box-shadow:0 2px 8px rgba(15,40,60,.06)}
.tools .lab{font-size:.72rem;color:var(--ink-2);font-weight:700}
button{font-family:inherit;font-size:.9rem;min-height:42px;padding:8px 13px;border:1.5px solid var(--accent);background:var(--accent);color:#fff;border-radius:10px;cursor:pointer;font-weight:700;transition:filter .15s,transform .04s}
button:hover{filter:brightness(1.08)} button:active{transform:translateY(1px)}
button.ghost{background:var(--paper);color:var(--accent-2)}
button.mini{min-height:38px;padding:7px 11px;font-size:.86rem}
button:disabled{opacity:.4;cursor:not-allowed}
.panel{display:none;background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:14px 16px 4px;margin:2px 0 10px;box-shadow:0 6px 18px rgba(15,40,60,.08)}
.panel.open{display:block}
.panel .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0;padding-bottom:10px;border-bottom:1px dashed var(--rule)}
.panel .row:last-child{border-bottom:0}
.panel .row label{font-weight:700;min-width:118px;font-size:.9em}
.panel input[type=range]{flex:1;min-width:130px;accent-color:var(--accent)}
.swatch{width:34px;height:34px;border-radius:50%;border:3px solid var(--rule);cursor:pointer;padding:0}
.swatch.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* en-tête */
.hero{background:var(--paper);border:1px solid var(--rule);border-top:5px solid var(--accent);border-radius:16px;padding:22px 20px;box-shadow:0 8px 24px rgba(15,40,60,.08)}
.hero .kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,6vw,2.5rem);line-height:1.02;margin:6px 0 4px;letter-spacing:-.01em}
.hero .sub{font-family:var(--disp);font-weight:500;font-size:clamp(1rem,3.4vw,1.25rem);color:var(--ink-2)}
.hero .chapo{margin:12px 0 0;color:var(--ink-2);max-width:60ch}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{background:var(--accent-soft);color:var(--accent-2);border:1px solid var(--accent);padding:3px 11px;border-radius:999px;font-size:.76rem;font-weight:800;font-family:var(--mono);letter-spacing:.04em}

/* top 3 / grille de cartes */
.top3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:16px}
.top3 .cell{background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:12px;padding:14px 15px}
.top3 .cell b{font-family:var(--disp);font-weight:700;font-size:1.05rem;display:block;margin-bottom:5px}
.top3 .cell p{margin:0;font-size:.94rem;color:var(--ink-2)}

/* sections */
.sec{background:var(--paper);border:1px solid var(--rule);border-radius:16px;padding:18px 18px;margin-top:16px;box-shadow:0 4px 16px rgba(15,40,60,.05)}
.sec-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:6px;margin-bottom:14px}
.sec-head h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.15rem,4vw,1.45rem);margin:0}
.sec-head .tag{margin-left:auto;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}

/* tableau générique responsive (desktop = table, mobile = cartes via data-label) */
.rtable{width:100%;border-collapse:collapse;font-size:.92rem}
.rtable th{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.04em;text-align:left;border-bottom:2px solid var(--ink);padding:7px 8px}
.rtable td{border-bottom:1px solid var(--rule);padding:8px;vertical-align:top}
.rtable .lab{font-family:var(--disp);font-weight:700}

/* bloc « bulletin » ou tableau dense : défilement horizontal */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:10px}
.dtable{width:100%;min-width:440px;border-collapse:collapse;font-family:var(--mono);font-size:.8rem}
.dtable caption{caption-side:top;text-align:left;font-family:var(--disp);font-weight:700;padding:8px 10px;background:var(--panel);border-bottom:1px solid var(--rule)}
.dtable th{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);text-align:right;padding:6px 9px 4px;border-bottom:1px solid var(--rule);font-weight:600}
.dtable th:first-child{text-align:left}
.dtable td{padding:3px 9px;text-align:right;white-space:nowrap}
.dtable td:first-child{text-align:left;white-space:normal}
.dtable tr.k td{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);font-weight:700;background:var(--panel)}
.dtable tr.big td{font-family:var(--disp);font-weight:700;font-size:1rem;border-top:2px solid var(--ink);background:var(--accent-soft)}
.dtable .n{display:inline-block;width:15px;height:15px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--disp);font-weight:700;font-size:.66rem;line-height:15px;text-align:center;margin-right:5px}
.scroll-hint{font-size:.72rem;color:var(--ink-2);margin:6px 2px 0;display:none}

/* cascade / étapes */
.casc{margin-top:14px}
.casc-step{border-left:4px solid var(--ink);padding:6px 0 6px 12px;margin-bottom:2px}
.casc-step b{font-family:var(--disp);font-weight:700;display:block;line-height:1.1}
.casc-step .v{font-family:var(--mono);font-size:1.2rem;font-weight:700}
.casc-step .note{color:var(--ink-2);font-size:.9rem}
.casc-op{font-family:var(--mono);font-size:.88rem;color:var(--alert);padding-left:14px;margin:2px 0}
.casc-step.last{border-left-color:var(--accent)}
.casc-step.last b{color:var(--accent)}
.aside{font-size:.9rem;color:var(--ink-2);background:var(--panel);border-radius:10px;padding:10px 12px;margin-top:12px}

/* repères chiffrés */
.repere{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:16px}
.repere .r{background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;padding:13px 14px}
.repere .r b{font-family:var(--disp);font-weight:700;font-size:1.5rem;color:var(--accent-2);display:block}
.repere .r span{font-size:.86rem;color:var(--ink-2)}

/* circuit / schéma à cartes */
.circ-top{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin-bottom:12px}
.circ-box{flex:1;min-width:200px;background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:11px 13px;font-size:.9rem}
.circ-box b{font-family:var(--disp);display:block;margin-bottom:3px}
.circ-box img{max-height:34px;margin-top:6px}
.circ-arrow{display:flex;align-items:center;font-family:var(--mono);color:var(--alert);font-weight:700;font-size:.85rem;gap:4px}
.circ-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.circ-cell{border:1px solid var(--rule);border-radius:10px;padding:10px 12px}
.circ-cell .h{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700}
.circ-cell img{max-height:26px;max-width:52px}
.circ-cell .who{display:block;font-size:.84rem;color:var(--ink-2);margin-top:5px}
.circ-foot{font-size:.9rem;color:var(--ink-2);background:var(--panel);border-radius:10px;padding:11px 13px;margin-top:12px}

/* deux colonnes (calcul / vocabulaire / comparaison) */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.calc-line{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--rule);padding:5px 0;font-size:.94rem}
.calc-line b{font-family:var(--mono);font-weight:700;white-space:nowrap}
.calc-line.tot{border-bottom:0;border-top:2px solid var(--ink);margin-top:4px;padding-top:7px}
.calc-line.tot b{color:var(--accent-2);font-size:1.05rem}
.res{background:var(--accent-soft);border-radius:10px;padding:10px 12px;margin-top:10px;font-size:.92rem}
.mini-warn{font-family:var(--mono);font-size:.8rem;color:var(--alert);margin-top:8px}
.vocab dl{margin:0}
.vocab dd{margin:0 0 8px;font-size:.92rem}
.vocab dd b{font-family:var(--disp)}

/* encart « et dans le métier » / callout */
.metier{background:var(--accent-soft);border:1px solid var(--accent);border-radius:14px;padding:16px 18px;margin-top:16px}
.metier .t{font-family:var(--disp);font-weight:700;font-size:1.1rem;color:var(--accent-2);display:block;margin-bottom:6px}

/* alerte / point de vigilance */
.alert{background:#fdecea;border:1px solid var(--alert);border-radius:12px;padding:13px 15px;margin-top:16px;font-size:.94rem}
.alert .t{font-family:var(--disp);font-weight:700;color:var(--alert);display:block;margin-bottom:4px}

/* échelle colorée (Nutri-Score A→E, DPE / étiquette énergie A→G) */
.scale{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0}
.scale .s{flex:1 1 46px;text-align:center;padding:9px 6px;border-radius:9px;font-family:var(--disp);font-weight:700;color:#fff;font-size:1.05rem;line-height:1.1}
.scale .s small{display:block;font-size:.66rem;font-weight:600;opacity:.96;margin-top:2px}
.scale .s.dark{color:#15181B}
.scale .s.on{outline:3px solid var(--ink);box-shadow:0 3px 12px rgba(0,0,0,.25);position:relative;z-index:1}
.sc-a{background:#1e8f4e}.sc-b{background:#6fbf3b}.sc-c{background:#f4c20d}.sc-d{background:#ef7d1a}
.sc-e{background:#e2352b}.sc-f{background:#c81d1d}.sc-g{background:#8f1212}

/* je me teste */
.test .q{border:1px solid var(--rule);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--paper)}
.test .q>p{margin:0 0 8px;font-weight:600}
.test .q .num{display:inline-block;background:var(--accent);color:#fff;width:24px;height:24px;border-radius:50%;text-align:center;line-height:24px;font-family:var(--disp);font-weight:700;font-size:.85rem;margin-right:7px}
.test details{border-top:1px dashed var(--rule);padding-top:8px}
.test summary{cursor:pointer;font-weight:700;color:var(--accent-2);font-size:.9rem;list-style:none}
.test summary::-webkit-details-marker{display:none}
.test summary::before{content:"👁  "}
.test details[open] summary::before{content:"✅  "}
.test details p{margin:8px 0 0;font-size:.93rem;color:var(--ink-2)}

footer{margin-top:28px;padding-top:14px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.82rem;color:var(--ink-2)}

@media (max-width:680px){
  .two{grid-template-columns:1fr}
  .scroll-hint{display:block}
  .rtable,.rtable tbody,.rtable tr,.rtable td{display:block;width:100%}
  .rtable thead{display:none}
  .rtable tr{border:1px solid var(--rule);border-radius:10px;margin-bottom:10px;padding:6px 4px;background:var(--paper)}
  .rtable td{border-bottom:1px dashed var(--rule);padding:7px 10px}
  .rtable tr td:last-child{border-bottom:0}
  .rtable td::before{content:attr(data-label);display:block;font-family:var(--disp);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-2);margin-bottom:2px}
  .rtable .lab{font-size:1.05rem}
  .rtable .lab::before{content:""}
}
@media print{
  .tools,.panel,.crumb{display:none!important}
  body{background:#fff} .sec,.hero{box-shadow:none;break-inside:avoid}
}