/* Galerie CLOART — feuille de style unique, sans dépendance externe ni police téléchargée. */

:root {
  --fond: #f6f3ee;
  --fond-carte: #ffffff;
  --texte: #1f1d1a;
  --texte-doux: #57524a;      /* contraste 7,2:1 sur --fond */
  --ligne: #e1dbd0;
  --accent: #8f1d1d;          /* rouge profond, contraste 8,3:1 sur --fond */
  --accent-fonce: #6e1414;
  --focus: #1d4ed8;
  --ombre: 0 1px 2px rgba(31, 29, 26, .08), 0 6px 18px rgba(31, 29, 26, .10);
  --rayon: 6px;
  --largeur: 1240px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.verrou { overflow: hidden; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-fonce); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .01em;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }

.evitement {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--texte);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: var(--rayon);
}
.evitement:focus { top: 1rem; color: #fff; }

main { display: block; outline: none; }

/* ---------- En-tête ---------- */
.entete {
  border-bottom: 1px solid var(--ligne);
  background: rgba(246, 243, 238, .96);
  position: sticky;
  top: 0;
  z-index: 10;
}
.entete-int {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: .7rem 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  flex-wrap: wrap;
}
.marque {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--texte);
  text-decoration: none;
}
.marque img { height: 44px; width: auto; }
.marque-texte {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
}
.marque-texte small {
  margin-top: .2rem;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.entete nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .3rem;
}
.entete nav a {
  display: block;
  padding: .45rem .7rem;
  color: var(--texte);
  text-decoration: none;
  border-radius: var(--rayon);
  font-size: .98rem;
}
.entete nav a:hover { background: #ebe5da; color: var(--texte); }
.entete nav a[aria-current="page"] {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 0;
}

/* ---------- Mise en page ---------- */
.bloc {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2.5rem 16px;
}
.bloc-texte { max-width: 760px; }
.bloc + .bloc { padding-top: .5rem; }
.chapo { font-size: 1.15rem; color: var(--texte-doux); max-width: 60ch; }
.centre { text-align: center; }
.centre .chapo, .bloc-texte.centre p { margin-left: auto; margin-right: auto; }

.bouton {
  display: inline-block;
  margin: .25rem .4rem .25rem 0;
  padding: .7rem 1.3rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .98rem;
  border: 2px solid var(--accent);
}
.bouton:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }
.bouton-discret { background: transparent; color: var(--accent); }
.bouton-discret:hover { background: var(--accent); color: #fff; }

/* ---------- Accueil ---------- */
.accueil-hero {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2.5rem 16px 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.hero-image { margin: 0; }
.hero-image img {
  width: 100%;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.hero-image figcaption {
  font-size: .8rem;
  color: var(--texte-doux);
  margin-top: .5rem;
}
.hero-texte h1 { margin-bottom: .3em; }

.grille-themes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.2rem;
}
.carte-theme {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--texte);
}
.carte-theme .cadre { margin-bottom: .55rem; }
.carte-titre { font-family: var(--serif); font-size: 1.2rem; }
.carte-nombre { font-size: .88rem; color: var(--texte-doux); }
.carte-theme:hover .carte-titre { color: var(--accent); }

/* ---------- Grille d'œuvres ---------- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.5rem 0 .5rem;
}
.filtres[hidden] { display: none; }
.filtres button {
  font: inherit;
  font-size: .95rem;
  padding: .45rem .95rem;
  border-radius: 999px;
  border: 1px solid #b9b0a2;
  background: var(--fond-carte);
  color: var(--texte);
  cursor: pointer;
}
.filtres button:hover { border-color: var(--accent); color: var(--accent); }
.filtres button[aria-pressed="true"] {
  background: var(--texte);
  border-color: var(--texte);
  color: #fff;
}
.filtres .nb { font-size: .8em; opacity: .75; margin-left: .15em; }
.compteur { color: var(--texte-doux); font-size: .92rem; min-height: 1.5em; margin: .3rem 0 1rem; }

.grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 2rem 1.6rem;
}
.oeuvre[hidden] { display: none; }
.vignette { display: block; color: inherit; text-decoration: none; border-radius: var(--rayon); }
.cadre {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 10%;
  background: var(--fond-carte);
  border-radius: var(--rayon);
  border: 1px solid var(--ligne);
  overflow: hidden;
}
.cadre img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 8px 18px rgba(0, 0, 0, .12);
  transition: transform .25s ease;
}
.vignette:hover .cadre img, .carte-theme:hover .cadre img { transform: scale(1.03); }
.legende { margin: .6rem .1rem 0; line-height: 1.35; }
.legende .titre { display: block; font-family: var(--serif); font-size: 1.08rem; }
.legende .infos { display: block; font-size: .86rem; color: var(--texte-doux); }
.pastille {
  display: inline-block;
  margin-top: .3rem;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-doux);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: .05rem .55rem;
}

/* ---------- Pages de texte ---------- */
.figure-artiste { margin: 0 0 1.8rem; }
.figure-artiste img { width: 100%; border-radius: var(--rayon); box-shadow: var(--ombre); }
.coordonnees { display: grid; grid-template-columns: max-content 1fr; gap: .7rem 1.5rem; margin: 1.5rem 0; }
.coordonnees dt { font-weight: 600; }
.coordonnees dd { margin: 0; }
.liste-liens { padding-left: 1.2rem; }
.liste-liens li { margin: .4rem 0; }
.a-completer { background: #fde68a; color: #3b2f00; padding: 0 .25em; border-radius: 3px; }

/* ---------- Pied de page ---------- */
.pied {
  border-top: 1px solid var(--ligne);
  margin-top: 3rem;
  color: var(--texte-doux);
  font-size: .9rem;
}
.pied-int { max-width: var(--largeur); margin: 0 auto; padding: 1.5rem 16px 2rem; }
.pied p { margin: .3rem 0; }

/* ---------- Visionneuse plein écran ---------- */
.visionneuse {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #121110;
  color: #f2efe9;
  overflow: hidden;
}
.visionneuse[open] { display: flex; flex-direction: column; }
.visionneuse::backdrop { background: rgba(10, 10, 10, .92); }
.v-scene {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 4.2rem 0;
  touch-action: pan-y pinch-zoom;
}
.v-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
  user-select: none;
  -webkit-user-drag: none;
}
.v-legende { flex: 0 0 auto; text-align: center; padding: .9rem 16px 1.1rem; }
.v-titre { font-size: 1.35rem; margin: 0; color: #fff; }
.v-infos, .v-position { margin: .15rem 0 0; font-size: .92rem; color: #cfc8bc; }
.v-bouton {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: 400 2rem/1 var(--sans);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v-bouton:hover { background: rgba(255, 255, 255, .25); }
.v-bouton:focus-visible { outline-color: #93c5fd; }
.v-fermer { top: .7rem; right: .7rem; }
.v-prec { left: .7rem; top: 50%; transform: translateY(-50%); }
.v-suiv { right: .7rem; top: 50%; transform: translateY(-50%); }

/* ---------- Petits écrans ---------- */
@media (max-width: 820px) {
  .accueil-hero { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 1.5rem; }
  .entete { position: static; }
  .entete-int { justify-content: center; }
  .marque img { height: 36px; }
  .entete nav ul { justify-content: center; }
  .entete nav a { padding: .4rem .55rem; font-size: .95rem; }
  .bloc { padding: 1.8rem 16px; }
  .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .9rem; }
  .cadre { padding: 7%; }
  .legende .titre { font-size: 1rem; }
  .v-scene { padding: 3.6rem .5rem 0; }
  .v-prec, .v-suiv { top: auto; bottom: .9rem; transform: none; }
  .v-legende { padding: .8rem 4rem 1rem; }
}
@media (max-width: 380px) {
  .grille { grid-template-columns: 1fr; }
  .coordonnees { grid-template-columns: 1fr; gap: .1rem; }
  .coordonnees dd { margin-bottom: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .entete nav, .filtres, .visionneuse, .evitement { display: none !important; }
  body { background: #fff; }
}