/* ============================================================
   FANNY CONUS — Fiches produit « Toile »
   Chaque œuvre est présentée comme une vraie toile sur châssis,
   accrochée au mur (clou + fils), avec son cartel de musée.
   Chargé APRÈS luxe.css : les surcharges utilisent !important.
   ============================================================ */

/* Le mur de la galerie : plus d'air entre les toiles (desktop).
   Sur mobile, mobile.css transforme la grille en carrousel à balayage :
   on garde un petit espace pour laisser dépasser la toile suivante. */
@media (min-width: 769px) {
  .gallery-grid { gap: 48px 36px !important; }
}
@media (max-width: 768px) {
  .gallery-grid { gap: 20px !important; padding: 14px 20px 30px !important; }
}

/* ---- La carte devient un accrochage ---- */
.art-card.toile {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  cursor: pointer;
  transition: transform .45s cubic-bezier(.22, 1.2, .36, 1) !important;
}
/* Légère inclinaison alternée, comme sur un vrai mur */
.art-card.toile:nth-child(2n)   { transform: rotate(.7deg); }
.art-card.toile:nth-child(2n+1) { transform: rotate(-.7deg); }
.art-card.toile:nth-child(3n)   { transform: rotate(.4deg); }
.art-card.toile:hover {
  transform: rotate(0deg) translateY(-10px) !important;
  box-shadow: none !important;
}

/* ---- Clou + fils d'accrochage ---- */
.toile-hang {
  display: block;
  width: 46%;
  height: auto;
  margin: 0 auto -5px;
  overflow: visible;
}
.toile-hang .th-nail { fill: #b99b52; }
.toile-hang .th-wire { stroke: #a5906033; stroke-width: 2.4; fill: none; }
.toile-hang .th-wire2 { stroke: #a08a58; stroke-width: 1.4; fill: none; }
.art-card.toile:hover .toile-hang { animation: toile-sway .9s ease; }
@keyframes toile-sway {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(1.2deg); }
  60% { transform: rotate(-.8deg); }
}

/* ---- Le châssis : cadre blanc + tranches de toile (3D) ---- */
.toile-frame {
  position: relative;
  background: #fff;
  padding: 11px;
  border-radius: 1px;
  box-shadow:
    0 2px 4px rgba(26, 46, 49, .12),
    0 30px 48px -18px rgba(26, 46, 49, .38);
  transition: box-shadow .45s ease;
}
/* Tranche droite de la toile */
.toile-frame::before {
  content: '';
  position: absolute;
  top: 7px; right: -7px; bottom: -7px;
  width: 7px;
  background: linear-gradient(90deg, #ddd6c6, #c3bbaa);
  transform: skewY(45deg);
  transform-origin: top;
}
/* Tranche basse de la toile */
.toile-frame::after {
  content: '';
  position: absolute;
  left: 7px; right: -7px; bottom: -7px;
  height: 7px;
  background: linear-gradient(#e8e2d3, #cbc3b2);
  transform: skewX(45deg);
  transform-origin: left;
}
.art-card.toile:hover .toile-frame {
  box-shadow:
    0 2px 4px rgba(26, 46, 49, .12),
    0 44px 64px -20px rgba(26, 46, 49, .48);
}

/* L'image reste bien dans le châssis (le zoom au survol ne déborde pas) */
.art-card.toile .art-card-img {
  overflow: hidden;
  position: relative;
  background: #f4f1ea;
}

/* Badge nouveauté (coin droit, or) */
.badge.toile-new {
  left: auto !important;
  right: 10px;
  background: #C9A84C !important;
  color: #fff !important;
}

/* ---- Le cartel de musée ---- */
.art-card.toile .art-card-info {
  background: #fff !important;
  border: 1px solid #ece5d4 !important;
  border-radius: 2px !important;
  max-width: 86%;
  margin: 18px auto 4px !important;
  padding: 13px 16px 14px !important;
  text-align: center;
  position: relative;
  box-shadow: 0 12px 26px -14px rgba(26, 46, 49, .22);
  transition: transform .45s cubic-bezier(.22, 1.2, .36, 1);
}
/* La punaise dorée du cartel */
.art-card.toile .art-card-info::before {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8cf8b, #b3924a);
  transform: translateX(-50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.art-card.toile:hover .art-card-info { transform: translateY(2px); }
.art-card.toile .art-card-info h3 {
  font-size: 1.02rem !important;
  letter-spacing: .2px;
}
.art-card.toile .art-technique {
  font-size: .74rem !important;
  color: #9a938a !important;
}
.art-card.toile .art-card-meta {
  justify-content: center !important;
  gap: 16px;
  border-top: 1px dashed #e6dfcd !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
}

/* ---- Fiche œuvre : la toile en grand ---- */
.product-img-wrap::before {
  content: '';
  position: absolute;
  top: 8px; right: -8px; bottom: -8px;
  width: 8px;
  background: linear-gradient(90deg, #d8d1c1, #bcb4a3);
  transform: skewY(45deg);
  transform-origin: top;
}
.product-img-wrap {
  border-radius: 1px !important;
}
.product-img-wrap .product-edge-b {
  position: absolute;
  left: 8px; right: -8px; bottom: -8px;
  height: 8px;
  background: linear-gradient(#e4ddcd, #c6bead);
  transform: skewX(45deg);
  transform-origin: left;
}

/* ---- Accessibilité / mobile ---- */
@media (prefers-reduced-motion: reduce) {
  .art-card.toile,
  .art-card.toile:nth-child(2n),
  .art-card.toile:nth-child(2n+1),
  .art-card.toile:nth-child(3n) { transform: none !important; transition: none !important; }
  .art-card.toile:hover .toile-hang { animation: none; }
}
@media (max-width: 640px) {
  .toile-frame { padding: 8px; }
  .toile-frame::before { top: 5px; right: -5px; bottom: -5px; width: 5px; }
  .toile-frame::after { left: 5px; right: -5px; bottom: -5px; height: 5px; }
  .art-card.toile .art-card-info { max-width: 94%; margin-top: 14px !important; }
}