/* CopiePrompt — bibliothèque. Même charte que la landing et l'espace compte. */

:root{
  --indigo-deep:#2E32A2;
  --violet-vibrant:#7A3DCC;
  --gradient-primary: linear-gradient(135deg, var(--indigo-deep) 0%, var(--violet-vibrant) 100%);
  --bg:#0F1117;
  --surface:#1A1C24;
  --surface-2:#21232D;
  --text:#F2F3F7;
  --text-secondary:#A3A6B3;
  --border: rgba(242,243,247,0.09);
  --border-strong: rgba(242,243,247,0.16);
  --success:#5FD39A;
  --radius-lg: 22px;
  --radius-sm: 12px;
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(700px 420px at 90% -10%, rgba(122,61,204,.22), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family:'Poppins', -apple-system, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
}
a{ color:inherit; }
h1,h2{ margin:0; letter-spacing:-.02em; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted{ color: var(--text-secondary); }

.top{
  display:flex; align-items:center; justify-content:space-between;
  max-width: 1180px; margin:0 auto; padding: 16px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ width:34px; height:34px; border-radius:10px; }
.brand span{ font-weight:700; font-size:1.08rem; }
.top-links{ display:flex; gap:20px; font-size:.92rem; font-weight:500; }
.top-links a{ text-decoration:none; color: var(--text-secondary); }
.top-links a:hover{ color: var(--text); }
.top-links a[data-account-link]{ color: var(--text); font-weight:600; }
@media (max-width: 480px){ .hide-sm{ display:none; } }

.wrap{ max-width: 1180px; margin: 0 auto; padding: 8px 16px 56px; }
.intro{ margin: 24px 0 24px; }
.intro h1{ font-size: clamp(1.9rem, 4vw, 2.6rem); }
.lead{ color: var(--text-secondary); margin: 8px 0 0; max-width: 560px; }

.banner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 24px;
  box-shadow: 0 24px 60px -32px rgba(122,61,204,.6);
}
.banner p{ margin:0; max-width: 620px; }
.banner strong{ color: var(--text); }

.toolbar{ display:flex; flex-direction:column; gap:14px; margin-bottom: 14px; }
@media (min-width: 900px){ .toolbar{ flex-direction:row; align-items:center; justify-content:space-between; } }
.chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0;
  font: inherit; font-size:.86rem; font-weight:500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 8px 14px;
  cursor:pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.chip:hover{ color: var(--text); }
.chip[aria-selected="true"]{ background: var(--gradient-primary); color:#fff; border-color: transparent; }
.chip small{ opacity:.75; margin-left:4px; }

.search{
  display:flex; align-items:center; gap:8px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0 14px;
  min-width: 0;
}
@media (min-width: 900px){ .search{ width: 320px; } }
.search svg{ width:18px; height:18px; color: var(--text-secondary); flex-shrink:0; }
.search input{ flex:1; min-width:0; font: inherit; font-size:.95rem; color: var(--text); background: transparent; border:0; outline:0; padding: 10px 0; }
.search:focus-within{ border-color: var(--violet-vibrant); box-shadow: 0 0 0 3px rgba(122,61,204,.22); }

.count{ color: var(--text-secondary); font-size:.86rem; margin: 6px 0 16px; }

.grid{ display:grid; gap:16px; }
@media (min-width: 720px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px){ .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.card{
  display:flex; flex-direction:column; gap:10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  min-width: 0;
}
.card-head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cat{ font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color: #B497F0; }
.badge{ font-size:.72rem; font-weight:600; padding: 3px 10px; border-radius:999px; }
.badge.tested{ background: rgba(95,211,154,.14); color: var(--success); }
.badge.free{ background: rgba(242,243,247,.08); color: var(--text); }
.card h2{ font-size:1.05rem; font-weight:600; }
.meta{ margin:0; font-size:.82rem; color: var(--text-secondary); display:flex; flex-direction:column; gap:2px; }
.meta span:empty{ display:none; }

.body{
  position:relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size:.86rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 180px;
  overflow:hidden;
  color: #D9DBE3;
}
.body::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:56px;
  background: linear-gradient(to bottom, transparent, var(--surface-2));
  pointer-events:none;
}
.card.expanded .body{ max-height:none; }
.card.expanded .body::after{ display:none; }
.card.locked .body{ user-select:none; }
.card.locked .body .blur{ filter: blur(4px); opacity:.6; }

.actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:4px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font: inherit; font-weight:600; font-size:.88rem;
  border-radius: 999px; padding: 9px 16px;
  border: 1px solid transparent; cursor:pointer; text-decoration:none;
  transition: transform .2s, opacity .2s, background .2s;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--gradient-primary); color:#fff; box-shadow: 0 10px 28px -12px rgba(122,61,204,.8); }
.btn-secondary{ background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.btn-ghost{ background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn.copied{ background: rgba(95,211,154,.16); color: var(--success); border-color: transparent; }
.btn svg{ width:15px; height:15px; }

.empty{ grid-column: 1 / -1; text-align:center; color: var(--text-secondary); padding: 40px 0; }
.card[hidden], .empty[hidden], .preview[hidden]{ display:none; }

/* Sites & animations : aperçu en direct de la démo (page réelle réduite dans une iframe). */
.preview{
  position:relative; display:block; overflow:hidden;
  aspect-ratio: 16 / 10;
  margin: -6px -6px 4px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  text-decoration:none;
}
.preview iframe{
  position:absolute; top:0; left:0;
  width:1280px; height:800px; border:0;
  transform-origin: 0 0; transform: scale(var(--s, .28));
  pointer-events:none;
}
.preview::after{ content:''; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); transition: background .25s; }
.preview:hover::after{ background: rgba(15,17,23,.18); }
.preview-label{
  position:absolute; left:10px; bottom:10px; z-index:1;
  font-size:.75rem; font-weight:600; color:#fff;
  padding: 5px 10px; border-radius:999px;
  background: rgba(15,17,23,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .25s;
}
.preview:hover .preview-label{ transform: translateY(-2px); }
.preview:focus-visible{ outline: 2px solid var(--violet-vibrant); outline-offset: 2px; }
.chip .new{ font-style:normal; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-left:6px; padding:2px 6px; border-radius:999px; background: rgba(95,211,154,.16); color: var(--success); }
.chip[aria-selected="true"] .new{ background: rgba(255,255,255,.2); color:#fff; }
.card.flash{ animation: flash 1.6s ease-out; }
@keyframes flash{ 0%,30%{ border-color: var(--violet-vibrant); box-shadow: 0 0 0 3px rgba(122,61,204,.3); } 100%{ border-color: var(--border); box-shadow:none; } }

.foot{ text-align:center; color: var(--text-secondary); font-size:.82rem; padding: 0 16px 32px; }

@media (prefers-reduced-motion: reduce){ .btn, .chip, .preview-label{ transition:none; } .btn:hover{ transform:none; } .card.flash{ animation:none; } }