/* Héritage du Mille. Jetons : DESIGN.md. Aucune valeur de couleur, de taille
   ou d'espace hors de :root. */

@font-face { font-family: "Plex"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Josefin"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/josefin-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Josefin"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/josefin-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --fond: #F1F0ED;
  --surface: #FBFBF9;
  --encre: #1C1B19;
  --encre-douce: #47453F;
  --muet: #5C5952;
  --trait: rgb(28 27 25 / .12);
  --trait-vif: rgb(28 27 25 / .28);
  --accent: #1E3A5C;
  --accent-fonce: #142A44;
  --sur-accent: #FFFFFF;
  --sur-encre: #F1F0ED;
  --sur-encre-doux: #C8C5BE;
  --etiquette: #E6DCC6;
  --bon: #2E5B3A;
  --veille: #7A5410;
  --grave: #8E2A1C;

  --titre: "Instrument", "Iowan Old Style", Georgia, serif;
  --texte: "Plex", system-ui, sans-serif;
  --chiffre: "Plex Mono", ui-monospace, monospace;

  --t-13: 0.8125rem;
  --t-15: 0.9375rem;
  --t-17: 1.0625rem;
  --t-20: 1.25rem;
  --t-28: 1.75rem;
  --t-40: 2.5rem;
  --t-24: 1.5rem;
  --t-36: 2.25rem;
  --t-52: 3.25rem;
  --t-68: 4.25rem;

  --e-4: 4px; --e-8: 8px; --e-12: 12px; --e-16: 16px; --e-24: 24px;
  --e-32: 32px; --e-48: 48px; --e-64: 64px; --e-96: 96px;

  --marge: 16px;
  --largeur: 1280px;
  --lecture: 560px;
  --r-petit: 2px;
  --r: 6px;
  --cible: 44px;
  --bouton: 52px;
  --anneau: 2px solid var(--accent);

  --entree: 200ms cubic-bezier(.2, .7, .2, 1);
  --survol: 300ms cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 960px) { :root { --marge: 32px; } }


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 var(--t-17)/1.55 var(--texte);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: var(--anneau); outline-offset: 2px; }
[hidden] { display: none !important; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cadre { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }

/* Barre utilitaire, en encre : livraison, téléphone, langue */
.barre { background: var(--encre); color: var(--sur-encre); }
.barre .cadre { display: flex; align-items: center; gap: var(--e-16); min-height: 40px; }
.barre-info { flex: 1; margin: 0; font-size: var(--t-13); color: var(--sur-encre-doux); }
.barre a { color: var(--sur-encre); }
.telephone { display: inline-flex; align-items: center; min-height: var(--cible); font: 500 var(--t-13)/1 var(--chiffre); white-space: nowrap; }
.langue { display: inline-flex; align-items: center; justify-content: center; min-width: var(--cible); min-height: var(--cible); font: 600 var(--t-13)/1 var(--texte); letter-spacing: .06em; }

/* En-tête : l'emblème (maison et nom d'un seul tenant) et la navigation */
.entete { background: var(--surface); border-bottom: 1px solid var(--trait); }
.entete .cadre { display: flex; align-items: center; justify-content: space-between; gap: var(--e-24); padding-block: var(--e-24); }
.marque { display: block; color: var(--encre); }
.embleme { display: block; height: 64px; width: auto; }
.nav { display: flex; gap: var(--e-24); }
.nav a { display: inline-flex; align-items: center; min-height: var(--cible); font: 600 var(--t-15)/1 var(--texte); color: var(--encre-douce); text-decoration: none; border-bottom: 2px solid transparent; }
.nav a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--accent); }
@media (hover: hover) { .nav a:hover { color: var(--encre); border-bottom-color: var(--trait-vif); } }

/* Ouverture du catalogue */
.ouverture { padding: var(--e-48) 0 var(--e-32); }
.ouverture h1 { font: 400 var(--t-28)/1.15 var(--titre); margin: 0 0 var(--e-12); max-width: 24ch; }
.sous-titre { font: italic 400 var(--t-20)/1.4 var(--titre); color: var(--encre-douce); margin: 0 0 var(--e-24); max-width: 44ch; }
.ouverture h1 em { font-style: italic; }
.faits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-8); color: var(--encre-douce); font-size: var(--t-15); }
.faits li { padding-left: var(--e-16); position: relative; }
.faits li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 1px; background: var(--encre-douce); }
@media (min-width: 960px) {
  .ouverture h1 { font-size: var(--t-40); }
  .faits { grid-auto-flow: column; justify-content: start; gap: var(--e-32); }
}

/* L'étiquette d'inventaire, le seul geste */
.etiquette {
  display: inline-flex; align-items: center; gap: var(--e-8);
  background: var(--etiquette); color: var(--encre);
  font: 500 var(--t-13)/1 var(--chiffre); letter-spacing: .04em;
  padding: var(--e-4) var(--e-8) var(--e-4) var(--e-12);
  border-radius: var(--r-petit);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}
