/* ===== Blog — Naël Guerin Consulting ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --green: #0E7C8B; --green-dark: #0A6070; --green-deep: #084F5C;
  --mint: #4FD1C5; --mint-soft: #D2F1F0;
  --navy: #0D1526; --navy2: #131E33;
  --bg: #F5F7FA; --bg2: #FFFFFF; --bg3: #EEF2F7;
  --ink: #0D1526; --ink2: #46536B; --ink3: #8A97AC;
  --white: #FFFFFF; --border: #E3E9F0; --border2: #D3DCE6;
  --radius: 16px; --radius-sm: 8px;
  /* Couleurs par thématique */
  --cat-projet: #0E7C8B;      --cat-projet-deep: #084F5C;   --cat-projet-soft: #D2F1F0;
  --cat-cyber: #2563C9;       --cat-cyber-deep: #1A4894;    --cat-cyber-soft: #DCE7FA;
  --cat-conformite: #7C3AED;  --cat-conformite-deep: #5B21B6; --cat-conformite-soft: #EDE4FC;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
.display { font-family: 'Plus Jakarta Sans', sans-serif; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; border-radius: 4px; }

/* NAV */
.nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 5%; background: var(--green); box-shadow: 0 2px 16px rgba(13,21,38,0.08); }
.logo { display: flex; align-items: center; gap: 5px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.3px; color: var(--white); text-decoration: none; }
.logo .mint { color: var(--mint); }
.nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; }
.nav-links a { text-decoration: none; font-size: 0.9rem; color: rgba(255,255,255,0.92); transition: color .2s; font-weight: 600; }
.nav-links a:hover { color: var(--mint); }
.nav-cta { background: var(--white); color: var(--green-dark); border: none; padding: 0.55rem 1.3rem; border-radius: 8px; font-size: 0.88rem; font-family: 'Inter', sans-serif; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .2s; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.15); }
@media (max-width: 720px) { .nav-links { display: none; } }

/* BLOG HEADER */
.blog-hero { background: var(--navy); color: var(--white); padding: 4rem 5% 3.5rem; text-align: center; }
.blog-hero .eyebrow { font-size: 0.8rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mint); margin-bottom: 1rem; }
.blog-hero h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -1px; line-height: 1.1; max-width: 780px; margin: 0 auto 1rem; }
.blog-hero p { font-size: 1.05rem; color: rgba(255,255,255,0.72); max-width: 600px; margin: 0 auto; }

/* ARTICLE LIST */
.blog-wrap { max-width: 1100px; margin: 0 auto; padding: 3.5rem 5% 4rem; }
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 720px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all .25s; display: flex; flex-direction: column; }
.post-card:hover { box-shadow: 0 16px 44px rgba(13,21,38,0.1); transform: translateY(-4px); border-color: var(--mint); }
.post-card-top { height: 6px; background: linear-gradient(90deg, var(--green), var(--mint)); }
.post-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }
.post-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--green-deep); background: var(--mint-soft); padding: 5px 12px; border-radius: 6px; margin-bottom: 1rem; align-self: flex-start; }
.post-card h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--navy); line-height: 1.25; margin-bottom: 0.75rem; }
.post-card h2 a { color: inherit; text-decoration: none; }
.post-card h2 a:hover { color: var(--green); }
.post-card p { font-size: 0.92rem; color: var(--ink2); line-height: 1.65; margin-bottom: 1.25rem; flex: 1; }
.post-meta { font-size: 0.8rem; color: var(--ink3); margin-bottom: 1rem; }
.post-link { color: var(--green); font-weight: 700; font-size: 0.9rem; text-decoration: none; align-self: flex-start; }
.post-link:hover { text-decoration: underline; }

/* ARTICLE PAGE */
.article { max-width: 760px; margin: 0 auto; padding: 3rem 5% 4rem; }
.article-banner { width: 100%; max-width: 900px; margin: 0 auto 2.5rem; border-radius: var(--radius); overflow: hidden; box-shadow: 0 16px 44px rgba(13,21,38,0.12); display: block; }
.article-banner img { width: 100%; height: auto; display: block; }
.breadcrumb { font-size: 0.85rem; color: var(--ink3); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--green); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.article-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--green-deep); background: var(--mint-soft); padding: 5px 12px; border-radius: 6px; margin-bottom: 1.25rem; }
.article h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -1px; line-height: 1.12; color: var(--navy); margin-bottom: 1rem; }
.article-meta { font-size: 0.9rem; color: var(--ink3); margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.article-lead { font-size: 1.15rem; color: var(--ink2); line-height: 1.7; margin-bottom: 2rem; font-weight: 500; }
.article h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--navy); letter-spacing: -0.5px; margin: 2.5rem 0 1rem; }
.article h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--navy); margin: 1.75rem 0 0.75rem; }
.article p { margin-bottom: 1.25rem; color: var(--ink); }
.article ul, .article ol { margin: 0 0 1.5rem 1.25rem; }
.article li { margin-bottom: 0.6rem; padding-left: 0.4rem; }
.article strong { color: var(--navy); font-weight: 700; }
.article blockquote { border-left: 4px solid var(--green); background: var(--bg3); padding: 1.25rem 1.5rem; border-radius: 0 8px 8px 0; margin: 0 0 1.5rem; color: var(--ink2); font-style: italic; }
.article a.inline { color: var(--green); font-weight: 600; }
.callout { background: linear-gradient(160deg, var(--green) 0%, var(--green-deep) 100%); color: var(--white); border-radius: var(--radius); padding: 2rem; margin: 2.5rem 0; text-align: center; }
.callout h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--white); margin-bottom: 0.6rem; }
.callout p { color: rgba(255,255,255,0.85); margin-bottom: 1.25rem; }
.callout a { display: inline-block; background: var(--white); color: var(--green-deep); padding: 0.85rem 1.75rem; border-radius: 8px; font-weight: 700; text-decoration: none; transition: all .2s; }
.callout a:hover { background: var(--navy); color: var(--white); }
.article-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); flex-wrap: wrap; }
.article-nav a { color: var(--green); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.article-nav a:hover { text-decoration: underline; }

/* FOOTER */
footer { background: var(--navy); color: var(--white); padding: 2.5rem 5%; text-align: center; }
.footer-logo { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.3rem; margin-bottom: 0.75rem; }
.footer-logo .mint { color: var(--green); }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.25rem; }
.footer-links a { font-size: 0.9rem; color: rgba(255,255,255,0.8); text-decoration: none; font-weight: 600; }
.footer-links a:hover { color: var(--mint); }
.footer-copy { font-size: 0.8rem; color: rgba(255,255,255,0.45); padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.1); line-height: 1.7; }

