/* ==========================================================================
   REFONTE ATYPIQUES — phase 5E (+ sitemap Phase 7A)
   Scope : body.qds-atypique
     - 404.html
     - recherche.html
     - seance-suspendue-lille.html
     - sitemap.html (migré header QDS en Phase 7A)
   Exclus volontairement (documentés) :
     - demo-design-system.html / demo-header-pilote.html (pages internes
       non indexées, déjà porteuses du système graphique)
   Dépend de refonte-tokens.css.
   ========================================================================== */

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

body.qds-atypique .category-section h2 {
  color: var(--qds-ardoise-900);
  border-bottom: 2px solid var(--qds-brique);
  padding-bottom: 0.35rem;
}

body.qds-atypique .sitemap-list a {
  color: var(--qds-ardoise-800);
}
body.qds-atypique .sitemap-list a:hover {
  color: var(--qds-brique);
}

body.qds-atypique .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);
  /* Fond clair de refonte : annule le texte blanc hérité du hero orange legacy
     (sinon H1 / chapô illisibles, cas seance-suspendue-lille.html). */
  color: var(--qds-ardoise-900);
}
body.qds-atypique .hero h1,
body.qds-atypique .hero .section-title-local {
  color: var(--qds-ardoise-900);
  letter-spacing: -0.015em;
}
body.qds-atypique .hero p,
body.qds-atypique .hero .lead {
  color: var(--qds-ardoise-800) !important;
}

body.qds-atypique .section-title-local::after,
body.qds-atypique .error-title.section-title-local::after {
  background: var(--qds-brique);
  height: 3px;
  box-shadow: 84px 0 0 0 var(--qds-ambre);
}

body.qds-atypique .section-local-tone {
  background-color: var(--qds-pierre) !important;
}

body.qds-atypique .hero-local-card,
body.qds-atypique .card {
  background-color: var(--qds-blanc);
  border: 1px solid var(--qds-ardoise-100);
  border-top: 3px solid var(--qds-brique);
  box-shadow: var(--qds-ombre-1);
}

/* Recherche site */
body.qds-atypique .search-input {
  border-radius: var(--qds-r-moyen);
  border-color: var(--qds-ardoise-100);
}
body.qds-atypique .search-input:focus-visible {
  outline: var(--qds-focus);
  outline-offset: var(--qds-focus-decalage);
}
body.qds-atypique .search-count {
  background-color: var(--qds-brique);
  border-radius: var(--qds-r-moyen);
}

body.qds-atypique .btn {
  border-radius: var(--qds-r-moyen);
  min-height: 44px;
}

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

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

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