/* ═══════════════════════════════════════════════════════════════
   LECLOZET CARDS — v3
   Ratio 1:1.4 | sm/md/lg | Gothique sombre | Chrome shiny pokémon
   ═══════════════════════════════════════════════════════════════ */

.lc-card {
  --lc-bg:       #1a1614;
  --lc-face:     #131110;
  --lc-card:     #f0ece6;
  --lc-accent:   #c4a882;
  --lc-taupe:    #8a7060;
  --lc-font-title: 'Cormorant Garamond', serif;
  --lc-font-ui:    'DM Sans', sans-serif;
  --lc-font-mono:  'Space Mono', monospace;
  --lc-img-pos:    50% 0%;   /* X% Y% — contrôlé par JS */
}

/* ── Tailles ──────────────────────────────────────────────────── */
.lc-card          { position:relative; display:inline-block; aspect-ratio:1/1.4; perspective:1000px; cursor:default; user-select:none; flex-shrink:0; }
.lc-card--sm      { width:180px; }
.lc-card--md      { width:252px; }
.lc-card--lg      { width:360px; }

/* ── Flip 3D ──────────────────────────────────────────────────── */
.lc-card__inner   { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.lc-card.is-flipped .lc-card__inner { transform:rotateY(180deg); }

/* ── Faces ────────────────────────────────────────────────────── */
.lc-card__face    { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; display:flex; flex-direction:column; }
.lc-card__face--back { transform:rotateY(180deg); background:#0d0b0a; display:flex; align-items:center; justify-content:center; }
.lc-card__face--front { background:var(--lc-face); }

/* ── Bordures rareté ──────────────────────────────────────────── */
.lc-card--common .lc-card__face--front { border:1px solid rgba(196,168,130,0.3); }
.lc-card--rare   .lc-card__face--front { border:1px solid rgba(196,168,130,0.6); }
.lc-card--chrome .lc-card__face--front { border:1px solid rgba(180,180,220,0.4); }

/* ── Filet intérieur doré ─────────────────────────────────────── */
.lc-card__face--front::before {
  content:''; position:absolute; inset:5px;
  border:1px solid rgba(196,168,130,0.15);
  z-index:1; pointer-events:none;
}
.lc-card--rare   .lc-card__face--front::before { border-color:rgba(196,168,130,0.32); }
.lc-card--chrome .lc-card__face--front::before { border-color:rgba(160,160,220,0.2); }

/* ── Coins ornementaux SVG ────────────────────────────────────── */
.lc-card__face--front::after {
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M1 14 L1 1 L14 1' fill='none' stroke='rgba(196,168,130,0.45)' stroke-width='1'/%3E%3Ccircle cx='1' cy='1' r='1.5' fill='rgba(196,168,130,0.4)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M4 1 L17 1 L17 14' fill='none' stroke='rgba(196,168,130,0.45)' stroke-width='1'/%3E%3Ccircle cx='17' cy='1' r='1.5' fill='rgba(196,168,130,0.4)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M1 4 L1 17 L14 17' fill='none' stroke='rgba(196,168,130,0.45)' stroke-width='1'/%3E%3Ccircle cx='1' cy='17' r='1.5' fill='rgba(196,168,130,0.4)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M4 17 L17 17 L17 4' fill='none' stroke='rgba(196,168,130,0.45)' stroke-width='1'/%3E%3Ccircle cx='17' cy='17' r='1.5' fill='rgba(196,168,130,0.4)'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px);
  background-size:18px 18px;
}
.lc-card--rare .lc-card__face--front::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M1 14 L1 1 L14 1' fill='none' stroke='rgba(196,168,130,0.8)' stroke-width='1.2'/%3E%3Ccircle cx='1' cy='1' r='2' fill='rgba(196,168,130,0.7)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M4 1 L17 1 L17 14' fill='none' stroke='rgba(196,168,130,0.8)' stroke-width='1.2'/%3E%3Ccircle cx='17' cy='1' r='2' fill='rgba(196,168,130,0.7)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M1 4 L1 17 L14 17' fill='none' stroke='rgba(196,168,130,0.8)' stroke-width='1.2'/%3E%3Ccircle cx='1' cy='17' r='2' fill='rgba(196,168,130,0.7)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M4 17 L17 17 L17 4' fill='none' stroke='rgba(196,168,130,0.8)' stroke-width='1.2'/%3E%3Ccircle cx='17' cy='17' r='2' fill='rgba(196,168,130,0.7)'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px);
  background-size:18px 18px;
}

/* ════════════════════════════════════════════════════════════════
   CHROME — Scintillement argenté
   Éclats de lumière blanche animés via canvas JS (lc-card__sparkles)
   Bordure argentée sobre, fond très sombre
   ════════════════════════════════════════════════════════════════ */
.lc-card--chrome { border:1.5px solid rgba(200,200,220,0.5); }

/* Fond chrome — très sombre, presque noir */
.lc-card--chrome .lc-card__face--front { background:#0d0c10; }

/* Lustre argenté sur le fond — gradient subtil diagonal */
.lc-card--chrome .lc-card__face--front::before {
  content:''; position:absolute; inset:5px;
  border:1px solid rgba(200,200,220,0.2);
  z-index:1; pointer-events:none;
  background:linear-gradient(
    135deg,
    rgba(220,220,240,0.03) 0%,
    transparent 40%,
    rgba(220,220,240,0.05) 100%
  );
}

/* Canvas scintillement — injecté par JS dans .lc-card__sparkle-canvas */
/* Sheen — 1 passe lente en diagonale */
/* Sheen — pseudo-élément translateX only = 100% GPU, 0 repaint */
.lc-card__sheen {
  position:absolute; inset:0; z-index:6; pointer-events:none;
  overflow:hidden;            /* clip le pseudo hors de la carte */
}
.lc-card__sheen::before {
  content:'';
  position:absolute;
  top:-20%; left:-80%;       /* démarre hors de la carte à gauche */
  width:60%; height:140%;    /* bande plus haute que la carte */
  background:linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.01) 30%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.01) 70%,
    transparent 100%
  );
  transform:translateX(0) skewX(-15deg);
  opacity:0;
  will-change:transform, opacity;
}
.lc-card--chrome.lc-sheen-active .lc-card__sheen::before {
  animation:lc-sheen-pass 2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
@keyframes lc-sheen-pass {
  0%   { transform:translateX(0%)    skewX(-15deg); opacity:0; }
  6%   { opacity:1; }
  94%  { opacity:1; }
  100% { transform:translateX(290%)  skewX(-15deg); opacity:0; }
}

/* Tilt 3D — sur .lc-card__inner pour ne pas toucher le layout parent */
.lc-card--chrome.lc-sheen-active .lc-card__inner {
  animation:lc-sheen-tilt 2s cubic-bezier(0.4,0,0.2,1) forwards;
  will-change:transform;
}
@keyframes lc-sheen-tilt {
  0%   { transform:perspective(600px) rotateY(0deg)  rotateX(0deg); }
  30%  { transform:perspective(600px) rotateY(3deg)  rotateX(-1.5deg); }
  70%  { transform:perspective(600px) rotateY(-2deg) rotateX(1deg); }
  100% { transform:perspective(600px) rotateY(0deg)  rotateX(0deg); }
}

/* Overlay lueur douce au hover — reflet sur métal poli */
.lc-card--chrome .lc-card__face--front .lc-card__shiny-glare {
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(
    ellipse 70% 60% at calc(var(--lc-mx,0.5)*100%) calc(var(--lc-my,0.5)*100%),
    rgba(255,255,255,0.09) 0%,
    rgba(255,255,255,0.03) 50%,
    transparent 75%
  );
  opacity:0; transition:opacity 0.4s;
}
.lc-card--chrome:hover .lc-card__face--front .lc-card__shiny-glare { opacity:1; }

/* Textes chrome — argent clair lisible */
.lc-card--chrome .lc-card__name {
  color:#e8e8f0;
  text-shadow:0 0 8px rgba(200,200,220,0.3), 0 1px 3px rgba(0,0,0,0.9);
  -webkit-text-fill-color:unset; background:none;
}
.lc-card--chrome .lc-card__signature {
  color:rgba(180,180,200,0.6);
  -webkit-text-fill-color:unset; background:none;
}
.lc-card--chrome .lc-card__rarity-badge {
  color:#b8b8d0;
  -webkit-text-fill-color:unset; background:none;
}
.lc-card--chrome .lc-card__divider {
  background:linear-gradient(90deg,transparent,rgba(200,200,220,0.4),transparent);
}
.lc-card--chrome .lc-card__desc { color:rgba(180,180,200,0.55); }
.lc-card--chrome .lc-card__season,
.lc-card--chrome .lc-card__slot { color:rgba(160,160,180,0.6); }

/* ── Header ──────────────────────────────────────────────────── */
.lc-card__header { display:flex; justify-content:space-between; align-items:center; padding:7px 10px 5px; border-bottom:1px solid rgba(196,168,130,0.12); position:relative; z-index:3; }
.lc-card__season { font-family:var(--lc-font-mono); font-size:0.5rem; letter-spacing:0.15em; color:var(--lc-taupe); }
.lc-card__slot   { font-family:var(--lc-font-mono); font-size:0.5rem; letter-spacing:0.1em; color:var(--lc-taupe); }
.lc-card__rarity-badge { font-size:0.4rem; letter-spacing:0.15em; padding:1px 4px; text-transform:uppercase; }
.lc-card--common .lc-card__rarity-badge { color:var(--lc-taupe); }
.lc-card--rare   .lc-card__rarity-badge { color:var(--lc-accent); }

/* ════════════════════════════════════════════════════════════════
   IMAGE — cadrage libre + vignettage
   ════════════════════════════════════════════════════════════════ */
.lc-card__image {
  flex:1; overflow:hidden; position:relative;
  margin:0 10px;           /* bords sombres visibles gauche/droite */
  border-left:1px solid rgba(196,168,130,0.12);
  border-right:1px solid rgba(196,168,130,0.12);
}

.lc-card__image img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--lc-img-pos, 50% 0%);
  display:block;
}

