/* Gabarit des articles de fond (colonne de lecture 720px, tableaux, encarts,
   bloc d'appel a l'action de fin). Partage a l'identique par les trois
   articles FR et leurs traductions dans /en/ -- verifie avant extraction :
   les trois <style> inline ne differaient que par .callout.good, present ici
   pour tout le monde puisqu'il ne s'applique qu'aux encarts qui portent la
   classe. Se charge APRES base.css et le surcharge la ou il faut (.wrap plus
   etroite, titres, p). */

section { padding: 56px 24px; }
.wrap { max-width: 720px; margin: 0 auto; }
h1 { font-size: clamp(28px, 4vw, 38px); letter-spacing: -.01em; margin: 0 0 16px; line-height: 1.25; }
h2 { font-size: clamp(20px, 2.6vw, 25px); margin: 44px 0 14px; line-height: 1.3; }
h3 { font-size: 16.5px; margin: 26px 0 8px; }
p { color: var(--ink-2); margin: 0 0 14px; }
ul, ol { color: var(--ink-2); margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 8px; }
strong { color: var(--ink); }
code {
  background: var(--raised); border: 1px solid var(--border); border-radius: 5px;
  padding: 2px 6px; color: var(--accent); font-size: 13px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}
pre {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; overflow-x: auto; margin: 0 0 16px;
}
pre code { background: none; border: 0; padding: 0; color: var(--ink); font-size: 13px; line-height: 1.7; }
.lead { font-size: 17px; color: var(--ink); }
.meta { font-size: 13px; color: var(--ink-3); margin-bottom: 32px; }

.callout {
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 18px 20px; margin: 24px 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout .label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); display: block; margin-bottom: 6px; }
.callout.warn { border-left-color: var(--crit); }
.callout.warn .label { color: var(--crit); }
.callout.good { border-left-color: var(--good); }
.callout.good .label { color: var(--good); }

table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
td { color: var(--ink-2); }
.tbl-scroll { overflow-x: auto; }

.cta-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 26px 28px; margin-top: 48px;
}
.cta-box h2 { margin-top: 0; font-size: 19px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

.related {
  display: block; text-decoration: none; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; margin: 24px 0; transition: border-color .15s;
}
.related:hover { border-color: var(--accent); }
.related .label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); display: block; margin-bottom: 5px; }
.related .t { color: var(--ink); font-weight: 600; font-size: 14.5px; }

.figure {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 20px 18px; margin: 24px 0;
}
.figure svg { display: block; width: 100%; height: auto; }
.figure-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 16px; font-size: 13.5px; color: var(--ink-2);
}
.figure-cols strong { color: var(--ink); }
.figure-legend {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  margin-top: 16px; font-size: 12.5px; color: var(--ink-2);
}
.figure-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
@media (max-width: 560px) {
  .figure-cols { grid-template-columns: 1fr; }
}

footer { margin-top: 20px; }

@media (max-width: 700px) {
  section { padding: 40px 18px; }
}