/* Artworks V3 — noir et or, partout.

   Les fontes restent celles de app.css ; les jetons de couleur, eux, sont
   redéfinis ici pour que tout le site — pages publiques, atelier, admin —
   prenne la nuit et l'or du musée 3D. Les pigments sont éclaircis pour
   garder un contraste AA sur le noir. Cette feuille habille aussi les
   pièces V3 : panier, commandes, musée 3D, ARIA et l'oiseau. */

:root {
  color-scheme: dark;
  --or: #c6a675;
  --or-clair: #e2c9a0;
  --nuit: #0b0c10;
  --ivoire: #f5f2eb;

  --wall: #0b0c10;
  --paper: #131419;
  --ink: #f5f2eb;
  --quiet: #9d968b;
  --line: #2b2823;
  --bronze: #c6a675;
  --ok: #93c39c;
  --shade: #000;

  --ocre: #dcb86f;
  --terre: #e39d7c;
  --olive: #b9c48d;
  --indigo: #a5b5d8;
  --prune: #d7a0bc;
  --alerte: #ee8a8a;

  --ocre-voile: #221d13;
  --terre-voile: #251913;
  --olive-voile: #1b1e14;
  --indigo-voile: #151a25;
  --prune-voile: #22161c;
}
body { background: var(--wall); color: var(--ink); }
::selection { background: #3a3122; color: var(--ivoire); }

/* Le bouton plein devient or ; au survol, il s'éclaire. */
.btn-ink { background: var(--or); border-color: var(--or); color: var(--nuit); }
.btn-ink:hover { background: var(--or-clair); border-color: var(--or-clair); color: var(--nuit); }
.btn:not(.btn-ink):hover { border-color: var(--or); color: var(--or); }

/* Les champs de saisie sur la nuit. */
input, textarea, select { color: var(--ink); }
input::placeholder, textarea::placeholder { color: #6d675f; }

/* Atelier et admin : la colonne prend la même nuit, l'or marque l'actif. */
.atelier-side, .atelier-shell::before { background: linear-gradient(180deg, #111216, var(--wall)) !important; }
.admin-side, .admin-shell::before { background: #08090c !important; border-right-color: var(--line) !important; }
.admin-side .side-brand em, .side-brand em { color: var(--or); }

/* Les aperçus d'e-mails montrent le vrai courrier : nuit et or, comme le site. */
.mail-embed-wrap, .mail-letter { color: #f5f2eb; }
.mail-embed-wrap, .mail-letter, .mail-letter iframe, .mail-letter-frame { background: #0b0c10; }
.mail-embed-card { background: #131419; border-color: #2b2823; }

/* Les cadres d'œuvres : un liseré d'or discret plutôt qu'un passe-partout blanc. */
.frame { background: #101115; }

/* ------------------------------------------------------------ la barre */
.site-bar {
  border-bottom: 0;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}
.site-bar nav a {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  position: relative;
  padding-block: 0.3rem;
}
.site-bar nav a[aria-current="page"] { color: var(--ink); }
.site-bar nav a[aria-current="page"]::after,
.site-bar nav a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1rem;
  height: 1px;
  background: var(--bronze);
}
.site-search input {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding-inline: 0;
}
.site-search input:focus-visible { outline: none; border-bottom-color: var(--bronze); }
.nav-cta {
  border: 1px solid var(--or);
  padding: 0.45rem 0.9rem !important;
}
.nav-cta:hover::after { display: none; }
.nav-cart { display: inline-flex; align-items: center; gap: 0.4rem; }
.cart-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--or);
  color: var(--nuit);
  font-size: 0.66rem;
  letter-spacing: 0;
}

/* ------------------------------------------------------------ le pied */
.colophon {
  grid-template-columns: minmax(14rem, 1fr) auto;
  align-items: end;
  border-top: 0;
  padding-top: 4rem;
  padding-bottom: 6.5rem; /* le bouton d'ARIA ne doit pas couvrir les liens */
}
.colophon-brand p:not(.mark) { color: var(--quiet); max-width: 26rem; line-height: 1.6; margin: 0; }
.colophon nav { justify-content: flex-end; }
.colophon nav a {
  color: var(--quiet);
  text-decoration: none;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.colophon nav a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .colophon { grid-template-columns: 1fr; }
  .colophon nav { justify-content: flex-start; }
}

/* Des boutons plus fins : un trait, pas un bloc. */
.btn { letter-spacing: 0.14em; }
.link-button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--quiet);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-button:hover { color: var(--alerte); text-decoration-color: currentColor; }

/* ------------------------------------------------------------ acquérir */
.acquire {
  margin: 1.8rem 0;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.acquire-price {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
}
.acquire form { margin: 0; }
.acquire-hint, .acquire-note { margin: 0.8rem 0 0; color: var(--quiet); font-size: 0.8rem; line-height: 1.55; }
.acquire-note a { color: var(--bronze); }
.acquire-state {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* ------------------------------------------------------------ boutique */
.shop-head { padding-bottom: 1rem; }
.shop-body { padding: 1rem 0 2rem; }
.shop-empty { color: var(--quiet); padding: 2rem 0; }
.cart-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cart-line {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--line);
}
.cart-line.is-gone { opacity: 0.55; }
.cart-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--paper);
  overflow: hidden;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-say h2 { margin: 0 0 0.3rem; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.cart-say p { margin: 0; color: var(--quiet); font-size: 0.85rem; }
.cart-price { margin: 0; font-family: var(--serif); font-size: 1.35rem; white-space: nowrap; }
.cart-gone { color: var(--alerte) !important; font-size: 0.8rem; }
.cart-total {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  padding-top: 2rem;
}
.cart-total p { margin: 0; display: flex; align-items: baseline; gap: 1rem; }
.cart-total span { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--quiet); }
.cart-total strong { font-family: var(--serif); font-weight: 400; font-size: 2rem; }
@media (max-width: 640px) {
  .cart-line { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.6rem 1rem; }
  .cart-price, .cart-line form { grid-column: 2; }
  .cart-total { justify-content: flex-start; }
}

.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr);
  gap: 3rem;
  align-items: start;
}
.checkout .sheet { margin: 0; }
.checkout-summary {
  position: sticky;
  top: 1.5rem;
  padding: 1.6rem;
  background: var(--paper);
}
.checkout-summary ul { list-style: none; margin: 0.8rem 0 1.2rem; padding: 0; }
.checkout-summary li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.checkout-summary li span { display: grid; }
.checkout-summary li em { font-style: normal; color: var(--quiet); font-size: 0.8rem; }
.checkout-summary li b { font-weight: 400; white-space: nowrap; }
.checkout-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 1rem; }
.checkout-total strong { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; }
.checkout-summary a { color: var(--bronze); font-size: 0.85rem; }
.form-error { color: var(--alerte); font-size: 0.8rem; }
@media (max-width: 860px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout-summary { position: static; order: -1; }
}

.order-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.order-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.4rem 1.4rem;
  align-items: baseline;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.order-list a:hover strong { color: var(--bronze); }
.order-list span { color: var(--quiet); font-size: 0.85rem; }
.order-list b { font-weight: 400; font-family: var(--serif); font-size: 1.3rem; }
@media (max-width: 640px) { .order-list a { grid-template-columns: 1fr auto; } }
.order-state {
  font-size: 0.7rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze) !important;
}
.order-state[data-state="cancelled"] { color: var(--quiet) !important; }
.order-state[data-state="sold"], .order-state[data-state="completed"] { color: var(--ok) !important; }

/* Atelier : vente et commandes. */
.sale-sheet { margin: 2.5rem 0 1rem; max-width: 40rem; }
.sale-sheet h2 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin: 0 0 1rem; }
.sale-sheet .sheet { margin: 0; }
.sale-sheet a { color: var(--bronze); }
.order-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.order-board > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 1rem 2rem;
  padding: 1.3rem 1.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
}
.order-board > li[data-state="cancelled"] { opacity: 0.6; }
.order-board-work, .order-board-buyer { display: grid; gap: 0.25rem; align-content: start; }
.order-board-work strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.order-board span, .order-board em { color: var(--quiet); font-size: 0.85rem; }
.order-address { white-space: pre-line; }
.order-board-buyer a { color: var(--bronze); word-break: break-all; }
.order-board-state { display: grid; gap: 0.7rem; justify-items: end; align-content: start; }
.order-board-state form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; margin: 0; }
@media (max-width: 900px) {
  .order-board > li { grid-template-columns: 1fr; }
  .order-board-state { justify-items: start; }
  .order-board-state form { justify-content: flex-start; }
}
.admin-order-items { margin: 0.6rem 0 0; padding-left: 1.1rem; color: var(--quiet); font-size: 0.85rem; }

