/* Thème Classique : fond lin, papier ivoire, liseré doré, pétales. */
:root{
  --display: "Cormorant Garamond", Garamond, Georgia, serif;
  --serif:   "Cormorant Garamond", Garamond, Georgia, serif;
  --script:  "Great Vibes", "Snell Roundhand", cursive;
  --texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .35  0 0 0 0 .3  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --aging: none;
  --hint-color: color-mix(in srgb, var(--ink) 75%, transparent);
  --on-accent:  #fffaf2;
  --paper-shadow: rgba(120,100,70,.12);
  --fold: rgba(120,100,70,.10);
  --drop: rgba(70,50,30,.35);
}
body{
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb,var(--bg) 80%,#fff) 0%, var(--bg) 75%),
    var(--bg);
}
h1{font-weight:500;letter-spacing:.03em}
.to{font-size:2.2rem}
.from{font-size:2.3rem}
.msg{font-size:1.25rem}
.btn{font-family:var(--serif);font-weight:600;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;border-radius:999px}
.btn-yes{box-shadow:0 8px 20px -10px var(--accent)}
.btn-yes:hover{box-shadow:0 12px 26px -10px var(--accent)}
.note{background:rgba(255,255,255,.6)}
.card{box-shadow:0 40px 80px -30px var(--drop), 0 6px 18px rgba(70,50,30,.12)}
.card::before{inset:14px;border-width:1px;outline:1px solid color-mix(in srgb,var(--gold) 40%,transparent);outline-offset:4px}
.hint{font-size:1.3rem}
.intro p{font-style:italic;color:var(--ink)}

/* Pétales qui tombent (créés par effects.js) */
.decor i{
  position:absolute;top:-6vh;left:var(--x);
  width:calc(14px * var(--s));height:calc(10px * var(--s));
  border-radius:80% 0 80% 0;
  background:linear-gradient(135deg, color-mix(in srgb,var(--liner) 70%,#fff), var(--liner));
  opacity:.75;
  animation:cl-fall var(--d) linear var(--t) infinite;
}
@keyframes cl-fall{
  0%  {transform:translate(0,0) rotate(0deg)}
  25% {transform:translate(28px,28vh) rotate(90deg)}
  50% {transform:translate(-18px,56vh) rotate(180deg)}
  75% {transform:translate(24px,84vh) rotate(270deg)}
  100%{transform:translate(0,112vh) rotate(360deg)}
}