.etiquette::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--fond); }

/* Grille du catalogue */
.grille { list-style: none; margin: 0 0 var(--e-64); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-24) var(--e-12); }
@media (min-width: 600px) { .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-32) var(--e-24); } }
@media (min-width: 960px) { .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.piece a { display: block; color: inherit; text-decoration: none; }
.piece .photo { position: relative; overflow: hidden; border-radius: var(--r-petit); background: var(--trait); aspect-ratio: 3 / 4; }
.piece .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--survol); }
.piece .photo .etiquette { position: absolute; left: var(--e-8); top: var(--e-8); }
.piece h2 { font: 400 var(--t-15)/1.3 var(--texte); margin: var(--e-12) 0 var(--e-4); }
.piece .prix { margin: 0; font: 500 var(--t-15)/1.2 var(--chiffre); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .piece a:hover .photo img { transform: scale(1.03); } .piece a:hover h2 { text-decoration: underline; text-underline-offset: 3px; } }

/* Statut : toujours un mot */
.statut-place { margin: var(--e-4) 0 0; min-height: 1.3em; }
/* Statut : toujours un mot, jamais la couleur seule */
.statut { display: inline-flex; align-items: center; gap: var(--e-4); font-size: var(--t-13); font-weight: 600; letter-spacing: .02em; }
.statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.statut[data-statut="disponible"] { color: var(--bon); }
.statut[data-statut="reservee"] { color: var(--veille); }
.statut[data-statut="vendue"] { color: var(--encre); }
.piece[data-statut="vendue"] .photo img { filter: grayscale(1); opacity: .55; }
.piece[data-statut="vendue"] .prix { text-decoration: line-through; color: var(--muet); }
.bandeau-vendue { position: absolute; inset: auto 0 0 0; background: var(--encre); color: var(--fond); font: 600 var(--t-13)/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: var(--e-8); }

/* État vide */
.vide { padding: var(--e-48) 0 var(--e-64); max-width: var(--lecture); }
.vide h2 { font: 400 var(--t-28)/1.2 var(--titre); margin: 0 0 var(--e-12); }
.vide p { color: var(--encre-douce); margin: 0 0 var(--e-24); }

/* Fiche */
.fiche { display: grid; gap: var(--e-24); padding: var(--e-24) 0 var(--e-64); }
.fiche .photo { margin: 0 calc(var(--marge) * -1); position: relative; background: var(--trait); }
.fiche .photo img { width: 100%; height: auto; }
@media (min-width: 960px) {
  .fiche { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-48); padding-top: var(--e-48); align-items: start; }
  .fiche .photo { margin: 0; border-radius: var(--r-petit); overflow: hidden; }
  .fiche .infos { position: sticky; top: var(--e-32); }
}
.retour { display: inline-flex; align-items: center; min-height: var(--cible); font-size: var(--t-15); }
.fiche h1 { font: 400 var(--t-28)/1.15 var(--titre); margin: var(--e-12) 0 var(--e-12); }
.fiche .epoque { color: var(--encre-douce); margin: calc(var(--e-4) * -1) 0 var(--e-16); font-size: var(--t-15); }
.fiche .montant { font: 500 var(--t-28)/1 var(--chiffre); font-variant-numeric: tabular-nums; margin: 0; }
.fiche .taxes { color: var(--muet); font-size: var(--t-15); margin: var(--e-4) 0 var(--e-24); }
.fiche .description { margin: 0 0 var(--e-24); max-width: var(--lecture); }
.fiche[data-statut="vendue"] .montant { text-decoration: line-through; color: var(--muet); }

/* Formulaire d'achat */
fieldset { border: 0; margin: 0 0 var(--e-16); padding: 0; }
legend { font-weight: 600; font-size: var(--t-15); margin-bottom: var(--e-8); }
.choix { display: grid; gap: var(--e-8); }
.choix label {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-12);
  min-height: var(--cible); padding: var(--e-12) var(--e-16);
  background: var(--surface); border: 1px solid var(--trait-vif); border-radius: var(--r); cursor: pointer;
}
.choix label:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choix input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.choix .detail { display: block; color: var(--muet); font-size: var(--t-13); }
.choix .cout { font: 500 var(--t-15)/1 var(--chiffre); }

.champ { margin: 0 0 var(--e-16); }
.champ label { display: block; font-weight: 600; font-size: var(--t-15); margin-bottom: var(--e-4); }
.champ input {
  width: 100%; max-width: 220px; min-height: var(--cible); padding: var(--e-8) var(--e-12);
  font: 400 1rem/1.2 var(--chiffre); text-transform: uppercase;
  background: var(--surface); color: var(--encre); border: 1px solid var(--trait-vif); border-radius: var(--r);
}
.champ .aide { color: var(--muet); font-size: var(--t-13); margin: var(--e-4) 0 0; }
.champ[data-erreur] input { border-color: var(--grave); box-shadow: inset 0 0 0 1px var(--grave); }
.erreur { color: var(--grave); font-size: var(--t-15); font-weight: 600; margin: var(--e-8) 0 0; }
.erreur::before { content: "⚠ "; }

