/* ── Couleurs et police : c'est ici qu'on change le look ── */
:root {
  --fond: #ffffff;
  --texte: #000000;
  --discret: #6b6b6b;
  --survol: #0033ff;          /* couleur des liens au survol */
  --police: "Libre Baskerville", Baskerville, "Times New Roman", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { font-size: 14px; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  line-height: 1.4;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid var(--texte); outline-offset: 4px; }

/* En-tête : reste collé en haut pendant le défilement */
.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: transparent;
  /* background: var(--fond); */
  padding: 1.2rem 1rem;
  margin-bottom: 1.2rem;
  pointer-events: none; 
}
.nom {
  display: inline-block;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: auto;  
}

/* Logo : hauteur réglable ici (JPG, PNG ou SVG) */
.logo {
  display: block;
  height: 5rem;
  width: auto;
  max-width: 80vw;
  object-fit: contain;
  mix-blend-mode: difference
}

main {
  flex: 1;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Page d'accueil : groupes et liste */
.groupe { margin-bottom: 2.4rem; }
.groupe h2 {
  font-size: 1rem;
  font-weight: normal;
  color: var(--texte);
  /* color: var(--discret); */
  margin: 0 0 1.3rem;
}

.liste { display: flex; flex-direction: column; gap: 1.6rem; }
.expo { display: flex; flex-direction: column; }
/* Survol des liens vers les expos */
.expo:hover { color: var(--survol); }

/* Page d'une expo */
.fiche h1 {
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.25;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.fiche .artiste { font-size: 1.4rem; }
.fiche .dates { margin: .5rem 0 2rem; }
.texte { text-align: left; max-width: 34rem; margin: 0 auto; }
.texte p { margin: 0 0 1em; }
.images { display: flex; flex-direction: column; gap: 1.5rem; margin: 2.5rem 0; }
.images img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.retour { margin: 2.5rem 0 0; }

/* Pied de page : dans le flux, il ne recouvre jamais le contenu */
.pied {
  margin-top: 4rem;
  padding: 1.5rem 1rem 2rem;
  font-size: .85rem;
}
.pied p { margin: .3rem 0; }
.coordonnees {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem 2rem;
}

@media (max-width: 480px) {
  html { font-size: 15px; }
  .nom { font-size: 2.1rem; }
  .logo { height: 4rem; }
}