/* ============================================================================
   SL SYSTEM — references.css (page Références uniquement)
   ========================================================================== */
main h3{font-size:26px;font-weight:800;letter-spacing:-.015em}
.shero .lead{margin:18px 0 0}

/* Bandeau de chiffres */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-card);overflow:hidden;margin-top:40px}
.statstrip>div{padding:26px 24px;border-left:1px solid var(--line)}
.statstrip>div:first-child{border-left:0}
.statstrip .v{font-family:var(--mono);font-weight:700;font-size:36px;letter-spacing:-.03em;color:var(--v600);line-height:1}
.statstrip .l{font-size:13px;color:var(--ink600);margin-top:8px;line-height:1.4}

/* Étude de cas */
.case{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.case + .case{margin-top:96px}
.case__ey{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--v600);margin-bottom:12px}
.case h3{margin:0 0 10px}
.case__ctx{font-size:15px;color:var(--ink600);margin:0 0 18px;line-height:1.6}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--v700);background:var(--v50);border:1px solid var(--v100);border-radius:999px;padding:5px 11px}
.intv{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:11px}
.intv li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink700);line-height:1.5}
.intv .ck{color:var(--ok);flex:none;margin-top:1px}
.today{font-size:15px;line-height:1.6;color:var(--ink900);border-left:2px solid var(--v600);padding-left:16px}
.today b{color:var(--v700)}

/* Visuels des cas */
.mediawrap{display:flex;justify-content:center}
.media{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:22px;width:100%;max-width:420px;transform:rotate(-.8deg)}
.media--r{transform:rotate(.8deg)}
.media__h{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink500);display:flex;justify-content:space-between;margin-bottom:14px}
.infra{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.srv{border:1px solid var(--ink200);border-radius:var(--r-md);padding:12px 14px;display:flex;align-items:center;gap:10px}
.srv .d{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg);flex:none}
.srv .t{font-family:var(--mono);font-size:12px;color:var(--ink700)}
.media__note{font-family:var(--mono);font-size:11px;color:var(--ink500);margin-top:14px;text-align:center}
.brow{border:1px solid var(--ink200);border-radius:var(--r-md);overflow:hidden}
.brow__bar{background:var(--ink50,#F8F6FD);padding:9px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--ink200)}
.brow__dots{display:flex;gap:5px}
.brow__dots i{width:9px;height:9px;border-radius:50%;background:var(--ink300);display:block}
.brow__url{font-family:var(--mono);font-size:11px;color:var(--ink600);background:#fff;border:1px solid var(--ink200);border-radius:6px;padding:4px 10px;flex:1;overflow:hidden;white-space:nowrap}
.brow__body{padding:18px;display:flex;flex-direction:column;gap:10px}
.brow__row{height:10px;border-radius:4px;background:var(--ink100)}
.brow__row.w1{width:55%}.brow__row.w2{width:80%}.brow__row.tall{height:52px;background:var(--v50);border:1px solid var(--v100)}
.media__metric{font-family:var(--mono);font-size:12px;color:var(--v700);margin-top:14px;text-align:center}

/* Logos */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.logo{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;box-shadow:var(--sh-card);min-height:84px;display:flex;align-items:center;justify-content:center;padding:16px;font-family:var(--font);font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--ink600);text-align:center;transition:.2s var(--ease)}
.logo:hover{color:var(--v600);border-color:var(--v200)}

@media(max-width:960px){
  main h3{font-size:23px}
  .statstrip{grid-template-columns:1fr 1fr}.statstrip>div:nth-child(3){border-left:0}.statstrip>div:nth-child(n+3){border-top:1px solid var(--line)}
  .case{grid-template-columns:1fr;gap:32px}.case .mediawrap{order:2}.media{transform:none;max-width:none}
  .logos{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .statstrip{grid-template-columns:1fr}.statstrip>div{border-left:0;border-top:1px solid var(--line)}.statstrip>div:first-child{border-top:0}
  .case + .case{margin-top:64px}
  .logos{grid-template-columns:1fr 1fr}
}