body {
  color: var(--font);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  --bg-scale: 1;
  overflow-x: hidden;
}
 
/* Tout le contenu passe au-dessus des blobs fixed */
.header-spacer,
.front-title-wrapper, .layout, .apple-gallery,
h4, h5, .site-footer {
  position: relative;
  z-index: 1;
}

/* Mobile menu : fixed pour rester au-dessus des blobs twitch */
.mobile-menu {
  position: fixed;
  z-index: 9999;
}
  :root[data-theme="light"]
{
  --main-logo-blob: rgb(152, 25, 211);
  --neon: rgb(1,186,255);
}
 :root[data-theme="dark"]
{
  --main-logo-blob: rgb(255, 255, 255);
  --neon:rgb(253,1,254);
}

 
.layout {display: flex;
margin-bottom: 20px}
 
.colA {
  position: relative;
  flex: 1;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-width: 0;
  border-radius: calc(12px * var(--bg-scale));
 
}
 
.bg {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
 
.bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
 
.webcam {
  position: absolute;
  top: 21%;
  left: 4.5%;
  width: 55%;
  z-index: 4;
  pointer-events: auto;
  overflow: hidden; 
  border-radius: calc(40px * var(--bg-scale));
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: black;
}
 
.transition {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 6;
  display: none;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease-out;}
 
.colA .follower {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
  display: none;
  pointer-events: none;
  opacity: 1;
}
 
.colB {
  width: 20vw;
  min-width: 250px;
  background: transparent;
  padding: 2%;
  display: flex;
  flex-direction: column;
  gap: 1%;
}
 
.messages {
  position: absolute;
  top: 10%;
  left: 68%;
  width: 25vw;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--bg-scale));
  max-height: 80%;
  overflow-y: auto;
  padding-right: calc(8px * var(--bg-scale));
  pointer-events: auto;
  font-family: 'Montserrat', sans-serif;
    font-weight: 700;
  --bg-scale: 1;
}
 
.message {
  font-family: Arial, sans-serif;
  color: black;
  font-size: 20px;
  padding: calc(6px * var(--bg-scale)) calc(10px * var(--bg-scale));
  border-radius: calc(12px * var(--bg-scale));
  max-width: calc(420px * var(--bg-scale));
  transition: transform 0.08s linear, opacity 0.12s linear;
}
 
.message .pseudo {
  font-weight: bold;
  color: var(--neon);
  margin-right: calc(6px * var(--bg-scale));
}
 
.colB button {
  padding: 0.8vh 1.5vw;
  border: none;
  border-radius: 6px;
  background: #ddd;
  cursor: pointer;
  font-weight: bold;
}
.colB .video-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  overflow: hidden;
  padding: 6px 0;   
}
 
.colB button.fancy {
   margin-top: 20px;
  padding: 0.8vh 1.5vw;
  border: none;
  background: rgba(255,255,255,0.25);
  box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  cursor: pointer;
  font-weight: bold;
  transition: transform 120ms ease, box-shadow 120ms ease;
  font-family: "Montserrat", bold;
  font-weight: 700;
  font-style: normal;
  color: var(--font);
}
 
.colB button.fancy:hover {
  transform: translateY(-3px);
  box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}
 
.colB button.fancy:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
 
.colB .video-btn {
  flex: 1 1 0;
  min-width: 50px;
  max-width: 120px;
  aspect-ratio: 1 / 1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
 
.colB .video-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
 
.colB .video-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}
 
.colB .video-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
 
.colB #chatInput {
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.2;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: box-shadow 160ms ease, transform 80ms ease, border-color 120ms ease;
  outline: none;
  color: #111;
}
 
.colB #chatInput::placeholder {color: #9aa0a6;opacity: 1;}
 
.colB #chatInput:focus {
  border-color: var(--neon, #4aa3ff);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 0 0 6px rgba(74,163,255,0.07);
  transform: translateY(-1px);
}
 
.colB #chatInput:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
 
.colB h2 {
  margin-top: 20px;
}
 
