:root {
  --pierre: #E8E3DC;
  --lin: #F6F3EE;
  --noyer: #3B2E25;
  --jonc: #7D6E5D;
  --olive: #A9B79B;
  --olive-fonce: #98A88A;
  --sauge: #76866A;
  --titre: #66775A;
  --trait: #D6CEC3;
  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mesure: 34rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pierre);
  color: var(--noyer);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--sauge); outline-offset: 3px; }

.entete {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
}
.marque { font-family: var(--serif); font-size: 1.5rem; text-decoration: none; letter-spacing: -0.01em; }
.entete nav a { font-size: 0.95rem; color: var(--jonc); text-decoration: none; }
.entete nav a:hover { color: var(--noyer); text-decoration: underline; }

.piece {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  padding: 0 clamp(1.25rem, 4vw, 3rem) 4rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .piece { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .scene { position: sticky; top: 1.5rem; }
}

.scene figure { margin: 0; position: relative; border-radius: 6px; overflow: hidden; background: var(--lin); }
.repere {
  position: absolute; transform: translate(-50%, -50%);
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 0.85rem/1 var(--sans); text-decoration: none;
  color: var(--noyer); background: rgba(246, 243, 238, 0.92);
  border: 1px solid rgba(59, 46, 37, 0.25);
}
.repere:hover, .repere:focus-visible, .repere.actif { background: var(--olive); color: var(--noyer); border-color: var(--olive); }
.legende { font-size: 0.85rem; color: var(--jonc); margin: 0; padding: 0.75rem 0.25rem 0; }

.texte h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em;
  margin: 0.5rem 0 1.25rem; max-width: 14ch; color: var(--titre);
}
.chapo { font-size: 1.15rem; max-width: var(--mesure); margin: 0 0 1rem; }
.mention { font-size: 0.85rem; color: var(--jonc); max-width: var(--mesure); margin: 0 0 2.5rem; }

.texte h2 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin: 3rem 0 1rem; color: var(--titre); }

.objets { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.objet {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 0 1rem;
  align-items: start; padding: 1.15rem 0; border-bottom: 1px solid var(--trait);
  scroll-margin-top: 1.5rem;
}
.objet:target, .objet.actif { background: var(--lin); box-shadow: -0.75rem 0 0 var(--lin), 0.75rem 0 0 var(--lin); }
.num { font-family: var(--serif); font-size: 1.15rem; color: var(--sauge); padding-top: 0.1rem; }
.objet h3 { font-size: 1.02rem; font-weight: 600; margin: 0 0 0.2rem; }
.objet p { margin: 0; font-size: 0.95rem; color: var(--jonc); max-width: 30rem; }
.bouton {
  align-self: center; white-space: nowrap;
  font: 600 0.9rem/1 var(--sans); text-decoration: none;
  color: var(--noyer); background: var(--olive); padding: 0.75rem 1rem; border-radius: 999px;
}
.bouton:hover { background: var(--olive-fonce); }
@media (max-width: 520px) {
  .objet { grid-template-columns: 2rem minmax(0, 1fr); }
  .bouton { grid-column: 2; justify-self: start; margin-top: 0.75rem; }
}

.conseils { padding-left: 1.1rem; max-width: var(--mesure); }
.conseils li { margin-bottom: 0.6rem; }

.accueil { padding: 2rem clamp(1.25rem, 4vw, 3rem) 4rem; }
.accueil h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1.02; letter-spacing: -0.025em;
  margin: 1rem 0 1rem; max-width: 12ch; color: var(--titre);
}
.accueil .chapo { margin-bottom: 3rem; }
.grille { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.carte { text-decoration: none; }
.carte img { aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; width: 100%; }
.carte span { display: block; font-family: var(--serif); font-size: 1.25rem; margin-top: 0.75rem; }
.carte small { color: var(--jonc); font-size: 0.9rem; }
.carte:hover span { text-decoration: underline; }

.legal { padding: 2rem clamp(1.25rem, 4vw, 3rem) 4rem; max-width: 44rem; }
.legal h1 { font-family: var(--serif); font-weight: 400; font-size: 2.2rem; color: var(--titre); }

.pied {
  border-top: 1px solid var(--trait); padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 2.5rem;
  font-size: 0.85rem; color: var(--jonc);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
}
.pied p { margin: 0; max-width: 40rem; }