/* ------------------------------------------------------------ ARIA */
.aria-open {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 3rem;
  padding: 0 1.1rem 0 0.45rem;
  border: 1px solid var(--or);
  border-radius: 999px;
  background: var(--nuit);
  color: var(--ivoire);
  font: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(11, 12, 16, 0.28);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.aria-open:hover { transform: translateY(-2px); }
.aria-open:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.aria-is-open .aria-open { opacity: 0; pointer-events: none; }
.aria-mark {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--or);
  color: var(--or);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0;
  text-transform: none;
}
.aria-panel {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 61;
  width: min(25rem, calc(100vw - 2rem));
  max-height: min(40rem, calc(100vh - 3rem));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(11, 12, 16, 0.28);
}
.aria-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  background: var(--nuit);
  color: var(--ivoire);
}
.aria-head div { flex: 1; min-width: 0; }
.aria-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.12em; }
.aria-head p { margin: 0; font-size: 0.72rem; color: #a8a196; }
.aria-close {
  border: 0;
  background: none;
  color: #a8a196;
  font-size: 1.6rem;
  line-height: 1;
  width: 2.2rem;
  height: 2.2rem;
  cursor: pointer;
}
.aria-close:hover { color: var(--ivoire); }
.aria-close:focus-visible { outline: 2px solid var(--or); }
.aria-stream {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem;
  display: grid;
  align-content: start;
  gap: 0.9rem;
  min-height: 9rem;
}
.aria-line p { margin: 0; font-size: 0.9rem; line-height: 1.6; }
.aria-from-aria p { padding-left: 0.9rem; border-left: 1px solid var(--or); }
.aria-from-me { justify-self: end; max-width: 85%; }
.aria-from-me p { background: var(--wall); padding: 0.55rem 0.8rem; }
.aria-line.is-typing p { color: var(--quiet); letter-spacing: 0.3em; }
.aria-works { list-style: none; margin: 0.7rem 0 0; padding: 0 0 0 0.9rem; display: grid; gap: 0.5rem; }
.aria-works a {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  text-decoration: none;
}
.aria-works img { width: 3.4rem; height: 3.4rem; object-fit: cover; background: var(--wall); }
.aria-works span { display: grid; font-size: 0.82rem; }
.aria-works strong { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; }
.aria-works em { font-style: normal; color: var(--quiet); }
.aria-works b { font-weight: 400; color: var(--bronze); }
.aria-works a:hover strong { color: var(--bronze); }
.aria-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.7rem 0 0; padding-left: 0.9rem; }
.aria-links a { font-size: 0.82rem; color: var(--bronze); }
.aria-suggest { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1.1rem 0.8rem; }
.aria-suggest button {
  border: 1px solid var(--line);
  background: none;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.74rem;
  color: var(--quiet);
  cursor: pointer;
}
.aria-suggest button:hover { border-color: var(--bronze); color: var(--bronze); }
.aria-form { display: flex; border-top: 1px solid var(--line); }
.aria-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.95rem 1.1rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
}
.aria-form input:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; }
.aria-send {
  width: 3.2rem;
  border: 0;
  background: var(--or);
  color: var(--nuit);
  font-size: 1.1rem;
  cursor: pointer;
}
.aria-send:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 620px) {
  .aria-open { right: 1rem; bottom: 1rem; padding-right: 0.45rem; }
  .aria-open-label { display: none; }
  .aria-panel {
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-height: 82vh;
    border-inline: 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}
@media (prefers-reduced-motion: reduce) {
  .aria-open { transition: none; }
}

/* ------------------------------------------------------------ l'oiseau */
.bird { display: block; fill: currentColor; overflow: visible; }
.bird-wing { transform-box: view-box; transform-origin: 50% 50%; }
.bird-flight .bird-wing-l { animation: bird-beat-l 0.9s ease-in-out infinite; }
.bird-flight .bird-wing-r { animation: bird-beat-r 0.9s ease-in-out infinite; }
@keyframes bird-beat-l { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(22deg) scaleY(0.7); } }
@keyframes bird-beat-r { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-22deg) scaleY(0.7); } }
.aria-mark .bird { width: 1.45rem; color: var(--or); }

