/* ============================================================
   style.css — styles personnalisés en complément de Tailwind
   (Tailwind gère la mise en page/l'espacement/la typo générale,
   ce fichier gère les éléments "signature" que Tailwind seul
   ne fait pas bien : médaillon, rebord doré, plaque, animations)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg: #1b1712;
  --panel: #241f18;
  --panel-light: #2f2820;
  --seam: #3a3226;
  --ivory: #e9e0cc;
  --muted: #8c8270;
  --brass: #b98b4e;
  --brass-light: #d9b173;
  --patina: #6f9483;
  --rust: #a65c4b;
}

body{
  background:
    radial-gradient(ellipse at top, #221d16 0%, #171310 60%, #120f0c 100%);
}

/* ---------- Cadre du panneau (petit filet doré) ---------- */
.tray-frame{ position: relative; }
.tray-frame::before{
  content:"";
  position:absolute; inset: 6px;
  border: 1px solid rgba(185,139,78,0.15);
  pointer-events: none;
}

/* ---------- Zone de dépôt d'image ---------- */
.dropzone{ transition: border-color 0.2s ease, background 0.2s ease; }
.dropzone:hover, .dropzone.drag{
  border-color: var(--brass) !important;
  background: rgba(185,139,78,0.06);
}
.dropzone img.preview{ filter: sepia(0.15) contrast(1.02); }

/* ---------- Médaillon (pièce de monnaie) ---------- */
.medallion{ transition: transform 0.35s ease; }
.piece:hover .medallion{ transform: rotate(-4deg) scale(1.04); }

.medallion .rim{
  background: conic-gradient(from 200deg, #7a5a2c, #d9b173, #7a5a2c, #f0d69a, #7a5a2c);
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
.medallion .face{
  background: #14110d;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4), inset 0 2px 10px rgba(0,0,0,0.6);
}
.medallion .face img{ filter: sepia(0.1) contrast(1.03); }

/* ---------- Bouton de suppression flottant ---------- */
.del-btn{ opacity: 0; transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease; }
.piece:hover .del-btn{ opacity: 1; }
.del-btn:hover{ background: var(--rust) !important; color: var(--panel) !important; }

/* ---------- Petite entrée en fondu pour chaque pièce ---------- */
.piece{ animation: rise 0.4s ease both; }
@keyframes rise{ from{ opacity:0; transform: translateY(10px);} to{opacity:1; transform:none;} }

/* ---------- Champ de recherche façon étiquette gravée ---------- */
.search-input{ background: transparent; }
.search-input:focus{ border-color: var(--brass) !important; }

/* ---------- Ombre de texte du titre ---------- */
.title-shadow{ text-shadow: 0 1px 0 rgba(0,0,0,0.4); }

/* ---------- Icône "pièce" de l'en-tête : légère rotation façon médaille qui tourne ---------- */
.coin-spin{
  display: inline-block;
  animation: coin-flip 5s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes coin-flip{
  0%, 100% { transform: rotateY(0deg); }
  45%      { transform: rotateY(180deg); }
  55%      { transform: rotateY(180deg); }
}

/* ---------- Pied de page : apparition en fondu + léger décalage ---------- */
.site-footer{
  animation: footer-rise 0.7s ease both;
  animation-delay: 0.2s;
}
@keyframes footer-rise{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: none; }
}

/* ---------- Fiches d'article du blog ---------- */
.post-card{
  animation: rise 0.5s ease both;
  position: relative;
}
.post-card::before{
  content:"";
  position:absolute; inset: 5px;
  border: 1px solid rgba(185,139,78,0.12);
  pointer-events: none;
}

/* ---------- Lien de navigation actif ---------- */
.nav-link{ position: relative; }

/* ---------- Respect des préférences de mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  .coin-spin,
  .site-footer,
  .piece,
  .post-card,
  .medallion,
  .add-btn i{
    animation: none !important;
    transition: none !important;
  }
}