/* Style partagé des articles de blog — Agents Fusion */
:root{
  --teal:#04948C; --magenta:#FF03B7; --navy:#0a1628; --navy2:#101b30;
  --ink:#1f2937; --muted:#64748b; --line:#e7e9ef; --paper:#fbfaf8; --gold:#b8956a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter Tight',system-ui,-apple-system,sans-serif;
  font-size:18px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* En-tête */
.art-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; background:rgba(251,250,248,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.art-brand{display:flex; align-items:center; gap:11px; font-family:'Fraunces',Georgia,serif; font-size:18px; font-weight:500; color:var(--navy)}
.art-brand img{width:32px; height:32px; border-radius:8px}
.art-back{font-size:14px; font-weight:600; color:var(--muted)}
.art-back:hover{color:var(--navy); text-decoration:none}

/* Corps de l'article */
.art{max-width:720px; margin:0 auto; padding:56px 24px 32px}
.art-eyebrow{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin-bottom:16px}
.art h1{
  font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(30px,5vw,46px);
  line-height:1.1; letter-spacing:-.02em; color:var(--navy); margin:0 0 18px;
}
.art-lede{font-size:20px; line-height:1.6; color:#334155; margin:0 0 14px}
.art-info{font-size:14px; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:26px; margin-bottom:34px}
.art h2{
  font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:27px; line-height:1.2;
  color:var(--navy); margin:44px 0 14px; letter-spacing:-.01em;
}
.art h3{font-size:20px; font-weight:700; color:var(--navy2); margin:30px 0 10px}
.art p{margin:0 0 18px}
.art ul,.art ol{margin:0 0 18px; padding-left:24px}
.art li{margin-bottom:10px}
.art strong{color:var(--navy2); font-weight:700}
.art em{color:var(--teal); font-style:italic}
.art blockquote{
  margin:26px 0; padding:16px 22px; border-left:3px solid var(--magenta);
  background:#fff; border-radius:0 12px 12px 0; color:#334155; font-style:italic;
}
.art-key{background:#fff; border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:0 12px 12px 0; padding:16px 20px; margin:26px 0; font-size:16px}
.art-key strong{display:block; text-transform:uppercase; letter-spacing:.1em; font-size:11px; color:var(--teal); margin-bottom:6px}

/* Sommaire */
.art-toc{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 22px; margin:0 0 36px}
.art-toc-t{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.art-toc ul{margin:0; padding-left:18px}
.art-toc li{margin-bottom:6px; font-size:15.5px}

/* CTA */
.art-cta{
  max-width:720px; margin:20px auto 0; padding:34px; text-align:center;
  background:linear-gradient(135deg,#0e1424,#1a1030); border-radius:20px; color:#fff;
}
.art-cta h2{font-family:'Fraunces',Georgia,serif; color:#fff; font-size:26px; margin:0 0 10px; font-weight:500}
.art-cta p{color:rgba(255,255,255,.8); margin:0 0 20px; font-size:16px}
.art-cta a{
  display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:100px;
  background:linear-gradient(135deg,var(--teal),var(--magenta)); color:#fff; font-weight:600; font-size:15px;
}
.art-cta a:hover{text-decoration:none; opacity:.92}

/* Articles liés */
.art-related{max-width:720px; margin:44px auto 0; padding:0 24px}
.art-related-t{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.art-related a{display:block; padding:14px 18px; background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; color:var(--navy2); font-weight:600}
.art-related a:hover{border-color:var(--teal); text-decoration:none}

/* Pied */
.art-footer{max-width:720px; margin:48px auto 0; padding:26px 24px 48px; border-top:1px solid var(--line); color:var(--muted); font-size:13.5px; text-align:center}
.art-footer a{color:var(--muted)}

@media(max-width:600px){
  body{font-size:17px}
  .art{padding:36px 18px 24px}
  .art-lede{font-size:18px}
  .art h2{font-size:23px}
}
