/* ============================================================
   NORMAPRODS — article.css
   Design system "Session Cut / Loud" (F1-B) — feuille articles.
   Charge après site.css et consomme ses tokens : var(--loud)
   pour les titres Anton, var(--mono) pour la métadonnée,
   cuivre (--accent) pour les interactifs, or réservé aux preuves.
   Conserve les noms de classes des HTML d'articles migrés :
   .article-hero, .article-meta, .article-body, .article-cta-block,
   .article-author-box, .article-related, .mail-capture-band…
   ============================================================ */

/* ---- Colonne article ---- */
.article-wrap{padding-top:0}
.article-hero,
.article-img-wrap,
.article-body{
  max-width:760px; margin-left:auto; margin-right:auto;
  padding-left:var(--pad-x); padding-right:var(--pad-x);
}
/* panneaux pleine-carte alignés sur la colonne de texte */
.article-cta-block,
.article-author-box,
.article-related{
  width:calc(100% - 2*var(--pad-x));
  max-width:calc(760px - 2*var(--pad-x));
  margin-left:auto; margin-right:auto;
}

/* ============================================================
   HERO D'ARTICLE — cri Anton + fiche de session
   ============================================================ */
.article-hero{
  position:relative;
  padding-top:clamp(48px,7vh,84px); padding-bottom:26px;
}

/* breadcrumb — voix mono console */
.crumb{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:22px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:baseline;
}
.crumb a{color:var(--ink-mute)}
.crumb a:hover{color:var(--accent-bright)}
.crumb .sep{color:var(--line-2)}
.crumb .current{color:var(--ink-dim)}

/* badge catégorie — tag mono cuivre, coins droits */
.article-cat-badge{margin-bottom:18px}
.article-cat{
  display:inline-block; font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent-2); padding:6px 12px;
  background:var(--accent-soft);
}
.article-cat-tools,
.article-cat-industry,
.article-cat-guides,
.article-cat-production,
.article-cat-beatstars{color:var(--accent); border-color:var(--accent-2)}

/* titre — Anton massif, la voix Loud */
.article-title{
  font-family:var(--loud); font-weight:400;
  font-size:clamp(36px,6vw,74px); line-height:.94; letter-spacing:.005em;
  text-transform:uppercase; color:var(--ink);
  margin:0 0 18px; position:relative; padding-bottom:22px;
}
.article-title::after{content:""; position:absolute; left:2px; bottom:0; width:60px; height:1px; background:var(--accent)}

/* dek — Space Grotesk, os atténué */
.article-dek{
  font-family:var(--body); font-size:clamp(17px,1.6vw,20px); line-height:1.55;
  color:var(--ink-dim); margin:0 0 30px; max-width:58ch;
}

/* méta — rangée mono façon session sheet */
.article-meta{
  display:flex; flex-wrap:wrap; gap:20px 40px;
  border-top:1px solid var(--line); padding-top:20px;
}
.article-meta-item{display:flex; flex-direction:column; gap:5px}
.article-meta-label{
  font-family:var(--mono); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-mute);
}
.article-meta-val{
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  letter-spacing:.05em; color:var(--ink); text-transform:uppercase;
}

/* ============================================================
   IMAGE COVER — traitement pellicule, filet 1px
   ============================================================ */
.article-img-wrap{padding-top:26px; max-width:960px}
.article-hero-img{
  display:block; width:100%; height:auto; max-height:520px; object-fit:cover;
  border:1px solid var(--line-2);
  filter:saturate(.72) contrast(1.05) sepia(.12);
}

/* ============================================================
   CORPS — prose 720px max, Space Grotesk
   ============================================================ */
.article-body{
  margin-top:clamp(38px,5vh,54px); padding-bottom:44px;
  font-family:var(--body); font-size:17px; line-height:1.78; color:var(--ink-dim);
}
.article-body > * + *{margin-top:1.35em}
.article-body p{margin:0}
.article-body strong{color:var(--ink); font-weight:600}
.article-body em{font-style:italic}
.article-body a{
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(196,106,58,.4);
}
.article-body a:hover{color:var(--accent-bright); border-color:var(--accent-bright)}

/* h2 — Anton, hairline cuivre */
.article-body h2{
  font-family:var(--loud); font-weight:400;
  font-size:clamp(25px,3vw,38px); line-height:1; letter-spacing:.01em;
  text-transform:uppercase; color:var(--ink);
  margin-top:2.1em; position:relative; padding-bottom:16px;
}
.article-body h2::after{content:""; position:absolute; left:2px; bottom:0; width:44px; height:1px; background:var(--accent)}

/* h3 — Archivo 800, voix display */
.article-body h3{
  font-family:var(--display); font-weight:800;
  font-size:clamp(17px,1.8vw,21px); line-height:1.25; letter-spacing:.01em;
  text-transform:uppercase; color:var(--ink); margin-top:1.7em;
}
.article-body h3 a{border-bottom-width:2px}

/* listes */
.article-body ul, .article-body ol{padding-left:22px}
.article-body li{margin-bottom:8px}
.article-body li::marker{color:var(--accent); font-family:var(--mono); font-size:.9em}

/* blockquote — panneau prompt, filet cuivre */
.article-body blockquote{
  margin:1.9em 0; padding:20px 24px;
  border-left:2px solid var(--accent);
  background:var(--bg-panel);
  font-family:var(--mono); font-size:14px; line-height:1.85;
  font-style:normal; color:var(--ink);
}