/* Le ciel des pages d'accueil : l'oiseau traverse, lentement, en haut. */
.foyer, .museum-intro { position: relative; }
.sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.foyer > :not(.sky), .museum-intro > :not(.sky) { position: relative; z-index: 1; }
.sky .bird {
  position: absolute;
  top: 12%;
  left: -6rem;
  width: clamp(2.6rem, 4vw, 4rem);
  color: var(--or);
  filter: drop-shadow(0 0 14px rgba(198, 166, 117, 0.35));
  animation: bird-cross 26s linear infinite, bird-drift 5.5s ease-in-out infinite;
}
@keyframes bird-cross {
  0% { left: -6rem; }
  70%, 100% { left: calc(100% + 6rem); }
}
@keyframes bird-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bird-flight .bird-wing-l, .bird-flight .bird-wing-r { animation: none; }
  .sky .bird { animation: none; left: auto; right: 8%; top: 10%; }
}

/* Protection des œuvres : ni glisser, ni appui long (iOS), ni sélection. */
img, canvas, .frame, .viewer {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Dans la visionneuse, un voile transparent couvre l'image : un appui long
   ou un clic droit tombe sur lui, pas sur le fichier. */
.viewer::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.viewer .viewer-close { z-index: 5; }
body:has(.viewer) .site-bar,
body:has(.viewer) .aria-panel,
body:has(.viewer) .aria-open,
body:has(.viewer) .cookie-band { visibility: hidden; }

/* Écrans d'accès : un panneau noir et or, le formulaire à côté. */
.auth-split main { display: block; padding: 0; }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.auth-aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.6rem, 4vw, 3.2rem);
  background:
    radial-gradient(90% 70% at 30% 110%, rgba(198, 166, 117, 0.18), transparent 60%),
    linear-gradient(160deg, #0e0f14, #08090c 70%);
  border-right: 1px solid var(--line);
}
.auth-aside .mark { position: relative; z-index: 2; font-size: 1.3rem; color: var(--ink); }
.auth-aside .sky .bird-real { top: 22%; }
.auth-aside-say { position: relative; z-index: 2; max-width: 30rem; }
.auth-aside-kicker { margin: 0 0 1rem; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--or); }
.auth-aside-title { margin: 0 0 1.8rem; font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.04; color: var(--ivoire); }
.auth-aside-title em { color: var(--or-clair); }
.auth-aside ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; color: #bdb5a8; }
.auth-aside li { display: flex; gap: 0.7rem; align-items: baseline; }
.auth-aside li::before { content: ""; flex: none; width: 0.9rem; height: 1px; background: var(--or); transform: translateY(-0.3em); }
.auth-split .auth-card { align-self: center; justify-self: center; width: min(28rem, 100%); padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem); }
.auth-back { display: inline-block; margin-bottom: 2rem; font-size: 0.8rem; color: var(--quiet); text-decoration: none; }
.auth-back:hover { color: var(--or); }
.auth-form .field { margin: 1.3rem 0; }
.auth-form label { display: block; margin: 0 0 0.4rem; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink); }
.auth-form input { margin-top: 0; padding: 0.85rem 0.9rem; border: 1px solid var(--line); border-radius: 3px; background: #0f1015; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; }
.auth-form input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(198, 166, 117, 0.18); }
.auth-form .has-error input { border-color: var(--alerte); }
.field-head { display: flex; justify-content: space-between; align-items: baseline; }
.field-aside { font-size: 0.8rem; color: var(--or); text-decoration: none; }
.field-hint { display: block; margin-top: 0.45rem; font-size: 0.78rem; color: var(--quiet); line-height: 1.5; }
.field-error { display: block; margin-top: 0.45rem; font-size: 0.8rem; color: var(--alerte); }
.slug-preview b { color: var(--or-clair); font-weight: 500; }
.password-box { position: relative; }
.password-box input { padding-right: 5.5rem; }
.password-toggle {
  position: absolute; right: 0.4rem; top: 50%; translate: 0 -50%;
  padding: 0.4rem 0.6rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--quiet);
}
.password-toggle:hover, .password-toggle:focus-visible { color: var(--or); }
.strength { display: block; height: 3px; margin-top: 0.55rem; background: var(--line); border-radius: 2px; overflow: hidden; }
.strength i { display: block; height: 100%; width: 0; background: var(--alerte); transition: width 0.25s, background 0.25s; }
.strength i[data-level="2"] { background: var(--ocre); }
.strength i[data-level="3"], .strength i[data-level="4"] { background: var(--ok); }
.auth-submit { width: 100%; margin-top: 0.6rem; padding: 0.95rem; font-size: 0.82rem; }
.auth-legal { margin-top: 1rem; }
@media (max-width: 860px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-aside { min-height: 13rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-aside ul, .auth-aside-kicker { display: none; }
  .auth-aside-title { margin: 0; font-size: 2rem; }
}

/* Atelier — suppression du compte : discrète, repliée par défaut. */
.danger-zone { margin: 4rem 0 1rem; max-width: 34rem; font-size: 0.86rem; color: var(--quiet); }
.danger-zone summary { cursor: pointer; display: inline-block; font-size: 0.78rem; color: #6d675f; list-style: none; }
.danger-zone summary::-webkit-details-marker { display: none; }
.danger-zone summary:hover { color: var(--alerte); }
.danger-zone[open] summary { color: var(--alerte); margin-bottom: 1rem; }
.danger-zone form { padding: 1.2rem 1.3rem; border: 1px solid rgba(238, 138, 138, 0.35); border-radius: 4px; }
.danger-zone p { line-height: 1.6; margin: 0 0 1rem; }
.btn-danger { background: transparent; border: 1px solid var(--alerte); color: var(--alerte); }
.btn-danger:hover { background: var(--alerte); color: var(--nuit); }

/* Pro et Studio : l'entrée du musée 3D dédié, sur la salle publique. */
.room-3d { margin: 1.4rem 0 0; }

/* Aperçu admin pendant la fermeture. */
.preview-band {
  margin: 0;
  padding: 0.45rem 1rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  background: var(--or);
  color: var(--nuit);
}
.preview-band a { color: var(--nuit); font-weight: 600; margin-left: 0.6rem; }

.draft-note { margin: 0 0 1rem; padding: 0.6rem 0.8rem; border: 1px solid rgba(198, 166, 117, 0.4); font-size: 0.82rem; color: var(--or-clair); }

/* Musée : filtres. */
.museum-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 0.7rem 1rem; margin: 1rem 0 0.4rem; }
.museum-filters label { display: grid; gap: 0.3rem; margin: 0; font-size: 0.74rem; letter-spacing: 0.08em; color: var(--quiet); }
.museum-filters select, .museum-filters input { margin: 0; min-width: 9rem; padding: 0.45rem 0.55rem; font-size: 0.86rem; }
.museum-filters input { width: 7rem; min-width: 0; }
@media (max-width: 560px) { .museum-filters label { flex: 1 1 45%; } .museum-filters select { min-width: 0; width: 100%; } .museum-filters input { width: 100%; } }

/* Fiche d'œuvre : réassurance, favoris, contact. */
.trust-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.82rem; line-height: 1.5; color: #bdb5a8; }
.trust-list li { padding-left: 1.1rem; position: relative; }
.trust-list li::before { content: "✓"; position: absolute; left: 0; color: var(--or); }
.trust-list strong { color: var(--ivoire); font-weight: 500; }
.trust-list a { color: var(--or); }
.work-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; }
.work-actions .inline-form, .inline-form { display: inline; margin: 0; }
.work-actions button[aria-pressed="true"] { color: var(--or); border-color: var(--or); }

