/* williamsan.art — Medsan, v3 (8 octobre 2026)
   La copie de l'accueil de med-san.art : papier blanc, encre sumi, vermillon,
   kanji qui flottent derrière la page, grand titre MEDSAN découpé dans les
   œuvres, deux photos de l'atelier sur les côtés, puis la boutique.
   Polices de med-san.art : Noto Serif JP (titres), Zen Kaku Gothic New (texte).
   L'identité commune (mot-symbole, navigation en Shippori Mincho) ne change pas. */

:root {
  --papier: #FFFFFF;
  --encre: #141414;          /* --foreground de med-san.art, hsl(0 0% 8%) */
  --gris: #6B6B6B;           /* --muted-foreground, un ton plus sombre : 5,3:1 */
  --filet: #E8E6E3;          /* --border, hsl(30 10% 90%) */
  --vermillon: #B8532E;      /* le vermillon de med-san.art, assombri pour les petites capitales (4,9:1) */
  --platre: #EFEAE2;         /* le mur des originaux */
  --platre-bas: #E4DED4;
  --encre-douce: #5F5B54;    /* le cartel, 5,2:1 sur le plâtre */
  --vermillon-profond: #8F4A26;
  --texte-serif: #3A3630;

  --serif: "Noto Serif JP", Georgia, "Times New Roman", serif;
  --sans: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --marque: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;

  --g: clamp(1rem, 4.5vw, 3.5rem);  /* gouttière commune à tout le site */
  --douce: cubic-bezier(.22, .61, .36, 1);

  /* grain de toile, le même que med-san.art */
  --grain-toile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Cpattern id='w' width='4' height='4' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 2h4M2 0v4' stroke='%23000' stroke-opacity='0.08' stroke-width='0.5'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23w)'/%3E%3C/svg%3E");
  --grain-platre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.28 0 0 0 0 0.24 0 0 0 0 0.18 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  color-scheme: light;
}

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

