/* Parisianbrick : feuille de style victorienne.
   Palette tirée de la bannière de l'atelier : vert bouteille et or. */
:root {
  --vert: #163631;
  --vert-profond: #0e2421;
  --vert-clair: #24504a;
  --or: #c9a14f;
  --or-clair: #e6c983;
  --or-sombre: #8a6a2c;
  --papier: #f1e6cd;
  --papier-sombre: #e4d4ae;
  --encre: #2b2118;
  --encre-douce: #5a4a38;
  --bordeaux: #6e2228;
  --titre: "IM Fell English SC", "Cormorant Garamond", Georgia, serif;
  --texte: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ombre: 0 18px 40px -18px rgba(20, 12, 4, .55);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 500 1.2rem/1.6 var(--texte);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; font-variant-ligatures: no-common-ligatures; line-height: 1.15; margin: 0 0 .6em; letter-spacing: .01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }

.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 16px; z-index: 50; background: var(--or); padding: .5em 1em; }

/* Texture de papier : grain + vignette */
.papier {
  background:
    radial-gradient(ellipse at center, rgba(255, 250, 235, .55) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(120, 85, 35, .16) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    var(--papier);
}

.colonne { max-width: 46rem; margin: 0 auto; padding: 0 16px; }
.large { max-width: 76rem; margin: 0 auto; padding: 0 16px; }
.centre { text-align: center; }

.ornement { display: block; width: 240px; max-width: 70%; height: 24px; margin: 0 auto 1rem; color: var(--or-sombre); }
.ornement.clair { color: var(--or); }

/* En-tête */
.bandeau {
  position: sticky; top: 0; z-index: 20;
  background: var(--vert-profond);
  color: var(--papier);
  border-bottom: 1px solid var(--or-sombre);
  box-shadow: 0 1px 0 rgba(201, 161, 79, .35), 0 3px 0 var(--vert-profond), 0 4px 0 rgba(201, 161, 79, .5);
}
.bandeau-int { max-width: 76rem; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 1rem; }
.marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; min-width: 0; }
.marque img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--or); object-fit: cover; flex: none; }
.marque strong { display: block; font: 400 1.45rem/1 var(--titre); color: var(--or-clair); letter-spacing: .04em; }
.marque em { display: block; font-size: .92rem; color: rgba(241, 230, 205, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: flex-end; }
.menu a { text-decoration: none; font-family: var(--titre); font-size: 1.02rem; color: var(--papier); padding: .3em 0; border-bottom: 1px solid transparent; }
.menu a:hover, .menu a:focus-visible { color: var(--or-clair); border-bottom-color: var(--or); }
.menu a.menu-expo { color: var(--or-clair); }
.menu-bascule, .menu-bouton { display: none; }

@media (max-width: 980px) {
  .menu-bouton {
    display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
    font-family: var(--titre); color: var(--or-clair); border: 1px solid var(--or-sombre);
    padding: .35em .8em; border-radius: 3px;
  }
  .menu-bouton span, .menu-bouton span::before, .menu-bouton span::after { display: block; width: 16px; height: 2px; background: var(--or-clair); position: relative; }
  .menu-bouton span::before, .menu-bouton span::after { content: ""; position: absolute; left: 0; }
  .menu-bouton span::before { top: -5px; }
  .menu-bouton span::after { top: 5px; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--vert-profond);
    border-bottom: 1px solid var(--or-sombre); padding: .5rem 16px 1rem;
  }
  .menu a { padding: .7em 0; border-bottom: 1px solid rgba(201, 161, 79, .2); }
  .menu-bascule:checked ~ .menu { display: flex; }
}
@media (max-width: 420px) { .marque em { display: none; } }