/* Atelier : la première salle, pas à pas. */
.onboarding { border-color: rgba(198, 166, 117, 0.45); }
.onboarding-bar { height: 4px; background: var(--line); margin: 0 0 1rem; border-radius: 2px; overflow: hidden; }
.onboarding-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8a6a3b, var(--or-clair)); }
.onboarding-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem 1.2rem; }
.onboarding-steps li { display: flex; gap: 0.7rem; align-items: flex-start; }
.onboarding-steps small { display: block; color: var(--quiet); font-size: 0.76rem; line-height: 1.4; margin-top: 0.15rem; }
.onboarding-steps a { color: var(--or-clair); }
.onboarding-mark { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--line); border-radius: 50%; font-size: 0.75rem; color: var(--quiet); }
.onboarding-steps .is-done .onboarding-mark { background: var(--or); border-color: var(--or); color: var(--nuit); }
.onboarding-steps .is-done strong { color: var(--quiet); font-weight: 400; }
.onboarding-share { margin: 1rem 0 0; font-size: 0.85rem; word-break: break-all; }

/* Accueil : deux parcours, visiteur et artiste. */
.paths { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 0.5rem; }
.path { padding: 1.4rem 1.5rem 1.5rem; border: 1px solid var(--line); background: rgba(19, 20, 25, 0.72); backdrop-filter: blur(4px); }
.path-artist { border-color: rgba(198, 166, 117, 0.45); background: linear-gradient(160deg, rgba(198, 166, 117, 0.12), rgba(19, 20, 25, 0.78)); }
.path-kicker { margin: 0 0 0.6rem; font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--or); }
.path h2 { margin: 0 0 0.6rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; color: var(--ivoire); }
.path p { margin: 0 0 1rem; color: #bdb5a8; line-height: 1.6; font-size: 0.95rem; }
.path .hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.path-proof { margin: 0.9rem 0 0 !important; font-size: 0.78rem !important; color: var(--quiet) !important; }
.hero-quick { display: grid; gap: 0.55rem; margin-top: 1.2rem; max-width: 40rem; }
.hero-quick .hero-actions { margin: 0; }
.hero-benefit { margin: 0; color: #d9d0c2; font-size: 0.95rem; line-height: 1.45; }
.path-preview { margin: 0 0 1rem; padding-left: 1.1rem; color: #d9d0c2; display: grid; gap: 0.25rem; }
.next-action { display: grid; gap: 0.35rem; margin: 0 0 1rem; padding: 1rem 1.1rem; border: 1px solid rgba(198, 166, 117, 0.55); }
.next-action strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
@media (max-width: 860px) {
  .paths { grid-template-columns: minmax(0, 1fr); }
  .hero-quick .btn { text-align: center; }
}

/* Bandeau cookies : discret, en bas, un vrai choix. */
.cookie-band {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 80;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem;
  max-width: 54rem; margin: 0 auto; padding: 0.9rem 1.1rem;
  background: #131419; border: 1px solid var(--line); box-shadow: 0 18px 50px -20px #000;
  font-size: 0.82rem; color: #c9c1b4;
}
.cookie-band p { margin: 0; flex: 1 1 22rem; line-height: 1.5; }
.cookie-band a { color: var(--or); }
.cookie-band div { display: flex; gap: 0.5rem; }
body:has(.cookie-band) .foyer { padding-top: 1.6rem; padding-bottom: 6.5rem; }
body:has(.cookie-band) .foyer .lead { margin: 0.85rem 0 1rem; }
body:has(.cookie-band) .hero-quick { margin-top: 0.2rem; }
body:has(.cookie-band) .aria-open { bottom: 6.5rem; }
/* Le bandeau ne doit jamais cacher un bouton : la page gagne de quoi défiler au-dessus. */
body:has(.cookie-band) { padding-bottom: 8rem; }
@media (max-width: 640px) {
  .cookie-band { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; padding: 0.7rem 0.8rem; font-size: 0.76rem; gap: 0.5rem; }
  .cookie-band div { width: 100%; }
  .cookie-band div .btn { flex: 1; }
  body:has(.cookie-band) { padding-bottom: 11rem; }
  body:has(.cookie-band) .aria-open { bottom: 9.5rem; }
}

/* Pages légales. */
.legal-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; max-width: 72rem; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 2.5rem) 4rem; }
.legal-nav { position: sticky; top: 1.5rem; align-self: start; display: grid; gap: 0.6rem; font-size: 0.86rem; }
.legal-nav a { color: var(--quiet); text-decoration: none; }
.legal-nav a[aria-current="page"], .legal-nav a:hover { color: var(--or); }
.legal-body { max-width: 46rem; line-height: 1.75; color: #c9c1b4; }
.legal-body h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0.4rem 0 0.3rem; color: var(--ivoire); }
.legal-body h2 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--ivoire); margin: 2.2rem 0 0.6rem; }
.legal-body a { color: var(--or); }
.legal-updated { color: var(--quiet); font-size: 0.82rem; }
.legal-warning { padding: 0.7rem 0.9rem; border: 1px solid rgba(220, 184, 111, 0.4); color: var(--ocre); font-size: 0.86rem; }
.legal-facts { display: grid; gap: 0.5rem; margin: 1rem 0; }
.legal-facts div { display: grid; grid-template-columns: 13rem 1fr; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 0.5rem; }
.legal-facts dt { color: var(--quiet); font-size: 0.82rem; }
.legal-facts dd { margin: 0; color: var(--ivoire); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; margin: 1rem 0; display: block; overflow-x: auto; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 0.6rem; border-bottom: 1px solid var(--line); }
.legal-table th { color: var(--quiet); font-weight: 400; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; }
.legal-consent { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.legal-consent p { flex-basis: 100%; margin: 0; }
.legal-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; grid-column: 1 / -1; font-size: 0.76rem; }
.legal-links a { color: var(--quiet); }
@media (max-width: 860px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .legal-nav { position: static; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
  .legal-facts div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* Salle publique : prix et achat sous l'œuvre. */
.room-buy { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.5rem; flex-wrap: wrap; }
.room-price { font-family: var(--serif); font-size: 1.25rem; color: var(--or-clair); }
.room-price.is-gone { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--quiet); }
.btn-small { padding: 0.45rem 0.9rem; font-size: 0.72rem; }
.room-buy form { margin: 0; }
.room-buy .acquire-note { flex-basis: 100%; margin: 0.3rem 0 0; font-size: 0.8rem; }

/* Accrochage : le prix sous chaque œuvre. */
.quick-price { display: flex; gap: 0.4rem; align-items: center; margin: 0.5rem 0 0; font-size: 0.8rem; }
.quick-price input { width: 6.5rem; margin: 0; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.quick-price.is-locked { color: var(--or); }

/* Commandes : étapes du séquestre, preuves. */
.escrow-steps { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.78rem; color: var(--quiet); }
.escrow-steps li::before { content: "○ "; }
.escrow-steps li.is-done { color: var(--ok); }
.escrow-steps li.is-done::before { content: "● "; }
.receive-box { margin-top: 0.7rem; }
.receive-box summary { cursor: pointer; color: var(--or); font-size: 0.85rem; }
.receive-box form { display: grid; gap: 0.6rem; margin-top: 0.6rem; }
.receive-box label { margin: 0; font-size: 0.8rem; }
.proofs { margin: 0.35rem 0; font-size: 0.82rem; }
.proofs a { color: var(--or); }
.decision { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0 0.8rem; }
.decision input[type=text] { flex: 1 1 14rem; margin: 0; }
.boost-total { font-size: 1rem; margin: 0.6rem 0 1rem; }
.boost-total strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; color: var(--or-clair); }

/* ARIA — pièces jointes et confirmations. */
.aria-clip { display: grid; place-items: center; width: 2.6rem; cursor: pointer; font-size: 1.05rem; opacity: 0.75; }
.aria-clip:hover { opacity: 1; }
.aria-attached { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.5rem 1.1rem; font-size: 0.78rem; color: var(--quiet); border-top: 1px solid var(--line); }
.aria-attached img { width: 2.4rem; height: 2.4rem; object-fit: cover; border: 1px solid var(--line); }
.aria-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.7rem 0 0 0.9rem; padding: 0.7rem; border: 1px solid rgba(198, 166, 117, 0.45); background: rgba(198, 166, 117, 0.06); }
.aria-confirm small { flex-basis: 100%; color: var(--ink); font-size: 0.8rem; line-height: 1.5; }
.aria-confirm button { padding: 0.45rem 0.9rem; border: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 0.78rem; cursor: pointer; }
.aria-confirm .aria-confirm-yes { background: var(--or); border-color: var(--or); color: var(--nuit); }
.aria-from-aria p { white-space: pre-line; }

