/* ===== Tokens ===== */
:root{
  --background:oklch(0.97 0.025 350);
  --foreground:oklch(0.22 0.06 270);
  --card:#fff;
  --primary:oklch(0.72 0.18 0);
  --primary-foreground:#fffafc;
  --navy:#1a1a2e;
  --blossom:oklch(0.82 0.12 350);
  --blossom-soft:oklch(0.93 0.05 350);
  --secondary:oklch(0.93 0.05 350);
  --muted-foreground:oklch(0.45 0.04 270);
  --border:oklch(0.88 0.04 350);
  --destructive:oklch(0.6 0.22 27);
  --gradient-hero:linear-gradient(180deg,oklch(0.97 0.025 350) 0%,oklch(0.92 0.05 350) 100%);
  --gradient-primary:linear-gradient(135deg,oklch(0.72 0.18 0),oklch(0.78 0.14 340));
  --shadow-soft:0 10px 40px -10px oklch(0.72 0.18 0 / .35);
}

/* ===== Base ===== */
*{box-sizing:border-box;border-color:var(--border)}
html,body{margin:0;padding:0;font-family:"Nunito",ui-sans-serif,system-ui,sans-serif;color:var(--foreground)}
body{background:var(--gradient-hero);min-height:100vh}
a{color:inherit}
h1,h2,h3{margin:0}
p{margin:0}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
.icon{width:1.1em;height:1.1em;display:inline-block;vertical-align:-0.15em}

/* ===== Layout ===== */
.page{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}
.topbar{padding:24px 20px 0;text-align:center}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);padding:6px 16px;border-radius:999px;font-size:12px;font-weight:700;color:var(--navy);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pill .icon{color:var(--primary)}

.hero{padding:30px 20px;text-align:center;max-width:28rem;margin:0 auto;width:100%}
.hero h1{font-size:clamp(2.25rem,7vw,3rem);font-weight:800;line-height:1.1;color:var(--navy)}
.lead{margin-top:16px;color:var(--muted-foreground)}
.muted{color:var(--muted-foreground)}
.small{font-size:12px}
.center{text-align:center}

/* ===== Button ===== */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--gradient-primary);color:var(--primary-foreground);
  box-shadow:var(--shadow-soft);border-radius:16px;
  padding:18px 24px;font-size:18px;font-weight:700;
  transition:transform .2s ease,box-shadow .2s ease;
  width:100%;margin-top:32px;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 50px -10px oklch(0.72 0.18 0 / .5)}
.btn-primary:active{transform:translateY(0)}
.pulse{animation:pulse-soft 1.8s ease-in-out infinite}

.error{margin-top:24px;padding:12px 16px;border-radius:12px;background:oklch(0.6 0.22 27 / .1);border:1px solid oklch(0.6 0.22 27 / .3);color:var(--destructive);font-size:14px}

/* ===== Loading ===== */
.loading{padding:40px 20px;text-align:center;max-width:28rem;margin:0 auto;width:100%}
.loader-wrap{position:relative;width:128px;height:128px;margin:0 auto;display:grid;place-items:center}
.loader-glow{position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--blossom));opacity:.3;filter:blur(28px);animation:pulse-soft 1.8s ease-in-out infinite}
.spin{width:64px;height:64px;color:var(--primary);animation:spin-slow 3s linear infinite}
.loading h2{margin-top:32px;font-size:24px;color:var(--navy);font-weight:700}
.bar{margin-top:24px;width:100%;height:12px;background:var(--secondary);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--blossom));transition:width .1s linear}
.progress-label{margin-top:8px;font-weight:700;color:var(--navy);font-size:12px}

