@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cormorant+Garamond:ital,wght@0,400;1,400&display=swap');

:root { color-scheme:dark; --or:#e7c785; --violet:#d5b5ff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(ellipse at 50% 20%,#302033,#100d17 75%); color:#f5e9d1; }
.atelier { width:min(100%,1536px); margin:auto; padding:20px 18px 38px; }
.entete { position:relative; text-align:center; padding:10px 0 22px; }
.retour { position:absolute; top:0; left:0; color:var(--or); font:14px Georgia,serif; text-decoration:none; }
.retour:hover { text-decoration:underline; }
h1 { font:400 clamp(27px,3.6vw,49px) Cinzel,Georgia,serif; color:#f1d6a2; margin:28px 0 8px; text-shadow:0 2px 15px #000; }
.entete p { font:italic clamp(19px,2vw,25px) 'Cormorant Garamond',Georgia,serif; margin:0; }
.scene { position:relative; width:100%; margin:auto; border:2px solid #94703b; box-shadow:0 0 0 5px #241a17,0 22px 60px #000a; overflow:hidden; }
.decor { display:block; width:100%; height:auto; }
.zone { position:absolute; display:block; border:1px solid transparent; border-radius:12px; transition:box-shadow .25s,background .25s,border-color .25s; outline-offset:3px; }
.zone-ecriture { left:46%; top:48%; width:27%; height:24%; }
.zone-croquis {
  left: 8%;
  top: 50%;
  width: 30%;
  height: 20%;
}
.zone-croquis .etiquette {
  bottom: 35px;
}
.zone:hover,.zone:focus-visible { background:#e6c56a18; border-color:#f4d78a9c; box-shadow:0 0 22px #f6d37d88,inset 0 0 26px #e9b75e66; }
.zone-croquis:hover,.zone-croquis:focus-visible { background:#9d62d01b; border-color:#d7b0ffb3; box-shadow:0 0 24px #b888ff99,inset 0 0 25px #a56fe866; }
.etiquette { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); white-space:nowrap; padding:9px 13px; border:1px solid #b68c50; background:#1c1422e8; color:#f6dfa7; font:clamp(11px,1.2vw,17px) Cinzel,Georgia,serif; text-align:center; box-shadow:0 3px 15px #000b; }
.zone-croquis .etiquette { border-color:#9772b2; color:#e3c6ff; }
.indication { text-align:center; font:italic 19px 'Cormorant Garamond',Georgia,serif; color:#cdbb9f; }
.liens-mobiles { display:none; }
@media(max-width:700px) {
 .atelier { padding:12px 10px 26px; }
 .entete { padding-top:26px; }
 .scene { border-width:1px; }
 .zone { display:none; }
 .liens-mobiles { display:grid; grid-template-columns:1fr; gap:12px; margin-top:18px; }
 .liens-mobiles a { display:block; padding:15px 12px; border:1px solid #ae8650; background:linear-gradient(#3b2731,#211723); color:#f3d9a5; text-align:center; font:16px Cinzel,Georgia,serif; text-decoration:none; }
 .liens-mobiles a:last-child { border-color:#9d77b8; color:#e1c2ff; }
 .indication { display:none; }
}
@media(prefers-reduced-motion:reduce) { .zone { transition:none; } }