/* ===== CODE COULEUR PAR CATÉGORIE ===== */

/* --- Carte de la liste (post-card) : trait haut + tag --- */
.post-card.cat-projet .post-card-top { background: linear-gradient(90deg, var(--cat-projet), #4FD1C5); }
.post-card.cat-projet .post-tag { color: var(--cat-projet-deep); background: var(--cat-projet-soft); }
.post-card.cat-projet:hover { border-color: var(--cat-projet); }
.post-card.cat-projet h2 a:hover { color: var(--cat-projet); }
.post-card.cat-projet .post-link { color: var(--cat-projet); }

.post-card.cat-cyber .post-card-top { background: linear-gradient(90deg, var(--cat-cyber), #6FA8FF); }
.post-card.cat-cyber .post-tag { color: var(--cat-cyber-deep); background: var(--cat-cyber-soft); }
.post-card.cat-cyber:hover { border-color: var(--cat-cyber); }
.post-card.cat-cyber h2 a:hover { color: var(--cat-cyber); }
.post-card.cat-cyber .post-link { color: var(--cat-cyber); }

.post-card.cat-conformite .post-card-top { background: linear-gradient(90deg, var(--cat-conformite), #B794F6); }
.post-card.cat-conformite .post-tag { color: var(--cat-conformite-deep); background: var(--cat-conformite-soft); }
.post-card.cat-conformite:hover { border-color: var(--cat-conformite); }
.post-card.cat-conformite h2 a:hover { color: var(--cat-conformite); }
.post-card.cat-conformite .post-link { color: var(--cat-conformite); }

/* --- Page article : tag, accents, liens, blockquote, callout --- */
.article.cat-projet .article-tag { color: var(--cat-projet-deep); background: var(--cat-projet-soft); }
.article.cat-projet .breadcrumb a, .article.cat-projet a.inline { color: var(--cat-projet); }
.article.cat-projet blockquote { border-left-color: var(--cat-projet); }
.article.cat-projet .callout { background: linear-gradient(160deg, var(--cat-projet) 0%, var(--cat-projet-deep) 100%); }
.article.cat-projet .callout a { color: var(--cat-projet-deep); }
.article.cat-projet .article-nav a { color: var(--cat-projet); }

.article.cat-cyber .article-tag { color: var(--cat-cyber-deep); background: var(--cat-cyber-soft); }
.article.cat-cyber .breadcrumb a, .article.cat-cyber a.inline { color: var(--cat-cyber); }
.article.cat-cyber blockquote { border-left-color: var(--cat-cyber); }
.article.cat-cyber .callout { background: linear-gradient(160deg, var(--cat-cyber) 0%, var(--cat-cyber-deep) 100%); }
.article.cat-cyber .callout a { color: var(--cat-cyber-deep); }
.article.cat-cyber .article-nav a { color: var(--cat-cyber); }

.article.cat-conformite .article-tag { color: var(--cat-conformite-deep); background: var(--cat-conformite-soft); }
.article.cat-conformite .breadcrumb a, .article.cat-conformite a.inline { color: var(--cat-conformite); }
.article.cat-conformite blockquote { border-left-color: var(--cat-conformite); }
.article.cat-conformite .callout { background: linear-gradient(160deg, var(--cat-conformite) 0%, var(--cat-conformite-deep) 100%); }
.article.cat-conformite .callout a { color: var(--cat-conformite-deep); }
.article.cat-conformite .article-nav a { color: var(--cat-conformite); }

/* ===== FILTRES PAR CATÉGORIE ===== */
.blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1100px; margin: 0 auto; padding: 0 5%; margin-top: -1rem; margin-bottom: 2.5rem; }
.filter-btn { font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--ink2); background: var(--bg2); border: 1px solid var(--border2); padding: 0.6rem 1.3rem; border-radius: 999px; cursor: pointer; transition: all .2s; }
.filter-btn:hover { border-color: var(--ink3); color: var(--navy); }
.filter-btn.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.filter-btn[data-cat="projet"].active { background: var(--cat-projet); border-color: var(--cat-projet); }
.filter-btn[data-cat="cyber"].active { background: var(--cat-cyber); border-color: var(--cat-cyber); }
.filter-btn[data-cat="conformite"].active { background: var(--cat-conformite); border-color: var(--cat-conformite); }
.post-card.is-hidden { display: none; }
.post-empty { grid-column: 1 / -1; text-align: center; color: var(--ink3); padding: 2rem; font-size: 0.95rem; display: none; }
.post-empty.show { display: block; }