/* Admin — conversions. */
.conv-kpi { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.funnel { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.funnel li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1rem; padding: 0.55rem 0.8rem; isolation: isolate; }
.funnel li::before {
  content: ""; position: absolute; inset: 0; z-index: -1; width: var(--w);
  background: linear-gradient(90deg, rgba(198, 166, 117, 0.32), rgba(198, 166, 117, 0.08)); border-radius: 2px;
}
.funnel b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.funnel small { grid-column: 1 / -1; color: var(--quiet); font-size: 0.74rem; }
.table-scroll { overflow-x: auto; }
.conv-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.conv-table th, .conv-table td { padding: 0.6rem 0.7rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.conv-table th:first-child, .conv-table tbody th { text-align: left; font-weight: 500; }
.conv-table thead th { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--quiet); font-weight: 400; }

/* Admin — lancement. */
.launch-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 1.4rem; align-items: end; }
.launch-form label { display: grid; gap: 0.4rem; font-size: 0.85rem; color: var(--quiet); }
.launch-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* Atelier — l'offre offerte au lancement. */
.gift-band {
  margin: 0 0 1.6rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(198, 166, 117, 0.45);
  background: linear-gradient(100deg, rgba(198, 166, 117, 0.14), rgba(198, 166, 117, 0.03));
  border-radius: 4px;
  line-height: 1.6;
}
.gift-band strong { color: var(--or-clair); }
.gift-band a { color: var(--or); }

/* L'oiseau réaliste : plumes cernées d'un trait brun, rachis clair.
   Il traverse plus grand, et son vol ondule et s'incline un peu. */
