/* ==========================================================================
   REFONTE PAGE LONGUE — article pilote (phase 4)
   Feuille additive, scoppée body.qds-article-pilote : seul l'article pilote
   « blog-ia-soutien-du-manager.html » l'active.
   Tout le texte reste visible : aucun accordéon, aucun « lire la suite ».
   La lecture est améliorée par le rythme vertical, les repères latéraux
   et les variations de fond. Dépend de refonte-tokens.css.
   ========================================================================== */

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

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

/* --------------------------------------------------------------------------
   Hero de l'article : trame cartographique chaleureuse
   -------------------------------------------------------------------------- */
body.qds-article-pilote .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-article-pilote .hero h1 {
  color: var(--qds-ardoise-900) !important; /* remplace l'orange inline : lisibilité longue durée */
  letter-spacing: -0.015em;
}
body.qds-article-pilote .hero .section-title-local::after {
  margin-left: auto;
  margin-right: auto;
  background: var(--qds-brique);
  height: 3px;
}

/* --------------------------------------------------------------------------
   Corps de l'article : rythme de lecture
   -------------------------------------------------------------------------- */
body.qds-article-pilote section {
  background-color: var(--qds-ivoire) !important;
}

body.qds-article-pilote section p {
  line-height: 1.75;
}

/* Liens dans le corps : distinction visuelle (Lighthouse link-in-text-block).
   Surcharge les text-decoration:none inline sans modifier le texte visible. */
body.qds-article-pilote section p a,
body.qds-article-pilote section li a {
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

/* Chapitres : titre avec repère latéral brique (numérotation déjà dans le
   texte des h2 existants, on n'ajoute aucun texte) */
body.qds-article-pilote 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-article-pilote 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));
}

/* Listes : puces ambrées, respiration entre items */
body.qds-article-pilote section ul li {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}
body.qds-article-pilote section ul li::marker {
  color: var(--qds-ocre);
}
body.qds-article-pilote section li strong {
  color: var(--qds-ardoise-900);
}

/* Image d'illustration : cadre doux */
body.qds-article-pilote section img[src^="images/blog-"] {
  border: 1px solid var(--qds-ardoise-100);
  box-shadow: var(--qds-ombre-2) !important;
}

/* --------------------------------------------------------------------------
   Bandeau CTA final : ardoise profonde + filets Art déco (liens inchangés)
   -------------------------------------------------------------------------- */
body.qds-article-pilote .cta-section {
  background: var(--qds-ardoise-900);
  position: relative;
}
body.qds-article-pilote .cta-section::before,
body.qds-article-pilote .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-article-pilote .cta-section::before { top: 0.4rem; }
body.qds-article-pilote .cta-section::after { bottom: 0.4rem; }
body.qds-article-pilote .cta-section .btn {
  border-radius: var(--qds-r-moyen);
}

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

/* --------------------------------------------------------------------------
   Focus visibles et animations réduites
   -------------------------------------------------------------------------- */
body.qds-article-pilote a:focus-visible,
body.qds-article-pilote button:focus-visible,
body.qds-article-pilote input:focus-visible,
body.qds-article-pilote label:focus-visible {
  outline: 3px solid var(--qds-action);
  outline-offset: 2px;
}
body.qds-article-pilote .cta-section a:focus-visible,
body.qds-article-pilote footer a:focus-visible {
  outline-color: var(--qds-ambre);
}

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