* { margin:0; padding:0; box-sizing:border-box; }
:root { --choco:#3A201B; --creme:#FFF8EE; --or:#C9A35A; --rouge:#8E2F2B; }
html, body { min-height:100%; }
body { font-family:'Quicksand',sans-serif; background:radial-gradient(ellipse at 50% 0%, #6A3A2C 0%, #3A201B 60%); color:#FFF4E6; -webkit-tap-highlight-color:transparent; }
.wrap { max-width:520px; margin:0 auto; padding:20px 16px 40px; }
h1 { font-family:'Playfair Display',serif; font-size:30px; text-align:center; line-height:1.15; }
.sous { font-family:'Dancing Script',cursive; color:#F3D49A; font-size:24px; text-align:center; margin:6px 0 18px; }

/* La carte */
.carte { position:relative; width:100%; aspect-ratio: 3 / 4; border-radius:26px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.45); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 22px; text-align:center; user-select:none; -webkit-user-select:none; }
.carte .deco { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.carte .marque { position:absolute; top:16px; left:0; right:0; font-size:12px; letter-spacing:5px; font-weight:700; opacity:.6; }
.carte .titre { position:relative; font-family:'Playfair Display',serif; font-size:clamp(22px, 6.4vw, 30px); line-height:1.2; margin-bottom:22px; padding:0 6px; }
.zone { position:relative; border-radius:18px; background:rgba(255,255,255,.88); color:var(--choco); box-shadow:inset 0 0 0 3px var(--accent), 0 8px 20px rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.z1 { width:88%; min-height:150px; padding:18px; }
.zones3 { display:flex; gap:10px; width:94%; }
.z3 { flex:1; min-height:120px; padding:10px 6px; }
.secret { font-family:'Playfair Display',serif; font-weight:700; font-size:clamp(22px, 6.8vw, 32px); line-height:1.15; color:#8E2F2B; word-break:break-word; }
.z3 .secret { font-size:clamp(15px, 4.6vw, 22px); }
.zone canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab; transition:opacity .6s; }
.zone.fini canvas { opacity:0; pointer-events:none; }
.carte .ligne { position:relative; margin-top:20px; font-family:'Dancing Script',cursive; font-size:clamp(22px, 6vw, 28px); }
.carte .de { position:relative; margin-top:10px; font-size:15px; font-weight:700; opacity:.75; }

/* Boutons, formulaire */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; padding:14px 22px; font:700 17px 'Quicksand',sans-serif; cursor:pointer; background:#E8C07A; color:#3A201B; box-shadow:0 8px 20px rgba(0,0,0,.3); text-decoration:none; }
.btn.sec { background:rgba(255,248,238,.12); color:#FFF4E6; box-shadow:none; border:1.5px solid rgba(255,248,238,.35); }
.btns { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:16px; }
.bloc { background:rgba(255,248,238,.07); border:1px solid rgba(255,248,238,.14); border-radius:22px; padding:18px; margin:18px 0; }
.bloc h2 { font-size:18px; margin-bottom:12px; color:#F3D49A; }
label { display:block; font-weight:700; font-size:14px; margin:12px 0 6px; }
input[type=text], textarea { width:100%; border-radius:14px; border:1.5px solid rgba(255,248,238,.25); background:rgba(255,248,238,.95); color:#3A201B; font:600 16px 'Quicksand',sans-serif; padding:12px 14px; }
textarea { resize:vertical; min-height:70px; }
.aide { font-size:13px; opacity:.7; margin-top:4px; }
.themes { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.themes button { border-radius:16px; border:2px solid transparent; padding:10px 4px; font:700 13px 'Quicksand',sans-serif; color:#3A201B; cursor:pointer; line-height:1.2; }
.themes button span { display:block; font-size:22px; margin-bottom:2px; }
.themes button.on { border-color:#E8C07A; box-shadow:0 0 0 3px rgba(232,192,122,.4); }
.modes { display:flex; gap:8px; }
.modes button { flex:1; border-radius:14px; padding:10px; border:1.5px solid rgba(255,248,238,.3); background:transparent; color:#FFF4E6; font:700 14px 'Quicksand',sans-serif; cursor:pointer; }
.modes button.on { background:#E8C07A; color:#3A201B; border-color:#E8C07A; }
.cases3 { display:flex; gap:8px; } .cases3 input { flex:1; min-width:0; }
.resultat { display:none; } .resultat.on { display:block; }
.lien { display:flex; gap:8px; } .lien input { flex:1; font-size:13px; }
.qr { background:#fff; border-radius:16px; padding:14px; width:200px; margin:14px auto 0; }
.qr svg { width:100%; height:auto; display:block; }
.pied { text-align:center; font-size:12px; opacity:.55; margin-top:26px; line-height:1.6; }
.pied a { color:inherit; }
.consigne { text-align:center; margin:16px 0 0; font-weight:700; font-size:16px; opacity:.9; }
.bravo { display:none; text-align:center; margin-top:18px; } .bravo.on { display:block; animation:pop .5s ease; }
@keyframes pop { from { transform:scale(.8); opacity:0 } to { transform:scale(1); opacity:1 } }
#confetti { position:fixed; inset:0; pointer-events:none; z-index:10; }