@media (max-width: 768px) {
  .layout {flex-direction: column;height: auto;}
  .colA {width: 100%;aspect-ratio: 16 / 9;}
  .colB {width: 100%;border-left: none;}
  .message {font-size: 15px;}
  h4,h5 {
    margin-left: 5%;
    margin-right: 5%;
  }}
 
h4 {
        font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-size: 2em
    }
 
h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-style: normal;
  text-align: justify;
  margin-bottom: 1em;
  font-size: 1.2em;
    }
 
video {
  mask-mode: alpha;
}
 
/* ── Blobs décoratifs twitch ── */
.twitch-blobs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  pointer-events: none;
  z-index: 0;

}

.twitch-blob {
  position: absolute;
  border-radius: 50%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 38% 38%, #d217d8 0%, #9819d3 52%, transparent 75%);
}
#twitch-blob-1 {
  width: 55vw;
  left: 5%;
  top: 5%;       /* haut gauche */
  opacity: 0.30;
  filter: blur(4px) url(#twitch-blob-filter-1);
  animation: twitch-drift-1 20s ease-in-out infinite;
}

#twitch-blob-2 {
  width: 35vw;
  left: 85%;
  top: 22%;      /* haut droite */
  opacity: 0.22;
  filter: blur(5px) url(#twitch-blob-filter-2);
  animation: twitch-drift-2 26s ease-in-out -6s infinite;
}

#twitch-blob-3 {
  width: 45vw;
  left: 20%;
  top: 45%;      /* milieu gauche */
  opacity: 0.20;
  filter: blur(6px) url(#twitch-blob-filter-3);
  animation: twitch-drift-3 22s ease-in-out -11s infinite;
}

#twitch-blob-4 {
  width: 50vw;
  left: 78%;
  top: 65%;      /* milieu-bas droite */
  opacity: 0.18;
  filter: blur(7px) url(#twitch-blob-filter-4);
  animation: twitch-drift-4 28s ease-in-out -4s infinite;
}

#twitch-blob-5 {
  width: 40vw;
  left: 35%;
  top: 88%;      /* bas centre */
  opacity: 0.22;
  filter: blur(4px) url(#twitch-blob-filter-5);
  animation: twitch-drift-1 18s ease-in-out -9s infinite;
}

@keyframes twitch-drift-1 {
  0%   { translate: 0px 0px; }
  20%  { translate: 8px -5px; }
  40%  { translate: -6px 9px; }
  60%  { translate: 10px 4px; }
  80%  { translate: -5px -8px; }
  100% { translate: 0px 0px; }
}
@keyframes twitch-drift-2 {
  0%   { translate: 0px 0px; }
  25%  { translate: -9px 6px; }
  50%  { translate: 7px -10px; }
  75%  { translate: -4px 8px; }
  100% { translate: 0px 0px; }
}
@keyframes twitch-drift-3 {
  0%   { translate: 0px 0px; }
  30%  { translate: 9px 5px; }
  55%  { translate: -8px -6px; }
  80%  { translate: 5px 10px; }
  100% { translate: 0px 0px; }
}
@keyframes twitch-drift-4 {
  0%   { translate: 0px 0px; }
  20%  { translate: -6px -9px; }
  45%  { translate: 10px 4px; }
  70%  { translate: -5px 7px; }
  100% { translate: 0px 0px; }
}

/* ── Apple Gallery Fallback ── */
.apple-gallery {
  display: none;
  flex-direction: column;
  align-items: center;
  background: #000;
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.gallery-img-wrap {
  width: 100%;
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gallery-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.gallery-video-wrap {
  width: 100%;
  padding: 0 50px;
  box-sizing: border-box;
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gallery-video-wrap video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.gallery-item-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.4em;
  color: #111;
  background: #fecd0b;
  border: 3px solid #111;
  border-radius: 999px;
  padding: 8px 24px;
  margin-top: 16px;
  display: inline-block;
}

@media (max-width: 768px) {
  .gallery-video-wrap { padding: 0 20px; }
  .gallery-item-label { font-size: 1.1em; }
}
@media (max-width: 768px) {
  .twitch-blobs {
    overflow-x: hidden;
  }
}