.bouton {
  display: flex; align-items: center; justify-content: center; gap: var(--e-8);
  width: 100%; min-height: var(--bouton); padding: 0 var(--e-24);
  background: var(--accent); color: var(--sur-accent); border: 0; border-radius: var(--r);
  font: 600 var(--t-17)/1 var(--texte); text-decoration: none; cursor: pointer;
  transition: background var(--entree);
}
.bouton .prix-bouton { font-family: var(--chiffre); font-weight: 500; }
@media (hover: hover) { .bouton:hover { background: var(--accent-fonce); } }
.bouton:active { background: var(--accent-fonce); }
.bouton[aria-busy="true"] { cursor: progress; }
.bouton[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tourne 700ms linear infinite; }
@keyframes tourne { to { transform: rotate(1turn); } }
@media (min-width: 960px) { .bouton { max-width: 420px; } }

.secondaire { display: inline-flex; align-items: center; min-height: var(--cible); margin-top: var(--e-8); font-size: var(--t-15); }
.conditions-courtes { color: var(--muet); font-size: var(--t-13); margin: var(--e-16) 0 0; max-width: var(--lecture); }

.avis { background: var(--surface); border: 1px solid var(--trait-vif); border-left: 3px solid var(--veille); border-radius: var(--r); padding: var(--e-16); margin: 0 0 var(--e-16); }
.avis[data-ton="vendue"] { border-left-color: var(--encre); }
.avis p { margin: 0 0 var(--e-8); }
.avis p:last-child { margin: 0; }

/* Pages de texte : conditions, confirmation */
.texte { max-width: var(--lecture); padding: var(--e-48) 0 var(--e-64); }
.texte h1 { font: 400 var(--t-28)/1.15 var(--titre); margin: 0 0 var(--e-32); }
.texte h2 { font: 600 var(--t-17)/1.3 var(--texte); margin: var(--e-32) 0 var(--e-8); }
.texte h2:first-of-type { margin-top: 0; }
.texte p { margin: 0 0 var(--e-16); }
.texte p, .texte li { color: var(--encre-douce); }
.texte .adresse { font: 500 var(--t-20)/1.4 var(--chiffre); color: var(--encre); background: var(--surface); border: 1px solid var(--trait-vif); border-radius: var(--r); padding: var(--e-16); }
.squelette { height: 1.2em; border-radius: var(--r-petit); background: var(--trait); margin: 0 0 var(--e-12); }
.squelette.court { width: 60%; }
@media (prefers-reduced-motion: no-preference) { .squelette { animation: pulse 1.2s ease-in-out infinite; } }
@keyframes pulse { 50% { opacity: .5; } }

/* Pied */
.pied { border-top: 1px solid var(--trait); padding: var(--e-32) 0 var(--e-48); color: var(--muet); font-size: var(--t-13); }
.pied p { margin: 0 0 var(--e-8); }
.pied a { color: var(--encre-douce); }

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

.qui { display: inline-flex; align-items: center; min-height: var(--cible); margin-top: var(--e-16); font-weight: 600; font-size: var(--t-15); }

/* Le chasseur */
.chasseur { padding: var(--e-32) 0 var(--e-64); }
.chasseur-tete { display: grid; gap: var(--e-24); }
.chasseur-photo { order: -1; width: calc(100% + var(--marge) * 2); max-width: none; margin: 0 calc(var(--marge) * -1); }
.chasseur h1 { font: 400 var(--t-28)/1.15 var(--titre); margin: 0 0 var(--e-12); }
.chasseur .lede { font: italic 400 var(--t-20)/1.45 var(--titre); color: var(--encre); margin: 0 0 var(--e-24); }
.chasseur-texte p { max-width: var(--lecture); color: var(--encre-douce); margin: 0 0 var(--e-16); }
.chasseur-texte .bouton { margin-top: var(--e-8); }
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-24) var(--e-12); margin-top: var(--e-48); }
.galerie figure { margin: 0; }
.galerie img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-petit); background: var(--trait); }
.galerie figcaption { margin-top: var(--e-8); font-size: var(--t-13); color: var(--muet); }
@media (min-width: 600px) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-32) var(--e-24); } }
@media (min-width: 960px) {
  .chasseur { padding-top: var(--e-48); }
  .chasseur-tete { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e-48); align-items: start; }
  .chasseur-photo { order: 0; width: 100%; margin: 0; border-radius: var(--r-petit); }
  .chasseur h1 { font-size: var(--t-40); }
}

