* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.4rem; }
body { background: #000; color: #fff; }
p { line-height: 140%;}

.screen { position: relative; width: 100vw; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; text-align: center; padding: 2rem; flex-direction: column; }
.screen::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.5); z-index: -1; }
.center-content { max-width: 1200px; }


/* THEO : les images */
.screen.home::before    { background-image: url('pic_home.jpg'); }
.screen.options::before { background-image: url('pic_activities.jpg'); }
.screen.record1::before { background-image: url('pic_record1.jpg'); }
.screen.record2::before { background-image: url('pic_record2.jpg'); }
.screen.thanks::before  { background-image: url('pic_thanks.jpg'); }
/* THEO */


h1 { font-size: 3rem; margin-bottom: 1rem; }
p { margin-bottom: 1rem; }
p.consigne {font-size: 0.6em; font-style: italic;}

button.primary { background: #55ff7f; border: none; color: #000; margin: 1rem 0; padding: 1rem 2rem; font-size: 1.1rem; border-radius: 999px; cursor: pointer; }
button.primary:hover { background: #339c4d; }
button.secondary { background: #ff6955; border: none; color: #000; margin: 1rem 0; padding: 1rem 2rem; font-size: 1.1rem; border-radius: 999px; cursor: pointer; }
button.secondary:hover { background: rgb(79, 26, 26) }
#home button.secondary { font-size: 0.5em; padding: 0.5rem 0.7rem; margin: 0; }

.bottom-center { position: absolute; bottom: 25%; left: 50%; transform: translateX(-50%); }
.top-left { position: absolute; top: 1rem; left: 1rem; }
.options-list { text-align: left; background: rgba(0,0,0,0.5); padding: 1rem 1.5rem; border-radius: 1rem; margin-top: 1rem; }
.options-list label { display: flex; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem; }

.counter { font-size: 3rem; margin-top: 1rem; }

.vu-meter { width: 80%; max-width: 400px; height: 20px; border-radius: 999px; border: 1px solid #fff; margin: 1rem auto; overflow: hidden; background: rgba(0,0,0,0.4); }
.vu-fill { height: 100%; width: 0%; background: white; transition: width 0.01s linear; }

.buttons-row { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }

.small-text { font-size: 0.85rem; opacity: 0.8; margin-top: 0.5rem; }

.screen.home #home {
    opacity: 0;
}
#home {
    transition: opacity 1s linear;
}