/* CLS fix : reservation d espace pour le contenu dynamique de la fiche.
   Sans ce min-height, #content est vide au FCP (juste nav + breadcrumb)
   puis rempli en JS avec 800+ px de contenu → Cumulative Layout Shift
   massif (0.387 sur Lighthouse mobile). On reserve la hauteur typique
   d une fiche desktop ; sur mobile empile, la valeur est augmentee. */
/* Reserve dimensionnee pour qu'une fiche TYPIQUE tienne DANS la reserve :
   le contenu (souvent plus haut que l'ancienne valeur, calee pour un rendu
   synchrone) se substitue au squelette sans pousser la section contact /
   footer -> CLS ~0. Desktop 2 colonnes (plus court) < mobile empile. */
#content { min-height: 1100px; }
@media (max-width: 900px) { #content { min-height: 2100px; } }

/* Phase 2.1 — squelette pendant le fetch du fichier par-item.
   Il REUTILISE les conteneurs structurels reels (.fiche-main /
   .fiche-visual-wrap / .fiche-visual / .fiche-info) : il occupe donc
   exactement la meme grille et les memes hauteurs (min-height 520/400px)
   que le contenu final -> l'echange squelette/contenu se fait EN PLACE,
   pas de Cumulative Layout Shift. Combine au #content min-height
   ci-dessus (reserve aussi le bas : description detaillee + similaires). */
.sk { display: block; background: #e7ddc6; border-radius: 4px; position: relative; overflow: hidden; }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-100%); animation: sk-shimmer 1.3s infinite;
}
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }
.sk-img { width: 100%; max-width: 460px; aspect-ratio: 3 / 4; background: #4a3a2c; }
.sk-l { display: block; height: 1rem; margin: .6rem 0; }
.sk-t { height: 2.1rem; width: 78%; margin-bottom: .4rem; }
.sk-s { height: 1.1rem; width: 42%; margin-bottom: 1.4rem; }
.sk-short { width: 55%; }
.sk-rule { height: 1px; background: #d8cba6; margin: 1.3rem 0; border: 0; }
.sk-box { height: 3rem; margin-top: 1.1rem; }
.sk-price { width: 38%; height: 2.4rem; }
.sk-detail { height: 220px; margin: 2.5rem auto 0; max-width: 1340px; }
@media (max-width: 900px) { .sk-detail { height: 320px; } }

/* "Retour aux resultats" : aligne sur la typo du fil d ariane (sans-serif
   micro, capitales) mais en dore pour le distinguer comme element actionnable
   et non comme un simple repere de position. Le selecteur [hidden] est requis
   car display:inline-flex surcharge l attribut HTML hidden (qui ne pose qu un
   display:none sans !important). */
.fiche-back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--sans); font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold3); text-decoration: none;
  margin-bottom: 0.55rem;
}
.fiche-back:hover { color: #fff; }
.fiche-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fiche-back[hidden] { display: none; }

.fiche-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
  align-items: stretch;
  max-width: 1340px;
  /* Marge haute : detache le bloc fiche (cadre chocolat + panneau beige) du
     bandeau vert du fil d ariane juste au-dessus. Sans cela le cadre sombre
     est colle a la bordure verte. */
  margin: 2rem auto 0;
}

/* ---- Zone image large + rangee miniatures ----
   Fond forest (vert sombre de la palette) plutot que beige clair : pattern
   muséal / galerie d art (Drouot, Sotheby s, Christie s, Aguttes). Les pieces
   crème (lettres autographes sur papier ancien) et les œuvres claires ressortent
   nettement, alors qu un fond beige les noyait dans la palette du site. */
.fiche-visual-wrap {
  border-right: 1px solid var(--border);
  background: #2a1f17;
  display: flex;
  flex-direction: column;
}
.fiche-visual {
  padding: 3rem;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 1 1 auto;
}
.fiche-visual.has-image { cursor: zoom-in; overflow: hidden; }
.fiche-visual-inner {
  display: flex; align-items: center; justify-content: center;
  max-width: 100%;
}