html {
  background: var(--papier);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 1rem/1.65 var(--sans);
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
p, h1, h2, h3, figure { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
button { font: inherit; color: inherit; }

::selection { background: #C65A35; color: #fff; }

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

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.evitement {
  position: fixed;
  left: .75rem; top: -4rem;
  z-index: 60;
  padding: .6rem 1rem;
  background: var(--encre);
  color: #fff;
  text-decoration: none;
}
.evitement:focus { top: .75rem; }

main, .contact, .pied { position: relative; z-index: 1; }

/* ——— Les kanji qui flottent derrière la page (FloatingKanji de med-san.art) ——— */

.kanji {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.kanji span {
  position: absolute;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1;
  color: var(--encre);
  opacity: .08;
}

/* ——— Identité commune : mot-symbole et navigation, posés sur le titre ——— */

.entete {
  position: absolute;
  z-index: 30;
  inset: 0 0 auto 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: calc(1.25rem + env(safe-area-inset-top)) var(--g) 1rem;
}

.marque {
  font: 500 1.1875rem/1.2 var(--marque);
  letter-spacing: .01em;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
}

.nav { display: flex; flex-wrap: wrap; gap: .25rem clamp(1.1rem, 2.4vw, 2.25rem); }
.nav a {
  font: 400 1rem/1.2 var(--marque);
  letter-spacing: .01em;
  color: var(--gris);
  text-decoration: none;
  padding: .5rem 0;
  transition: color .25s ease;
}
.nav a:hover { color: var(--encre); }
.nav a[aria-current="page"] {
  color: var(--encre);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .45em;
}

@media (max-width: 40rem) {
  .entete { flex-direction: column; align-items: stretch; gap: .35rem; }
  .entete .nav { justify-content: space-between; gap: 0; }
  .entete .nav a { font-size: .9375rem; }
}

/* ——— Le grand titre : MEDSAN découpé dans l'œuvre ——— */

.heros {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 7rem 1rem 6rem;
  overflow-x: clip;
}

.heros__grain {
  position: absolute;
  inset: 0;
  opacity: .02;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.heros__centre { position: relative; z-index: 1; display: grid; justify-items: center; }

.medsan { font-size: 18vw; line-height: 1; font-weight: 700; letter-spacing: -.05em; user-select: none; }
@media (min-width: 48rem) { .medsan { font-size: 15vw; } }
@media (min-width: 64rem) { .medsan { font-size: 12vw; } }

.medsan__mot { display: grid; }
.medsan__mot > span { grid-area: 1 / 1; display: block; padding-right: .04em; }

.medsan__contour {
  color: transparent;
  -webkit-text-stroke: 1px var(--filet);
}

.medsan__calque {
  color: transparent;
  background-color: transparent;
  background-image: url("images/hero/titre-1-800.jpg");
  background-image: image-set(url("images/hero/titre-1-800.webp") type("image/webp"), url("images/hero/titre-1-800.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
}
@media (min-width: 48rem) {
  .medsan__calque {
    background-image: url("images/hero/titre-1-1600.jpg");
    background-image: image-set(url("images/hero/titre-1-1600.webp") type("image/webp"), url("images/hero/titre-1-1600.jpg") type("image/jpeg"));
  }
}
.medsan__calque--suivant { opacity: 0; background-image: none; }
.medsan__calque--suivant.est-visible { opacity: 1; transition: opacity 1s ease; }

.heros__surtitre {
  margin-top: 2rem;
  font-size: .875rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gris);
}
@media (min-width: 48rem) { .heros__surtitre { font-size: 1rem; } }
@media (max-width: 47.99rem) {
  .heros__surtitre span { display: block; }
  .heros__surtitre .heros__tiret { display: none; }
  .heros__surtitre span + span { margin-top: .4rem; }
}

.heros__decouvrir {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  letter-spacing: .2em;
  color: var(--gris);
  text-decoration: none;
  transition: color .3s ease;
}
.heros__decouvrir:hover { color: var(--encre); }
.heros__trait { width: 1px; height: 3rem; background: linear-gradient(to bottom, var(--gris), transparent); }

.heros__points {
  position: absolute;
  right: 2rem;
  bottom: .75rem;
  z-index: 25;
  display: flex;
  gap: .125rem;
}
.heros__point {
  position: relative;
  width: 1.5rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.heros__point::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: .5rem; height: .5rem;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgb(107 107 107 / .3);
  transition: width .3s ease, background-color .3s ease;
}
.heros__point:hover::before { background: rgb(107 107 107 / .5); }
.heros__point[aria-current="true"] { width: 2.25rem; }
.heros__point[aria-current="true"]::before { width: 1.5rem; background: #C65A35; }

/* Les deux photos de l'atelier, posées en biais de part et d'autre */
.atelier {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  width: 6.5rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}
.atelier img { width: 100%; height: auto; }
.atelier--gauche { left: 0; top: 17%; transform: translateX(-30%); }
.atelier--droite { right: 0; top: 64%; transform: translateX(30%); }
@media (min-width: 48rem) {
  .atelier { width: 9rem; }
  .atelier--gauche { top: 40%; transform: translateX(-33%); }
  .atelier--droite { top: 60%; transform: translateX(33%); }
}
@media (min-width: 64rem) { .atelier { width: 12rem; } }
@media (min-width: 80rem) { .atelier { width: 16rem; } }

/* Entrée, une seule fois au chargement */
@media (prefers-reduced-motion: no-preference) {
  .js .heros__centre .medsan { animation: monte 1s ease-out both; }
  .js .heros__surtitre { animation: monte-court 1s ease-out .3s both; }
  .js .heros__decouvrir, .js .heros__points { animation: apparait 1s ease-out .7s both; }
}
@keyframes monte { from { opacity: 0; transform: translateY(2rem); } }
@keyframes monte-court { from { opacity: 0; transform: translateY(1rem); } }
@keyframes apparait { from { opacity: 0; } }

@media (max-width: 47.99rem) {
  .heros__points { right: 1rem; bottom: 1rem; }
  .heros__decouvrir { bottom: 1.5rem; }
}

/* ——— Rubriques communes ——— */

.conteneur { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 40rem) { .conteneur { padding: 0 2rem; } }
@media (min-width: 64rem) { .conteneur { padding: 0 3rem; } }

.surtitre {
  font-size: .75rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--gris);
}
.surtitre [lang="ja"] { letter-spacing: 0; font-family: var(--serif); }

.rubrique { max-width: 42rem; margin: 0 auto; text-align: center; }
.rubrique .surtitre { margin-bottom: 1.5rem; }
.rubrique h2 { font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem); line-height: 1.25; margin-bottom: 1.25rem; }
.rubrique__sous { color: var(--gris); text-wrap: balance; }

/* ——— La démarche, juste sous le titre ——— */

.demarche { padding: clamp(4.5rem, 12vh, 8rem) 0 clamp(4.5rem, 12vh, 8rem); }
.demarche__corps {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  gap: 1.75rem;
}
@media (min-width: 40rem) { .demarche__corps { padding: 0 2rem; } }
@media (min-width: 64rem) {
  .demarche__corps {
    padding: 0 3rem;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 6vw, 6.5rem);
    align-items: start;
  }
}
.demarche .surtitre { margin-bottom: 1.25rem; }
.demarche h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  line-height: 1.25;
  text-wrap: balance;
}
.demarche__texte p {
  max-width: 36em;
  font: 400 clamp(1.0625rem, 1rem + .3vw, 1.1875rem)/1.85 var(--serif);
  letter-spacing: 0;
  color: var(--texte-serif);
}
.demarche__texte p + p { margin-top: 1.1em; }
@media (min-width: 64rem) { .demarche__texte { padding-top: 2.4rem; } }

/* ——— La boutique : les éditions limitées ——— */

.boutique { padding-bottom: clamp(6rem, 14vh, 8rem); }

.grille {
  list-style: none;
  margin: 4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1rem;
}
@media (min-width: 48rem) {
  .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem 3rem; margin-top: 5rem; }
}

.carte__lien { display: flex; flex-direction: column; text-decoration: none; color: var(--encre); }

.carte__vue {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--papier);
  box-shadow: 0 20px 40px -15px rgb(255 255 255 / .35), 0 8px 16px -8px rgb(255 255 255 / .2);
  transition: box-shadow 1.8s var(--douce);
}
.carte__lien:hover .carte__vue { box-shadow: 0 0 22px rgb(20 20 20 / .05); }
.carte__vue img { width: 100%; height: 100%; object-fit: cover; }

/* la toile : son grain et un lustre en biais */
.toile-grain::before,
.toile-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.toile-grain::before {
  background-image: var(--grain-toile);
  background-size: 120px 120px;
  mix-blend-mode: multiply;
  opacity: .4;
}
.toile-grain::after {
  opacity: .25;
  background: linear-gradient(135deg, rgb(255 255 255 / .15) 0%, transparent 35%, transparent 65%, rgb(0 0 0 / .12) 100%);
}
.toile-grain--fin::before { opacity: .26; }
.toile-grain--fin::after {
  opacity: 1;
  background: linear-gradient(118deg, rgb(255 255 255 / .13) 0%, rgb(255 255 255 / .03) 30%, rgb(255 255 255 / 0) 52%, rgb(58 46 32 / .07) 100%);
}

.carte__vendu { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgb(255 255 255 / .4); }
.carte__vendu span { background: #C65A35; color: #fff; padding: .5rem 2rem; font-size: .625rem; letter-spacing: .5em; text-transform: uppercase; }

.carte__titre {
  margin-top: .875rem;
  font: 500 1rem/1.375 var(--serif);
  letter-spacing: -.01em;
}
.carte__mention {
  margin-top: .5rem;
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vermillon);
}
.carte__meta {
  margin-top: .375rem;
  font-size: .5625rem;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
}
.carte__meta-long { display: none; }
.carte__bas { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.carte__prix { font: 400 .875rem/1.4 var(--serif); }
.carte__voir { display: none; }
.fleche { display: inline-block; transition: transform .3s ease; }

@media (min-width: 48rem) {
  .carte__titre { margin-top: 1.25rem; font-size: 1.5rem; line-height: 1.25; }
  .carte__mention { margin-top: .75rem; font-size: .625rem; letter-spacing: .3em; }
  .carte__meta { margin-top: .5rem; font-size: .75rem; letter-spacing: .1em; }
  .carte__meta-long { display: inline; }
  .carte__meta-court { display: none; }
  .carte__bas { margin-top: 1.75rem; }
  .carte__prix { font-size: 1.125rem; }
  .carte__voir {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    transition: color .3s ease;
  }
  .carte__lien:hover .carte__voir { color: #B8532E; }
  .carte__lien:hover .fleche { transform: translateX(.25rem); }
}

/* La révélation, quand la carte approche : image, titre, mention, format, prix */
@media (prefers-reduced-motion: no-preference) {
  .js .carte:not(.est-vue) .carte__vue,
  .js .carte:not(.est-vue) .carte__titre,
  .js .carte:not(.est-vue) .carte__mention,
  .js .carte:not(.est-vue) .carte__meta,
  .js .carte:not(.est-vue) .carte__bas { opacity: 0; transform: translateY(12px); }
  .js .carte .carte__vue,
  .js .carte .carte__titre,
  .js .carte .carte__mention,
  .js .carte .carte__meta,
  .js .carte .carte__bas { transition: opacity 1.4s var(--douce), transform 1.4s var(--douce), box-shadow 1.8s var(--douce); }
  .js .carte .carte__titre { transition-delay: .45s; }
  .js .carte .carte__mention { transition-delay: .65s; }
  .js .carte .carte__meta { transition-delay: .8s; }
  .js .carte .carte__bas { transition-delay: .95s; }
}

/* ——— Les originaux : le mur de plâtre ——— */

.mur {
  position: relative;
  isolation: isolate;
  background: linear-gradient(to bottom, var(--platre) 0%, var(--platre-bas) 100%);
  color: var(--encre);
  overflow-x: clip;
}
.mur::before,
.mur::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mur::before { background-image: var(--grain-platre); background-size: 180px 180px; opacity: .4; mix-blend-mode: multiply; }
/* raccords avec le blanc de la page, en haut et en bas */
.mur::after {
  background:
    linear-gradient(to bottom, var(--papier), rgb(255 255 255 / 0) clamp(110px, 12vw, 150px)),
    linear-gradient(to top, var(--papier), rgb(255 255 255 / 0) clamp(110px, 12vw, 150px));
}

.rubrique--mur { padding: clamp(7rem, 12vw, 10rem) 1.5rem 1rem; }
.rubrique--mur .surtitre,
.rubrique--mur .rubrique__sous { color: var(--encre-douce); }
@media (min-width: 48rem) { .rubrique--mur { padding-bottom: 2.5rem; } }

.mur__oeuvre {
  position: relative;
  display: flex;
  align-items: center;
  padding: 5rem 5vw;
}
@media (min-width: 48rem) { .mur__oeuvre { padding-block: 6rem; } }
@media (min-width: 64rem) { .mur__oeuvre { min-height: 92vh; padding-block: 7rem; } }
/* la lumière qui tombe sur ce mur-là */
.mur__oeuvre::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(110% 78% at 24% 10%, rgb(255 253 247 / .7), rgb(255 253 247 / 0) 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.mur__grille {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 64rem) {
  .mur__grille { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); gap: 5vw; }
}

.mur__toile { display: flex; align-items: flex-start; justify-content: center; }
@media (min-width: 64rem) { .mur__toile { justify-content: flex-start; } }

.objet {
  --w: min(90vw, 460px);
  position: relative;
  flex: none;
  width: var(--w);
  aspect-ratio: var(--ratio);
}
@media (min-width: 64rem) { .objet { --w: min(42vw, 600px, calc(64vh * var(--ratio))); } }

/* le chant du châssis, vu de trois quarts : la peinture continue dessus */
.objet__chant {
  position: absolute;
  top: 0;
  left: calc(100% - 1px);
  width: calc(var(--w) * var(--chant));
  height: 100%;
  display: none;
  background-color: #7C736A;
  background-repeat: no-repeat;
  background-size: var(--w) calc(var(--w) / var(--ratio));
  background-position: right center;
}
@media (min-width: 64rem) { .objet__chant { display: block; } }

.objet__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #EDE9E2;
  box-shadow:
    0 0 0 1px rgb(40 32 22 / .07),
    2px 3px 5px rgb(46 38 26 / .10),
    10px 20px 34px -14px rgb(46 38 26 / .26),
    26px 50px 86px -34px rgb(46 38 26 / .34);
}
.objet__face img { width: 100%; height: 100%; object-fit: cover; }

.cartel__mention {
  font-size: .6875rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--vermillon-profond);
}
.cartel__titre {
  margin-top: 1.25rem;
  font-size: clamp(2.4rem, 5.2vw, 4.5rem);
  line-height: .99;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.cartel__filet { display: block; margin-top: 2rem; width: 2.75rem; height: 1px; background: rgb(20 20 20 / .26); }
.cartel__lignes { margin-top: 1.75rem; font-size: .8125rem; line-height: 1.95; color: var(--encre-douce); }
.cartel__lignes span { display: block; }
.cartel__extrait {
  margin-top: 2rem;
  max-width: 36ch;
  font: 400 1.0625rem/1.75 var(--serif);
  letter-spacing: 0;
  color: var(--texte-serif);
}
@media (min-width: 48rem) { .cartel__extrait { font-size: 1.125rem; } }
.cartel__action { margin-top: 2.5rem; }

.pilule {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 1rem 1.75rem 1rem 2.25rem;
  border-radius: 999px;
  background: var(--encre);
  color: #F6F3ED;
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 14px 30px -14px rgb(26 20 12 / .55);
  transition: transform .3s ease-out, box-shadow .3s ease-out, background-color .3s ease-out;
}
@media (min-width: 40rem) { .pilule { width: auto; min-width: 20.625rem; } }
.pilule:hover { transform: translateY(-2px); }
.pilule:active { transform: none; }
.pilule:hover .fleche { transform: translateX(.25rem); }
.pilule__prix { font: 400 1.0625rem/1 var(--serif); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.pilule--eteinte { background: transparent; color: var(--encre-douce); border: 1px solid rgb(20 20 20 / .18); box-shadow: none; }

/* révélation du cartel, et la toile qui monte un peu moins vite que lui */
@media (prefers-reduced-motion: no-preference) {
  .js .mur__oeuvre:not(.est-vue) .cartel > * { opacity: 0; transform: translateY(8px); }
  .js .mur__oeuvre .cartel > * { transition: opacity .9s var(--douce), transform .9s var(--douce); }
  .js .mur__oeuvre .cartel > :nth-child(2) { transition-delay: .08s; }
  .js .mur__oeuvre .cartel > :nth-child(3) { transition-delay: .16s; }
  .js .mur__oeuvre .cartel > :nth-child(4) { transition-delay: .22s; }
  .js .mur__oeuvre .cartel > :nth-child(5) { transition-delay: .29s; }
  .js .mur__oeuvre .cartel > :nth-child(6) { transition-delay: .37s; }
  .derive { will-change: transform; }
}

/* ——— La fiche d'un tirage : format, caisse américaine, prix ——— */

.fiche {
  width: min(100% - 2rem, 68rem);
  max-width: none;
  max-height: min(100% - 2rem, 54rem);
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--papier);
  color: var(--encre);
  box-shadow: 0 40px 90px -30px rgb(20 20 20 / .45);
  overflow: auto;
  overscroll-behavior: contain;
}
.fiche::backdrop { background: rgb(20 20 20 / .55); }
@media (prefers-reduced-motion: no-preference) {
  .fiche[open] { animation: fiche-entre .45s var(--douce); }
  .fiche[open]::backdrop { animation: apparait .45s ease; }
}
@keyframes fiche-entre { from { opacity: 0; transform: translateY(16px); } }

.fiche__barre {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: .25rem;
  padding: .5rem;
  background: var(--papier);
}
.fiche__barre button {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / .85);
  font: 400 1.25rem/1 var(--serif);
  cursor: pointer;
  transition: background-color .2s ease;
}
.fiche__barre button:hover { background: #F2F0EC; }
.fiche__fermer { font-size: 1.75rem !important; }

.fiche__corps {
  display: grid;
  gap: 2rem;
  padding: 0 1.25rem 1.5rem;
}
@media (min-width: 56rem) {
  .fiche__corps {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    padding: 0 clamp(2rem, 4vw, 3.5rem) 0;
    align-items: start;
  }
  .fiche__vue { position: sticky; top: 3.75rem; margin-bottom: 3rem; }
}

.fiche__vue {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: hsl(30 12% 96%);
}
.fiche__cadre {
  --cadre: 0px;
  width: 100%;
  max-width: 30rem;
  padding: var(--cadre);
  background: linear-gradient(145deg, hsl(30 6% 12%), hsl(30 6% 6%));
  box-shadow: 0 18px 30px -16px hsl(30 10% 20% / .55);
  transition: padding .6s var(--douce), box-shadow .6s var(--douce);
}
.fiche__cadre.est-paysage { max-width: 30rem; }
.fiche__cadre.est-portrait { max-width: 20rem; }
.fiche__fente { padding: calc(var(--cadre) * .45); background: hsl(30 8% 3%); transition: padding .6s var(--douce); }
.fiche__cadre.est-encadree { --cadre: clamp(10px, 2.2vw, 18px); box-shadow: 0 22px 36px -16px hsl(30 10% 8% / .75); }
.fiche__toile { position: relative; overflow: hidden; background: #EDE9E2; }
.fiche__toile img { width: 100%; height: 100%; object-fit: cover; }

.fiche__panneau { padding-top: .5rem; }
@media (min-width: 56rem) { .fiche__panneau { padding-top: 1.5rem; } }

.fiche__mention, .petit {
  font-size: .625rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.fiche__mention { color: var(--vermillon); }
.petit { color: var(--gris); }
.fiche__titre { margin-top: 1rem; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); line-height: 1.1; letter-spacing: -.02em; }
.fiche__technique { margin-top: .75rem; font-size: .875rem; color: var(--gris); }

.fiche__formats { margin-top: 2rem; }
.fiche__formats legend { margin-bottom: .75rem; }
.onglets { display: flex; flex-wrap: wrap; gap: 2rem; border-bottom: 1px solid var(--filet); }
.onglet { position: relative; }
.onglet input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.onglet span {
  display: block;
  padding: .75rem 0;
  margin-bottom: -1px;
  border-bottom: 1px solid transparent;
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gris);
  transition: color .25s ease, border-color .25s ease;
}
.onglet:hover span { color: var(--encre); }
.onglet input:checked + span { color: var(--encre); border-bottom-color: var(--encre); }
.onglet input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }
.onglet input:disabled + span { text-decoration: line-through; opacity: .5; }

.finition { margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--filet); }
.finition[hidden] { display: none; }
.finition__tete { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.finition__nom { margin-top: .5rem; font: 500 clamp(1.25rem, 1.1rem + .6vw, 1.5rem)/1.3 var(--serif); }
.finition__supplement { font: 400 1.375rem/1.2 var(--serif); white-space: nowrap; }
.finition__choix { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.vignette { position: relative; display: flex; flex-direction: column; padding: .5rem; border: 1px solid var(--filet); cursor: pointer; transition: border-color .3s ease; }
.vignette:hover { border-color: rgb(20 20 20 / .4); }
.vignette:has(input:checked) { border-color: var(--encre); }
.vignette:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 2px; }
.vignette__scene {
  height: 7.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem;
  background: hsl(30 12% 96%);
  opacity: .7;
  transition: opacity .3s ease;
}
.vignette:hover .vignette__scene, .vignette:has(input:checked) .vignette__scene { opacity: 1; }
.vignette__toile, .vignette__caisse { display: block; height: 100%; max-width: 100%; aspect-ratio: var(--r, 1); }
.vignette__toile { height: 86%; background-size: cover; background-position: center; box-shadow: 0 10px 18px -10px hsl(30 10% 20% / .5); }
.vignette__caisse { padding: 6px; background: linear-gradient(145deg, hsl(30 6% 12%), hsl(30 6% 6%)); box-shadow: 0 10px 18px -10px hsl(30 10% 8% / .75); }
.vignette__fente { display: block; height: 100%; padding: 3px; background: hsl(30 8% 3%); }
.vignette__image { display: block; height: 100%; background-size: cover; background-position: center; }
.vignette__nom { margin-top: .5rem; font-size: .625rem; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.vignette:has(input:checked) .vignette__nom { color: var(--encre); }
.finition__texte { margin-top: 1.25rem; font: 400 1rem/1.75 var(--serif); letter-spacing: 0; color: var(--texte-serif); }
.finition__plus { margin-top: .75rem; display: grid; gap: .25rem; font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.fiche__note { margin-top: 1.25rem; font-size: .8125rem; color: var(--gris); }

.fiche__achat {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin-top: 2rem;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid var(--filet);
  background: var(--papier);
}
@media (min-width: 56rem) {
  .fiche__achat .fiche__prix { grid-template-columns: auto 1fr; align-items: baseline; gap: 1.25rem; }
  .fiche__achat .fiche__montant { font-size: 2.5rem; }
  .fiche__achat .pilule--fiche { margin-top: 1.1rem; }
  .fiche__achat .fiche__rassurance { margin-top: .75rem; }
}
.fiche__prix { display: grid; gap: .5rem; }
.fiche__montant { font: 400 clamp(2.5rem, 2rem + 2vw, 3.25rem)/1 var(--serif); letter-spacing: -.01em; }
.fiche__detail { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.pilule--fiche { margin-top: 1.75rem; width: 100%; min-width: 0; }
.fiche__rassurance { margin-top: 1rem; font-size: .625rem; line-height: 1.6; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }

@media (max-width: 55.99rem) {
  .fiche { width: 100%; max-height: 100%; height: 100%; }
  .fiche__achat {
    position: sticky;
    bottom: 0;
    margin-inline: -1.25rem;
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / .96);
    box-shadow: 0 -12px 24px -18px rgb(20 20 20 / .35);
  }
  .fiche__prix { grid-template-columns: auto 1fr; align-items: baseline; gap: 1rem; }
  .fiche__montant { font-size: 1.75rem; }
  .fiche__detail { font-size: .625rem; letter-spacing: .14em; }
  .pilule--fiche { margin-top: .75rem; }
  .fiche__rassurance { display: none; }
}

/* ——— Contact : la vidéo en bas de page ———
   L'encre qui s'ouvre dans un bol de porcelaine, sous un voile de papier ; devant, d'un seul tenant :
   William San qui peint Heart Attack (la photo telle quelle, sans filtre), la phrase et le formulaire. */

.contact {
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: min(92svh, 60rem);
  overflow: hidden;
  background: #F0EDE6;
  color: var(--encre);
}
.contact__fond { position: absolute; inset: 0; z-index: -2; }
.contact__image,
.contact__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact__video { opacity: 0; transition: opacity 1.4s ease; }
.contact__fond.video-prete .contact__video { opacity: 1; }
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(255 255 255 / .9), rgb(255 255 255 / 0) 22%),
    linear-gradient(to top, rgb(240 237 230 / .96) 0%, rgb(240 237 230 / .86) 45%, rgb(240 237 230 / .5) 80%, rgb(240 237 230 / .35));
}
.contact__corps {
  width: min(100%, 74rem);
  margin: 0 auto;
  padding: clamp(5rem, 14vh, 9rem) var(--g) clamp(3.5rem, 11vh, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "phrase" "photo" "mot";
  gap: clamp(2rem, 5svh, 2.75rem);
}
.contact__phrase { grid-area: phrase; font: 500 clamp(2rem, 4.2vw, 3.5rem)/1.15 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.contact__phrase span { display: block; }

.contact__photo { grid-area: photo; justify-self: start; width: min(68%, 15rem); }
.contact__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 2133;
  object-fit: cover;
  background: var(--platre);
  box-shadow: 0 1px 2px rgb(20 20 20 / .08), 0 24px 48px -28px rgb(26 20 12 / .5);
}
.contact__legende {
  margin-top: 1rem;
  font-size: .8125rem;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--gris);
  text-wrap: balance;
}

.contact__mot { grid-area: mot; max-width: 36rem; }
/* Le formulaire : l'encre de med-san.art sur le papier, l'erreur au vermillon. */
.contact .mot,
.contact .mot__merci {
  --mot-encre: var(--encre);
  --mot-ligne: rgb(20 20 20 / .32);
  --mot-trait: var(--encre);
  --mot-label: #5d5a55;
  --mot-faux: var(--vermillon-profond);
  --mot-sceau: var(--vermillon);
  --mot-sceau-encre: #fff;
  --mot-sceau-texte: "済";
  --mot-sceau-rayon: 3px;
  --mot-sceau-angle: -4deg;
  --mot-fonte: var(--sans);
  --mot-fonte-ui: var(--sans);
  --mot-fonte-titre: var(--serif);
}
.contact__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  min-width: 9.5rem;
  padding: .8rem 1.8rem;
  border: 1px solid var(--encre);
  border-radius: 0;
  background: var(--encre);
  color: #fff;
  font: 500 1rem/1.2 var(--marque);
  letter-spacing: .02em;
  text-decoration: none;
  transition: background-color .3s ease;
}
.contact__bouton:hover { background: rgb(20 20 20 / .82); }

