/* ═══════════════════════════════ Musée de Nous ═══════════════════════════════
 *
 * Servie **seulement** sur la fiche « Musée de Nous » (`views/product-affiche.liquid`) : six
 * compositions d'affiche n'ont rien à faire dans le chemin critique des autres pages.
 *
 * ── La palette ──
 *
 * Ce sont des couleurs de **produit**, pas de charte (même distinction qu'au point 6 quater
 * pour les affiches de naissance) : ivoire, blanc cassé, noir profond, gris typographique et un
 * bordeaux sombre en accent, relevés sur la demande de Fred. Elles sont toutes ici, en tête, et
 * nulle part ailleurs dans le fichier : un test y tient.
 *
 * ── La mise en page ──
 *
 * Tout est mesuré en `cqw` — la largeur de l'affiche —, pour qu'un A4 et un 70 × 100 soient la
 * même composition à deux échelles. Les rapports vendus vont de 0,67 (40 × 60) à 0,75 (30 × 40) :
 * chaque collection est réglée pour tenir dans le plus trapu, le 30 × 40, et laisse l'air en plus
 * se répartir (`space-between`) sur les formats allongés — jamais une taille de texte qui
 * changerait avec le format.
 *
 * La collection est un attribut (`data-style`), le tirage (`data-tirage`) et le format de la
 * photo (`data-format-photo`) aussi : changer l'un d'eux ne redessine rien.
 */
.musee {
  --m-ivoire: #f4f0e8; --m-blanc: #faf8f3; --m-noir: #171717; --m-gris: #75726b;
  --m-bordeaux: #6e2525; --m-vide: #e7e1d6; --m-gris-nuit: #a8a49b; --m-trait: rgba(23, 23, 23, .22);
  --m-papier-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --m-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ── La base, commune aux six ── */
.musee {
  --fond: var(--m-ivoire); --texte: var(--m-noir); --doux: var(--m-gris);
  --pr: .8; --ph: 56; --pw: 64;
  font-family: "Inter", system-ui, sans-serif; align-items: center; justify-content: space-between;
  padding: 8cqw 9cqw 6cqw; text-align: center; line-height: 1.3;
}
.musee p { margin: 0; }
.musee [hidden] { display: none !important; }
.musee[data-format-photo="Paysage"] { --pr: 1.5; }
.musee[data-format-photo="Carré"] { --pr: 1; }

.musee__entete {
  display: flex; justify-content: space-between; width: 100%; gap: 3cqw;
  font-size: 1.45cqw; letter-spacing: .32em; text-transform: uppercase; color: var(--doux);
}
.musee__oeuvre {
  position: relative; margin: 0; flex: none; overflow: hidden; background: var(--m-vide);
  aspect-ratio: var(--pr);
  width: min(calc(var(--ph) * var(--pr) * 1cqw), calc(var(--pw) * 1cqw));
}
.musee__oeuvre img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--photo-x, 50%) var(--photo-y, 40%);
  transform: scale(var(--photo-zoom, 1)); transform-origin: var(--photo-x, 50%) var(--photo-y, 40%);
}
.musee__oeuvre[data-photo] { touch-action: none; cursor: grab; }
.musee__grain { display: none; position: absolute; inset: 0; background-image: var(--m-texture); background-size: 24cqw; opacity: .22; mix-blend-mode: multiply; pointer-events: none; }
.musee__vide {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.4cqw; cursor: pointer; margin: 0;
  border: 1px dashed var(--doux); color: var(--doux); padding: 10%;
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 2.2cqw; line-height: 1.25;
}
.musee__vide svg { width: 6cqw; height: auto; }

/* Le tirage : un filtre sur la photo, et le grain par-dessus pour l'argentique. */
.musee[data-tirage="Couleur douce"] .musee__oeuvre img { filter: contrast(.9) saturate(.82) brightness(1.03); }
.musee[data-tirage="Noir et blanc"] .musee__oeuvre img { filter: grayscale(1) contrast(1.06); }
.musee[data-tirage="Argentique"] .musee__oeuvre img { filter: grayscale(1) contrast(.88) brightness(1.05); }
.musee[data-tirage="Argentique"] .musee__grain { display: block; }

.musee__cote { display: flex; flex-direction: column; align-items: center; width: 100%; }
.musee__numero { font-size: 1.4cqw; letter-spacing: .4em; text-transform: uppercase; color: var(--doux); }
.musee__surtitre { display: none; }
/* `width: 100%` n'est pas décoratif : sans lui l'élément serait large comme son texte, et la
   mesure du débordement (`ajuster`, dans l'éditeur) ne verrait jamais rien. */
