*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  /* On n'écrase pas vos styles globaux :
     Si votre feuille de style principale définit déjà le fond/typo,
     vous pouvez supprimer ces 2 lignes. */

  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* Conteneur de page (n'affecte pas header/footer existants) */
.page { 
  max-width: 1100px; 
  margin: 40px auto; 
  padding: 0 20px; 
  background: #ffffff00; 
}

/* Carte de fiche */
.fiche { 
  --accent: var(--accent); 
  background: #ffffff; 
  border-radius: var(--radius); 
  box-shadow: var(--shadow); 
  overflow: hidden; 
}
.fiche__bar { 
  height: 12px; 
  background: linear-gradient(90deg, var(--accent)); 
}
.fiche__inner { 
  padding: 28px; 
  display: grid; 
  gap: 22px; 
}

/* En‑tête */
.fiche__header { 
  display: grid; 
  grid-template-columns: 72px 1fr; 
  gap: 16px; 
  align-items: center; 
}
.fiche__logo { 
  width: 72px; 
  height: 72px; 
  border-radius: 16px; 
  object-fit: contain; 
  background: #ffffff; 
  border: 1px solid var(--ring); 
  padding: 8px; 
}
.fiche__title { 
  color: #000000; 
  margin: 0; 
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); 
}
.fiche__chip { 
  display: inline-flex; 
  align-items: center; 
  gap: .5ch; 
  padding: 6px 10px; 
  border-radius: 999px; font-size: .85rem; 
  background: color-mix(in oklab, var(--accent) 20%, #ffffff 80%); 
  border: 1px solid color-mix(in oklab, var(--accent) 35%, #000 65%); 
  color: color-mix(in oklab, var(--accent) 85%, rgb(0, 0, 0) 15%); 
}

/* Corps */
.fiche__content { 
  display: grid; 
  gap: 16px; 
}
.fiche__desc { 
  color: #000000; 
  font-size: 1rem; 
}

/* Bouton lien externe */
.fiche__btn { 
  display: inline-flex; 
  align-items: center; 
  gap: .6ch; padding: 12px 16px; 
  border-radius: 12px; text-decoration: none; 
  font-weight: 600; background: var(--accent); color: #ffffff; 
  box-shadow: 0 4px 16px color-mix(in oklab, var(--accent) 30%, transparent 70%); 
}
.fiche__btn:hover { 
  filter: saturate(1.1) brightness(1.02); 
  transform: translateY(-1px); 
  transition: .15s ease; }

/* Pied de fiche */
.fiche__meta { 
  margin-top: 2px; 
  padding-top: 16px; 
  border-top: 1px dashed var(--ring); color: var(--muted); display: flex; 
  flex-wrap: wrap; 
  gap: 10px 18px; 
  align-items: baseline; 
  justify-content: space-between; 
  font-size: .95rem; 
}
.fiche__source { 
  color: #282828; 
}
.fiche__source strong { 
  color: #000000; 
}
.fiche__date { 
  color: #282828; 
}
.fiche__date strong { 
  color: #000000; 
}
.fiche time {
   white-space: nowrap; 
}

/* Disposition large */
@media (min-width: 860px) {
  .fiche__inner { grid-template-columns: 1.2fr .8fr; align-items: start; }
  .fiche__content { order: 1; }
  .fiche__side { order: 2; }
}

/* Thèmes/couleurs par catégorie (à compléter selon vos besoins) */
.fiche[data-category="monuments-historiques"] { --accent: #ff6600; }
.fiche[data-category="parcs-et-jardins"] { --accent: #24a600d0; }
.fiche[data-category="architecture-contemporaine"] { --accent: #757575d0; }
.fiche[data-category="maison-illustre"] { --accent: #d2a967d0; }
.fiche[data-category="patrimoine-europe"] { --accent: #1F369F; }
.fiche[data-category="musees"] { --accent: #8f488ad0; }
.fiche[data-category="frac"] { --accent: #497256d0; }
.fiche[data-category="velo"] { --accent: #3156A1; }
.fiche[data-category="unesco"] { --accent: #4376ce; }