@media (min-width: 56rem) {
  .contact__corps {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "photo phrase" "photo mot";
    grid-template-rows: auto 1fr;
    column-gap: clamp(3rem, 7vw, 7rem);
    align-items: end;
  }
  .contact__photo { width: min(100%, 24rem); justify-self: start; }
  .contact__phrase { font-size: clamp(2rem, 3.3vw, 3rem); }
  /* L'encre s'ouvre entre la photo et le formulaire, pas derrière les champs. */
  .contact__image, .contact__video { left: -18%; width: 118%; }
  .contact::before {
    background:
      linear-gradient(to bottom, rgb(255 255 255 / .9), rgb(255 255 255 / 0) 22%),
      linear-gradient(to left, rgb(240 237 230 / .95) 0%, rgb(240 237 230 / .9) 54%, rgb(240 237 230 / .5) 64%, rgb(240 237 230 / .28));
  }
}
@media (max-width: 40rem) {
  .contact__bouton { flex: 1 1 100%; }
}

/* Sur la fiche d'un tirage : la question, discrète, sous l'achat. */
.fiche__question { margin-top: 1rem; font-size: .8125rem; line-height: 1.5; color: var(--gris); }
.fiche__question a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; text-decoration-color: rgb(20 20 20 / .3); }
.fiche__question a:hover { color: var(--encre); text-decoration-color: currentColor; }

/* ——— Pied de page commun ——— */

.pied {
  background: var(--papier);
  border-top: 1px solid rgb(20 20 20 / .14);
  padding: clamp(3.5rem, 9svh, 5.5rem) var(--g) 2rem;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}
.pied__corps {
  max-width: 74rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.pied__maison p { margin-top: .35rem; color: var(--gris); }
.nav--pied { flex-direction: column; gap: 0; }
.nav--pied a { padding: .3rem 0; }
.nav--pied a[aria-current="page"] { text-decoration: none; }
.pied__contact { margin: 0; padding: 0; list-style: none; line-height: 1.5; }
.pied__contact li + li { margin-top: .7rem; }
.pied .lien {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  text-decoration-color: rgb(20 20 20 / .35);
  transition: text-decoration-color .25s ease;
}
.pied .lien:hover { text-decoration-color: var(--encre); }
.pied__mention {
  max-width: 74rem;
  margin: clamp(3rem, 8svh, 4.5rem) auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(20 20 20 / .1);
  font-size: .8125rem;
  color: var(--gris);
}
@media (max-width: 48rem) { .pied__corps { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .contact__video { display: none; }
  .fiche__cadre, .fiche__fente { transition: none; }
}