/*
 * Raffinement éditorial 2026
 * Palette volontairement réduite : encre, papier, pierre et laiton.
 * Ce fichier est chargé en dernier afin de calmer les codes visuels trop
 * "interface" et de rapprocher le site d'une revue documentaire.
 */

:root {
  --ink: #171612;
  --ink-2: #2b2923;
  --red: #92713b;
  --red-dark: #67502b;
  --gold: #a8874f;
  --muted: #6d6961;
  --line: #dedbd3;
  --soft: #f6f4ef;
  --paper: #fff;
  --cream: #fbfaf7;
  --shadow: 0 20px 50px rgba(30, 26, 18, .08);
  --radius: 6px;
}

::selection {
  background: #e8dfcf;
  color: var(--ink);
}

body {
  background: var(--paper);
  color: var(--ink);
}

a {
  color: var(--red-dark);
}

a:hover {
  color: #3f3320;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.site-header {
  background: rgba(20, 19, 16, .975);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .11);
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-color: rgba(184, 151, 92, .78);
  border-radius: 50%;
  color: #c1a36c;
}

.brand small {
  color: #b8b3aa;
  letter-spacing: .16em;
}

.main-nav {
  gap: 10px;
}

.main-nav a,
.index-link {
  position: relative;
  border-radius: 0;
  color: #d9d5cd;
  padding-inline: 8px;
}

.main-nav a::after {
  position: absolute;
  right: 8px;
  bottom: 5px;
  left: 8px;
  height: 1px;
  background: #b6965d;
  content: "";
  opacity: 0;
  transform: scaleX(.5);
  transition: opacity .2s ease, transform .2s ease;
}

.main-nav a:hover,
.main-nav a.is-active,
.index-link:hover {
  background: transparent;
  color: #fff;
}

.main-nav a:hover::after,
.main-nav a.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.index-link {
  border-color: rgba(255, 255, 255, .3);
}

.nav-toggle {
  border-color: #777167;
  border-radius: 2px;
}

.eyebrow {
  color: #846530;
  font-size: .7rem;
  letter-spacing: .19em;
}

.home-hero {
  min-height: 660px;
  background: #0e0f0d;
}

.hero-art {
  background:
    linear-gradient(90deg, rgba(12, 13, 11, .99) 0%, rgba(12, 13, 11, .88) 37%, rgba(12, 13, 11, .15) 73%),
    url('../images/carousel/meduse.webp') center/cover no-repeat;
}

.home-hero .eyebrow,
.reference-strip .eyebrow {
  color: #c3a66f;
}

.hero-content h1 {
  max-width: 820px;
  letter-spacing: -.035em;
}

.hero-content > p {
  color: #d6d1c8;
}

.hero-search > div {
  max-width: 720px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 3px;
}

.hero-search input {
  background: #fff;
}

.hero-search button,
.button {
  border: 1px solid #9b7a40;
  border-radius: 2px;
  background: #8c6c36;
  box-shadow: none;
  color: #fff;
  letter-spacing: .015em;
}

.hero-search button:hover,
.button:hover {
  background: #684f29;
}

.button.secondary {
  justify-content: flex-start;
  min-height: 0;
  padding: 8px 0 4px;
  border: 0;
  border-bottom: 1px solid #aaa398;
  border-radius: 0;
  background: transparent;
  color: var(--ink) !important;
}

.button.secondary::after {
  margin-left: 8px;
  content: "→";
}

.hero-links {
  gap: 20px;
}

.hero-links a {
  color: #eeeae3;
  font-weight: 650;
  text-underline-offset: .32em;
  text-decoration-color: rgba(255, 255, 255, .4);
}

.home-intro {
  border-bottom-color: var(--line);
  background: var(--cream);
}

.home-intro > .page-shell {
  padding-block: 78px;
}

.myth-grid {
  gap: 0 38px;
  padding-block: 76px 92px;
}

.myth-card,
.myth-card.myth-grecques,
.myth-card.myth-romaines,
.myth-card.myth-nordiques,
.myth-card.myth-egyptiennes,
.myth-card.myth-creatures,
.myth-card.myth-histoires {
  min-height: 265px;
  padding: 30px 4px 34px;
  border: 0;
  border-top: 1px solid #bdb7ad;
  border-radius: 0;
  background: transparent;
}

.myth-card:hover {
  box-shadow: none;
  color: var(--ink);
  transform: translateX(4px);
}

.myth-card h2 {
  margin: 32px 0 15px;
}

.myth-card strong {
  color: #74582d;
  font-size: .82rem;
}

.myth-card strong::after {
  margin-left: 7px;
  content: "→";
}

.reference-strip,
.article-hero,
.site-footer {
  background: #171713;
}

.reference-strip {
  border-block: 1px solid #302e28;
}

.reference-strip p,
.stat-grid span {
  color: #c9c4ba;
}

.stat-grid div {
  border-left-color: #4d493f;
}

.stat-grid strong {
  color: #b9985e;
}

.home-featured {
  padding-block: 100px;
}