.bird-real .f { stroke: rgba(58, 38, 12, 0.5); stroke-width: 0.45; stroke-linejoin: round; }
.bird-real .edge { stroke: none; }
.bird-real .rachis { fill: none; stroke: rgba(255, 244, 216, 0.38); stroke-width: 0.4; stroke-linecap: round; }
.sky .bird-real {
  width: clamp(4.2rem, 7vw, 7rem);
  left: -8rem;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 22px rgba(198, 166, 117, 0.22));
  animation: bird-cross-real 30s linear infinite, bird-drift-real 7s ease-in-out infinite;
}
@keyframes bird-cross-real {
  0% { left: -8rem; }
  72%, 100% { left: calc(100% + 8rem); }
}
@keyframes bird-drift-real {
  0%, 100% { translate: 0 0; rotate: -3deg; }
  30% { translate: 0 1.6rem; rotate: 4deg; }
  60% { translate: 0 0.4rem; rotate: -1deg; }
  80% { translate: 0 -0.8rem; rotate: -5deg; }
}
@media (prefers-reduced-motion: reduce) {
  .sky .bird-real { animation: none; left: auto; right: 8%; top: 8%; }
}

/* Admin : un nom d'offre long ne déborde plus de sa carte. */
.admin-offer { min-width: 0; }
.admin-offer h3 { overflow-wrap: anywhere; font-size: clamp(1.1rem, 1.6vw, 1.6rem); }

/* Rewards : les listes portent l'argument, elles se lisent au corps du texte. */
.rewards-page .trust-list { font-size: 0.95rem; gap: 0.75rem; }
.rewards-page .stat-row { margin-top: 2.4rem; }

/* ------------------------------------------------------------ atelier, téléphone
   Sous 860 px (le repli de app.js) : une barre fixe en haut qui dit où l'on
   est, des onglets au pouce en bas, le menu complet en panneau plein écran,
   et des champs nets, assez grands pour le doigt — 16 px, sinon iOS zoome
   à chaque saisie. Au-dessus, rien ne change. */
.shell-bar, .shell-tabs { display: none; }

