/* YM Prompt Kit v1 — CSS commun
   Objectif : composant “prompt visualizer” réutilisable dans les articles
   - Pas dépendant Tailwind
   - Ne repose pas sur <p>/<h*> (pour éviter transformContent())
*/

.ym-promptkit{
  --ym-black:#0F172A;
  --ym-dark:#1E293B;
  --ym-base:#64748B;
  --ym-light:#CBD5E1;
  --ym-line:#E2E8F0;
  --ym-bg:#F8FAFC;
  --ym-white:#FFFFFF;

  --ym-accent:#EA580C;
  --ym-accent-hover:#C2410C;
  --ym-accent-soft:#FFF7ED;

  --ym-success:#10B981;
  --ym-success-soft:rgba(16,185,129,.15);

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ym-prompt{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--ym-line);
  background:rgba(255,255,255,.95);
  box-shadow:0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03);
  backdrop-filter: blur(4px);
  margin-top: 40px !important;
}

.ym-prompt::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(1200px 300px at 20% 0%, rgba(234,88,12,.10), transparent 60%),
    radial-gradient(900px 260px at 80% 20%, rgba(59,130,246,.08), transparent 55%),
    linear-gradient(90deg, rgba(234,88,12,.14), rgba(16,185,129,.10), rgba(59,130,246,.10));
  filter:blur(16px);
  opacity:.55;
  pointer-events:none;
}

.ym-prompt__head{
  position:relative;
  z-index:1;
  display:flex;
  gap:16px;
  justify-content:space-between;
  align-items:flex-start;
  padding:18px 18px 14px 18px;
}

.ym-prompt__title{
  font-weight:900;
  color:var(--ym-black);
  letter-spacing:-.02em;
  line-height:1.15;
  font-size:1.25rem;
}

.ym-prompt__desc{
  margin-top:8px;
  color:var(--ym-base);
  line-height:1.55;
  font-size:.95rem;
  max-width:60ch;
}

.ym-prompt__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--ym-accent-soft);
  border:1px solid rgba(234,88,12,.12);
  flex:0 0 auto;
  user-select:none;
}

.ym-prompt__dot{
  width:8px;height:8px;border-radius:999px;
  background:var(--ym-accent);
  box-shadow:0 0 0 4px rgba(234,88,12,.15);
  animation:ym_pulse 1.2s ease-in-out infinite;
}

@keyframes ym_pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.15);opacity:.7}
}

.ym-prompt__badgeText{
  font-size:11px;
  font-weight:800;
  color:var(--ym-accent);
  text-transform:uppercase;
  letter-spacing:.08em;
  white-space:nowrap;
}

.ym-prompt__body{
  position:relative;
  z-index:1;
  padding:0 18px 18px 18px;
}

.ym-prompt__box{
  position:relative;
  border:1px solid var(--ym-line);
  background:rgba(248,250,252,.8);
  border-radius:12px;
  overflow:hidden;
}

.ym-prompt__label{
  position:absolute;
  top:11px;
  left:14px;
  padding:3px 8px;
  background:var(--ym-white);
  border:1px solid var(--ym-line);
  border-radius:8px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ym-base);
}

/* Bouton orange + vague continue */
.ym-wave-btn{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(57,50,44,.20);
  background: #EA580C;              /* orange */
  color: #fff;
  text-decoration: none;
  transform: translateZ(0);         /* rendu plus clean */
}

/* Vague lumineuse qui traverse */
.ym-wave-btn::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 30% 50%,
      rgba(255,255,255,.35) 0%,
      rgba(255,255,255,.18) 22%,
      rgba(255,255,255,0) 55%);
  transform: translateX(-60%) rotate(12deg);
  animation: ymWaveSweep 2.4s linear infinite;
  pointer-events:none;
  mix-blend-mode: screen;           /* glow subtil */
}

/* Micro-rafraîchissement au survol */
.ym-wave-btn:hover{
  filter: brightness(1.03);
}

.ym-wave-btn:focus-visible{
  outline: 3px solid rgba(234,88,12,.35);
  outline-offset: 3px;
}

@keyframes ymWaveSweep{
  0%   { transform: translateX(-70%) rotate(12deg); opacity: .65; }
  50%  { opacity: .9; }
  100% { transform: translateX(70%)  rotate(12deg); opacity: .65; }
}

/* Respect accessibilité : réduit l'animation si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce){
  .ym-wave-btn::before{ animation: none; opacity: .25; }
}

.ym-prompt__textarea{
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  width:100%;
  border:0;
  outline:none;
  resize:vertical;
  padding:40px 18px 72px 18px; /* espace pour le bouton */
  line-height:1.6;
  color:var(--ym-dark);
  background:transparent;
  font-size:14px;
  min-height:420px;
}

[data-ym-size="pro"] .ym-prompt__textarea{ min-height:500px; max-height:700; }

.ym-prompt__copy{
  position:absolute;
  right:14px;
  bottom:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  background:var(--ym-accent);
  color:#fff;
  font-weight:900;
  font-size:13px;
  box-shadow:0 10px 20px rgba(234,88,12,.18);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.ym-prompt__copy:hover{
  background:var(--ym-accent-hover);
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(234,88,12,.22);
}
.ym-prompt__copy:active{ transform:translateY(0); }
.ym-prompt__copy:disabled{ opacity:.75; cursor:not-allowed; transform:none; }

.ym-prompt__copyIcon{
  width:16px;height:16px;
  display:inline-block;
}

.ym-prompt__statusRow{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--ym-base);
  font-size:12px;
  font-weight:700;
}

.ym-prompt__status{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.ym-prompt__miniTag{
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  background:var(--ym-dark);
  padding:3px 7px;
  border-radius:8px;
}

.ym-prompt__signature{
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ym-light);
}

/* Animation copy */
.ym-prompt.is-copied .ym-prompt__box{
  box-shadow:0 0 0 4px var(--ym-success-soft);
  border-color:rgba(16,185,129,.35);
}

.ym-prompt__copy.is-copied{
  background:var(--ym-success);
  box-shadow:0 10px 20px rgba(16,185,129,.20);
}

.ym-prompt.is-copied::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(16,185,129,.10), transparent);
  transform:translateX(-100%);
  animation:ym_scan .75s ease;
  pointer-events:none;
}

@keyframes ym_scan{
  0%{transform:translateX(-100%);opacity:0}
  15%{opacity:1}
  100%{transform:translateX(100%);opacity:0}
}

.ym-prompt__copy:focus-visible{
  outline:3px solid rgba(234,88,12,.35);
  outline-offset:2px;
}