/* Extrait de tabicl.html le 2026-08-03 : un <style> inline est bloqué par
   la CSP `style-src 'self'`. Réutilise les tokens de style.css. */
  /* page-specific (case study) — reuse design tokens from style.css */
  .cs-hero{ max-width:var(--maxw); margin:0 auto; padding:clamp(2.5rem,6vw,4.5rem) clamp(1.2rem,5vw,2.5rem) 1rem; }
  .cs-hero h1{ font-size:clamp(2.1rem,5.5vw,3.6rem); margin:.6rem 0 0; }
  .cs-hero h1 .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .cs-lead{ color:var(--muted); font-size:clamp(1.02rem,1.6vw,1.2rem); margin-top:1.2rem; max-width:60ch; }
  .cs-prose p{ color:var(--muted); font-size:1.02rem; margin-bottom:1rem; max-width:68ch; }
  .cs-prose strong{ color:var(--ink); }
  .cs-table{ width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.95rem; }
  .cs-table th,.cs-table td{ text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--panel-b); }
  .cs-table th{ font:600 .78rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
  .cs-table td.num{ font-variant-numeric:tabular-nums; font-family:var(--mono); }
  .cs-table .win{ color:var(--teal-d); font-weight:700; }
  .cs-figure{ border:1px solid var(--panel-b); border-radius:var(--r); background:var(--panel); padding:1.2rem; box-shadow:var(--shadow-sm); }
  .cs-figure img{ margin:0 auto; }
  .cs-figcap{ color:var(--faint); font-size:.84rem; text-align:center; margin-top:.8rem; }
  .cs-split{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
  .cs-note{ border-left:3px solid var(--gold); background:var(--tint-amber); padding:1rem 1.2rem; border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--gold-d); font-size:.92rem; margin:1.2rem 0; }
  .cs-steps{ list-style:none; display:flex; flex-direction:column; gap:1rem; }
  .cs-steps li{ display:flex; gap:1rem; padding:1.1rem 1.2rem; border:1px solid var(--panel-b); border-radius:var(--r); background:var(--panel); box-shadow:var(--shadow-sm); }
  .cs-steps .n{ font:800 1rem/1 var(--mono); color:var(--indigo); padding-top:.15rem; }
  .cs-steps h3{ font-size:1.05rem; margin-bottom:.2rem; }
  .cs-steps p{ color:var(--muted); font-size:.9rem; margin:0; }
  @media (max-width:900px){ .cs-split{ grid-template-columns:1fr; } }

/* L'image porte ses dimensions réelles (réservation de place, anti-CLS) ;
   la mise à l'échelle se fait en CSS. */
.cs-figure img{ width:100%; max-width:640px; height:auto; }