/* Au téléphone : l'emblème au centre, la navigation dessous. En dernier pour primer. */
@media (max-width: 599px) {
  .barre-info { display: none; }
  .barre .cadre { justify-content: space-between; min-height: 0; }
  .entete .cadre { flex-direction: column; gap: var(--e-8); padding-block: var(--e-16) var(--e-4); }
  .embleme { height: 52px; }
  .nav { gap: var(--e-16); }
}

a[href^="tel:"] { white-space: nowrap; }

/* ==== v2, 3 novembre 2026 : titres en Instrument Serif, ouverture avec pièce vedette,
   bandeau des faits, filtres, grille en trois colonnes, pied en trois colonnes. ==== */
h1, .vide h2 { letter-spacing: -0.01em; }
.ligne { display: block; white-space: nowrap; }

.ouverture { display: grid; gap: var(--e-32); padding: var(--e-32) 0 var(--e-48); align-items: center; }
.ouverture h1 { font: 400 var(--t-40)/1.02 var(--titre); margin: 0 0 var(--e-16); max-width: none; }
.ouverture h1 em { font-style: italic; }
.sous-titre { font: 400 var(--t-17)/1.5 var(--texte); color: var(--encre-douce); margin: 0 0 var(--e-16); max-width: 40ch; }
.qui { margin-top: 0; }
.vedette { position: relative; display: block; margin: 0 calc(var(--marge) * -1); overflow: hidden; color: var(--sur-encre); text-decoration: none; background: var(--trait); }
.vedette img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform var(--survol); }
.vedette-legende { position: absolute; left: var(--e-16); bottom: var(--e-16); right: var(--e-16); display: grid; gap: var(--e-4); padding: var(--e-16); background: rgb(28 27 25 / .82); border-radius: var(--r-petit); max-width: 340px; }
.vedette-mot { font: 600 var(--t-13)/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--sur-encre-doux); }
.vedette-titre { font: 400 var(--t-24)/1.15 var(--titre); }
.vedette-prix { font: 500 var(--t-15)/1.2 var(--chiffre); }
@media (hover: hover) { .vedette:hover img { transform: scale(1.03); } }

.faits { display: grid; gap: var(--e-16); margin: 0 0 var(--e-48); padding: var(--e-24) 0; border-top: 1px solid var(--trait-vif); border-bottom: 1px solid var(--trait-vif); }
.faits div { display: grid; gap: var(--e-4); }
.faits dt { font: 600 var(--t-13)/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--muet); }
.faits dd { margin: 0; font-size: var(--t-15); color: var(--encre); }

.filtres { display: flex; flex-wrap: wrap; gap: var(--e-8); margin: 0 0 var(--e-32); }
.filtre { display: inline-flex; align-items: center; gap: var(--e-8); min-height: var(--cible); padding: 0 var(--e-16); background: transparent; color: var(--encre); border: 1px solid var(--trait-vif); border-radius: var(--r); font: 600 var(--t-15)/1 var(--texte); cursor: pointer; transition: background var(--entree), color var(--entree); }
.filtre span { font: 500 var(--t-13)/1 var(--chiffre); color: var(--muet); }
.filtre[aria-pressed="true"] { background: var(--encre); color: var(--sur-encre); border-color: var(--encre); }
.filtre[aria-pressed="true"] span { color: var(--sur-encre-doux); }
@media (hover: hover) { .filtre[aria-pressed="false"]:hover { border-color: var(--encre); } }

.grille { gap: var(--e-32) var(--e-16); margin-bottom: var(--e-96); }
.piece h2 { font: 400 var(--t-20)/1.2 var(--titre); margin: var(--e-12) 0 var(--e-4); }
.piece .photo .rare { position: absolute; left: var(--e-8); bottom: var(--e-8); }
.rare { display: inline-flex; align-items: center; padding: var(--e-4) var(--e-8); background: var(--encre); color: var(--sur-encre); border-radius: var(--r-petit); font: 600 var(--t-13)/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; }
.marques { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-8); margin: 0; }

.fiche h1, .texte h1, .chasseur h1 { font-size: var(--t-36); line-height: 1.05; }

.pied { padding: var(--e-48) 0; }
.pied-grille { display: grid; gap: var(--e-32); }
.pied .embleme { height: 44px; }
.pied-marque p { margin-top: var(--e-12); max-width: 36ch; }
.pied h2 { margin: 0 0 var(--e-8); font: 600 var(--t-13)/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--encre); }
.pied p { line-height: 2; }

@media (min-width: 600px) {
  .faits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-32); }
  .pied-grille { grid-template-columns: 2fr 1fr 1fr; }
}
@media (min-width: 960px) {
  .ouverture { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-64); padding: var(--e-64) 0; }
  .ouverture h1 { font-size: var(--t-68); }
  .vedette { margin: 0; border-radius: var(--r-petit); }
  .vedette img { aspect-ratio: 5 / 6; }
  .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-64) var(--e-32); }
  .piece h2 { font-size: var(--t-24); }
  .fiche h1, .texte h1, .chasseur h1 { font-size: var(--t-52); }
}

