/* ============================================================
   NeoStop Laser® — Article / long-form styles
   Loaded after styles.css. Tuned for CMS-rendered rich content.
   ============================================================ */

.wrap-narrow{max-width:720px;margin:0 auto;padding:0 var(--gutter);}

/* ---------- article header ---------- */
.art-head{padding:40px 0 24px;}
.art-back{font-size:13.5px;font-weight:600;color:var(--ink-soft);letter-spacing:.02em;
  display:block;margin-bottom:28px;transition:color .15s;}
.art-back:hover{color:var(--primary);}
.art-cat{display:inline-block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--accent-deep);margin-bottom:18px;}
.art-title{font-size:clamp(32px,7vw,50px);line-height:1.06;font-weight:400;letter-spacing:-.015em;}
.art-excerpt{font-size:clamp(17px,2.4vw,20px);line-height:1.55;color:var(--ink-soft);
  margin-top:22px;font-family:var(--serif);font-style:italic;}

.art-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line-soft);}
.art-author{display:flex;align-items:center;gap:13px;}
.art-av{width:44px;height:44px;border-radius:50%;background:var(--primary);color:var(--on-primary);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;flex-shrink:0;}
.art-av.lg{width:56px;height:56px;font-size:23px;}
.art-author b{font-size:14.5px;display:block;}
.art-author span{font-size:12.5px;color:var(--ink-faint);}
.art-meta-r{font-size:13.5px;color:var(--ink-faint);display:flex;align-items:center;gap:9px;}
.art-meta-r .dot{opacity:.5;}

/* ---------- cover ---------- */
.art-cover{margin:14px 0 0;}
.art-cover figcaption,.art-inline-img figcaption{
  font-size:12.5px;color:var(--ink-faint);text-align:center;margin-top:11px;font-style:italic;font-family:var(--serif);}

/* ---------- body (rich text from CMS) ---------- */
.art-body{font-size:18px;line-height:1.75;color:#26333d;padding:34px 0 6px;}
.art-body > * + *{margin-top:24px;}
.art-body p{text-wrap:pretty;}
.art-dropcap::first-letter{
  font-family:var(--serif);font-size:62px;line-height:.78;float:left;
  padding:6px 12px 0 0;color:var(--primary);font-weight:500;}

.art-body h2{font-size:clamp(24px,4vw,30px);line-height:1.18;margin-top:46px;letter-spacing:-.01em;}
.art-body h3{font-size:clamp(19px,3vw,22px);line-height:1.25;margin-top:36px;}
.art-body h2 + p,.art-body h3 + p{margin-top:14px;}

.art-body a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--accent);text-decoration-thickness:1.5px;}
.art-body a:hover{text-decoration-color:var(--primary);}
.art-body strong{font-weight:600;color:var(--ink);}

.art-body ul,.art-body ol{margin-top:20px;padding-left:0;list-style:none;}
.art-body ul li,.art-body ol li{position:relative;padding-left:30px;margin-top:12px;}
.art-body ul li::before{content:"";position:absolute;left:6px;top:13px;width:7px;height:7px;
  border-radius:50%;background:var(--accent-deep);}
.art-body ol{counter-reset:li;}
.art-body ol li{counter-increment:li;}
.art-body ol li::before{content:counter(li);position:absolute;left:0;top:1px;
  font-family:var(--serif);font-size:14px;color:var(--accent-deep);
  width:20px;text-align:center;}

.art-body blockquote{margin:36px 0;padding:6px 0 6px 28px;border-left:3px solid var(--accent);
  font-family:var(--serif);font-style:italic;font-size:clamp(20px,3.2vw,24px);line-height:1.45;color:var(--primary-deep);}
.art-body blockquote cite{display:block;font-style:normal;font-family:var(--sans);
  font-size:14px;color:var(--ink-faint);margin-top:14px;font-weight:500;}

.art-inline-img{margin:38px 0;}

/* images dropped from the CMS into rich content */
.art-body img{border-radius:var(--radius);margin:34px 0;width:100%;}
.art-body figure{margin:34px 0;}
.art-body figure figcaption{font-size:12.5px;color:var(--ink-faint);text-align:center;
  margin-top:11px;font-style:italic;font-family:var(--serif);}

/* ---------- author box ---------- */
.art-authorbox{display:flex;gap:18px;align-items:flex-start;margin:48px 0 6px;
  padding:28px;background:var(--bg-card);border:1px solid var(--line-soft);border-radius:var(--radius);}
.art-authorbox b{font-size:15px;}
.art-authorbox p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin-top:8px;}

/* ---------- end CTA ---------- */
.art-cta{margin-top:56px;background:var(--primary);color:var(--on-primary);padding:60px 0;text-align:center;}
.art-cta h2{color:var(--paper);font-size:clamp(26px,5vw,38px);}
.art-cta p{color:rgba(238,244,247,.8);font-size:17px;margin:16px auto 28px;max-width:46ch;}

@media (max-width:520px){
  .art-authorbox{flex-direction:column;gap:14px;padding:22px;}
  .art-meta{gap:14px;}
}

/* ---------- cover image (CMS) ---------- */
.art-cover .cover-img{height:clamp(220px,46vw,440px);border-radius:var(--radius);
  background-size:cover;background-position:center;background-color:var(--ph);}

/* ---------- articles liés ---------- */
.art-related{margin-top:56px;padding:48px 0 8px;border-top:1px solid var(--line-soft);}
.art-related-h{font-size:24px;margin-bottom:24px;}
.art-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.art-rel-card{display:flex;flex-direction:column;gap:8px;padding:22px;background:var(--bg-card);
  border:1px solid var(--line-soft);border-radius:var(--radius);transition:box-shadow .25s,transform .25s;}
.art-rel-card:hover{box-shadow:var(--shadow-soft);transform:translateY(-2px);}
.art-rel-cat{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--accent-deep);}
.art-rel-card h3{font-size:17px;line-height:1.25;letter-spacing:-.005em;}
.art-rel-meta{font-size:12.5px;color:var(--ink-faint);margin-top:auto;}

/* ---------- article introuvable ---------- */
.article-missing{padding:80px 0;text-align:center;}
.article-missing h1{font-size:32px;margin:18px 0 10px;}
.article-missing p{color:var(--ink-soft);margin-bottom:24px;}

@media (max-width:860px){
  .art-related-grid{grid-template-columns:1fr;gap:14px;}
}