.musee__noms {
  width: 100%; white-space: nowrap; font-family: "Cormorant Garamond", Georgia, serif;
  font-size: calc(2.7cqw * var(--ech, 1)); letter-spacing: .34em; text-transform: uppercase; margin-top: 2.2cqw;
}
.musee__titre {
  width: 100%; white-space: nowrap; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400;
  font-size: calc(10cqw * var(--ech, 1)); letter-spacing: .2em; padding-left: .2em; text-transform: uppercase; line-height: 1.05;
}
/* Posée par l'éditeur quand la réduction ne suffit plus : la ligne se replie, équilibrée. */
.musee .musee--replie { white-space: normal; text-wrap: balance; line-height: 1.12; }
.musee__sous { font-size: 1.6cqw; letter-spacing: .38em; text-transform: uppercase; color: var(--doux); margin-top: 1.2cqw; }
.musee__ligne { font-size: 1.4cqw; letter-spacing: .24em; text-transform: uppercase; color: var(--doux); margin-top: 1.6cqw; font-variant-numeric: tabular-nums; }

.musee__notice {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 5cqw; width: 100%; text-align: left;
  border-top: .12cqw solid var(--m-trait); padding-top: 3cqw;
}
.musee__etiquette { font-size: 1.15cqw; letter-spacing: .3em; text-transform: uppercase; color: var(--doux); margin-bottom: 1.2cqw !important; }
.musee__apropos p:last-child { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.95cqw; line-height: 1.42; white-space: pre-line; }
.musee__cartel { margin: 0; display: grid; gap: .9cqw; align-content: start; }
.musee__cartel div { display: grid; grid-template-columns: 13cqw 1fr; gap: 1.6cqw; align-items: baseline; }
.musee__cartel dt { font-size: 1.1cqw; letter-spacing: .26em; text-transform: uppercase; color: var(--doux); }
.musee__cartel dd { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.8cqw; line-height: 1.25; }
.musee__cartel [data-ligne="heure"], .musee__cartel [data-ligne="coordonnees"] { display: none; }

.musee__pied { display: none; }
#m-pied-coord { font-variant-numeric: tabular-nums; letter-spacing: .2em; }
.musee__epreuve { display: flex; flex-direction: column; gap: .8cqw; text-align: left; font-size: 1.25cqw; letter-spacing: .3em; text-transform: uppercase; color: var(--doux); }
.musee__signature {
  width: 100%; white-space: nowrap; font-family: "Pinyon Script", cursive; font-size: 4.4cqw; line-height: 1.2;
  transform: rotate(-4deg); text-align: right; padding-right: 1cqw;
}
.musee__devise { font-size: 1.15cqw; letter-spacing: .45em; text-transform: uppercase; color: var(--doux); padding-left: .45em; }

/* ══ 01. Le Musée — le catalogue d'exposition : la photo au centre, l'air autour, puis le
   titre, la notice et le cartel comme sur le mur d'une salle. ══ */
.musee[data-style="Le Musée"] .musee__numero { display: none; }
/* Les coordonnées ont leur ligne au cartel du Musée (Fred, 25 sept. 2026) ; l'heure, non. */
.musee[data-style="Le Musée"] .musee__cartel [data-ligne="coordonnees"] { display: grid; }
.musee[data-style="Le Musée"] .musee__noms { order: 4; margin-top: 3.2cqw; }
.musee[data-style="Le Musée"] .musee__ligne { order: 5; margin-top: 1.4cqw; }
.musee[data-style="Le Musée"] .musee__sous { margin-top: 1.6cqw; }

/* ══ 02. La Galerie — la photo plus petite, à gauche ; le numéro d'œuvre et le titre sur le
   côté, le cartel dessous, comme une accroche de galerie contemporaine. ══ */
.musee[data-style="La Galerie"] {
  --fond: var(--m-blanc); --ph: 70; --pw: 56;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto 1fr;
  grid-template-areas: ". ." "oeuvre cote" "notice notice"; column-gap: 5cqw; row-gap: 5cqw;
  align-items: end; padding: 10cqw 8cqw 8cqw; text-align: left;
}
.musee[data-style="La Galerie"] .musee__entete,
.musee[data-style="La Galerie"] .musee__devise { display: none; }
.musee[data-style="La Galerie"] .musee__oeuvre { grid-area: oeuvre; align-self: end; }
.musee[data-style="La Galerie"] .musee__cote { grid-area: cote; align-items: flex-start; align-self: stretch; justify-content: space-between; }
.musee[data-style="La Galerie"] .musee__numero { font-family: "Playfair Display", Georgia, serif; font-size: 6.5cqw; letter-spacing: .02em; color: var(--m-noir); text-transform: none; order: -1; }
.musee[data-style="La Galerie"] .musee__titre { font-size: calc(4.6cqw * var(--ech, 1)); letter-spacing: .12em; padding-left: 0; white-space: normal; margin-top: auto; }
.musee[data-style="La Galerie"] .musee__sous { font-size: 1.3cqw; letter-spacing: .3em; }
.musee[data-style="La Galerie"] .musee__noms { order: 4; font-size: 1.9cqw; letter-spacing: .28em; white-space: normal; margin-top: 2cqw; }
.musee[data-style="La Galerie"] .musee__ligne { order: 5; }
.musee[data-style="La Galerie"] .musee__ligne { font-size: 1.2cqw; letter-spacing: .2em; }
.musee[data-style="La Galerie"] .musee__notice { grid-area: notice; grid-template-columns: 1fr 1fr; align-self: end; }