/* Boutons en laiton */
.bouton {
  display: inline-block; text-decoration: none; text-align: center;
  font: 400 1.1rem/1.2 var(--titre); letter-spacing: .03em;
  padding: .8em 1.5em; border-radius: 2px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bouton.laiton {
  color: var(--vert-profond);
  background: linear-gradient(180deg, #f0d89a 0%, #d2aa58 45%, #a77c32 100%);
  border: 1px solid #6e5020;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 6px 16px -8px rgba(0, 0, 0, .6);
}
.bouton.contour { border: 1px solid currentColor; color: var(--vert); background: transparent; }
.bouton.contour.clair { color: var(--or-clair); }
.bouton:hover { transform: translateY(-1px); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.actions.centre { justify-content: center; }
.lien-or { color: var(--or-sombre); font-style: italic; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Ouverture */
.ouverture {
  background:
    radial-gradient(circle at 80% 20%, rgba(201, 161, 79, .16), transparent 45%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, var(--vert) 0%, var(--vert-profond) 100%);
  color: var(--papier);
  padding: clamp(2.5rem, 7vw, 5.5rem) 0;
  border-bottom: 4px double var(--or);
}
.ouverture-int { max-width: 76rem; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.surtitre { font-family: var(--titre); color: var(--or); letter-spacing: .12em; font-size: .95rem; text-transform: uppercase; }
.ouverture h1 { color: #fbf3df; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.chapeau { font-size: 1.32rem; font-style: italic; color: inherit; opacity: .92; }
.ouverture-image { position: relative; margin: 0; }
.cadre-arche {
  border-radius: 50% 50% 4px 4px / 32% 32% 4px 4px;
  overflow: hidden; aspect-ratio: 4 / 5;
  border: 3px solid var(--or);
  outline: 1px solid var(--or-sombre); outline-offset: 8px;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .8);
}
.cadre-arche img { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; }
.ouverture-image figcaption { margin-top: 1.4rem; text-align: center; font-style: italic; font-size: .98rem; color: rgba(241, 230, 205, .7); }
/* Pignons LEGO Technic officiels (3649 : 40 dents, 3648b : 24 dents) en Pearl
   Gold, rendus vus de face depuis la géométrie LDraw puis posés sur un plan
   incliné. --u = pixels par unité LDraw ; entraxe réel 80 LDU (4 tenons).
   L'épaisseur vient de copies assombries empilées derrière chaque pignon. */
.pignons { --u: 1.45px; position: absolute; left: calc(var(--u) * -62); bottom: 2.6rem; width: calc(var(--u) * 190); height: calc(var(--u) * 110); perspective: 700px; pointer-events: none; }
.pignons-plan { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(52deg) rotateZ(-24deg); }
.pignon { position: absolute; transform-style: preserve-3d; }
.pignon img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pignon .e1 { transform: translateZ(calc(var(--u) * -1.5)); filter: brightness(.62); }
.pignon .e2 { transform: translateZ(calc(var(--u) * -3)); filter: brightness(.56); }
.pignon .e3 { transform: translateZ(calc(var(--u) * -4.5)); filter: brightness(.5); }
.pignon .e4 { transform: translateZ(calc(var(--u) * -6)); filter: brightness(.45); }
.pignon .e5 { transform: translateZ(calc(var(--u) * -7.5)); filter: brightness(.4); }
.pignon .e6 { transform: translateZ(calc(var(--u) * -9)); filter: brightness(.36); }
.pignon .e7 { transform: translateZ(calc(var(--u) * -10.5)); filter: brightness(.3) drop-shadow(0 0 calc(var(--u) * 4) rgba(0, 0, 0, .5)); }
/* Images de 107,8 et 67,8 LDU de côté (rayon extérieur + marge). */
.p40 { width: calc(var(--u) * 107.8); height: calc(var(--u) * 107.8); left: 0; top: 0; animation: pignon-40 48s linear infinite; }
.p24 { width: calc(var(--u) * 67.8); height: calc(var(--u) * 67.8); left: calc(var(--u) * 100); top: calc(var(--u) * 20); animation: pignon-24 28.8s linear infinite; }
/* Rapport 40/24 et sens inverse ; le petit part décalé d'une demi-dent pour
   présenter un creux à la dent du grand. */
@keyframes pignon-40 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pignon-24 { from { transform: rotate(7.5deg); } to { transform: rotate(-352.5deg); } }
@media (prefers-reduced-motion: reduce) { .p40, .p24 { animation: none; } .p24 { transform: rotate(7.5deg); } html { scroll-behavior: auto; } }

/* Sections */
.manifeste, .cabinet, .artistes, .expositions, .page-expo, .fiche { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.manifeste { text-align: center; border-bottom: 1px solid rgba(138, 106, 44, .3); }
.manifeste p { font-size: 1.3rem; }
.signature { font-family: "IM Fell English", serif; font-style: italic; font-size: 1.6rem !important; color: var(--bordeaux); margin-top: 1.5rem; }
.entete-section { text-align: center; max-width: 44rem; margin: 0 auto 2.6rem; }
.entete-section p { color: var(--encre-douce); font-style: italic; }

/* Planches du cabinet */
.planches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 2.4rem 2rem; }
.planche { display: flex; flex-direction: column; text-decoration: none; color: var(--encre); }
.planche-numero { font-family: var(--titre); font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or-sombre); margin-bottom: .5rem; }
.planche-cadre {
  display: block; padding: 10px; background: linear-gradient(135deg, #d8b866, #9c7330 50%, #e3c47b);
  box-shadow: var(--ombre); position: relative;
}
.planche-cadre::after { content: ""; position: absolute; inset: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 24px rgba(0, 0, 0, .35); pointer-events: none; }
.planche-cadre img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--vert-profond); }
.planche-titre { font-family: var(--titre); font-size: 1.45rem; margin-top: 1rem; line-height: 1.2; }
.planche-meta { font-style: italic; color: var(--encre-douce); font-size: 1rem; }
.planche-resume { font-size: 1.08rem; margin-top: .4rem; }
.planche:hover .planche-cadre { transform: translateY(-3px); transition: transform .2s ease; }
.planche:hover .planche-titre { color: var(--bordeaux); }

/* Les cinq arts */
.atelier { background: linear-gradient(180deg, var(--vert) 0%, var(--vert-profond) 100%); color: var(--papier); padding: clamp(3rem, 7vw, 5rem) 0; border-top: 4px double var(--or); border-bottom: 4px double var(--or); }
.atelier h2 { color: var(--or-clair); }
.arts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1.4rem; counter-reset: art; }
.arts li { border: 1px solid rgba(201, 161, 79, .45); padding: 1.6rem 1.2rem 1.3rem; text-align: center; position: relative; background: rgba(255, 255, 255, .03); }
.arts li::before { counter-increment: art; content: counter(art, upper-roman); position: absolute; top: -.8em; left: 50%; transform: translateX(-50%); background: var(--vert); padding: 0 .6em; font-family: var(--titre); color: var(--or); }
.art-icone { width: 44px; height: 44px; color: var(--or); margin: 0 auto .8rem; display: block; }
.arts h3 { color: var(--or-clair); }
.arts p { font-size: 1.05rem; color: rgba(241, 230, 205, .85); margin: 0; }

/* Artistes */
.deux-colonnes { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cadre-ovale { margin: 0; text-align: center; }
.cadre-ovale img { border-radius: 50%; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; max-width: 380px; margin: 0 auto; border: 6px solid var(--or); outline: 1px solid var(--or-sombre); outline-offset: 6px; box-shadow: var(--ombre); }
.cadre-ovale figcaption { font-style: italic; color: var(--encre-douce); margin-top: 1.2rem; font-size: 1rem; }
.artistes .ornement { margin-left: 0; }

/* Registre des expositions */
.registre { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(138, 106, 44, .45); }
.registre li { display: grid; grid-template-columns: 9rem 1fr; gap: 1.2rem; padding: 1.3rem 0; border-bottom: 1px solid rgba(138, 106, 44, .45); }
.registre-date { font-family: var(--titre); color: var(--bordeaux); font-size: 1.1rem; }
.registre h3 { margin-bottom: .1em; }
.registre-lieu { font-style: italic; color: var(--encre-douce); margin-bottom: .3em; }
.registre p:last-child { margin-bottom: 0; }

/* Galeries */
.galeries { background: linear-gradient(180deg, #4f1a1e, #3a1215); color: var(--papier); padding: clamp(3rem, 7vw, 5rem) 0; border-top: 4px double var(--or); }
.galeries h2 { color: var(--or-clair); }
.galeries .entete-section p { color: rgba(241, 230, 205, .85); }
.offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1.4rem; }
.offre { border: 1px solid rgba(201, 161, 79, .5); outline: 1px solid rgba(201, 161, 79, .25); outline-offset: -7px; padding: 1.8rem 1.5rem; }
.offre h3 { color: var(--or-clair); }
.offre p { margin: 0; color: rgba(241, 230, 205, .88); }

/* Fiche d'une œuvre */
.fil { font-style: italic; margin-bottom: 2rem; }
.fil a { color: var(--or-sombre); }
.fiche-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.fiche-image { margin: 0; position: sticky; top: 90px; }
.fiche-image img { aspect-ratio: auto; }
.fiche-meta { font-style: italic; color: var(--encre-douce); }
.fiche-texte .ornement { margin-left: 0; }
.cartel { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; margin: 2rem 0 0; padding: 1.2rem 1.4rem; border: 1px solid var(--or-sombre); background: rgba(255, 255, 255, .35); font-size: 1.05rem; }
.cartel dt { font-family: var(--titre); color: var(--or-sombre); }
.cartel dd { margin: 0; }
.fiche-voisines { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(138, 106, 44, .45); font-family: var(--titre); }
.fiche-voisines a { color: var(--vert); text-decoration: none; }
.fiche-voisines a:hover { color: var(--bordeaux); }

/* Prochaines expositions */
.affiches { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1.5rem; }
.affiche { background: #f8f0dc; border: 1px solid var(--or-sombre); outline: 1px solid var(--or-sombre); outline-offset: -8px; padding: 2rem 1.8rem; text-align: center; box-shadow: var(--ombre); }
.affiche-date { font-family: var(--titre); color: var(--bordeaux); font-size: 1.2rem; letter-spacing: .06em; }
.affiche-ville { font-style: italic; color: var(--encre-douce); }
.affiche.vide { margin-bottom: 2.5rem; }
.affiche.vide p:first-child { font-size: 1.25rem; font-style: italic; }

/* Pied de page */
.pied { background: var(--vert-profond); color: var(--papier); padding: 4rem 0 2.5rem; text-align: center; border-top: 4px double var(--or); }
.pied-int { max-width: 46rem; margin: 0 auto; padding: 0 16px; }
.pied h2 { color: var(--or-clair); }
.pied-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin: 1.6rem 0 1rem; }
.pied-note { font-style: italic; color: rgba(241, 230, 205, .7); font-size: 1rem; }
.pied-mention { margin-top: 2.5rem; font-size: .92rem; color: rgba(241, 230, 205, .55); }

@media (max-width: 820px) {
  .ouverture-int, .deux-colonnes, .fiche-grille { grid-template-columns: 1fr; }
  .ouverture-image { max-width: 420px; margin: 0 auto; width: 100%; }
  .pignons { --u: 1.05px; left: calc(var(--u) * -30); }
  .fiche-image { position: static; }
  .registre li { grid-template-columns: 1fr; gap: .2rem; }
  .artistes .ornement { margin-left: auto; }
}

/* La police de titrage a une ligature « ti » qui laisse un trou. */
.planche-titre, .planche-numero, .menu a, .bouton, .marque strong, .registre-date, .affiche-date, .cartel dt, .surtitre { font-variant-ligatures: no-common-ligatures; }