/* Le chasseur : un titre respire, le chapeau se détache, les paragraphes s'espacent. */
.chasseur h1 { line-height: 1.1; margin: 0 0 var(--e-24); }
.chasseur .lede { margin: 0 0 var(--e-48); font-size: var(--t-24); line-height: 1.35; max-width: 30ch; }
.chasseur-texte p { margin: 0 0 var(--e-24); line-height: 1.7; }
.chasseur-texte .bouton { margin-top: var(--e-24); }
.galerie { margin-top: var(--e-96); }
.galerie figcaption { margin-top: var(--e-12); }
@media (min-width: 960px) { .chasseur .lede { font-size: var(--t-28); } }

.restauration { margin: 0 0 var(--e-24); padding: var(--e-12) var(--e-16); max-width: var(--lecture); border-left: 2px solid var(--encre); background: var(--surface); font-size: var(--t-15); color: var(--encre-douce); }

/* Fiche standard : mêmes rangées, même ordre, sur chaque pièce */
.fiche-tech { margin: 0 0 var(--e-24); max-width: var(--lecture); }
.fiche-tech h2 { margin: 0 0 var(--e-8); font: 600 var(--t-13)/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--muet); }
.fiche-tech dl { margin: 0; border-top: 1px solid var(--trait-vif); }
.fiche-tech dl div { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--e-12); padding: var(--e-8) 0; border-bottom: 1px solid var(--trait); }
.fiche-tech dt { font-size: var(--t-15); color: var(--muet); }
.fiche-tech dd { margin: 0; font-size: var(--t-15); color: var(--encre); font-variant-numeric: tabular-nums; }

/* Favoris */
.piece { position: relative; }
.coeur { position: absolute; top: var(--e-4); right: var(--e-4); display: inline-flex; align-items: center; justify-content: center; width: var(--cible); height: var(--cible); border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.coeur span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgb(251 251 249 / .92); color: var(--encre); font-size: var(--t-17); line-height: 1; }
.coeur[aria-pressed="true"] span { background: var(--encre); color: var(--sur-encre); }
.actions-secondaires { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-8) var(--e-24); margin-top: var(--e-8); }
.actions-secondaires .secondaire { margin-top: 0; }
.favori-fiche { display: inline-flex; align-items: center; gap: var(--e-8); min-height: var(--cible); padding: 0; border: 0; background: none; color: var(--accent); font: 400 var(--t-15)/1 var(--texte); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lien-favoris { display: inline-flex; align-items: center; gap: var(--e-4); min-height: var(--cible); font-size: var(--t-13); white-space: nowrap; }
.lien-favoris[aria-current="page"] { text-decoration-thickness: 2px; }
.favoris-page { padding: var(--e-48) 0 var(--e-64); }
.favoris-page h1 { font: 400 var(--t-36)/1.05 var(--titre); margin: 0 0 var(--e-16); }
.favoris-page .sous-titre { margin-bottom: var(--e-32); }

/* Abonnement */
.abonnement .champ input { max-width: 420px; text-transform: none; font-family: var(--texte); }
.facultatif { font-weight: 400; color: var(--muet); }
.consentement { display: grid; grid-template-columns: auto 1fr; gap: var(--e-12); align-items: start; margin: var(--e-8) 0 var(--e-8); font-size: var(--t-15); color: var(--encre); cursor: pointer; max-width: var(--lecture); }
.consentement input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); }
.abonnement .aide { margin: 0 0 var(--e-24); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#ab-merci h2 { font: 400 var(--t-28)/1.1 var(--titre); margin: 0 0 var(--e-8); }
@media (min-width: 960px) { .favoris-page h1 { font-size: var(--t-52); } }

/* ==== Fiche v3 (3 nov. 2026), d'après les marchands : la photo domine, le reste respire. ==== */
.fiche { gap: var(--e-32); }
.fiche .photo img { width: 100%; }
.reference { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-8) var(--e-12); margin: 0 0 var(--e-16); font-size: var(--t-13); letter-spacing: .06em; text-transform: uppercase; color: var(--muet); }
.reference .rare { text-transform: uppercase; }
.fiche h1 { margin: 0 0 var(--e-16); }
.recit { margin: 0 0 var(--e-32); max-width: var(--lecture); font-size: var(--t-17); line-height: 1.7; color: var(--encre-douce); }
.caracteristiques { margin: 0 0 var(--e-32); max-width: var(--lecture); }
.caracteristiques div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--e-16); padding: var(--e-4) 0; }
.caracteristiques dt { font-size: var(--t-15); color: var(--muet); }
.caracteristiques dd { margin: 0; font-size: var(--t-15); color: var(--encre); font-variant-numeric: tabular-nums; }
.caracteristiques dd.a-venir { color: var(--muet); font-style: italic; }
.prix-bloc { padding-top: var(--e-24); border-top: 1px solid var(--trait-vif); margin-bottom: var(--e-24); }
.prix-bloc .montant { font-size: var(--t-36); }
.prix-bloc .taxes { margin: var(--e-4) 0 var(--e-12); }
.livraison-ligne { margin: 0; font-size: var(--t-15); color: var(--encre-douce); }
.panneau-achat { margin-top: var(--e-8); padding: var(--e-16); background: var(--surface); border: 1px solid var(--trait-vif); border-radius: var(--r); }
.panneau-achat .secondaire { margin-top: var(--e-8); }
.bouton-aviser { margin-bottom: var(--e-16); }
.fiche .actions-secondaires { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4) var(--e-24); margin: var(--e-16) 0 var(--e-8); font-size: var(--t-15); }
.fiche .actions-secondaires a { display: inline-flex; align-items: center; min-height: var(--cible); }
.appel { margin: 0 0 var(--e-24); font-size: var(--t-15); color: var(--encre-douce); }
.fiche .restauration { margin-bottom: var(--e-16); }
.fiche .conditions-courtes { margin-top: 0; }
.fiche[data-statut="vendue"] .montant, .fiche[data-statut="reservee"] .montant { text-decoration: none; color: var(--encre); font-family: var(--titre); font-style: italic; }
.similaires { padding: var(--e-48) 0 0; border-top: 1px solid var(--trait); }
.similaires h2 { font: 400 var(--t-28)/1.1 var(--titre); margin: 0 0 var(--e-24); }
.barre-achat { display: none; }
@media (max-width: 959px) {
  .barre-achat { position: fixed; inset: auto 0 0 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--e-16);
    padding: var(--e-8) var(--marge) calc(var(--e-8) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--trait-vif);
    transform: translateY(110%); transition: transform var(--entree); }
  .barre-achat.visible { transform: none; }
  .barre-achat[hidden] { display: none; }
  .barre-prix { font: 500 var(--t-20)/1 var(--chiffre); }
  .barre-achat .bouton { width: auto; min-width: 9rem; }
}
@media (min-width: 960px) { .fiche { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-64); } .similaires { margin-top: var(--e-32); } }
.fiche[data-statut="vendue"] .taxes, .fiche[data-statut="vendue"] .livraison-ligne { display: none; }