/* Zoom suit-souris : l image se met a l echelle au survol, le transform-origin
   est pilote par JS via --zoom-x / --zoom-y (% relatifs a l image) pour que la
   zone agrandie soit exactement celle sous le curseur. Le crop est assure par
   overflow:hidden sur .fiche-visual.has-image plus haut. */
.fiche-visual.has-image .big-img {
  transition: transform 0.2s ease-out;
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
  will-change: transform;
}
.fiche-visual.has-image .big-img:hover {
  transform: scale(2.8);
}
/* Desactive l effet sur les appareils sans vrai hover (tactile). */
@media (hover: none) {
  .fiche-visual.has-image .big-img:hover { transform: none; }
  .fiche-visual.has-image { cursor: pointer; }
}
.fiche-visual .item-badge {
  font-size: var(--t-micro); padding: 5px 12px; top: 20px; left: 20px;
}
.fiche-visual .item-cat-badge {
  font-size: var(--t-micro); padding: 5px 12px; top: 20px; right: 20px;
}
.fiche-zoom-hint {
  position: absolute; bottom: 18px; right: 20px;
  font-family: var(--sans); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  background: rgba(255,255,255,0.85);
  padding: 6px 10px; border: 1px solid var(--border);
  pointer-events: none;
}

/* Rangee de miniatures sous l image principale.
   flex-wrap : si 8 miniatures ne tiennent pas en largeur (mobile, tablette
   etroite), les excedentaires passent a la ligne au lieu de creer un scroll
   horizontal cache. justify-content centre le bloc et la 2e ligne. */
.fiche-thumbs {
  display: flex; gap: 0.6rem;
  padding: 1rem 1.5rem 1.5rem;
  background: #2a1f17;
  border-top: 1px solid rgba(196, 154, 60, 0.2);
  flex-wrap: wrap;
  justify-content: center;
}
.fiche-thumb {
  flex: 0 0 88px;
  width: 88px; height: 88px;
  border: 2px solid transparent;
  background: #fff; padding: 0; cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.fiche-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.fiche-thumb:hover { border-color: var(--gold3); }
.fiche-thumb.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset;
}
.fiche-thumb:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* Lightbox plein ecran */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0;
  background: rgba(20, 25, 20, 0.92);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  cursor: zoom-out;
}
.lightbox-img {
  max-width: 96vw; max-height: 92vh;
  width: auto; height: auto;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  background: #fff;
}
.lightbox-close {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.1); color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: var(--t-h2); line-height: 1; cursor: pointer;
  font-family: var(--sans); font-weight: 300;
  transition: background 0.15s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }
.lightbox-close:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* Image réelle (si uploadée) */
.big-img {
  max-width: 100%;
  max-height: 480px;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.06);
  border: 1px solid var(--border);
  background: #fff;
}

/* Autographe — grand document */
.big-doc {
  background: #faf4e8;
  border: 1px solid #d4c4a0;
  padding: 2.2rem 2rem;
  width: 280px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.04);
  transform: rotate(-1.2deg);
}
.big-doc .dl { height: 10px; margin-bottom: 13px; }
.big-doc .dsig {
  font-size: var(--t-h2); margin-top: 20px;
  font-family: var(--serif); color: #4a3820; font-style: italic;
}

/* Tableau grand */
.big-tableau {
  border: 14px solid #c8b078;
  background: var(--beige4);
  box-shadow: 3px 3px 0 #a89050, inset 0 0 30px rgba(0,0,0,0.08);
  width: 340px; height: 250px;
  display: flex; align-items: center; justify-content: center;
}
.big-tableau .inner { background: var(--beige3); width: 100%; height: 100%; }