.section-heading {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.reference-card {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.reference-card .card-image {
  border-radius: 2px;
  background: #ece9e3;
}

.reference-card img {
  filter: grayscale(.88) sepia(.08) contrast(1.03);
}

.reference-card:hover img {
  filter: grayscale(.28) sepia(.04);
  transform: scale(1.025);
}

.reference-card > div,
.reference-card.compact > div {
  padding: 14px 1px 0;
}

.reference-card > div > span {
  color: #7d6337;
  letter-spacing: .12em;
}

.guide-grid {
  gap: 0 38px;
  padding: 55px 0 110px;
}

.guide-grid article {
  min-height: 285px;
  padding: 30px 4px 36px;
  border: 0;
  border-top: 1px solid #bbb5ab;
  border-radius: 0;
}

.guide-grid article h2 {
  max-width: 12ch;
}

.content-panel {
  margin-block: 65px 20px;
  padding: 50px 0;
  border: 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
}

.category-hero {
  min-height: 580px;
  background:
    linear-gradient(90deg, rgba(16, 16, 13, .98), rgba(16, 16, 13, .72) 52%, rgba(16, 16, 13, .14)),
    var(--hero-image) center/cover no-repeat;
}

.category-hero p,
.category-hero .breadcrumbs,
.hero-summary {
  color: #ddd8cf;
}

.category-content {
  padding-top: 82px;
}

.quick-answer {
  padding: 31px 36px;
  border-left: 3px solid #a18451;
  border-radius: 0;
  background: var(--cream);
}

.quick-answer > span {
  color: #7e6130;
  letter-spacing: .14em;
}

.filter-label input,
.letter-nav a {
  border-radius: 2px;
}

.card-grid {
  gap: 32px 22px;
}

.partner-card {
  padding: 26px 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.article-hero {
  border-bottom: 1px solid #302f2a;
}

.article-layout {
  gap: 82px;
  padding-top: 76px;
}

.lead-figure img {
  border-radius: 2px;
}

.fact-grid {
  border: 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
  background: var(--line);
}

.fact-grid > div {
  background: var(--paper);
}

.fact-grid dt {
  color: #777168;
  letter-spacing: .1em;
}

.prose-section h2,
.source-section h2,
.faq-section h2 {
  border-top-color: #cfcac1;
}

.variant-note {
  padding: 30px 0 30px 30px;
  border: 0;
  border-left: 3px solid #a8874f;
  border-radius: 0;
  background: var(--cream);
}

.editorial-card {
  padding: 25px 0;
  border: 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
}

.sticky-panel {
  border-left-color: #c9c4bb;
}

.related-section {
  border-top: 1px solid var(--line);
  background: var(--cream);
}

.ad-slot {
  background: #faf9f6;
}

.home-ad {
  margin-top: 0;
  margin-bottom: 70px;
  border-top: 1px solid var(--line);
}

.simple-hero {
  background: var(--cream);
}

thead th {
  background: #22211d;
}

.letter-nav a {
  color: var(--ink);
}

.az-group h2 {
  color: #7d6235;
}

.az-group a {
  border-bottom: 1px solid #e1ded7;
  border-radius: 0;
  background: transparent;
}

.site-footer {
  border-top: 1px solid #302f2a;
  color: #c6c1b7;
}

.site-footer a {
  color: #dedad2;
}

.footer-bottom {
  border-top-color: #3b3932;
}

/* Blocs documentaires : lignes et marges plutôt que cartes répétées. */
.evidence-section {
  padding: 38px 0;
  border: 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.key-facts li::before {
  width: 5px;
  height: 5px;
  border-radius: 0;
  background: #9b7b45;
  transform: rotate(45deg);
}

.caution-card {
  padding: 24px 0 24px 25px;
  border-left: 2px solid #a8874f;
  border-radius: 0;
  background: var(--cream);
}

.source-kind,
.faq-source-note,
.inventory-note {
  color: var(--muted);
}

.source-locator {
  padding: 16px 18px;
  border-left: 2px solid #a8874f;
  background: var(--cream);
  color: #4b4740;
}

.premium-depth,
.source-reading {
  padding: 40px 0;
  border: 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.source-reading {
  padding-left: 28px;
  border-left: 2px solid #a8874f;
}

.inventory-grid {
  gap: 0 36px;
}

.inventory-group {
  padding: 28px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

@media (max-width: 1100px) {
  .main-nav {
    background: #171713;
  }
}

@media (max-width: 760px) {
  .hero-art {
    background:
      linear-gradient(180deg, rgba(13, 14, 12, .46), rgba(13, 14, 12, .97) 62%),
      url('../images/carousel/mobile/meduse.webp') center top/cover no-repeat;
  }

  .home-intro > .page-shell {
    padding-block: 55px;
  }

  .myth-grid,
  .guide-grid {
    gap: 0;
    padding-block: 50px 70px;
  }

  .myth-card,
  .guide-grid article {
    min-height: 0;
  }

  .related-grid,
  .card-grid {
    gap: 28px 16px;
  }

  .content-panel {
    padding: 35px 0;
  }

  .source-reading,
  .premium-depth,
  .evidence-section {
    padding: 30px 0;
  }

  .source-reading {
    padding-left: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav a::after {
    transition: none;
  }
}