/* styles.css */
:root{
  --bg: #F7F3EE;         /* ivoire */
  --text: #5A101B;       /* bordeaux profond (lisible) */
  --text-soft: rgba(90,16,27,.78);
  --card: rgba(247,243,238,.74);
  --stroke: rgba(90,16,27,.12);
  --shadow: 0 18px 55px rgba(0,0,0,.10);
}

*{ box-sizing: border-box; }

html, body { height: 100%; }

body{
  margin: 0;
  background: radial-gradient(1200px 800px at 50% 30%, rgba(255,255,255,.55), rgba(255,255,255,0)) , var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

/* Roses décoratives */
.rose{
  position: absolute;
  z-index: 5; /* devant la carte */
  pointer-events: none;
  user-select: none;
  opacity: .95;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.18));
}

.rose--tl{
  top: -60px;
  left: -60px;
  width: min(260px, 30vw);
}

.rose--tl{
  top: -20px;
  left: -20px;
  transform: rotate(-8deg);
}

.rose--br{
  bottom: -80px;
  right: -60px;
  width: min(280px, 32vw);
}

/* Layout */
.wrap{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 50px 16px; /* plus d’air */
  position: relative;  /* clé pour absolute */
  z-index: 1;
}

.card{
  width: min(860px, 100%);
  text-align: center;
  padding: clamp(22px, 4vw, 46px);
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.card{
  position: relative;
  z-index: 3;
}

.header{
  margin-bottom: 18px;
}

.title{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0 0 10px 0;
  font-size: clamp(28px, 4.3vw, 56px);
  line-height: 1.1;
}

.subtitle{
  margin: 0 auto;
  max-width: 56ch;
  color: var(--text-soft);
  font-size: clamp(14px, 1.9vw, 18px);
}

.content{
  margin: 18px auto 0;
  max-width: 70ch;
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(90,16,27,.92);
}

.content p{
  margin: 14px 0;
}

/* petits passages poétiques */
.poem{
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: rgba(90,16,27,.92);
}

/* équations mises en valeur */
.equations{
  margin: 18px auto;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px dashed rgba(90,16,27,.20);
  background: rgba(255,255,255,.35);
}

.eq{
  font-weight: 600;
  letter-spacing: .4px;
}

.note{
  color: rgba(90,16,27,.68);
  font-size: .95em;
  margin-left: 6px;
}

/* bloc émotion */
.highlight{
  margin: 18px auto;
  padding: 16px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(90,16,27,.10);
}

.farewell{
  margin-top: 20px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15em;
  font-weight: 600;
}

.closing{
  color: rgba(90,16,27,.85);
}

.footer{
  margin-top: 10px;
}

.footer{
  position: relative;
  margin-top: 18px;
  padding-bottom: 90px; /* réserve de la place pour la rose */
}

.end-rose{
  position: absolute;
  right: -40px;
  bottom: -70px; /* colle la rose sous la fin du texte */
  width: min(220px, 40vw);
  pointer-events: none;
  user-select: none;
  opacity: .95;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.18));
}

.end-rose img{
  width: 100%;
  height: auto;
  display: block;
}

.signature{
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: rgba(90,16,27,.85);
  font-size: 1.05em;
}

/* LOCK overlay */
.lock{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(247,243,238,.92);
  backdrop-filter: blur(6px);
}

.lock__card{
  width: min(420px, 100%);
  border-radius: 22px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(90,16,27,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.12);
  padding: 22px;
  text-align: center;
}

.lock__title{
  margin: 0 0 6px;
  font-family: "Playfair Display", Georgia, serif;
  color: #5A101B;
  font-size: 28px;
}

.lock__text{
  margin: 0 0 14px;
  color: rgba(90,16,27,.75);
}

.lock__form{
  display: grid;
  gap: 10px;
}

.lock__input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(90,16,27,.18);
  background: rgba(255,255,255,.7);
  outline: none;
  font-size: 16px;
}

.lock__input:focus{
  border-color: rgba(90,16,27,.32);
}

.lock__btn{
  padding: 12px 14px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  background: rgba(90,16,27,.92);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}

.lock__error{
  margin: 6px 0 0;
  min-height: 18px;
  color: rgba(139,30,45,.95);
}

.lock__rose{
  width: 110px;
  height: auto;
  display: block;
  margin: -8px auto 10px;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.16));
  opacity: .95;
}

.lock__hint{
  margin: 0 0 12px;
  color: rgba(90,16,27,.72);
  font-size: 14px;
}

/* End button */
.end-btn{
  margin: 18px auto 0;
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(90,16,27,.18);
  background: rgba(255,255,255,.45);
  color: rgba(90,16,27,.9);
  cursor: pointer;
  font-weight: 600;
}
.end-btn:hover{
  background: rgba(255,255,255,.65);
}

/* Responsive tweaks */
@media (max-width: 520px){
    .rose--tl{
    top: -25px;
    left: -25px;
    width: 140px;
  }

  .rose--br{
    bottom: -28px;
    right: -26px;
    width: 170px;
    opacity: .88;
  }

  .card{
    border-radius: 18px;
  }

  .content{
    max-width: 60ch;
  }
}

/* Respect des préférences utilisateur */
@media (prefers-reduced-motion: reduce){
  * { scroll-behavior: auto !important; }
}