/* =========================================================
   PAPYRUS — Salon Sophie
   Coin éphémère : un mot laissé à la plume sur un papyrus,
   qui s'efface de lui-même après 24 heures.
   ========================================================= */

.papyrus-section{ background:linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%); }
.papyrus-intro{ text-align:center; max-width:620px; margin:0 auto 40px; }
.papyrus-intro h2{ font-size:clamp(1.6rem,3vw,2.1rem); margin:10px 0 12px; }
.papyrus-intro p{ color:var(--ink-soft); }

.papyrus-wrap{ display:grid; gap:40px; max-width:760px; margin:0 auto; }

/* ---------------- LE ROULEAU ---------------- */
.papyrus-scroll{
  position:relative;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(139,105,60,.16), transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(139,105,60,.14), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(139,105,60,.08), transparent 70%),
    #e8d9b8;
  border-radius:6px;
  box-shadow:0 24px 50px -24px rgba(43,32,25,.45), inset 0 0 60px rgba(120,88,44,.15);
  padding:38px 34px 30px;
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  clip-path:polygon(
    0% 2%, 3% 0%, 8% 1.5%, 14% 0.3%, 20% 1.8%, 27% 0%, 34% 1.2%, 41% 0.2%, 48% 1.6%,
    55% 0.4%, 62% 1.4%, 69% 0.1%, 76% 1.8%, 83% 0.3%, 90% 1.5%, 96% 0.2%, 100% 2%,
    100% 98%, 96% 100%, 90% 98.4%, 83% 99.7%, 76% 98.2%, 69% 99.9%, 62% 98.6%,
    55% 99.8%, 48% 98.4%, 41% 99.8%, 34% 98.8%, 27% 100%, 20% 98.2%, 14% 99.7%,
    8% 98.5%, 3% 100%, 0% 98%
  );
}
.papyrus-rod{
  position:absolute; left:-10px; right:-10px; height:16px;
  background:linear-gradient(180deg,#8a6825,#5c4519 50%,#3f2f10);
  border-radius:8px;
  box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.papyrus-rod::before, .papyrus-rod::after{
  content:''; position:absolute; top:-3px; width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e9cf94, #8a6825 70%);
}
.papyrus-rod::before{ left:-6px; }
.papyrus-rod::after{ right:-6px; }
.papyrus-rod.top{ top:-8px; }
.papyrus-rod.bottom{ bottom:-8px; }

/* ---------------- LE SCEAU (état fermé) ---------------- */
.papyrus-seal{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  cursor:pointer;
  padding:20px;
  user-select:none;
}
.papyrus-seal[hidden]{ display:none; }
.seal-ring{
  width:78px; height:78px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 28%, #c0503f, var(--terracotta-deep) 60%, #6e3223 100%);
  box-shadow:0 10px 22px -8px rgba(110,50,35,.6), inset 0 -4px 8px rgba(0,0,0,.25), inset 0 3px 6px rgba(255,255,255,.15);
  transition:transform .25s ease;
}
.papyrus-seal:hover .seal-ring{ transform:scale(1.06) rotate(-4deg); }
.seal-glyph{ font-size:1.9rem; font-family:var(--serif); font-style:italic; color:rgba(255,235,220,.95); }
.seal-text{ font-family:var(--serif); font-style:italic; color:#5c4519; font-size:.92rem; }

/* ---------------- LE FORMULAIRE (état ouvert) ---------------- */
.papyrus-form{ display:flex; flex-direction:column; gap:6px; animation:papyrusUnroll .5s ease; }
.papyrus-form[hidden]{ display:none; }
@keyframes papyrusUnroll{ from{ opacity:0; transform:scaleY(.85); } to{ opacity:1; transform:scaleY(1); } }
.pf-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:#6e5323; margin-top:10px; font-weight:600; }
.papyrus-form input, .papyrus-form textarea{
  background:transparent;
  border:none;
  border-bottom:1.5px dashed rgba(94,69,25,.4);
  font-family:var(--serif);
  font-size:1.15rem;
  color:#3c2c12;
  padding:8px 2px;
  resize:none;
  cursor:none; /* remplacé par la plume animée en JS (desktop) */
}
.papyrus-form textarea{ min-height:90px; line-height:1.5; }
.papyrus-form input::placeholder, .papyrus-form textarea::placeholder{ color:rgba(94,69,25,.45); font-style:italic; }
.papyrus-form input:focus, .papyrus-form textarea:focus{ outline:none; border-bottom-color:var(--terracotta-deep); }

.papyrus-actions{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:14px; }
.papyrus-count{ font-size:.74rem; color:#6e5323; }
.papyrus-actions-btns{ display:flex; gap:10px; margin-left:auto; }
.pf-cancel{ background:none; border:none; color:#6e5323; font-size:.86rem; text-decoration:underline; cursor:pointer; padding:10px 4px; }
.pf-submit{
  background:var(--terracotta-deep,var(--terracotta)); color:#fff; border:none;
  padding:12px 22px; border-radius:100px; font-size:.88rem; cursor:pointer;
  box-shadow:0 8px 18px -8px rgba(138,90,60,.6);
}

/* Plume qui suit le curseur pendant l'écriture (desktop) */
.papyrus-feather{
  position:fixed;
  z-index:3000;
  font-size:26px;
  pointer-events:none;
  transform:translate(-4px,-24px) rotate(-25deg);
  transition:opacity .15s ease;
  opacity:0;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
.papyrus-feather.active{ opacity:1; }

/* ---------------- LES MOTS LAISSÉS ---------------- */
.papyrus-notes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.papyrus-empty{ grid-column:1/-1; text-align:center; color:var(--ink-soft); font-style:italic; font-size:.9rem; }
.papyrus-note{
  position:relative;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(139,105,60,.14), transparent 60%),
    #f1e4c4;
  border-radius:4px;
  padding:18px 18px 14px;
  box-shadow:0 10px 22px -14px rgba(43,32,25,.5);
  transform:rotate(var(--tilt,-1deg));
  animation:papyrusNoteIn .4s ease;
  transition:opacity .5s ease, transform .5s ease;
}
@keyframes papyrusNoteIn{ from{ opacity:0; transform:translateY(10px) rotate(var(--tilt,-1deg)); } to{ opacity:1; transform:translateY(0) rotate(var(--tilt,-1deg)); } }
.papyrus-note.expiring{ opacity:0; transform:scale(.92) rotate(var(--tilt,-1deg)); }
.papyrus-note p{ font-family:var(--serif); font-style:italic; color:#3c2c12; font-size:.98rem; line-height:1.5; margin:0 0 12px; }
.papyrus-note .pn-foot{ display:flex; align-items:center; justify-content:space-between; font-size:.7rem; color:#7a5f2e; }
.papyrus-note .pn-name{ font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.papyrus-note .pn-time-bar{ position:absolute; left:0; bottom:0; height:3px; background:rgba(138,90,60,.4); border-radius:0 0 4px 4px; transition:width 1s linear; }

@media (max-width:640px){
  .papyrus-scroll{ padding:30px 20px 24px; }
  .papyrus-form input, .papyrus-form textarea{ cursor:text; } /* pas de plume custom sur tactile */
}