/* Dessin grand */
.big-dessin {
  border: 4px solid #c8b890;
  background: #faf4e8;
  padding: 2rem;
  width: 220px; height: 290px;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.big-dessin .line { background: #c8b07028; height: 7px; border-radius: 1px; }

/* Gravure grande */
.big-gravure {
  border: 6px solid #a89060;
  background: #f0e8d0;
  width: 300px; height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.big-gravure .inner {
  width: 85%; height: 85%;
  border: 1px dashed #c8b08050;
  display: flex; align-items: center; justify-content: center;
}
.big-gravure .cross {
  font-family: var(--serif); font-size: 64px; color: #c8b07040;
}

/* Photo grande */
.big-photo {
  border: 10px solid #888070;
  background: #e0dcd0;
  width: 220px; height: 290px;
  display: flex; align-items: center; justify-content: center;
}
.big-photo .inner { width: 88%; height: 88%; background: #c8c0b0; }

/* ---- Zone info droite ---- */
.fiche-info {
  padding: 3rem;
  background: var(--beige);
  /* Limite la largeur du contenu sur tres grand ecran pour que prix/CTAs
     ne s etirent pas demesurement (aligne avec le design maquette ~440px). */
  display: flex;
  flex-direction: column;
}
.fiche-info > * {
  max-width: 440px;
  width: 100%;
}
.fiche-title {
  font-family: var(--serif); font-size: var(--t-h1);
  font-weight: 700; color: var(--forest);
  line-height: 1.25; margin-bottom: 0.5rem;
}
.fiche-artist {
  font-family: var(--serif); font-size: var(--t-h3);
  font-style: italic; color: var(--gold);
  margin-bottom: 0.4rem;
  display: inline-block;
}
a.fiche-artist {
  text-decoration: none;
  transition: color 0.15s, text-decoration-color 0.15s;
}
a.fiche-artist:hover,
a.fiche-artist:focus-visible {
  color: var(--forest);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.fiche-period {
  font-family: var(--sans); font-size: var(--t-eyebrow-lg);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.5rem;
}
/* Separateur fin dans la colonne info (remplace les anciens border-top/bottom du price-row) */
.fiche-divider {
  height: 1px; background: var(--border);
  margin: 1.3rem 0;
}

/* Paragraphe "A propos" */
.fiche-desc {
  font-family: var(--sans); font-size: var(--t-body);
  color: var(--text); line-height: 1.85;
  font-weight: 400; margin: 0;
  white-space: pre-line; /* preserve les sauts de ligne du resume court */
}

/* Bloc prix encadre */
.fiche-price-box {
  border: 1px solid var(--forest);
  background: #f8f0dc; /* creme doux, se detache du fond beige de .fiche-info */
  padding: 1.3rem 1.6rem;
  margin: 0 0 1.3rem;
  /* Sans le label "Prix de vente" au-dessus, le prix seul est plus equilibre
     visuellement quand il est centre dans son encart. Look "tag prix"
     e-commerce premium (Hermes, Cartier, Drouot). */
  text-align: center;
}
.fiche-price-label {
  font-family: var(--sans); font-size: var(--t-micro);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  margin-bottom: 0.4rem;
}
.fiche-price {
  font-family: var(--serif); font-size: var(--t-h2);
  font-weight: 700; color: var(--forest);
  line-height: 1;
}
/* Variante "Prix sur demande" sur la fiche : le label devient le titre
   principal du bloc (pas de prix numerique au-dessous). Italique pour
   marquer la tonalite "exception editoriale", couleur bronze sepia. */
.fiche-price-box-onrequest .fiche-price-label {
  font-family: var(--serif);
  font-size: var(--t-h2);
  font-style: italic;
  font-weight: 400;
  color: #8b6f47;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 0.5rem;
}
.fiche-price-onrequest-note {
  font-family: var(--sans);
  font-size: var(--t-eyebrow-lg);
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
/* Variante "Vendu / Reserve" : la piece reste presentee a titre de
   reference mais n est plus achetable. Bordure et libelle bordeaux,
   coherents avec le badge .b-sold (#8a1f1f). */
.fiche-price-box-unavailable {
  border-color: #8a1f1f;
  background: #f6ece6;
}
.fiche-status-label {
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 700;
  font-style: italic;
  color: #8a1f1f;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 0.4rem;
}
.fiche-price-struck {
  font-size: var(--t-h3);
  color: var(--muted);
  text-decoration: line-through;
  margin-bottom: 0.5rem;
}

/* CTA principaux */
.fiche-cta { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0; }
.btn-cta {
  width: 100%;
  justify-content: center;
  padding: 16px 24px;
  font-size: var(--t-eyebrow-lg);
  letter-spacing: 0.18em;
}
.btn-primary {
  background: #2a1f17; color: #fff;
  font-family: var(--sans); font-size: var(--t-eyebrow);
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 14px 28px; border: none; cursor: pointer;
  font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--forest2); }
.btn-secondary {
  background: transparent; color: var(--forest);
  font-family: var(--sans); font-size: var(--t-eyebrow);
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 14px 24px; border: 1px solid var(--forest);
  cursor: pointer; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-secondary:hover {
  background: #faf5ea; /* beige dore tres doux, reste dans la palette chaude */
  color: var(--gold);
  border-color: var(--gold);
}
.btn-secondary.active {
  background: #faf5ea;
  color: var(--gold);
  border-color: var(--gold);
}
.btn-ico {
  width: 16px; height: 16px;
  flex-shrink: 0;
}

/* Trust note discrete sous les boutons CTA : garantit au visiteur qu il
   recevra le certificat d authenticite et la facture. Lien vers la page
   /notre-engagement pour les details. */
.fiche-trust-note {
  font-family: var(--serif);
  font-size: var(--t-eyebrow-lg);
  color: var(--muted);
  font-style: italic;
  margin: 0.6rem 0 0;
  line-height: 1.5;
  text-align: center;
}
.fiche-trust-note strong { color: var(--forest); font-weight: 700; font-style: normal; }
.fiche-trust-note a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
  font-style: normal;
  white-space: nowrap;
}
.fiche-trust-note a:hover { color: var(--gold2); text-decoration: underline; }

/* Bouton primaire quand la piece est deja dans le panier : teinte or subtile */
.btn-primary.in-cart {
  background: var(--gold);
}
.btn-primary.in-cart:hover {
  background: var(--gold2);
}

/* Section pleine largeur "Description detaillee" */
.fiche-detail-section {
  padding: 3rem 3rem 4rem;
  border-top: 1px solid var(--border);
  background: var(--beige);
}
.fiche-detail-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.fiche-detail-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--sans); font-size: var(--t-micro);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  margin-bottom: 1rem;
}
.eyebrow-dash {
  display: inline-block; width: 28px; height: 2px;
  background: var(--gold);
}
.fiche-detail-title {
  font-family: var(--serif); font-size: var(--t-h1);
  font-weight: 700; color: var(--forest);
  line-height: 1.3; margin: 0 0 1.5rem;
}
.fiche-detail-body {
  font-family: var(--sans); font-size: var(--t-body);
  color: var(--text); line-height: 1.85;
  font-weight: 400;
}
.fiche-detail-body p { margin: 0 0 1rem; }
.fiche-detail-body p:last-child { margin-bottom: 0; }

/* Pièces similaires */
.similar {
  background: var(--beige2);
  padding: 2.5rem 3rem;
  border-top: 1px solid var(--border);
}
.similar-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  gap: 1rem; flex-wrap: wrap;
}
.similar-title {
  font-family: var(--serif); font-size: var(--t-h2);
  font-weight: 700; color: var(--forest);
}
.similar-title em { font-style: italic; font-weight: 400; }
.similar-link {
  font-family: var(--sans); font-size: var(--t-eyebrow);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; text-decoration: none;
}
.similar-link:hover { color: var(--gold2); }
.similar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
/* Grands ecrans : 4 cards en largeur (meme seuil que la grille auteurs). */
@media (min-width: 1400px) {
  .similar-grid { grid-template-columns: repeat(4, 1fr); }
}

/* État "non trouvé" */
.not-found {
  padding: 4rem 2rem; text-align: center;
}
.not-found h2 {
  font-family: var(--serif); font-size: var(--t-h2);
  font-weight: 700; color: var(--forest); margin-bottom: 0.5rem;
}
.not-found p {
  font-family: var(--sans); font-size: var(--t-body);
  color: var(--muted); font-weight: 300; margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
  .fiche-main { grid-template-columns: 1fr; }
  .fiche-visual-wrap {
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .fiche-visual {
    padding: 2rem 1.5rem; min-height: 400px;
  }
  /* En colonne unique, le contenu (max-width 440px) est centre horizontalement
     pour eviter qu il parte a gauche sur les grandes largeurs d ecran tablette. */
  .fiche-info {
    padding: 2rem 1.5rem;
    align-items: center;
  }
  .similar { padding: 2rem 1.5rem; }
  .similar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .fiche-visual { padding: 1.5rem 1rem; min-height: 320px; }
  .fiche-thumbs { padding: 0.8rem 1rem 1.2rem; gap: 0.4rem; }
  .fiche-thumb { flex: 0 0 72px; width: 72px; height: 72px; }
  .fiche-zoom-hint { bottom: 10px; right: 10px; font-size: 9px; padding: 4px 8px; }
  .fiche-info { padding: 1.5rem 1rem; }
  .fiche-title { font-size: var(--t-h2); }
  .fiche-price { font-size: var(--t-h3); }
  .fiche-price-box { padding: 1rem 1.2rem; }
  .fiche-detail-section { padding: 2rem 1.5rem 3rem; }
  .fiche-detail-title { font-size: var(--t-h2); }
  .similar { padding: 1.5rem 1rem; }
  .similar-grid { grid-template-columns: 1fr; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
  .big-doc { width: 220px; padding: 1.5rem; }
  .big-tableau { width: 260px; height: 190px; }
  .big-gravure { width: 240px; height: 180px; }
  .big-photo, .big-dessin { width: 180px; height: 240px; }
}

/* P2-A CSP strict : externalisation des style inline de smallCard() */
/* Petits cadres utilises dans la section pieces similaires en bas de fiche. */
.tableau-frame {
  width: 130px; height: 95px;
  border: 8px solid #c8b078; background: var(--beige4);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 2px 2px 0 #a89050;
}
.tableau-frame-inner { background: var(--beige3); width: 100%; height: 100%; }

.dessin-frame {
  border: 3px solid #c8b890; background: #faf4e8;
  padding: 1.2rem; width: 110px; height: 140px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.dessin-frame-line { height: 5px; background: #c8b07028; }

.gravure-frame {
  border: 4px solid #a89060; background: #f0e8d0;
  width: 130px; height: 95px;
  display: flex; align-items: center; justify-content: center;
}
.gravure-frame-inner {
  width: 85%; height: 85%; border: 1px dashed #c8b08050;
  display: flex; align-items: center; justify-content: center;
}
.gravure-frame-cross { font-family: var(--serif); font-size: var(--t-h1); color: #c8b07040; }

.photo-frame {
  border: 6px solid #888070; background: #e0dcd0;
  width: 100px; height: 130px;
  display: flex; align-items: center; justify-content: center;
}
.photo-frame-inner { width: 88%; height: 88%; background: #c8c0b0; }

/* Sprint 1.8 : signal de fraicheur de la notice (E-E-A-T).
 * Discret, place en pied du bloc info de la fiche. */
.fiche-updated {
  margin-top: 1.5rem;
  font-size: var(--t-small);
  color: var(--muted, #888);
  font-style: italic;
}