.personalized-poem-page {
  background: radial-gradient(circle at 50% 0, #34204f 0, #1d173b 38%, #07152f 100%);
}

.personalized-hero {
  position: relative;
  min-height: clamp(460px, 47vw, 720px);
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 202, 96, .42);
}

.personalized-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 37% center;
}

.personalized-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 12, 34, .08), rgba(3, 12, 34, .55) 50%, rgba(3, 12, 34, .96));
}

.personalized-hero-copy {
  position: relative;
  z-index: 1;
  width: min(680px, 48%);
  margin: 0 clamp(24px, 7vw, 120px) 0 auto;
  color: #fffaf1;
}

.personalized-hero-copy h1 {
  margin: .25rem 0 1.2rem;
  font-family: Georgia, serif;
  font-size: clamp(3rem, 5.7vw, 6.8rem);
  line-height: .93;
  letter-spacing: -.045em;
}

.personalized-hero-copy h1 em {
  display: block;
  color: #ff77b3;
  font-weight: 400;
}

.personalized-hero-copy > p:last-child {
  max-width: 610px;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.65;
}

.personalized-content {
  width: min(1120px, calc(100% - 32px));
  margin: clamp(32px, 6vw, 78px) auto;
}

.name-panel,
.generated-poem {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 205, 108, .48);
  border-radius: 32px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .3);
}

.name-panel {
  padding: clamp(30px, 6vw, 68px);
  text-align: center;
  color: #fffaf1;
  background: linear-gradient(135deg, rgba(30, 46, 91, .96), rgba(52, 25, 70, .96));
}

.name-panel::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 75, 148, .13);
  filter: blur(4px);
  top: -190px;
  right: -90px;
}

.name-panel-heart {
  display: inline-grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 205, 108, .6);
  border-radius: 50%;
  color: #ff6ead;
  font-size: 2.7rem;
}

.name-panel h2 {
  max-width: 820px;
  margin: .3rem auto 1rem;
  font-family: Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1.08;
}

.name-panel > p:not(.eyebrow) { color: #dbe2f3; }

#poemForm { max-width: 760px; margin: 30px auto 0; text-align: left; }
#poemForm label { display: block; margin: 0 0 9px 5px; font-weight: 700; }
.name-entry { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px; background: #fff; border-radius: 999px; }
.name-entry input { min-width: 0; padding: 0 20px; border: 0; outline: 0; color: #172044; background: transparent; font: inherit; font-size: 1.08rem; }
.name-entry button, .poem-actions button { border: 1px solid rgba(255, 205, 108, .6); border-radius: 999px; padding: 15px 24px; color: #fff; background: linear-gradient(135deg, #d52970, #9d1759); font: inherit; font-weight: 800; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.name-entry button:hover, .poem-actions button:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(213, 41, 112, .3); }
#poemForm small { display: block; margin: 9px 5px 0; color: #bfc9e2; }
.form-error { min-height: 1.5em; margin: 7px 5px 0; color: #ffb4cf; font-weight: 700; }

.generated-poem {
  margin-top: 34px;
  padding: clamp(38px, 7vw, 82px) clamp(25px, 8vw, 100px);
  color: #3d2632;
  text-align: center;
  background-color: #fff9ec;
  background-image: linear-gradient(rgba(255, 251, 241, .82), rgba(255, 251, 241, .82)), url("../images/poemes-amour/poeme-personnalise-fond.webp");
  background-position: center;
  background-size: cover;
}

.generated-poem[hidden] { display: none; }
.generated-poem::before, .generated-poem::after { content: ""; position: absolute; width: 170px; height: 170px; border: 1px solid rgba(148, 91, 46, .22); transform: rotate(45deg); }
.generated-poem::before { left: -110px; top: -110px; }
.generated-poem::after { right: -110px; bottom: -110px; }
.paper-ornament { color: #b38746; font-size: 2.5rem; }
.generated-poem .eyebrow { color: #b92767; }
.generated-poem h2 { margin: .25rem 0 1.6rem; font: 700 clamp(2.4rem, 5vw, 4.8rem)/1 Georgia, serif; color: #251b2c; }
.generated-poem h2 span { color: #c52265; font-style: italic; }
.generated-poem-text { max-width: 720px; margin: auto; font: 400 clamp(1.16rem, 2vw, 1.48rem)/1.85 Georgia, serif; }
.generated-poem-text p { margin: 0 0 1.3rem; }
.generated-signature { margin: 2rem 0; color: #9d315b; font: italic 1.35rem Georgia, serif; }
.poem-actions { position: relative; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.poem-actions button { color: #6c2947; background: transparent; border-color: rgba(108, 41, 71, .35); }
.poem-actions button.primary { color: #fff; background: linear-gradient(135deg, #d52970, #9d1759); border-color: transparent; }
.poem-status { min-height: 1.5em; color: #8f2853; font-weight: 700; }
.inspiration-note { display: flex; align-items: center; justify-content: center; gap: 26px; margin: 34px 0 0; padding: 24px; border: 1px solid rgba(255, 205, 108, .35); border-radius: 24px; text-align: center; color: #e6e9f4; background: rgba(18, 29, 66, .72); }
.inspiration-note span { color: #ffca60; }
.inspiration-note p { margin: 0; line-height: 1.65; }

@media (max-width: 760px) {
  .personalized-hero { min-height: 610px; align-items: end; }
  .personalized-hero > img { height: 55%; top: 0; object-position: 35% center; }
  .personalized-hero::after { background: linear-gradient(0deg, #07152f 8%, rgba(7, 21, 47, .97) 42%, rgba(7, 21, 47, .08) 78%); }
  .personalized-hero-copy { width: auto; margin: 0; padding: 0 24px 38px; }
  .personalized-hero-copy h1 { font-size: clamp(2.8rem, 14vw, 4.7rem); }
  .personalized-content { width: min(100% - 20px, 1120px); margin-top: 20px; }
  .name-panel, .generated-poem { border-radius: 23px; }
  .name-entry { grid-template-columns: 1fr; border-radius: 22px; }
  .name-entry input { min-height: 52px; text-align: center; }
  .name-entry button { width: 100%; }
  .generated-poem-text { line-height: 1.72; }
  .poem-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .poem-actions button { padding: 13px 10px; }
  .inspiration-note { gap: 10px; }
}

@media print {
  .topbar, .personalized-hero, .name-panel, .inspiration-note, footer, .poem-actions { display: none !important; }
  .personalized-content { width: 100%; margin: 0; }
  .generated-poem { display: block !important; margin: 0; min-height: 90vh; box-shadow: none; border: 1px solid #b38746; }
}