/* ===== Gallery ===== */
.gallery{position:relative;z-index:1;max-width:48rem;width:100%;margin:0 auto;padding:8px 20px}
.gallery h2{text-align:center;font-size:clamp(1.5rem,4vw,1.875rem);font-weight:800;color:var(--navy)}
.gallery p{margin-top:8px}
.ba{margin:32px auto 0;max-width:28rem;display:grid;grid-template-columns:1fr 1fr;gap:0}
.ba figure{position:relative;margin:0;border-radius:24px;overflow:hidden;box-shadow:0 20px 25px -5px rgba(0,0,0,.1)}
.ba img{aspect-ratio:1/1;width:100%;object-fit:cover}
.tag{position:absolute;left:16px;top:16px;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;white-space:nowrap;box-shadow:0 4px 6px rgba(0,0,0,.1)}
.tag-dark{background:rgba(0,0,0,.6);color:#fff}
.tag-primary{background:var(--primary);color:var(--primary-foreground)}

/* ===== Footer ===== */
footer{margin-top:auto;border-top:1px solid var(--border);background:rgba(255,255,255,.5);backdrop-filter:blur(8px);padding:20px;text-align:center;font-size:12px;color:var(--muted-foreground)}
footer p{margin-top:4px}
footer p:first-child{margin-top:0}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

/* ===== Modal ===== */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(26,26,46,.7);backdrop-filter:blur(4px)}
.modal-card{position:relative;width:100%;max-width:28rem;background:var(--card);border-radius:24px;padding:24px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.modal-close{position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:999px;color:var(--muted-foreground);font-size:18px}
.modal-close:hover{background:var(--secondary)}
.modal-head{text-align:center;margin-bottom:24px}
.modal-icon{margin:0 auto 12px;width:56px;height:56px;border-radius:999px;background:var(--secondary);display:grid;place-items:center;font-size:24px;color:var(--primary)}
.modal-head h2{font-size:24px;font-weight:800;color:var(--navy)}
.modal-head p{margin-top:8px}
.plans{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.plan{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;border:2px solid var(--border);background:var(--background);border-radius:16px;padding:16px;transition:border-color .15s,background .15s}
.plan:hover{border-color:var(--primary);background:oklch(0.93 0.05 350 / .5)}
.plan-title{font-weight:700;color:var(--navy)}
.plan-price{font-size:20px;font-weight:800;color:var(--primary)}
.plan-primary{position:relative;border:none;margin:0;padding:16px;width:100%;font-size:inherit}
.plan-primary .plan-title,.plan-primary .plan-price{color:var(--primary-foreground)}
.badge{position:absolute;top:-8px;right:16px;background:var(--navy);color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 8px}

/* ===== Cherry blossoms ===== */
.blossoms{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blossom{position:absolute;top:-20px;animation:blossom-fall linear infinite}
.blossom svg{width:100%;height:100%}

/* ===== Animations ===== */
@keyframes blossom-fall{
  0%{transform:translateY(-10vh) translateX(0) rotate(0);opacity:0}
  10%{opacity:1}
  100%{transform:translateY(110vh) translateX(40px) rotate(360deg);opacity:0}
}
@keyframes pulse-soft{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.85}}
@keyframes spin-slow{to{transform:rotate(360deg)}}



/* ===== Result section ===== */
.result-section{padding:24px 20px;max-width:28rem;margin:0 auto;width:100%}
.result-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.result-img{width:100%;border-radius:24px;box-shadow:0 20px 25px -5px rgba(0,0,0,.15);cursor:pointer}
.result-img:hover{transform:scale(1.01);transition:transform .2s}
.result-buttons{display:flex;gap:12px;width:100%}
.btn-download,.btn-share{
  flex:1;padding:14px 8px;border-radius:50px;border:none;
  font-size:0.95rem;cursor:pointer;font-weight:800;
  font-family:inherit;
}
.btn-download{background:#0f3460;color:white}
.btn-share{background:var(--gradient-primary);color:white;box-shadow:var(--shadow-soft)}

/* Fixe le bouton Illimité — texte visible */
.plan.plan-primary {
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
  border: none !important;
}

.plan.plan-primary .plan-title,
.plan.plan-primary .plan-price,
.plan.plan-primary .small {
  color: #ffffff !important;
}

.plan.plan-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.credits-counter {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  margin: 8px 0 0;
}
.credits-counter {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  margin: 8px 0 0;
}