/* ================================================================
   BLOG — styles partagés (blog.html + /blog/*.html)
   S'appuie sur les variables définies dans style.css
   (--bl, --bg-surface, --text-main, --radius-card, --ease, etc.)
================================================================ */

/* Pages du blog : pas de curseur personnalisé (comme mentions-legales.html) */
body, a, button, input, textarea,
.theme-toggle, .bp, .bo, .bcard, .bcard-title a, .bcard-link, .art-back { cursor:auto !important }
#cd, #cr { display:none !important }

/* ----------------------------------------------------------------
   NAV
---------------------------------------------------------------- */
.bnav {
  position:fixed;top:0;left:0;right:0;z-index:5000;
  height:72px;padding:0 64px;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--nav-bg);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 1px 0 var(--border-subtle);
}
.bnav a { text-decoration:none }
.bnav-right { display:flex;align-items:center;gap:32px }
.bnav-links { display:flex;align-items:center;gap:32px;list-style:none }
.bnav-links a {
  font-size:10.5px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--text-main);position:relative;padding-bottom:4px;transition:color .25s;
}
.bnav-links a::after {
  content:'';position:absolute;bottom:0;left:50%;right:50%;
  height:1px;background:var(--bl);transition:left .3s var(--ease),right .3s var(--ease);
}
.bnav-links a:hover,
.bnav-links a.active { color:var(--bl) }
.bnav-links a:hover::after { left:0;right:0 }

/* ----------------------------------------------------------------
   LISTE DES ARTICLES (blog.html)
---------------------------------------------------------------- */
.blog-hero { padding-top:190px;padding-bottom:0 }
.blog-intro { font-size:16px;color:var(--text-muted);max-width:560px;line-height:1.8;margin-top:-8px }
.blog-list-section { padding-top:64px }

.blog-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:28px;margin-top:8px;
}

.bcard {
  background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);overflow:hidden;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(36px);
  transition:opacity .75s var(--ease),transform .75s var(--ease),var(--card-trans);
}
.bcard.on { opacity:1;transform:none }
.bcard:hover { transform:var(--card-lift);box-shadow:var(--card-shadow);border-color:var(--border-mid) }

.bcard-img { width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--bg-surface-alt) }

.bcard-body { padding:28px 26px 30px;display:flex;flex-direction:column;flex:1 }
.bcard-title {
  font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:700;
  line-height:1.25;margin-bottom:12px;
}
.bcard-title a { color:var(--text-main);transition:color .25s }
.bcard-title a:hover { color:var(--bl) }
.bcard-excerpt { font-size:13px;color:var(--text-muted);line-height:1.75;margin-bottom:22px;flex:1 }
.bcard-link {
  font-size:11.5px;font-weight:600;letter-spacing:.6px;color:var(--bl);
  display:inline-flex;align-items:center;gap:6px;transition:gap .25s,color .25s;
}
.bcard-link:hover { gap:10px }

/* ----------------------------------------------------------------
   PAGE ARTICLE (/blog/*.html)
---------------------------------------------------------------- */
.art-page { max-width:820px;margin:0 auto;padding:150px 6vw 120px }

.art-back-row { display:flex;gap:28px;margin-bottom:44px;flex-wrap:wrap }
.art-back-row--bottom { margin-top:72px;margin-bottom:0;padding-top:40px;border-top:1px solid var(--border-subtle) }
.art-back {
  display:inline-flex;align-items:center;
  font-size:10.5px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text-muted);transition:color .25s;
}
.art-back:hover { color:var(--bl) }

.art-eyebrow {
  font-size:10px;letter-spacing:5px;text-transform:uppercase;
  color:var(--bl);margin-bottom:20px;font-weight:600;
  display:flex;align-items:center;gap:12px;
}
.art-eyebrow::before { content:'';display:block;width:24px;height:1px;background:var(--bl);flex-shrink:0 }

.art-h1 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(38px,5.2vw,60px);font-weight:700;
  line-height:1.08;letter-spacing:-1.5px;
  color:var(--text-main);margin-bottom:48px;
}

.art-hero-img {
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:var(--radius-card);box-shadow:var(--shadow-sm);margin-bottom:56px;
}

.art-section { margin-bottom:48px }
.art-section h2 {
  font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:700;
  color:var(--text-main);margin-bottom:20px;padding-bottom:12px;
  border-bottom:1px solid var(--border-subtle);
}
.art-section p, .art-section li { font-size:15px;color:var(--text-muted);line-height:1.9;margin-bottom:16px }
.art-section ul { padding-left:22px;margin-bottom:16px }
.art-section li { margin-bottom:8px }
.art-section strong { color:var(--text-main);font-weight:600 }
.art-section a { color:var(--bl);border-bottom:1px solid transparent;transition:border-color .2s }
.art-section a:hover { border-bottom-color:var(--bl) }
.art-section code {
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;
  background:var(--bg-surface-alt);border:1px solid var(--border-subtle);
  border-radius:5px;padding:.1em .4em;color:var(--text-main);
}

.art-secondary-img {
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:14px;box-shadow:var(--shadow-xs);margin:8px 0 40px;
}

.art-cta {
  margin-top:16px;padding:32px 34px;background:var(--bg-surface-alt);
  border-radius:14px;border-left:3px solid var(--bl);
}
.art-cta p { font-size:15.5px;color:var(--text-main);line-height:1.8;margin:0 }
.art-cta strong { color:var(--bl) }
.art-cta a { color:var(--bl);font-weight:600;border-bottom:1px solid var(--bl) }

@media(max-width:768px) {
  .bnav { padding:0 24px }
  .bnav-links { gap:20px }
  .blog-hero { padding-top:150px }
  .art-page { padding:120px 6vw 80px }
  .art-hero-img { margin-bottom:40px }
}

@media(max-width:480px) {
  .bnav { padding:0 16px }
  .bnav-right { gap:16px }
  .bnav-links { gap:14px }
}