/* La page d'un lot : la photo de reportage bord à bord sur sept colonnes, le matricule
   fantôme derrière la fiche, la fiche d'atelier sur tôle claire, l'estimation du catalogue. */

.lot { position: relative; overflow: clip; background: var(--bleu); }
.lot > .grille { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gout); }
.lot__photo {
  --gauche: max(var(--marge), calc((100vw - var(--largeur)) / 2));
  grid-column: 1 / 8; position: sticky; top: calc(var(--demobar-offset, 0px) + var(--caisson-h));
  align-self: start; height: var(--utile); margin-left: calc(-1 * var(--gauche));
  background: var(--caisson);
}
.lot__photo picture { height: 100%; }
.lot__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 55%); }
.lot__photo figcaption {
  position: absolute; left: var(--gauche); bottom: 18px; padding: 8px 14px; border-radius: 3px;
  background: var(--caisson); font: 500 16px/1.3 var(--meca);
}
.lot__matricule {
  position: absolute; z-index: 0; top: 2svh; left: calc(58.33% + var(--gout));
  font: 900 min(25vw, calc(36vw / (var(--car, 3) * .62)))/.8 var(--meca); color: rgb(255 255 255 / .1); white-space: nowrap; pointer-events: none; user-select: none;
}
.lot__fiche { grid-column: 8 / 13; position: relative; z-index: 1; display: grid; align-content: start; gap: 18px; padding-block: clamp(28px, 5svh, 64px) 40px; }
.lot__num { font: 600 18px/1 var(--meca); color: var(--pale); }
.lot__nom { font: 400 clamp(64px, 5.2vw, 96px)/1 var(--script); margin-top: -6px; }
.lot__marque { font-size: 19px; margin-top: -10px; }
.lot__faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.lot__faits dt { font: 600 14px/1.2 var(--meca); color: var(--pale); }
.lot__faits dd { font: 500 18px/1.3 var(--meca); white-space: nowrap; }
.lot__histoire { max-width: 38ch; font-size: 19px; line-height: 1.45; }

/* Fiche d'atelier : tôle claire vissée, six lignes cochées au trait. */
.atelier {
  position: relative; padding: 20px 22px 18px; border-radius: 3px; background: var(--tole); color: var(--encre);
  box-shadow: 0 14px 24px -18px rgb(0 0 0 / .7);
}
.atelier::before, .atelier::after {
  content: ""; position: absolute; top: 10px; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0 20%, #9aa6bd 55%, #4c587a);
}
.atelier::before { left: 10px; }
.atelier::after { right: 10px; }
.atelier__titre { font: 700 18px/1.2 var(--meca); color: var(--bleu); margin-bottom: 8px; }
.atelier li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 5px 0; font-size: 17px; line-height: 1.35; }
.atelier li + li { box-shadow: 0 -1px 0 rgb(16 21 33 / .12); }
.atelier svg { width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--bleu); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.lot__achat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.lot__estimation { display: grid; gap: 2px; }
.lot__estimation strong { font: 700 28px/1.15 var(--meca); }
.lot__estimation span { font-size: 16px; color: var(--pale); }
.hiver summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
  font: 600 17px/1 var(--meca); list-style: none; text-decoration: underline; text-underline-offset: 5px;
}
.hiver summary::-webkit-details-marker { display: none; }
.hiver summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s; }
.hiver[open] summary svg { transform: rotate(90deg); }
.hiver p { font-size: 17px; color: var(--pale); }
.hiver b { color: var(--blanc); font-weight: 700; }
.lot .plaque-btn { min-width: 240px; min-height: 52px; font-size: 18px; }
.lot__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 12px; box-shadow: 0 -1px 0 rgb(199 214 245 / .28); }
.lot__nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font: 600 17px/1 var(--meca); color: var(--blanc); text-decoration: none; }
.lot__nav a:nth-child(2) { color: var(--pale); }
@media (hover: hover) { .lot__nav a:hover { text-decoration: underline; text-underline-offset: 5px; } }
.lot__nav .fleche--g { transform: scaleX(-1); }

@media (max-width: 1023px) {
  .lot > .grille { display: block; }
  .lot__photo {
    position: relative; top: auto; height: auto; aspect-ratio: 4 / 3; margin-inline: calc(-1 * max(var(--marge), env(safe-area-inset-left)));
  }
  .lot__photo figcaption { left: max(var(--marge), env(safe-area-inset-left)); bottom: 12px; font-size: 15px; }
  .lot__matricule { top: calc(75vw + 14px); left: 44vw; font-size: 28vw; }
  .lot__fiche { gap: 16px; padding-block: 22px 32px; }
  .lot__nom { font-size: 56px; }
  .lot .plaque-btn { width: 100%; }
  .lot__nav { flex-wrap: wrap; box-shadow: none; padding-top: 0; }
  .lot__nav a { flex: 1 1 0; justify-content: center; min-height: 48px; padding: 0 6px; border-radius: 3px; box-shadow: inset 0 0 0 2px rgb(199 214 245 / .5); }
  .lot__nav a:nth-child(2) { order: 3; flex-basis: 100%; box-shadow: none; text-decoration: underline; text-underline-offset: 5px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .lot__photo { aspect-ratio: 16 / 10; }
  .lot__matricule { top: calc(62.5vw + 14px); }
}