@media (max-width: 860px) {
  .js .atelier-app .shell-bar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    position: sticky;
    top: 0;
    z-index: 70;
    min-height: 56px;
    padding: 0.5rem 5vw;
    padding-top: max(0.5rem, env(safe-area-inset-top));
    background: rgba(11, 12, 16, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .shell-bar-home { display: flex; text-decoration: none; }
  .shell-bar-home .avatar { width: 34px; height: 34px; font-size: 0.95rem; }
  .shell-bar-title {
    flex: 1;
    margin: 0;
    min-width: 0;
    font-family: var(--serif);
    font-size: 1.25rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .shell-bar-title small {
    display: block;
    font-family: var(--sans);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--or);
  }
  .js .atelier-app .shell-toggle {
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
  }
  .shell-burger { display: grid; gap: 4px; width: 18px; }
  .shell-burger i { display: block; height: 1.5px; background: var(--ink); transition: transform 0.25s ease, opacity 0.25s ease; }
  .shell-toggle[aria-expanded="true"] .shell-burger i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .shell-toggle[aria-expanded="true"] .shell-burger i:nth-child(2) { opacity: 0; }
  .shell-toggle[aria-expanded="true"] .shell-burger i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* Le menu complet : un panneau qui couvre l'écran, qui défile seul. */
  .js .atelier-app .atelier-side.is-open {
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 65;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.2rem 5vw calc(6rem + env(safe-area-inset-bottom));
    background: var(--wall) !important;
    border: 0;
  }
  .atelier-app .atelier-side .side-brand { display: none; }
  .atelier-app .side-nav a { border-radius: 8px; padding-inline: 0.8rem; }
  .atelier-app .side-nav a.is-on { background: #17181e; color: var(--ink); box-shadow: inset 2px 0 0 var(--or); }
  .atelier-app .side-foot a, .atelier-app .side-foot button { min-height: 44px; }

  /* Les onglets du bas. */
  .js .atelier-app .shell-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom));
    background: rgba(11, 12, 16, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .shell-tabs a {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    min-height: 52px;
    padding: 0.35rem 0;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: var(--quiet);
    text-decoration: none;
  }
  .shell-tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .shell-tabs a[aria-current="page"] { color: var(--or); }
  .shell-tabs .shell-tabs-add svg {
    width: 38px;
    height: 38px;
    margin-top: -14px;
    padding: 8px;
    border-radius: 999px;
    background: var(--or);
    stroke: var(--nuit);
    stroke-width: 2;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  }
  .shell-tabs .badge {
    position: absolute;
    top: 0.2rem;
    left: calc(50% + 6px);
    min-width: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--or);
    color: var(--nuit);
    font-style: normal;
    font-size: 0.62rem;
    line-height: 1.1rem;
    text-align: center;
  }
  .atelier-app .atelier-canvas { padding: 0 5vw calc(7rem + env(safe-area-inset-bottom)); }
  /* ARIA se pose au-dessus des onglets, sans couvrir les champs. */
  .atelier-app .aria-open { bottom: calc(76px + env(safe-area-inset-bottom)); right: 0.8rem; }

  /* En-tête de page plus serré : la barre du haut porte déjà le nom. */
  .atelier-app .atelier-head { padding-top: 1.4rem; gap: 1.1rem; }
  .atelier-app .atelier-head h1 { font-size: clamp(1.8rem, 8vw, 2.3rem); }
  .atelier-app .atelier-head .btn, .atelier-app .atelier-actions { width: 100%; }
  .atelier-app .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }

  /* Les champs : une boîte nette, pleine largeur, au corps 16 px. */
  .atelier-app .sheet { padding-top: 1.4rem; }
  .atelier-app form label { margin: 0 0 1.15rem; font-size: 0.84rem; color: var(--ink); }
  .atelier-app form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  .atelier-app form select,
  .atelier-app form textarea,
  .atelier-app .studio-filter {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 0.45rem;
    padding: 0.7rem 0.85rem;
    font-size: 16px;
    line-height: 1.4;
    background: #121318;
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .atelier-app form textarea { min-height: 8rem; }
  .atelier-app form input:focus, .atelier-app form select:focus, .atelier-app form textarea:focus, .atelier-app .studio-filter:focus {
    outline: none;
    border-color: var(--or);
    box-shadow: 0 0 0 3px rgba(198, 166, 117, 0.18);
  }
  .atelier-app form input[type="file"] { width: 100%; margin-top: 0.5rem; font-size: 0.9rem; color: var(--quiet); }
  .atelier-app form input[type="file"]::file-selector-button {
    margin-right: 0.8rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--or);
    border-radius: 8px;
    background: transparent;
    color: var(--or);
    font: inherit;
  }
  .atelier-app form .hint { margin: 0.25rem 0 0; }
  .atelier-app form .check { min-height: 44px; }
  .atelier-app form .check input { width: 20px; height: 20px; }
  .atelier-app fieldset { margin: 0.4rem 0 1.4rem; padding: 1rem 0.9rem 0.2rem; border-radius: 10px; }
  .atelier-app .sheet > button[type="submit"], .atelier-app .sheet .btn-ink[type="submit"] { width: 100%; }

  /* Accrochage : une ligne par œuvre — vignette, titre, ce qui manque. */
  .atelier-app .studio-grid { grid-template-columns: 1fr; gap: 0.8rem; }
  .atelier-app .studio-grid li {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 0.9rem;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #111216;
  }
  .atelier-app .studio-grid li > a { display: contents; }
  .atelier-app .studio-grid li > a > img,
  .atelier-app .studio-grid.compact img {
    grid-row: span 3;
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: 6px;
  }
  .atelier-app .studio-grid li > a > div { min-width: 0; }
  .atelier-app .studio-grid strong {
    margin-top: 0;
    font-size: 1.08rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .atelier-app .studio-grid span { font-size: 0.78rem; }
  .atelier-app .studio-grid .quick-price { grid-column: 2; margin-top: 0.55rem; }
  .atelier-app .studio-grid .quick-price input { flex: 1 1 5rem; width: auto; min-width: 0; min-height: 40px; margin: 0; padding: 0.4rem 0.6rem; }
  .atelier-app .studio-grid .quick-price button { white-space: nowrap; min-height: 40px; }
  .atelier-app .studio-grid .work-tools { grid-column: 2; position: static; margin-top: 0.5rem; justify-content: flex-start; }
  .atelier-app .work-tools button { min-width: 40px; min-height: 40px; }

  /* Les compteurs : deux par ligne, le dernier seul prend la largeur. */
  .atelier-app .stat-row { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .atelier-app .stat-row li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ Acquérir
   La page des œuvres en vente : le prix se lit d'un coup d'œil, l'achat
   se fait depuis la carte, les tranches de prix parlent comme une
   collection mais disent leurs chiffres. */
.market-head .lead { max-width: 46rem; }
.market-promises {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.market-promises li {
  display: grid;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-size: 0.82rem;
  line-height: 1.35;
}
.market-promises strong { color: var(--or); font-weight: 500; }
.market-promises span { color: var(--quiet); }

.market-bands {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 2.6rem 0 1.4rem;
}
.market-bands a {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.market-bands a:hover { border-color: var(--or); transform: translateY(-2px); }
.market-bands a[aria-current="true"] { border-color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.market-bands strong { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.15; }
.market-bands span { font-size: 0.8rem; color: var(--quiet); }

.market-families { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.4rem; }
.market-families a {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--ink);
  text-decoration: none;
}
.market-families a:hover { border-color: var(--or); }
.market-families a[aria-current="true"] { border-color: var(--or); color: var(--or); }
.market-families span { color: var(--quiet); margin-left: 0.2rem; }
.market-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.8rem 1rem;
  margin: 0 0 2.2rem;
}
.market-filters label { display: grid; gap: 0.3rem; margin: 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--quiet); }
.market-filters .market-search { flex: 1 1 16rem; }
.market-filters input, .market-filters select {
  min-height: 46px;
  margin: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #121318;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
}
.market-filters input:focus, .market-filters select:focus { outline: none; border-color: var(--or); }
.market-filters .btn { min-height: 46px; }

.market-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 2.2rem 1.4rem;
}
.market-card { display: grid; grid-template-rows: auto 1fr; }
.market-frame {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: 1.1rem;
  background: #101115;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.market-frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s ease;
}
.market-card:hover .market-frame img { transform: scale(1.025); }
.market-cartel { display: flex; flex-direction: column; padding-top: 0.9rem; }
.market-cartel h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.2; }
.market-cartel h3 a { color: var(--ink); text-decoration: none; }
.market-artist { margin: 0.2rem 0 0; font-size: 0.85rem; }
.market-artist a { color: var(--or); text-decoration: none; }
.market-facts { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--quiet); line-height: 1.45; }
.market-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.9rem;
}
.market-price { margin: 0; font-family: var(--serif); font-size: 1.45rem; color: var(--ink); }
.market-buy form { margin: 0; }
.market-empty { padding: 2rem 0; max-width: 40rem; color: var(--quiet); }
.market-pages { display: flex; justify-content: center; gap: 2rem; margin-top: 3.5rem; font-size: 0.85rem; color: var(--quiet); }
.market-pages a { color: var(--or); }
.market-artists { margin-top: 4rem; }

@media (max-width: 860px) {
  .market-bands { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .market-bands { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.6rem; padding-bottom: 0.3rem; }
  .market-bands a { flex: 0 0 72%; scroll-snap-align: start; }
  .market-filters label:not(.market-search) { flex: 1 1 40%; }
  .market-filters .btn { flex: 1 1 100%; }
  .market-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 0.8rem; }
  .market-frame { padding: 0.6rem; }
  .market-cartel h3 { font-size: 1.05rem; }
  .market-price { font-size: 1.2rem; }
  .market-buy .btn { width: 100%; white-space: nowrap; letter-spacing: 0.06em; padding-inline: 0.4rem; }
  .market-buy form { flex: 1 1 100%; }
}

.acquire-more { margin: 0.7rem 0 0; font-size: 0.85rem; }
.acquire-more a { color: var(--or); }

/* ------------------------------------------------------------ Exposer
   La page d'entrée des artistes : la promesse à gauche, le formulaire à
   droite, au-dessus de la ligne de flottaison. Sur téléphone, le
   formulaire suit la promesse, sans rien cacher. */