/* Barre du haut et navigation : aucun soulignement, jamais.
   Barre : le texte passe du gris clair au blanc. Menu : un trait d'accent qui
   se déploie depuis le centre, et qui reste sous la page en cours. */
.barre a, .barre a:hover, .nav a, .nav a:hover { text-decoration: none !important; }
.barre a { color: var(--sur-encre-doux); transition: color 180ms ease-out; }
.barre a[aria-current="page"] { color: var(--sur-encre); }
.nav a { position: relative; border-bottom: 0 !important; transition: color 180ms ease-out; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: center; transition: transform 220ms cubic-bezier(.2, .7, .2, 1); }
.nav a[aria-current="page"] { color: var(--encre); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) {
  .barre a:hover { color: var(--sur-encre); }
  .nav a:hover { color: var(--encre); }
  .nav a:hover::after { transform: scaleX(1); }
}
.barre a:focus-visible { outline-color: var(--sur-encre); }

/* Galerie de la fiche */
.vignettes { display: flex; gap: var(--e-8); margin-top: var(--e-8); padding: 0 var(--marge); overflow-x: auto; scrollbar-width: none; }
.vignette { flex: none; width: 64px; height: 64px; padding: 0; border: 1px solid var(--trait); border-radius: var(--r-petit); background: var(--trait); overflow: hidden; cursor: pointer; opacity: .7; transition: opacity var(--entree), border-color var(--entree); }
.vignette img { width: 100%; height: 100%; object-fit: cover; }
.vignette[aria-pressed="true"] { opacity: 1; border: 2px solid var(--encre); }
@media (hover: hover) { .vignette:hover { opacity: 1; } }
@media (min-width: 960px) { .vignettes { padding: 0; } .vignette { width: 80px; height: 80px; } }
.prix-bloc .montant.a-venir { font: italic 400 var(--t-28)/1.1 var(--titre); color: var(--encre-douce); }