/* Vignettage — dégradé sombre sur les 4 bords */
.lc-card__image::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(to right,  rgba(13,11,10,0.55) 0%, transparent 22%, transparent 78%, rgba(13,11,10,0.55) 100%),
    linear-gradient(to bottom, rgba(13,11,10,0.35) 0%, transparent 18%, transparent 82%, rgba(13,11,10,0.45) 100%);
}

.lc-card__image-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:#0f0d0c; color:var(--lc-taupe); font-size:1.5rem; opacity:0.4;
}

/* ── Corps texte ──────────────────────────────────────────────── */
.lc-card__body { padding:8px 10px 4px; border-top:1px solid rgba(196,168,130,0.12); position:relative; z-index:3; }

.lc-card__name {
  font-family:var(--lc-font-title); font-style:italic; font-size:0.88rem; line-height:1.2;
  color:var(--lc-card); margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 4px rgba(0,0,0,0.7);
}
.lc-card--rare .lc-card__name {
  color:var(--lc-accent);
  text-shadow:0 0 8px rgba(196,168,130,0.3), 0 1px 4px rgba(0,0,0,0.8);
}

.lc-card__divider { height:1px; background:linear-gradient(90deg,transparent,rgba(196,168,130,0.4),transparent); margin:4px 0; }