/* code / tables / hr */
.article-body code{
  font-family:var(--mono); font-size:.88em; color:var(--ink);
  background:var(--bg-panel); border:1px solid var(--line); padding:2px 6px;
}
.article-body pre{
  font-family:var(--mono); font-size:13px; line-height:1.8; color:var(--ink);
  background:var(--bg-input); border:1px solid var(--line-2);
  padding:18px 20px; overflow-x:auto;
}
.article-body pre code{background:none; border:none; padding:0}
.article-body hr{border:none; border-top:1px solid var(--line-2); margin:2.6em 0}
.article-body table{width:100%; border-collapse:collapse; font-size:15px}
.article-body th, .article-body td{border:1px solid var(--line-2); padding:10px 12px; text-align:left; vertical-align:top}
.article-body th{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute); background:var(--bg-panel);
}
.article-body img{max-width:100%; height:auto; border:1px solid var(--line); filter:saturate(.72) sepia(.1)}

/* boîte "tip" éventuelle — note d'atelier */
.article-tip, .article-body .tip{
  margin:1.9em 0; padding:18px 22px;
  border:1px solid var(--line-2); border-left:2px solid var(--green);
  background:var(--bg-panel); font-size:15px; color:var(--ink-dim);
}
.article-tip strong, .article-body .tip strong{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--green); display:block; margin-bottom:6px;
}

/* FAQ dans le corps — surcharge de la version site.css */
.article-body .faq-list{border-top:1px solid var(--line-2); margin-top:1.4em; max-width:none}
.article-body .faq-item{border-bottom:1px solid var(--line); padding:20px 0; margin-top:0}
.article-body .faq-q{
  font-family:var(--display); font-weight:800; font-size:17px;
  text-transform:uppercase; letter-spacing:.01em; color:var(--ink);
  margin:0 0 8px; padding:0;
}
.article-body .faq-q::after{display:none}
.article-body .faq-a{color:var(--ink-dim); font-size:15px; margin:0; max-width:640px}

/* ============================================================
   CTA BLOCK — module outil (panneau console)
   ============================================================ */
.article-cta-block{
  margin-bottom:clamp(44px,6vh,64px);
  border:1px solid var(--line-2); background:var(--bg-panel);
  padding:clamp(26px,3.5vw,40px);
}
.article-cta-block .eyebrow{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--steel); margin-bottom:14px;
}
.article-cta-block h3{
  font-family:var(--loud); font-weight:400; font-size:clamp(22px,2.6vw,32px);
  line-height:1; letter-spacing:.01em; text-transform:uppercase;
  color:var(--ink); margin-bottom:12px;
}
.article-cta-block p{font-size:15px; line-height:1.65; color:var(--ink-dim); margin-bottom:22px; max-width:560px}

/* bouton principal des articles — alias cuivre du .btn-solid */
.btn-primary{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  display:inline-block; padding:14px 26px; border:none;
  background:var(--accent); color:var(--accent-ink); font-weight:700;
}
.btn-primary:hover{background:var(--accent-bright); color:var(--accent-ink)}

/* ============================================================
   AUTHOR NOTE + READ NEXT (navigation article suivant)
   ============================================================ */
.article-author-box, .article-related{
  margin-bottom:clamp(36px,5vh,52px);
  border:1px solid var(--line); background:var(--bg-panel);
  padding:clamp(24px,3vw,32px);
}
.article-author-box h2, .article-related h2{
  font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent);
  border-bottom:1px solid var(--line); padding-bottom:10px; margin:0 0 14px;
}
.article-author-box p{font-size:14.5px; line-height:1.7; color:var(--ink-dim); margin:0}

.article-related-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.article-related-card{
  display:flex; flex-direction:column; gap:8px; padding:18px 20px;
  background:var(--bg-input); border:1px solid var(--line);
  transition:border-color .2s ease;
}
.article-related-card:hover{border-color:var(--accent)}
.article-related-label{
  font-family:var(--mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel);
}
.article-related-title{
  font-family:var(--display); font-weight:800; font-size:16.5px;
  letter-spacing:.01em; line-height:1.2; text-transform:uppercase; color:var(--ink);
}
.article-related-card:hover .article-related-title{color:var(--accent-bright)}
.article-related-desc{font-size:13.5px; line-height:1.55; color:var(--ink-dim); font-family:var(--body)}

/* ============================================================
   MAIL CAPTURE BAND — dernier appel (contrat mail-handler.js)
   ============================================================ */
.mail-capture-band{
  text-align:center; padding:var(--sec-y) var(--pad-x);
  border-top:1px solid var(--line-2); background:var(--bg-panel);
}
.mail-capture-title{
  font-family:var(--loud); font-weight:400;
  font-size:clamp(28px,4vw,48px); line-height:.96; letter-spacing:.01em;
  text-transform:uppercase; color:var(--ink); margin-bottom:12px;
}
.mail-capture-sub{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim); margin:0 auto 28px; max-width:620px;
}
.mail-capture-band .mail-capture-form{margin:0 auto; justify-content:center}
.mail-capture-band .mail-capture-form button[type="submit"],
.mail-capture-band .btn-primary{padding:0 24px; font-size:12px}
.mail-legal{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:14px;
}

/* ---- Responsive ---- */
@media (max-width:640px){
  .article-related-grid{grid-template-columns:1fr}
  .article-meta{gap:16px 28px}
}