/* Question sur une pièce */
.lien-bouton { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0; border: 0; background: none; color: var(--accent); font: 400 var(--t-15)/1 var(--texte); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.panneau-question { margin: var(--e-8) 0 var(--e-24); padding: var(--e-16); background: var(--surface); border: 1px solid var(--trait-vif); border-radius: var(--r); max-width: var(--lecture); }
.panneau-question h2 { margin: 0 0 var(--e-16); font: 400 var(--t-24)/1.15 var(--titre); }
.panneau-question .champ input, .panneau-question textarea { width: 100%; max-width: none; text-transform: none; font: 400 1rem/1.4 var(--texte); }
.panneau-question textarea { min-height: 7rem; padding: var(--e-8) var(--e-12); background: var(--fond); color: var(--encre); border: 1px solid var(--trait-vif); border-radius: var(--r); resize: vertical; }
.panneau-question .aide { margin: 0 0 var(--e-16); }

/* ==== En-tête au téléphone (3 nov. 2026) : logo à gauche, menu à droite,
   les onglets descendent en cascade à l'ouverture. Prime sur les règles plus haut. ==== */
.burger { display: none; }
@media (max-width: 599px) {
  .entete { position: relative; }
  .entete .cadre { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--e-16); padding-block: var(--e-12); }
  .embleme { height: 42px; }
  .burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: var(--cible); height: var(--cible); margin-right: calc(var(--e-8) * -1); padding: 0; border: 0; background: none; cursor: pointer; }
  .burger span { display: block; width: 22px; height: 2px; background: var(--encre); border-radius: 1px; transition: transform 220ms cubic-bezier(.2, .7, .2, 1), opacity 150ms ease-out; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; display: flex; flex-direction: column; gap: 0;
    padding: 0 var(--marge) var(--e-16); background: var(--surface); border-bottom: 1px solid var(--trait-vif);
    box-shadow: 0 12px 24px rgb(28 27 25 / .08);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 200ms ease-out, transform 220ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 220ms; }
  .menu-ouvert .nav { visibility: visible; opacity: 1; transform: none; transition: opacity 200ms ease-out, transform 220ms cubic-bezier(.2, .7, .2, 1), visibility 0s; }
  .nav a { min-height: 52px; font: 400 var(--t-24)/1 var(--titre); color: var(--encre); border-bottom: 1px solid var(--trait) !important;
    opacity: 0; transform: translateY(-6px); transition: opacity 200ms ease-out, transform 220ms cubic-bezier(.2, .7, .2, 1); }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { font-style: italic; }
  .menu-ouvert .nav a { opacity: 1; transform: none; }
  .menu-ouvert .nav a:nth-child(2) { transition-delay: 40ms; }
  .menu-ouvert .nav a:nth-child(3) { transition-delay: 80ms; }
  .menu-ouvert .nav a:nth-child(4) { transition-delay: 120ms; }
}

/* ==== Garde-fous anti-débordement (3 nov. 2026) ====
   Un élément de grille ou de flex prend par défaut la largeur de son contenu le
   plus large : huit vignettes poussaient la fiche à 600 px sur un téléphone de
   320. Chaque colonne peut maintenant rétrécir, et rien ne dépasse l'écran. */