.exposer-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding: 1.6rem 0 2.4rem;
}
.exposer-say h1 { margin: 0.4rem 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.08; color: var(--ivoire); overflow-wrap: anywhere; }
.exposer-say .lead { margin: 1.2rem 0 1.6rem; color: #cfc7ba; line-height: 1.65; }
.exposer-proof { margin: 1.2rem 0 0; color: var(--quiet); font-size: 0.9rem; }
.exposer-card {
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-top: 2px solid var(--or);
  background: var(--paper);
  min-width: 0;
}
.exposer-card h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; color: var(--ivoire); }
.exposer-card .auth-form .field { margin: 1rem 0; }
.exposer-card .auth-form input { width: 100%; box-sizing: border-box; }
.exposer-card .auth-switch { margin-top: 1rem; }
.exposer-page .trust-list { font-size: 0.95rem; gap: 0.75rem; }
.exposer-disciplines { margin: 2.6rem 0 0; }
.exposer-disciplines h2 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--ivoire); margin: 0 0 0.8rem; }
.exposer-disciplines ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 0.6rem; }
.exposer-disciplines a { display: block; padding: 0.8rem 1rem; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 0.92rem; line-height: 1.4; }
.exposer-disciplines a:hover, .exposer-disciplines a:focus-visible { border-color: var(--or); color: var(--or-clair); }
.exposer-end { text-align: left; }
@media (max-width: 900px) {
  .exposer-hero { grid-template-columns: minmax(0, 1fr); }
}

/* Au bas d'une salle ou d'une œuvre : l'invitation à ouvrir la sienne. */
.artist-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin: 3rem 0 1rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--or);
  background: var(--paper);
}
.artist-invite > div { flex: 1 1 22rem; min-width: 0; }
.artist-invite h2 { margin: 0.2rem 0 0.4rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--ivoire); }
.artist-invite p { margin: 0; color: #bdb5a8; }
.artist-invite .hero-actions { margin: 0; }

/* Atelier : l'essai, la valeur, la carrière. */
.trial-panel { border-top: 2px solid var(--or); }
.trial-panel.is-active { background: linear-gradient(180deg, rgba(198, 166, 117, 0.08), transparent 60%); }
.trial-panel p { line-height: 1.6; }
.trial-panel details { margin-top: 0.8rem; color: var(--quiet); }
.trial-panel summary { cursor: pointer; color: var(--or); }
.value-panel .stat-row { margin-top: 0.4rem; }
.career-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.career-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--line); background: rgba(19, 20, 25, 0.6); }
.career-list li > div { min-width: 0; display: grid; gap: 0.2rem; }
.career-list strong { color: var(--ivoire); font-weight: 500; }
.career-list span { color: var(--quiet); font-size: 0.9rem; line-height: 1.5; }
.onboarding-count { color: var(--or); font-size: 0.85rem; }
@media (max-width: 640px) {
  .career-list li { flex-direction: column; align-items: flex-start; }
}

/* Offres : à qui, pourquoi, pour combien. */
.offer-problem { margin: 0; color: #bdb5a8; font-size: 0.9rem; line-height: 1.5; }
.offer-why { margin: 0; color: var(--or-clair); font-size: 0.85rem; line-height: 1.5; font-style: italic; }
.trial-band .band { border: 1px solid var(--line); border-top: 2px solid var(--or); padding: 1.4rem 1.5rem; background: var(--paper); }

/* Accueil : la démonstration du musée, les bénéfices, les offres. */
.museum-demo .band .btn { flex-shrink: 0; }
.demo-hall {
  position: relative;
  display: block;
  height: clamp(15rem, 34vw, 24rem);
  margin-top: 1rem;
  overflow: hidden;
  perspective: 900px;
  background: radial-gradient(ellipse at 50% 40%, #1d1b17, #0b0c10 70%);
  border: 1px solid var(--line);
}
.demo-wall { position: absolute; top: 12%; height: 62%; display: flex; gap: 6%; align-items: center; justify-content: center; }
.demo-wall img { height: 58%; width: auto; max-width: 30%; object-fit: cover; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); outline: 1px solid rgba(198, 166, 117, 0.35); outline-offset: 3px; }
.demo-left { left: -6%; width: 46%; transform-origin: left center; transform: rotateY(62deg); }
.demo-right { right: -6%; width: 46%; transform-origin: right center; transform: rotateY(-62deg); }
.demo-back { left: 34%; width: 32%; transform: translateZ(-160px); }
.demo-back img { height: 70%; max-width: 70%; }
.demo-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, transparent, rgba(198, 166, 117, 0.08)); }
.demo-hall:hover .demo-back, .demo-hall:focus-visible .demo-back { transform: translateZ(-60px); }
.demo-back, .demo-left, .demo-right { transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (prefers-reduced-motion: no-preference) {
  .demo-hall .demo-back { animation: demo-breathe 9s ease-in-out infinite; }
  @keyframes demo-breathe { 0%, 100% { transform: translateZ(-160px); } 50% { transform: translateZ(-100px); } }
}
@media (max-width: 640px) {
  .demo-left, .demo-right { width: 44%; }
  .demo-wall img { max-width: 42%; }
}
.benefits { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.benefits li { padding: 1.1rem 1.2rem; border: 1px solid var(--line); background: rgba(19, 20, 25, 0.6); display: grid; gap: 0.4rem; }
.benefits strong { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--ivoire); }
.benefits span { color: #bdb5a8; line-height: 1.55; font-size: 0.93rem; }
.home-offers { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.home-offers li { position: relative; padding: 1.2rem; border: 1px solid var(--line); background: var(--paper); display: grid; gap: 0.35rem; align-content: start; }
.home-offers li.is-featured { border-color: var(--or); }
.home-offers h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.4rem; color: var(--ivoire); }
.home-offers p { margin: 0; color: #bdb5a8; font-size: 0.9rem; line-height: 1.5; }
.home-offers .home-offer-price { color: var(--or); font-size: 1.05rem; }
.home-offers .home-offer-works { color: var(--quiet); font-size: 0.82rem; }
.home-offer-tag { position: absolute; top: -0.7rem; right: 0.9rem; background: var(--or); color: var(--nuit) !important; font-size: 0.62rem !important; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.2rem 0.5rem; }