.lc-card__desc {
  font-family:var(--lc-font-ui); font-size:0.55rem; color:rgba(240,236,230,0.55);
  line-height:1.4; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

/* ── Footer ───────────────────────────────────────────────────── */
.lc-card__footer { padding:4px 10px 6px; border-top:1px solid rgba(196,168,130,0.1); position:relative; z-index:3; }
.lc-card__signature { font-family:var(--lc-font-mono); font-size:0.42rem; letter-spacing:0.1em; color:rgba(196,168,130,0.55); white-space:nowrap; }

/* ── Palette dots ─────────────────────────────────────────────── */
.lc-card__palette { display:flex; gap:3px; position:absolute; bottom:28px; right:10px; z-index:3; }
.lc-card__palette-dot { width:6px; height:6px; border-radius:50%; border:0.5px solid rgba(255,255,255,0.2); }

/* ── Dos de carte ─────────────────────────────────────────────── */
.lc-card__back-content { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; height:100%; position:relative; }
.lc-card__back-chevrons { position:absolute; inset:0; opacity:0.08; background-image:repeating-linear-gradient(-45deg, #c4a882 0px, #c4a882 1px, transparent 1px, transparent 8px); }
.lc-card__back-content::before { content:''; position:absolute; inset:8px; border:1px solid rgba(196,168,130,0.2); pointer-events:none; z-index:1; }
.lc-card__back-logo   { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.1rem; color:var(--lc-accent); letter-spacing:0.05em; z-index:2; }
.lc-card__back-diamond{ color:var(--lc-accent); font-size:0.8rem; z-index:2; opacity:0.7; }

/* ── Carte verrouillée ────────────────────────────────────────── */
.lc-card--locked .lc-card__face--front { background:#0a0908; border:1px solid rgba(196,168,130,0.08); }
.lc-card__lock-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; z-index:3; }
.lc-card__lock-q    { font-family:var(--lc-font-title); font-style:italic; font-size:2.5rem; color:rgba(196,168,130,0.18); }
.lc-card__lock-slot { font-family:var(--lc-font-mono); font-size:0.5rem; letter-spacing:0.2em; color:rgba(196,168,130,0.12); }

/* ── Silhouette ───────────────────────────────────────────────── */
.lc-card--silhouette .lc-card__image img { filter:brightness(0.08) saturate(0); }
.lc-card--silhouette .lc-card__name { color:rgba(196,168,130,0.25); text-shadow:none; }

/* ── Hover interactif ─────────────────────────────────────────── */
.lc-card--interactive { cursor:pointer; transition:transform 0.2s ease, box-shadow 0.2s ease; }
.lc-card--interactive:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 12px 40px rgba(0,0,0,0.6), 0 0 20px rgba(196,168,130,0.08); }
.lc-card--rare.lc-card--interactive:hover  { box-shadow:0 12px 40px rgba(0,0,0,0.7), 0 0 30px rgba(196,168,130,0.18); }
.lc-card--chrome.lc-card--interactive:hover{ box-shadow:0 12px 40px rgba(0,0,0,0.8), 0 0 40px rgba(140,140,255,0.2); }

/* ════════════════════════════════════════════════════════════════
   ADMIN — Aperçu, grille slots, contrôle cadrage
   ════════════════════════════════════════════════════════════════ */
.lc-card-preview-wrap  { display:flex; flex-direction:column; align-items:center; gap:16px; }
.lc-card-preview-toggles { display:flex; gap:6px; }
.lc-card-preview-toggle { padding:4px 10px; font-family:'Space Mono',monospace; font-size:0.55rem; letter-spacing:0.1em; cursor:pointer; border:1px solid #333; background:none; color:#8a7060; transition:all 0.15s; }
.lc-card-preview-toggle.active { border-color:#c4a882; color:#c4a882; }

/* Contrôle cadrage flèches */
.lc-crop-ctrl { display:flex; align-items:center; gap:8px; margin-top:8px; }
.lc-crop-btn  { width:28px; height:28px; border:1px solid #333; background:#111; color:#8a7060; cursor:pointer; font-size:0.8rem; display:flex; align-items:center; justify-content:center; transition:all 0.15s; flex-shrink:0; }
.lc-crop-btn:hover { border-color:#c4a882; color:#c4a882; }
.lc-crop-track{ flex:1; height:2px; background:#222; position:relative; cursor:pointer; }
.lc-crop-fill { height:100%; background:var(--lc-accent,#c4a882); pointer-events:none; }
.lc-crop-label{ font-family:'Space Mono',monospace; font-size:0.5rem; color:#8a7060; width:28px; text-align:center; }

/* Grille slots */
.lc-slots-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:16px; }
@media(max-width:600px){ .lc-slots-grid{ grid-template-columns:repeat(4,1fr); } }

.lc-slot-thumb { aspect-ratio:1/1.4; border:1px solid #2a2420; background:#0a0908; cursor:pointer; position:relative; overflow:hidden; transition:border-color 0.15s; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.lc-slot-thumb:hover       { border-color:var(--lc-accent,#c4a882); }
.lc-slot-thumb.is-active   { border-color:var(--lc-accent,#c4a882); border-width:2px; }
.lc-slot-thumb.is-occupied { background:#131110; }
.lc-slot-thumb.is-retired  { opacity:0.3; }
.lc-slot-thumb img { width:100%; height:100%; object-fit:cover; object-position:50% 0%; position:absolute; inset:0; }
.lc-slot-num  { font-family:'Space Mono',monospace; font-size:0.55rem; color:#2a2420; z-index:1; }
.lc-slot-thumb.is-occupied .lc-slot-num { position:absolute; bottom:3px; right:4px; color:rgba(196,168,130,0.4); font-size:0.45rem; }
.lc-slot-plus { font-size:1rem; color:#2a2420; line-height:1; }

.lc-slot-rarity-dot          { position:absolute; top:4px; right:4px; width:5px; height:5px; border-radius:50%; }
.lc-slot-rarity-dot--common  { background:#8a7060; }
.lc-slot-rarity-dot--rare    { background:#c4a882; }
.lc-slot-rarity-dot--chrome  { background:linear-gradient(135deg,#c8c8e0,#e8e8f8,#a0a0c0); }

/* ── Animations utilitaires ───────────────────────────────────── */
@keyframes lc-field-fill { from{opacity:0.3;background-color:rgba(196,168,130,0.08);} to{opacity:1;background-color:transparent;} }
.lc-filling { animation:lc-field-fill 0.4s ease forwards; }
.lc-analyzing { display:inline-flex; align-items:center; gap:6px; font-size:0.65rem; color:#c4a882; letter-spacing:0.1em; }
.lc-analyzing::before { content:''; width:10px; height:10px; border:1.5px solid #c4a882; border-top-color:transparent; border-radius:50%; animation:lc-spin 0.7s linear infinite; }
@keyframes lc-spin { to{transform:rotate(360deg);} }