/* ============================================================
   Blog Sowell — styles dédiés (chargé après styles.css)
   Réutilise les tokens du site : --ink --flux --pulse --rose --line --muted
   ============================================================ */

.blog-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Bouton dégradé (CTA blog) + lien nav actif — non fournis par styles.css */
.btn.btn-flux{background:var(--grad);color:#fff;border:none}
.btn.btn-flux:hover{filter:brightness(1.05)}
.nav-links a.active{color:var(--flux)}

/* ---- Hero ---- */
.blog-hero{text-align:center;padding:64px 20px 34px}
.blog-hero .bh-badge{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--flux);background:rgba(109,94,252,.08);border:1px solid rgba(109,94,252,.18);padding:6px 14px;border-radius:999px;margin-bottom:20px}
.blog-hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(34px,5vw,52px);line-height:1.06;margin:0 0 14px;color:var(--ink)}
.blog-hero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.blog-hero p{max-width:560px;margin:0 auto;color:var(--muted);font-size:18px;line-height:1.6}

/* ---- Filtres (pastilles) ---- */
.blog-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:26px 0 40px}
.chip{border:1px solid var(--line);background:#fff;color:var(--muted);font-weight:600;font-size:14px;padding:8px 16px;border-radius:999px;cursor:pointer;transition:.18s}
.chip:hover{border-color:var(--flux);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---- Pastille catégorie ---- */
.pastille{display:inline-block;font-weight:700;font-size:12.5px;padding:4px 12px;border-radius:999px;line-height:1.3}
.p-onboarding{background:rgba(109,94,252,.12);color:#5a49e6}
.p-ats{background:rgba(244,63,94,.12);color:#e11d48}
.p-retention{background:rgba(0,214,164,.14);color:#0b8f74}
.p-mesure{background:rgba(245,158,11,.15);color:#b45309}
.p-process{background:rgba(139,92,246,.13);color:#7c3aed}
.p-juridique{background:rgba(20,116,146,.12);color:#0e7490}
.p-default{background:#eef0f6;color:#475569}

/* Pastille en surimpression sur la couverture (façon Taleez) : fond blanc translucide
   pour être lisible sur toute image, texte à la couleur de la catégorie (via .p-xxx). */
.cover-pastille{position:absolute;top:13px;left:13px;z-index:2;display:inline-block;font-weight:700;font-size:12.5px;line-height:1.3;padding:5px 13px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(11,16,32,.16)}

/* ---- Bloc à la une (featured + side) ---- */
.blog-featured{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;margin-bottom:46px}
@media(max-width:900px){.blog-featured{grid-template-columns:1fr}}
/* Intégré dans « Tous les articles » : espacement resserré + suivi éventuel d'une grille */
.aa-body .blog-featured{margin-bottom:26px}
.aa-body .blog-grid{margin-bottom:0}
/* Un seul article : carte contenue, pas de colonne vide à droite */
.blog-featured.single{grid-template-columns:minmax(0,660px)}

.feat-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:.2s;box-shadow:var(--shadow)}
.feat-card:hover{transform:translateY(-3px)}
.feat-card .cover{aspect-ratio:16/9}
.feat-card .fc-body{padding:22px 24px 24px}
.feat-card h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;line-height:1.14;margin:12px 0 10px;color:var(--ink)}
.feat-card p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0 0 16px}

.side-col{display:flex;flex-direction:column;gap:16px}
.side-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;text-decoration:none;color:inherit;transition:.18s;position:relative}
.side-card:hover{border-color:var(--flux);transform:translateY(-2px)}
.side-card h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17.5px;line-height:1.22;margin:0;color:var(--ink);padding-right:34px}
.side-card .go{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}

/* ---- Couvertures (image ou dégradé fallback) ---- */
.cover{position:relative;background:var(--grad);overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover .cov-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--grad)}
.cover .cov-fallback svg{width:64px;height:64px;color:#fff;opacity:.9}

/* ---- Grille articles ---- */
.blog-grid-h{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;color:var(--ink);margin:0 0 20px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:60px}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}

.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:.2s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.post-card .cover{aspect-ratio:16/10}
.post-card .pc-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.post-card h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18.5px;line-height:1.22;margin:11px 0 8px;color:var(--ink)}
.post-card p{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 14px;flex:1}

/* ---- Meta auteur ---- */
.pc-meta{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.pc-meta .av{width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0;overflow:hidden}
.pc-meta .av img{width:100%;height:100%;object-fit:cover}
.pc-meta .dot{opacity:.5}

.blog-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:50px 0}

/* ---- CTA bas de blog ---- */
.blog-cta{background:var(--ink);border-radius:24px;padding:44px 40px;text-align:center;color:#fff;margin:10px 0 70px}
.blog-cta h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:28px;margin:0 0 10px}
.blog-cta p{color:#c7cbd8;font-size:16px;max-width:520px;margin:0 auto 22px}

/* ============================================================
   Section A : Tous les articles (filtres + recherche)
   ============================================================ */
.all-articles{margin:4px 0 54px}
.aa-head{margin:0 0 22px}
.aa-head h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;color:var(--ink);margin:0 0 6px}
.aa-sub{color:var(--muted);font-size:15px;margin:0;max-width:560px}
.aa-filters{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:0 0 28px}
.aa-flabel{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.aa-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.aa-select{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646B7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 14px center;background-size:15px;border-radius:999px;padding:10px 40px 10px 18px;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;transition:.18s}
.aa-select:hover{border-color:var(--flux)}
.aa-reset{background:none;border:none;color:var(--muted);font-weight:600;font-size:14px;cursor:pointer;padding:8px 8px;transition:.18s}
.aa-reset:hover{color:var(--flux)}
.aa-search{margin-left:auto;display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;min-width:250px;transition:.18s}
.aa-search:focus-within{border-color:var(--flux)}
.aa-search svg{width:16px;height:16px;color:var(--muted);flex-shrink:0}
.aa-search input{border:none;outline:none;background:transparent;font:inherit;font-size:14px;color:var(--ink);width:100%}
.aa-search input::placeholder{color:var(--muted)}
@media(max-width:640px){.aa-bar{gap:8px}.aa-search{margin-left:0;width:100%;order:3}}

/* ============================================================
   Section B — Aller plus loin (promo + ressources)
   ============================================================ */
.further{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;margin:0 0 58px}
@media(max-width:840px){.further{grid-template-columns:1fr}}
.further-promo{background:var(--ink);border-radius:22px;padding:36px 34px;color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.further-promo .glow{position:absolute;width:280px;height:280px;border-radius:50%;background:var(--grad);filter:blur(70px);opacity:.35;top:-90px;right:-70px}
.further-promo .lbl{position:relative;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7DD3FC;margin-bottom:12px}
.further-promo h3{position:relative;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:27px;line-height:1.14;margin:0 0 12px}
.further-promo p{position:relative;color:#c7cbd8;font-size:15px;line-height:1.6;margin:0 0 22px;max-width:400px}
.further-promo .btn{position:relative;align-self:flex-start}
.further-links{display:flex;flex-direction:column;gap:13px}
.further-link{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px 20px;text-decoration:none;color:inherit;transition:.18s;position:relative}
.further-link:hover{border-color:var(--flux);transform:translateY(-2px);box-shadow:var(--shadow)}
.further-link .fl-ic{width:44px;height:44px;border-radius:13px;background:rgba(109,94,252,.1);color:var(--flux);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.further-link .fl-ic svg{width:22px;height:22px}
.further-link h4{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;margin:0;color:var(--ink)}
.further-link p{color:var(--muted);font-size:13px;margin:2px 0 0}
.further-link .fl-go{margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:.18s}
.further-link:hover .fl-go{background:var(--flux)}

/* ============================================================
   Section C — CTA final immersif
   ============================================================ */
.final-cta{text-align:center;padding:8px 0 84px}
.final-cta .fc-badge{width:64px;height:64px;border-radius:20px;background:var(--grad);display:inline-flex;align-items:center;justify-content:center;color:#fff;margin-bottom:22px;box-shadow:0 12px 30px rgba(109,94,252,.28)}
.final-cta .fc-badge svg{width:30px;height:30px}
.final-cta h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,4.6vw,46px);line-height:1.08;margin:0 0 16px;color:var(--ink);letter-spacing:-.01em}
.final-cta h2 .hl{background:var(--ink);color:#fff;padding:2px 14px;border-radius:10px;display:inline-block;transform:rotate(-1.5deg)}
.final-cta p{color:var(--muted);font-size:18px;line-height:1.55;max-width:540px;margin:0 auto 26px}
.final-cta .fc-note{color:var(--muted);font-size:13px;margin-top:16px}
.btn-lg{padding:15px 28px;font-size:16px;border-radius:14px}

/* ============================================================
   Page article
   ============================================================ */
.article{max-width:760px;margin:0 auto;padding:0 24px}
.article-top{padding:34px 0 6px}
.article-back{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none;font-weight:600;font-size:14px}
.article-back:hover{color:var(--flux)}
.article-head{padding:22px 0 8px}
.article-head h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(28px,4.4vw,42px);line-height:1.12;margin:16px 0 16px;color:var(--ink)}
.article-meta{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.article-meta .av{width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;overflow:hidden}
.article-meta .av img{width:100%;height:100%;object-fit:cover}
.article-cover{aspect-ratio:16/8;border-radius:20px;overflow:hidden;margin:26px 0 34px}

.prose{font-size:17.5px;line-height:1.75;color:#1e2433}
.prose p{margin:0 0 20px}
.prose h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;color:var(--ink);margin:36px 0 12px}
.prose h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:21px;color:var(--ink);margin:28px 0 10px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px}
.prose li{margin:7px 0}
.prose img{max-width:100%;border-radius:14px;margin:10px 0 24px}
.prose blockquote{border-left:4px solid var(--flux);background:#f7f7fb;margin:24px 0;padding:14px 20px;border-radius:0 12px 12px 0;color:#334;font-style:italic}
.prose a{color:var(--flux);text-decoration:underline}
.prose strong{color:var(--ink)}
.article-foot{border-top:1px solid var(--line);margin:44px 0 70px;padding-top:26px}