/* BASE */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:sans-serif;
}

body{
  background:#c6991ebb;
  display:flex;
  justify-content:center;
}

.app{
  width:100%;
  max-width:480px;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px;
}

.light-box{
  width:200px;
  height:200px;
  border-radius:20px;
  background:#ffbf00;
  box-shadow:0 0 40px rgba(255,191,0,0.8);
  margin-bottom:20px;
  transition:all 0.3s;
}

/* CONTROLS */
.controls{
  text-align:center;
  width:100%;
}

h3{margin:10px 0;}

.colors button{
  width:40px;
  height:40px;
  border:none;
  margin:4px;
  border-radius:50%;
}

/* couleurs */
button[data-color="amber"]{background:#ffbf00;}
button[data-color="orange"]{background:#ff6a00;}
button[data-color="gold"]{background:#ffd700;}
button[data-color="peach"]{background:#ff9a76;}
button[data-color="red"]{background:#ff3b1f;}
button[data-color="copper"]{background:#b87333;}

button{
  padding:10px;
  border:none;
  border-radius:10px;
  margin-top:5px;
}

input[type="range"], input[type="number"]{
  width:80%;
}

/* switch */
.switch{
  display:inline-block;
  width:50px;
  height:25px;
  position:relative;
}
.switch input{display:none;}
.switch span{
  position:absolute;
  width:100%;
  height:100%;
  background:#ccc;
  border-radius:25px;
}
.switch span::before{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  background:white;
  top:2.5px;
  left:3px;
  border-radius:50%;
  transition:0.3s;
}
.switch input:checked + span::before{
  transform:translateX(24px);
}

/* DARK */
.dark{
  background:#111;
  color:white;
}

/* FULLSCREEN */
.fullscreen-overlay{
  position:fixed;
  inset:0;
  background:black;
  display:none;
  z-index:9999;
}

.fullscreen-overlay.active{
  display:block;
}

#fullscreenLight{
  width:100%;
  height:100%;
}

/* =========================
   🔥 EFFETS (FIX IMPORTANT)
   → appliqués sur lightBox ET fullscreen
========================= */

.pulse,
.breath-deep,
.wave,
.flicker,
.sparkle,
.gradient,
.lava,
.sunrise,
.fireflow,
.zoom{
  width:100%;
  height:100%;
}

/* respiration */
.pulse{animation:pulse 3s infinite;}
.breath-deep{animation:breathDeep 6s infinite;}

/* onde */
.wave{animation:wave 3s infinite;}

/* bougie */
.flicker{animation:flicker 0.15s infinite;}

/* scintillement */
.sparkle{animation:sparkle 1s infinite;}

/* gradient */
.gradient{
  background:linear-gradient(45deg,#ffbf00,#ff6a00,#ffbf00);
  background-size:200% 200%;
  animation:gradientMove 5s infinite;
}

/* lava */
.lava{
  background:linear-gradient(60deg,#ff6a00,#ff3b1f,#ffbf00);
  background-size:300% 300%;
  animation:lava 6s infinite;
}

/* sunrise */
.sunrise{
  background:linear-gradient(to top,#ff3b1f,#ffbf00,#fff2cc);
  animation:sunrise 8s infinite;
}

/* feu */
.fireflow{
  background:radial-gradient(circle,#ffbf00,#ff3b1f,#000);
  animation:fireflow 4s infinite;
}

/* zoom */
.zoom{animation:zoom 6s infinite;}

/* KEYFRAMES */
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes breathDeep{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes wave{0%{box-shadow:0 0 20px}50%{box-shadow:0 0 80px}100%{box-shadow:0 0 20px}}
@keyframes flicker{0%{opacity:0.9}50%{opacity:1}100%{opacity:0.85}}
@keyframes sparkle{0%{opacity:1}50%{opacity:0.7}100%{opacity:1}}
@keyframes gradientMove{0%{background-position:0%}50%{background-position:100%}100%{background-position:0%}}
@keyframes lava{0%{background-position:0%}50%{background-position:100%}100%{background-position:0%}}
@keyframes sunrise{0%{filter:brightness(0.7)}50%{filter:brightness(1.2)}100%{filter:brightness(0.7)}}
@keyframes fireflow{0%{filter:blur(5px)}50%{filter:blur(10px)}100%{filter:blur(5px)}}
@keyframes zoom{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}