/* ============================================================
   EchoFirst — gabarit ARTICLE (éditorial)
   Utilisé par « Article - Épanchement pleural.html ».
   S'appuie sur echofirst.css (variables) + pages.css (acard, btn).
   ============================================================ */

/* ---------- en-tête papier ---------- */
.art-head{--pad:clamp(26px,4vw,58px);background:#F4F7FB;color:var(--navy);}
.art-head__inner{max-width:1180px;margin:0 auto;padding:clamp(112px,13vh,150px) var(--pad) 0;}
.art-crumb{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--grey);flex-wrap:wrap;}
.art-crumb a{color:var(--grey);text-decoration:none;transition:color .2s;}
.art-crumb a:hover{color:var(--navy);}
.art-crumb .sep{opacity:.5;}
.art-crumb .cat{color:var(--teal-ink);font-weight:700;letter-spacing:1.3px;text-transform:uppercase;font-size:11px;}
.art-title{margin-top:18px;font-size:clamp(30px,4.2vw,52px);font-weight:600;letter-spacing:-.028em;line-height:1.08;max-width:920px;color:var(--navy);text-wrap:balance;}
.art-chapo{margin-top:20px;font-size:clamp(16px,1.6vw,19px);font-weight:300;color:#41536E;line-height:1.68;max-width:740px;text-wrap:pretty;}

/* byline : auteur + relecture médicale */
.art-byline{margin-top:36px;display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap;padding:0 0 24px;
  border-bottom:2.5px solid rgba(16,57,110,.85);box-shadow:0 7px 0 -6px rgba(16,57,110,.22);}
.art-byline .who{display:flex;align-items:center;gap:13px;}
.art-byline .av{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;letter-spacing:.03em;flex-shrink:0;}
.art-byline .who b{display:block;font-size:14.5px;color:var(--navy);font-weight:700;line-height:1.3;}
.art-byline .who i{display:block;font-style:normal;font-size:12.5px;color:var(--grey);margin-top:2px;}
.art-byline .rev{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--grey);padding-left:26px;border-left:1px solid var(--border);}
.art-byline .rev .ck{width:17px;height:17px;border-radius:50%;background:rgba(0,162,181,.12);color:var(--teal-ink);font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.art-byline .rev b{color:var(--navy);font-weight:600;}
.art-byline .meta{margin-left:auto;display:flex;gap:8px;font-size:12.5px;color:var(--grey);white-space:nowrap;}
@media(max-width:820px){.art-byline .rev{padding-left:0;border-left:none;}.art-byline .meta{margin-left:0;}}

/* ---------- figures ---------- */
.art-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(26px,4vw,58px);}
.art-fig{margin:0;}
.art-fig image-slot{display:block;width:100%;height:400px;border-radius:18px;overflow:hidden;}
.art-fig figcaption{margin-top:11px;font-size:12.5px;color:var(--grey);line-height:1.55;display:flex;gap:9px;}
.art-fig figcaption b{color:var(--navy);font-weight:700;white-space:nowrap;}
.art-fig--hero{max-width:920px;margin:clamp(30px,5vh,50px) auto 0;}
.art-fig--hero image-slot{height:clamp(300px,44vw,460px);}
.art-body .art-fig{margin:30px 0;}
.art-body .art-fig image-slot{height:340px;}

/* ---------- mise en page : colonne (+ sommaire optionnel) ---------- */
.art-layout{display:grid;grid-template-columns:minmax(0,720px);justify-content:center;gap:52px;
  padding:clamp(34px,5vh,58px) 0 clamp(30px,5vh,54px);}
.art-toc{display:none;}
body.art-toc-on .art-layout{grid-template-columns:216px minmax(0,720px);}
body.art-toc-on .art-toc{display:block;position:sticky;top:108px;align-self:start;}
.art-toc .tt{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey);margin-bottom:10px;}
.art-toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--border);font-size:13px;color:var(--grey);text-decoration:none;line-height:1.45;transition:color .2s,border-color .2s;}
.art-toc a:hover{color:var(--navy);}
.art-toc a.on{border-color:var(--teal);color:var(--navy);font-weight:600;}
@media(max-width:960px){body.art-toc-on .art-layout{grid-template-columns:minmax(0,720px);}body.art-toc-on .art-toc{display:none;}}

