/* ===================== Reset et base ===================== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Michroma', sans-serif;
  scroll-behavior: smooth;
}

/* ===================== Vidéo de fond ===================== */
.background-video {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;
}


/* ===================== Avatar section ===================== */
.avatar-section {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2vw;
  padding: 0 2vw;
}

.avatar-fixed {
  position: fixed;
  top: 4.5vh;
  right: 1vw;
  z-index: 100;
}

.avatar-box {
  width: clamp(15em, 20vw, 20em);
  aspect-ratio: 1 / 1;
  border-radius: 100em;
  overflow: hidden;
  background: rgba(225, 225, 225, 0.7);
  border: 0.1em solid rgba(135, 14, 38, 0.7);
  box-shadow: 0 0 1.5em rgba(135,14,38,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.avatar-box:hover {
  transform: scale(1.05);
  box-shadow: 0 0 2em rgba(255,2,103,0.7);
}

.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.6em; }

/* ===================== Bouton musique ===================== */
.music-button {
  width: clamp(2em, 4vw, 2.5em);
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.music-button:hover { transform: scale(1.2); filter: brightness(1.3);}
.music-button.playing { animation: pulse 1.5s infinite ease-in-out; }
@keyframes pulse {
  0%,100%{ transform: scale(1); filter: brightness(1);}
  50%{ transform: scale(1.15); filter: brightness(1.3);}
}

/* ===================== Toggle mode sombre/clair ===================== */
.theme-toggle {
  background: rgba(135,14,38,0.7);
  border: none;
  font-size: clamp(0.8em,2vw,1em);
  cursor: pointer;
  padding: clamp(0.2em,0.5vw,0.4em) clamp(0.4em,1vw,0.6em);
  border-radius: 0.3em;
  color:rgba(135,14,38,0.7);
  transition: all 0.3s ease, box-shadow 0.3s ease;
  z-index: 300;
  position: fixed;
  top: 4.5vh;
  right: clamp(18vw, 20vw, 22vw);
}
.theme-toggle:hover { transform: scale(1.2); box-shadow: 0 0 1.2em rgba(135,14,38,0.7); }

/* ===================== Boxes ===================== */
.boxes-container {
  display: grid;
  grid-template-columns: repeat(3, clamp(2em,15vw,12em));
  column-gap: clamp(8em,2vw,2.5em);
  row-gap: clamp(0.5em,1vw,1.5em);
  margin: 5vh auto 10vh auto;
  justify-content: center;
  z-index: 50;
  width: 90%;
  position: relative;
  transform: translateX(-17%);
}

.circle-box {
  width: clamp(12em,20vw,15em);
  aspect-ratio:1/1;
  border-radius:10%;
  background-color: rgba(0,0,0,0.3);
  color:white;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding: clamp(0.5em,1vw,1em);
  box-shadow:0 0 clamp(0.5em,1vw,1em) rgba(0,0,0,0.7);
  overflow:hidden;
  font-size:clamp(0.7em,1.5vw,1em);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  opacity: 0;
  transform: translateY(20%);
}
.circle-box.visible { opacity: 1; transform: translateY(0); }

/* Texte et liens */
.circle-box h2,.circle-box h4,.circle-box span,.circle-box p,.circle-box a{ margin:0.2em 0;font-size:inherit;text-decoration:none;color:white;transition:color 0.2s ease;}
.circle-box:hover{transform:scale(1.05);box-shadow:0 0 4em rgba(255,2,103,0.7);}
.circle-box a:hover,.circle-box span:hover{color:#ff0267;cursor:pointer;}
.circle-box a.tuto{ color:red; font-weight:bold; text-decoration:underline; }
.circle-box p.tm{ color:red; font-weight:bold; }

/* Mode sombre / clair pour les boxes */
.circle-box:hover{transform:scale(1.05);box-shadow:0 0 4em rgba(255,2,103,0.7);}
body.dark-mode .circle-box { background-color:rgba(33, 32, 32, 0); color:black; }
body.light-mode .circle-box { background-color: rgb(0, 0, 0); color:black; }

/* Single box portfolio */
.single-box { position: fixed; bottom:5vh; right:3vw; width: clamp(16em,16vw,10em); aspect-ratio:1/1; color: rgba(135,14,38,0.7); }

/* Scroll top */
#scrollTopBtn {
  position: fixed;
  bottom:5vh;
  right:2vw;
  font-size: clamp(1.5em,3vw,2em);
  display:none;
  background: rgba(255,255,255,0.2);
  border:none;
  padding:0.5em 1em;
  border-radius:1em;
  cursor:pointer;
  z-index:400;
  transition: all 0.3s ease;
}
#scrollTopBtn:hover { background: rgba(255,255,255,0.4); }

/* ===================== Responsive mobile ===================== */
@media (max-width:768px){
  .avatar-section{justify-content:center;margin:5vh auto;gap:4vw;}
  .avatar-fixed{position:static;}
  .avatar-box{width:clamp(35vw,45vw,55vw);aspect-ratio:1/1;border-radius:50%;}
  .music-button{position:static;width:clamp(8vw,10vw,12vw);}
  .boxes-container{display:flex;flex-direction:column;align-items:center;width:90%;margin:6vh auto;transform:none;row-gap:5vh;}
  .circle-box{width:85vw;aspect-ratio:auto;padding:4vw;font-size:clamp(1rem,3vw,1.3rem);}
  .single-box{position:static;width:90vw;margin:5vh auto;}
  
  /* Mobile : bouton mode toggle normal */
  .theme-toggle{position:static;transform:none;width:auto;margin-left:0;font-size:clamp(0.8em,4vw,1em);}
}