/* ==========================================================================
   SECTORWEB — gabarit d'article
   Repris du <style> en ligne de article.html, plus deux composants que la
   maquette utilise sans les définir (signalés plus bas).
   ========================================================================== */

/* Visuel de couverture */
.art-cover{aspect-ratio:21/9;border:1px solid var(--gridline);border-radius:var(--r-card);background:var(--vellum);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:12px;color:var(--stone);background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:34px 34px;margin-top:clamp(28px,3.5vw,44px);overflow:hidden}
.art-cover img{width:100%;height:100%;object-fit:cover;display:block}
.art-head .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--f-mono);font-size:11.5px;color:var(--ash)}

/* --------------------------------------------------------------------------
   CORRECTION — .keyfact et .ai-sum
   La maquette les utilise dans le corps de l'article mais ne les définit
   nulle part : ni dans son <style>, ni dans sections.css. Écrits ici dans
   le vocabulaire du design (mêmes tokens, mêmes rayons, même échelle que
   .metric et .badge). À reporter dans la maquette.
   -------------------------------------------------------------------------- */
.keyfact{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start;
  border:1px solid var(--gridline); border-left:2px solid var(--ember);
  border-radius:var(--r-card); background:var(--vellum);
  padding:24px 26px; margin:2em 0;
}
.keyfact .n{
  font-size:38px; font-weight:500; letter-spacing:-.025em; line-height:1;
  color:var(--ember); white-space:nowrap;
}
.keyfact p{ font-size:15px; line-height:1.6; color:var(--graphite); margin:0 }
.keyfact .src{
  display:block; margin-top:10px;
  font-family:var(--f-mono); font-size:11.5px; color:var(--ash);
}
@media(max-width:620px){ .keyfact{ grid-template-columns:minmax(0,1fr); gap:12px } }

.ai-sum{
  border:1px solid var(--gridline); border-radius:var(--r-card);
  background:var(--canvas); padding:20px 22px;
  display:flex; flex-direction:column; gap:12px;
}
.ai-sum .lb{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--slate);
}
.ai-sum .lb .dot{ width:5px; height:5px; border-radius:var(--r-pill); background:var(--ember); flex-shrink:0 }
.ai-sum .row{ display:flex; gap:8px; flex-wrap:wrap }
.ai-sum .row a{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--gridline); border-radius:var(--r-pill);
  background:var(--vellum); padding:6px 14px 6px 7px;
  font-size:13.5px; color:var(--ink);
  transition:border-color .15s,color .15s;
}
.ai-sum .row a:hover{ border-color:var(--ember); color:var(--ember) }
.ai-sum .mk{
  width:22px; height:22px; border-radius:var(--r-pill);
  background:var(--canvas); border:1px solid var(--gridline);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--slate); flex-shrink:0;
}
/* Les marques héritent de la couleur du texte : elles suivent donc le survol
   et le mode sombre sans règle supplémentaire. */
.ai-sum .mk svg{
  width:12px;
  height:12px;
  display:block;
}
.ai-sum .row a:hover .mk{ border-color:var(--ember); color:var(--ember) }
.ai-sum .hint{ font-size:12.5px; color:var(--ash); line-height:1.5 }