/* ══ 03. Archives — l'archive photographique : papier légèrement grainé, tirage bordé comme
   un tirage monté, références et relevé technique, coordonnées et heure comprises. ══ */
.musee[data-style="Archives"] {
  --ph: 58; --pw: 80; background-image: var(--m-papier-grain); background-size: 30cqw;
  align-items: stretch; text-align: left; padding: 7cqw 8cqw 7cqw;
}
.musee[data-style="Archives"] .musee__entete { border-bottom: .12cqw solid var(--m-noir); padding-bottom: 1.4cqw; color: var(--m-noir); font-variant-numeric: tabular-nums; letter-spacing: .22em; }
.musee[data-style="Archives"] .musee__oeuvre { align-self: center; outline: .22cqw solid var(--m-noir); outline-offset: 1.1cqw; }
.musee[data-style="Archives"] .musee__cote { align-items: flex-start; }
.musee[data-style="Archives"] .musee__numero, .musee[data-style="Archives"] .musee__ligne, .musee[data-style="Archives"] .musee__devise { display: none; }
.musee[data-style="Archives"] .musee__titre { font-size: calc(6cqw * var(--ech, 1)); letter-spacing: .08em; padding-left: 0; text-transform: none; }
.musee[data-style="Archives"] .musee__noms { order: 3; font-size: 1.8cqw; letter-spacing: .26em; margin-top: 1cqw; }
.musee[data-style="Archives"] .musee__sous { letter-spacing: .26em; }
.musee[data-style="Archives"] .musee__notice { grid-template-columns: 1fr 1.1fr; border-top-color: var(--m-noir); order: 5; }
.musee[data-style="Archives"] .musee__cartel { order: -1; }
.musee[data-style="Archives"] .musee__cartel [data-ligne="heure"],
.musee[data-style="Archives"] .musee__cartel [data-ligne="coordonnees"] { display: grid; }
.musee[data-style="Archives"] .musee__cartel dd { font-family: "Inter", system-ui, sans-serif; font-size: 1.45cqw; font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* ══ 04. Cinéma — l'affiche de film d'auteur : la photo pleine largeur qui se fond dans le
   noir, « une histoire de », les noms, puis le titre en très grand. ══ */
.musee[data-style="Cinéma"] { --fond: var(--m-noir); --texte: var(--m-blanc); --doux: var(--m-gris-nuit); padding: 0 0 5cqw; }
.musee[data-style="Cinéma"] .musee__entete,
.musee[data-style="Cinéma"] .musee__notice,
.musee[data-style="Cinéma"] .musee__numero { display: none; }
.musee[data-style="Cinéma"] .musee__oeuvre { width: 100%; aspect-ratio: auto; flex: 0 0 60%; background: var(--m-noir); }
/* Le fondu dépasse d'un pixel : à la jointure, l'anticrénelage laissait voir une ligne claire. */
.musee[data-style="Cinéma"] .musee__oeuvre::after { content: ""; position: absolute; inset: auto 0 -1px; height: 32%; background: linear-gradient(to bottom, transparent, var(--m-noir)); pointer-events: none; }
.musee[data-style="Cinéma"] .musee__cote { padding: 0 8cqw; margin-top: -4cqw; position: relative; }
.musee[data-style="Cinéma"] .musee__surtitre { display: block; font-size: 1.4cqw; letter-spacing: .5em; text-transform: uppercase; color: var(--doux); padding-left: .5em; }
.musee[data-style="Cinéma"] .musee__noms { font-size: calc(5.6cqw * var(--ech, 1)); letter-spacing: .16em; margin-top: 1.4cqw; }
.musee[data-style="Cinéma"] .musee__titre { order: 5; font-family: "Playfair Display", Georgia, serif; font-size: calc(12cqw * var(--ech, 1)); letter-spacing: .06em; padding-left: .06em; line-height: 1; margin-top: 2.4cqw; }
.musee[data-style="Cinéma"] .musee__sous { order: 6; margin-top: 1.8cqw; }
.musee[data-style="Cinéma"] .musee__ligne { order: 7; margin-top: 2.4cqw; }

/* ══ 05. Collection privée — presque rien : la collection en tête, la photo entourée d'air,
   les noms, un filet bordeaux et le numéro de pièce. ══ */
.musee[data-style="Collection privée"] { --fond: var(--m-blanc); --ph: 52; --pw: 50; padding: 11cqw 12cqw 9cqw; }
.musee[data-style="Collection privée"] .musee__entete { justify-content: center; letter-spacing: .5em; font-size: 1.3cqw; padding-left: .5em; }
.musee[data-style="Collection privée"] .musee__titre,
.musee[data-style="Collection privée"] .musee__sous,
.musee[data-style="Collection privée"] .musee__notice,
.musee[data-style="Collection privée"] .musee__devise { display: none; }
.musee[data-style="Collection privée"] .musee__cote::before { content: ""; width: 7cqw; border-top: .15cqw solid var(--m-bordeaux); margin-bottom: 3.6cqw; }
.musee[data-style="Collection privée"] .musee__noms { margin-top: 0; font-size: calc(2.3cqw * var(--ech, 1)); letter-spacing: .42em; }
.musee[data-style="Collection privée"] .musee__ligne { font-size: 1.15cqw; margin-top: 1.4cqw; }
.musee[data-style="Collection privée"] .musee__numero { order: 5; margin-top: 7cqw; font-size: 1.2cqw; }

/* ══ 06. Édition limitée — l'épreuve d'artiste : la photo dans un passe-partout, le titre, et
   en pied la mention « Épreuve 1/1 », la collection, le lieu et l'année, signée des prénoms
   dans une écriture manuscrite. ══ */
.musee[data-style="Édition limitée"] { --ph: 58; --pw: 62; padding: 10cqw 9cqw 6cqw; }
.musee[data-style="Édition limitée"] .musee__entete,
.musee[data-style="Édition limitée"] .musee__numero,
.musee[data-style="Édition limitée"] .musee__noms,
.musee[data-style="Édition limitée"] .musee__ligne,
.musee[data-style="Édition limitée"] .musee__notice { display: none; }
.musee[data-style="Édition limitée"] .musee__oeuvre { box-shadow: 0 0 0 3.4cqw var(--m-blanc), 0 0 0 3.55cqw var(--m-trait); margin: 3.6cqw 0; }
.musee[data-style="Édition limitée"] .musee__titre { font-size: calc(6.6cqw * var(--ech, 1)); }
.musee[data-style="Édition limitée"] .musee__pied { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; gap: 4cqw; }
.musee[data-style="Édition limitée"] .musee__signature { flex: 1; }

/* ═══════════════════════════════ Le formulaire ═══════════════════════════════ */
.musee-section { border: 0; padding: 0; margin: 0 0 2.4rem; min-width: 0; }
.musee-section > legend { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2rem; font-weight: 500; padding: 0; margin-bottom: 1rem; }
.musee-collections { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .8rem; }
.musee-collections input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.musee-collections label {
  display: grid; gap: .2rem; padding: 1.2rem 1.4rem; min-height: 4.4rem; cursor: pointer; text-align: left;
  border: .1rem solid rgba(var(--color-foreground), .18); transition: border-color .2s ease;
}
.musee-collections__numero { font-size: 1.1rem; letter-spacing: .2em; color: rgba(var(--color-foreground), .6); }
.musee-collections__nom { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.8rem; letter-spacing: .06em; text-transform: uppercase; }
.musee-collections__ligne { font-size: 1.2rem; color: rgba(var(--color-foreground), .7); }
.musee-collections input:checked + label { border-color: rgb(var(--color-foreground)); box-shadow: inset 0 0 0 .1rem rgb(var(--color-foreground)); }
.musee-collections input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.musee-suggestions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.2rem; }
.musee-suggestions__choix {
  font: inherit; font-size: 1.2rem; letter-spacing: .08em; min-height: 4.4rem; padding: .6rem 1.2rem; cursor: pointer;
  background: none; color: inherit; border: .1rem solid rgba(var(--color-foreground), .22);
}
.musee-suggestions__choix:hover { border-color: rgb(var(--color-foreground)); }
.musee-section textarea { width: 100%; font: inherit; font-size: 1.4rem; padding: .8rem .9rem; border: 1px solid rgba(var(--color-foreground), .3); border-radius: 6px; background: rgb(var(--color-background)); color: inherit; resize: vertical; }
@media (prefers-reduced-motion: reduce) { .musee-collections label { transition: none; } }