/* ==========================================================================
   REFONTE BLOG — déploiement par famille (phase 5D)
   Feuille additive. Deux scopes strictement séparés :
     - body.qds-blog-hub     : index « blog-coaching-management.html »
     - body.qds-blog-article : les 82 articles hors pilote
   Le pilote (blog-ia-soutien-du-manager.html, body.qds-article-pilote) garde
   refonte-article.css tel que validé en phase 4 et n'est pas modifié ici.
   Principes repris du pilote : tout le texte reste visible (aucun accordéon
   ajouté, aucun « lire la suite »), rythme de lecture, contrastes AA.
   Dépend de refonte-tokens.css.
   ========================================================================== */

/* ==========================================================================
   1. INDEX DU BLOG — body.qds-blog-hub
   ========================================================================== */

body.qds-blog-hub {
  background-color: var(--qds-ivoire);
}

body.qds-blog-hub #navbar {
  border-top: 3px solid var(--qds-brique);
}

body.qds-blog-hub .hero {
  background:
    linear-gradient(90deg, rgba(28, 42, 64, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(28, 42, 64, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, var(--qds-chaux), var(--qds-ivoire));
  background-size: 2.5rem 2.5rem, 2.5rem 2.5rem, 100% 100%;
  border-bottom: 1px solid var(--qds-ardoise-100);
  position: relative;
}
@media (min-width: 1024px) {
  body.qds-blog-hub .hero::before {
    content: "";
    position: absolute;
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    top: 0.75rem;
    width: 4rem;
    height: 4rem;
    background: url("../images/refonte/repere-du-nord-discret.svg") no-repeat center / contain;
    pointer-events: none;
  }
}

body.qds-blog-hub .section-title-local::after {
  background: var(--qds-brique);
  height: 3px;
  box-shadow: 84px 0 0 0 var(--qds-ambre);
}
body.qds-blog-hub .section-local-tone {
  background-color: var(--qds-pierre) !important;
}

/* Compteur de résultats */
body.qds-blog-hub .results-count {
  color: var(--qds-ardoise-700) !important;
}

/* Cartes d'articles */
body.qds-blog-hub .blog-card {
  background-color: var(--qds-blanc);
  border: 1px solid var(--qds-ardoise-100);
  border-radius: var(--qds-r-grand);
  box-shadow: var(--qds-ombre-1);
  overflow: hidden;
}
body.qds-blog-hub .blog-card:hover {
  box-shadow: var(--qds-ombre-2);
}
body.qds-blog-hub .blog-card-title,
body.qds-blog-hub .blog-card-title a {
  color: var(--qds-ardoise-900);
  letter-spacing: -0.01em;
}
body.qds-blog-hub .blog-card-date {
  color: var(--qds-brique-profond);
}
body.qds-blog-hub .blog-card-excerpt {
  color: var(--qds-ardoise-800);
  line-height: 1.65;
}
body.qds-blog-hub .blog-tag {
  background-color: var(--qds-pierre);
  color: var(--qds-ardoise-800);
  border-radius: var(--qds-r-moyen);
}
body.qds-blog-hub .blog-card-link {
  color: var(--qds-brique-profond);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
body.qds-blog-hub .blog-card-image img {
  border-radius: 0;
}

/* Pied de page */
body.qds-blog-hub footer.footer-lille-legal-test {
  background-color: var(--qds-ardoise-950) !important;
  border-top: 3px solid var(--qds-brique);
}
body.qds-blog-hub footer.footer-lille-legal-test h3 {
  color: var(--qds-ambre);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.qds-blog-hub a:focus-visible,
body.qds-blog-hub button:focus-visible,
body.qds-blog-hub summary:focus-visible,
body.qds-blog-hub input:focus-visible,
body.qds-blog-hub label:focus-visible {
  outline: var(--qds-focus);
  outline-offset: var(--qds-focus-decalage);
}
body.qds-blog-hub footer.footer-lille-legal-test a:focus-visible {
  outline-color: var(--qds-ambre);
}

@media (prefers-reduced-motion: reduce) {
  body.qds-blog-hub .blog-card,
  body.qds-blog-hub .blog-card:hover {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}

/* ==========================================================================
   2. ARTICLES — body.qds-blog-article (82 pages, hors pilote)
   ========================================================================== */

body.qds-blog-article {
  background-color: var(--qds-ivoire);
}

body.qds-blog-article #navbar {
  border-top: 3px solid var(--qds-brique);
}

/* Hero */
body.qds-blog-article .hero {
  background:
    linear-gradient(90deg, rgba(28, 42, 64, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(28, 42, 64, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, var(--qds-chaux), var(--qds-ivoire));
  background-size: 2.5rem 2.5rem, 2.5rem 2.5rem, 100% 100%;
  border-bottom: 1px solid var(--qds-ardoise-100);
}
body.qds-blog-article .hero h1 {
  color: var(--qds-ardoise-900) !important;
  letter-spacing: -0.015em;
}
body.qds-blog-article .hero .section-title-local::after {
  margin-left: auto;
  margin-right: auto;
  background: var(--qds-brique);
  height: 3px;
  box-shadow: 84px 0 0 0 var(--qds-ambre);
}

/* Corps : rythme de lecture (tout reste visible) */
body.qds-blog-article section {
  background-color: var(--qds-ivoire) !important;
}
body.qds-blog-article section p {
  line-height: 1.75;
}

/* Liens dans le corps : distinction visuelle (link-in-text-block) */
body.qds-blog-article section p a,
body.qds-blog-article section li a {
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

body.qds-blog-article section h2 {
  position: relative;
  margin-top: 3rem;
  padding-top: 1.25rem;
  padding-left: 1rem;
  color: var(--qds-ardoise-900);
  border-top: 1px solid var(--qds-ardoise-100);
}
body.qds-blog-article section h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  bottom: 0.15rem;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--qds-brique), var(--qds-ambre));
}

body.qds-blog-article section ul li {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}
body.qds-blog-article section ul li::marker {
  color: var(--qds-ocre);
}
body.qds-blog-article section li strong {
  color: var(--qds-ardoise-900);
}

/* Citations */
body.qds-blog-article blockquote {
  border-left: 4px solid var(--qds-brique);
  background: var(--qds-pierre);
  color: var(--qds-ardoise-900);
  border-radius: 0 var(--qds-r-moyen) var(--qds-r-moyen) 0;
}

/* Images d'illustration blog (même périmètre que le pilote) */
body.qds-blog-article section img[src^="images/blog-"] {
  border: 1px solid var(--qds-ardoise-100);
  box-shadow: var(--qds-ombre-2);
}

/* CTA final : fond ardoise (texte blanc déjà défini inline sur les articles) */
body.qds-blog-article .cta-section {
  background: var(--qds-ardoise-900);
  position: relative;
}
body.qds-blog-article .cta-section::before,
body.qds-blog-article .cta-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--qds-ambre) 0,
    var(--qds-ambre) 1.25rem,
    transparent 1.25rem,
    transparent 2rem
  );
  opacity: 0.7;
}
body.qds-blog-article .cta-section::before { top: 0.4rem; }
body.qds-blog-article .cta-section::after { bottom: 0.4rem; }
body.qds-blog-article .cta-section h2,
body.qds-blog-article .cta-section p {
  color: #fff;
}
body.qds-blog-article .cta-section .btn {
  border-radius: var(--qds-r-moyen);
}

/* Pied de page */
body.qds-blog-article footer.footer-lille-legal-test {
  background-color: var(--qds-ardoise-950) !important;
  border-top: 3px solid var(--qds-brique);
}
body.qds-blog-article footer.footer-lille-legal-test h3 {
  color: var(--qds-ambre);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.qds-blog-article a:focus-visible,
body.qds-blog-article button:focus-visible,
body.qds-blog-article summary:focus-visible,
body.qds-blog-article input:focus-visible,
body.qds-blog-article label:focus-visible {
  outline: var(--qds-focus);
  outline-offset: var(--qds-focus-decalage);
}
body.qds-blog-article footer.footer-lille-legal-test a:focus-visible {
  outline-color: var(--qds-ambre);
}

@media (prefers-reduced-motion: reduce) {
  body.qds-blog-article * {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
}