/* ====================================================================
   Atelier des coûts — styles des guides (/guides/…)
   Se charge EN PLUS de metier.css (tokens, topbar, faq, footer…).
   Page de lecture : une colonne étroite, tableaux scrollables au doigt.
   ==================================================================== */

.g-wrap{max-width:720px;margin:0 auto;padding:0 22px}

/* ── EN-TÊTE ── */
.g-hero{padding:22px 0 4px;text-align:left}
.g-hero h1{font-size:clamp(28px,5.6vw,42px);max-width:20ch;margin:0 0 14px}
.g-hero .lead{font-size:clamp(16px,2.3vw,18.5px);color:var(--sub);max-width:58ch;margin:0 0 14px}
.g-meta{font-size:12.5px;color:var(--sub);font-weight:700;display:flex;flex-wrap:wrap;gap:6px 14px}

/* ── RÉPONSE DIRECTE (le passage que citent les IA) ── */
.answer{background:var(--accentSoft);border:1px solid var(--accentLine);border-radius:18px;
  padding:20px 20px 18px;margin:22px 0 4px}
.answer .tag{font-family:var(--display);font-weight:800;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:8px}
.answer p{font-size:15.5px;color:var(--ink);margin:0 0 10px;overflow-wrap:anywhere}
.answer p:last-child{margin-bottom:0}

/* ── SOMMAIRE ── */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin-top:16px}
.toc h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--sub);margin-bottom:10px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:5px 0;font-size:14.5px}
.toc a{color:var(--ink);text-decoration:none;font-weight:700}
.toc a:hover{color:var(--accent)}

/* ── CORPS ── */
.g-body{padding:6px 0 0}
.g-body section{padding:30px 0 0}
.g-body h2{font-size:clamp(21px,4vw,29px);margin-bottom:12px;scroll-margin-top:14px}
.g-body h3{font-size:17px;margin:22px 0 7px}
.g-body p{color:var(--sub);font-size:15.5px;margin-bottom:13px;overflow-wrap:anywhere}
.g-body li{color:var(--sub);font-size:15.5px;margin-bottom:8px}
.g-body ul{margin:0 0 14px;padding-left:20px}
.g-body b{color:var(--ink)}
.g-body a{color:var(--accent);text-decoration:none;font-weight:800}
.g-body a:hover{text-decoration:underline}

/* formules (même langage visuel que les calculateurs) */
.formulas{display:flex;flex-direction:column;gap:9px;margin:4px 0 16px}
.formula{background:var(--panel2);border:1px solid var(--line);
  border-left:3px solid var(--accentLine);border-radius:12px;padding:11px 14px;
  font-size:14.5px;overflow-wrap:anywhere}
.formula b{display:block;font-family:var(--display);font-weight:800;font-size:12px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--accent);margin-bottom:2px}
.formula span{font-weight:600;color:var(--ink)}

/* étapes numérotées / exemple chiffré */
.steps{list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:12px;
  margin:2px 0 16px;padding:0}
.steps li{counter-increment:st;position:relative;padding-left:36px;
  font-size:15px;overflow-wrap:anywhere;color:var(--sub)}
.steps li::before{content:counter(st);position:absolute;left:0;top:1px;
  width:25px;height:25px;border-radius:8px;background:var(--accentSoft);
  border:1px solid var(--accentLine);color:var(--accent);font-family:var(--display);
  font-weight:800;font-size:12.5px;display:grid;place-items:center}
.steps li > b{display:block;font-weight:800;color:var(--ink)}
.steps li > span{display:block;color:var(--sub);font-size:14.5px}
.steps li > span b{color:var(--ink);font-weight:800}
.step-out{background:var(--accentSoft);border:1px solid var(--accentLine);
  border-radius:14px;padding:14px 16px;font-size:15px;font-weight:800;
  margin-bottom:14px;overflow-wrap:anywhere;color:var(--ink)}

/* ── TABLEAUX DE REPÈRES (scroll horizontal isolé sur mobile) ── */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:16px;background:var(--panel);margin:4px 0 10px}
.tbl table{border-collapse:collapse;width:100%;min-width:420px;font-size:14.5px}
.tbl caption{caption-side:top;text-align:left;padding:14px 16px 0;color:var(--sub);
  font-size:13px;font-weight:700}
.tbl th,.tbl td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--sub)}
.tbl thead th{font-family:var(--display);font-weight:800;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--accent);white-space:nowrap}
.tbl tbody th{font-weight:800;color:var(--ink);font-family:var(--body)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:none}
.tbl td b{color:var(--ink)}
.tbl-note{font-size:13px;color:var(--sub);margin-bottom:14px}

/* ── ERREURS CLASSIQUES ── */
.mistakes{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:11px}
.mistakes li{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--terra);
  border-radius:12px;padding:13px 16px;font-size:14.5px;color:var(--sub);margin:0}
.mistakes li b{display:block;color:var(--ink);font-family:var(--display);font-weight:800;
  font-size:15px;margin-bottom:3px}

/* ── FAQ (styles .faq hérités de metier.css) ── */
.g-faq{padding:30px 0 0}
.g-faq h2{margin-bottom:16px}

/* ── CTA & MAILLAGE ── */
.g-cta{background:var(--panel);border:1px solid var(--goldLine);border-radius:20px;
  padding:26px 22px;margin-top:26px;text-align:center;box-shadow:0 0 0 4px var(--goldSoft)}
.g-cta h2{font-size:clamp(19px,3.6vw,25px);margin-bottom:8px}
.g-cta p{color:var(--sub);font-size:14.5px;max-width:48ch;margin:0 auto 18px}
.g-cta .btn{margin:0 4px 8px}
.g-cta .applink{display:block;margin-top:10px;color:var(--sub);font-size:14px;font-weight:700;
  text-decoration:none}
.g-cta .applink:hover{color:var(--ink)}
.g-next{margin-top:26px;text-align:center}
.g-next h2{font-size:19px;margin-bottom:14px}
.g-back{display:inline-block;margin:22px 0 6px;color:var(--sub);font-size:14px;font-weight:700;
  text-decoration:none}

@media(max-width:520px){
  .g-body h2{font-size:22px}
  .tbl table{min-width:360px}
}