.fiche { grid-template-columns: minmax(0, 1fr); }
.fiche > *, .ouverture > *, .chasseur-tete > *, .pied-grille > *, .grille > *, .infos > * { min-width: 0; }
.vignettes { max-width: 100%; }
.fiche .photo img, .vedette img, .chasseur-photo { max-width: 100%; }
@media (max-width: 959px) {
  .fiche .photo { width: calc(100% + var(--marge) * 2); max-width: none; }
  .fiche .photo img { width: 100%; max-width: 100%; }
}
@media (min-width: 960px) { .fiche { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* Le titre de l'accueil garde « Antiquités et vintage. » sur une ligne : sa taille suit la largeur sous 960 px. */
@media (max-width: 959px) { .ouverture h1 { font-size: clamp(2rem, 10.5vw, 2.5rem); } }

/* ==== Téléphone, v2 (3 nov. 2026) : plus de barre noire. Logo à gauche ; à droite
   le cœur des favoris et le menu. Le menu porte aussi le téléphone et la langue. ==== */
.favoris-mobile, .nav .nav-extra { display: none; }
@media (max-width: 599px) {
  .barre { display: none; }
  .entete .cadre { gap: var(--e-4); }
  .marque { margin-right: auto; }
  .favoris-mobile { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: var(--cible); height: var(--cible);
    color: var(--encre); text-decoration: none; font: 400 var(--t-20)/1 var(--texte); }
  .favoris-mobile .compte-favoris { font: 600 var(--t-13)/1 var(--chiffre); }
  .nav .nav-extra { display: flex; }
  .nav .nav-sep { height: 0; min-height: 0; margin: var(--e-8) 0; border-top: 1px solid var(--trait-vif); }
  .nav a.nav-tel, .nav a.nav-langue { min-height: var(--cible); font: 500 var(--t-15)/1 var(--texte); border-bottom: 0 !important; gap: var(--e-8); }
  .nav a.nav-tel { font-family: var(--chiffre); }
  .menu-ouvert .nav a:nth-child(6) { transition-delay: 160ms; }
  .menu-ouvert .nav a:nth-child(7) { transition-delay: 200ms; }
  /* Le titre de l'accueil : de l'air entre les deux lignes. */
  .ouverture h1 .ligne { margin-top: var(--e-12); }
}

/* Les photos pleine largeur au téléphone touchent les deux bords : le plafond de
   100 % ne s'applique pas à elles (le 3 nov. 2026, il laissait 32 px vides à droite). */
@media (max-width: 959px) {
  .chasseur-photo { width: calc(100% + var(--marge) * 2); max-width: none; margin: 0 calc(var(--marge) * -1); }
}

/* Trousse Marketplace : outil de travail d'Emmanuel, au téléphone. */
.mp { max-width: var(--lecture); padding-top: var(--e-24); padding-bottom: var(--e-64); }
.mp h1 { font: 400 var(--t-36)/1.1 var(--titre); margin: 0 0 var(--e-8); }
.mp-aide { color: var(--encre-douce); font-size: var(--t-15); margin: 0 0 var(--e-16); }
.mp-langue { display: flex; flex-wrap: wrap; gap: var(--e-8); margin: 0 0 var(--e-16); }
.mp-langue label { display: flex; align-items: center; gap: var(--e-8); min-height: var(--cible); padding: 0 var(--e-12); border: 1px solid var(--trait-vif); border-radius: var(--r); font-size: var(--t-15); cursor: pointer; }
.mp-langue label:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mp-alerte { border: 2px solid var(--grave); border-radius: var(--r); padding: var(--e-16); margin: 0 0 var(--e-16); background: var(--surface); }
.mp-alerte h2 { font: 600 var(--t-17)/1.3 var(--texte); color: var(--grave); margin: 0 0 var(--e-4); }
.mp-alerte h2::before { content: "⚠ "; }
.mp-alerte p { font-size: var(--t-15); margin: 0 0 var(--e-8); }
.mp-alerte ul { margin: 0; padding: 0; list-style: none; }
.mp-alerte a { display: flex; align-items: center; min-height: var(--cible); padding: var(--e-4) 0; }
.mp-etat { font-size: var(--t-15); color: var(--encre-douce); margin: 0 0 var(--e-24); }
.mp-etat.mp-erreur { color: var(--grave); font-weight: 600; }
.mp-etat.mp-erreur::before { content: "⚠ "; }
.mp-liste { display: grid; gap: var(--e-24); }
.mp-carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r); padding: var(--e-16); scroll-margin-top: var(--e-16); }
.mp-carte.mp-publiee { opacity: .62; }
.mp-carte.mp-hors .mp-champs, .mp-carte.mp-hors .mp-description, .mp-carte.mp-hors .mp-plein, .mp-carte.mp-hors .mp-photos, .mp-carte.mp-hors .mp-etiquette { display: none; }
.mp-tete { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--e-12); align-items: start; }
.mp-tete img { width: 72px; height: 96px; object-fit: cover; border-radius: var(--r-petit); background: var(--trait); }
.mp-ref { font: 500 var(--t-13)/1 var(--chiffre); color: var(--muet); margin: 0 0 var(--e-4); }
.mp-tete h2 { font: 400 var(--t-20)/1.2 var(--titre); margin: 0 0 var(--e-4); }
.mp-prix { font: 500 var(--t-17)/1 var(--chiffre); margin: 0; }
.mp-statut { font-weight: 600; font-size: var(--t-15); margin: var(--e-12) 0 0; }
.mp-vendue { color: var(--grave); }
.mp-reservee { color: var(--veille); }
.mp-champs { margin: var(--e-16) 0 0; border-top: 1px solid var(--trait); }
.mp-champ { border-bottom: 1px solid var(--trait); padding: var(--e-8) 0; }
.mp-champ dt { font-size: var(--t-13); color: var(--muet); }
.mp-champ dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--e-12); }
.mp-champ dd span { min-width: 0; overflow-wrap: anywhere; }
.mp-copier { flex: none; min-height: var(--cible); padding: 0 var(--e-12); background: transparent; color: var(--accent); border: 1px solid var(--trait-vif); border-radius: var(--r); font: 600 var(--t-15)/1 var(--texte); cursor: pointer; transition: background var(--entree); }
.mp-copier:active { background: var(--trait); }
.mp-copier.mp-fait, .bouton.mp-fait { color: var(--bon); }
.bouton.mp-fait { background: var(--surface); box-shadow: inset 0 0 0 2px var(--bon); }
.mp-etiquette { font-size: var(--t-13); color: var(--muet); margin: var(--e-16) 0 var(--e-4); }
.mp-description { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 var(--t-15)/1.5 var(--texte); background: var(--fond); border-radius: var(--r-petit); padding: var(--e-12); margin: 0 0 var(--e-12); max-height: 16rem; overflow-y: auto; }
.mp-photos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-8); margin: var(--e-12) 0 0; }
.mp-liens { margin: 0; font-size: var(--t-15); }
.mp-liens a { display: inline-block; min-height: var(--cible); line-height: var(--cible); }
.mp-coche { display: flex; align-items: center; gap: var(--e-8); min-height: var(--cible); margin: var(--e-8) 0 0; font-weight: 600; cursor: pointer; }
.mp-coche input { width: 22px; height: 22px; accent-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .mp-copier { transition: none; } }