/* ---------- prose ---------- */
.art-body{font-size:16.5px;line-height:1.82;color:#33445F;}
.art-body>p:first-of-type::first-letter{float:left;font-size:56px;line-height:.86;font-weight:700;color:var(--navy);padding:7px 12px 0 0;}
.art-body h2{font-size:clamp(21px,2.2vw,26px);font-weight:600;color:var(--navy);letter-spacing:-.015em;margin:46px 0 16px;line-height:1.25;}
.art-body h2::after{display:none;}
.art-body h2 .no{color:var(--teal);font-weight:700;font-size:.7em;margin-right:12px;letter-spacing:.08em;}
.art-body p{margin:15px 0;text-wrap:pretty;}
.art-body strong{color:var(--navy);font-weight:600;}
.art-body ul{margin:16px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.art-body ul li{padding-left:23px;position:relative;}
.art-body ul li::before{content:'';position:absolute;left:2px;top:.65em;width:7px;height:7px;border-radius:50%;background:var(--teal);}

/* ---------- signes cliniques (cartes) ---------- */
.art-signs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:24px 0 10px;}
.art-sign{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px 22px;}
.art-sign .tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--teal-ink);background:rgba(0,162,181,.09);border-radius:20px;padding:4px 11px;}
.art-sign h3{margin-top:13px;font-size:15.5px;font-weight:700;color:var(--navy);line-height:1.35;}
.art-sign p{margin:7px 0 0;font-size:13.5px;line-height:1.62;color:var(--grey);}
@media(max-width:640px){.art-signs{grid-template-columns:1fr;}}

/* ---------- encadré « À retenir » ---------- */
.art-key{background:linear-gradient(135deg,var(--navy-dark,#0B2444),var(--navy));border-radius:20px;color:#fff;padding:30px 34px;margin:40px 0 8px;}
.art-key h3{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal-vif,#4FD2E0);display:flex;align-items:center;gap:9px;}
.art-key h3::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--teal-vif,#4FD2E0);}
.art-key ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;}
.art-key li{padding-left:28px;position:relative;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.88);}
.art-key li::before{content:'✓';position:absolute;left:0;top:.1em;color:var(--teal-vif,#4FD2E0);font-weight:800;font-size:14px;}
.art-key b{color:#fff;font-weight:600;}
body.art-key-off .art-key{display:none;}
@media(max-width:640px){.art-key{padding:24px 22px;}}

/* ---------- CTA formation liée ---------- */
.art-cta{display:flex;align-items:center;justify-content:space-between;gap:18px 24px;flex-wrap:wrap;
  background:rgba(0,162,181,.06);border:1px solid rgba(0,162,181,.22);border-radius:20px;padding:26px 30px;margin:38px 0 0;}
.art-cta .k{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal-ink);}
.art-cta b{display:block;margin-top:7px;font-size:18px;color:var(--navy);font-weight:700;letter-spacing:-.01em;}
.art-cta .next{margin-top:8px;font-size:13.5px;color:var(--grey);display:flex;align-items:center;gap:9px;}
.art-cta .next .live{width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0;}
@media(max-width:640px){.art-cta{padding:22px;}}

/* ---------- à lire ensuite ---------- */
.art-rel h2{margin-bottom:26px;}

/* ---------- encadré « L'essentiel » : résumé GEO en tête d'article ----------
   Variante claire de .art-key (le navy « À retenir » reste en pied de corps).
   Ajouté pour le skill publier-actu (encadré 5 points demandé par les briefs Eskimoz). */
.art-key.art-key--lead{background:rgba(0,162,181,.06);border:1px solid rgba(0,162,181,.22);color:var(--navy);margin:6px 0 34px;}
.art-key--lead h3{color:var(--teal-ink);}
.art-key--lead h3::before{background:var(--teal-ink);}
.art-key--lead li{color:#33445F;}
.art-key--lead li::before{color:var(--teal-ink);}
.art-key--lead b{color:var(--navy);}

/* ---------- bloc « Sources » : références discrètes en pied d'article ---------- */
.art-src{margin:34px 0 0;padding-top:20px;border-top:1px solid var(--border);}
.art-src h3{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey);margin:0 0 10px;}
.art-src ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
.art-src li{padding-left:16px;position:relative;font-size:12.5px;line-height:1.5;color:var(--grey);}
.art-src li::before{content:'';position:absolute;left:2px;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--border);}
.art-src a{color:var(--teal-ink);text-decoration:none;overflow-wrap:anywhere;}
.art-src a:hover{text-decoration:underline;}

/* ---------- variante en-tête Navy (Tweak) ---------- */
body.art-dark .art-head{background:linear-gradient(165deg,#081A34,var(--navy));color:#fff;}
body.art-dark .art-title{color:#fff;}
body.art-dark .art-chapo{color:rgba(255,255,255,.76);}
body.art-dark .art-crumb,body.art-dark .art-crumb a{color:rgba(255,255,255,.6);}
body.art-dark .art-crumb a:hover{color:#fff;}
body.art-dark .art-crumb .cat{color:var(--teal-vif,#4FD2E0);}
body.art-dark .art-byline{border-bottom-color:rgba(255,255,255,.72);box-shadow:0 7px 0 -6px rgba(255,255,255,.18);}
body.art-dark .art-byline .av{background:var(--teal);}
body.art-dark .art-byline .who b{color:#fff;}
body.art-dark .art-byline .who i,body.art-dark .art-byline .rev,body.art-dark .art-byline .meta{color:rgba(255,255,255,.62);}
body.art-dark .art-byline .rev{border-left-color:rgba(255,255,255,.18);}
body.art-dark .art-byline .rev b{color:#fff;}
body.art-dark .art-byline .rev .ck{background:rgba(79,210,224,.18);color:var(--teal-vif,#4FD2E0);}