.sylva-mascotte {

  --sylva-size: clamp(105px, 11vw, 155px);

  --sylva-look-x: 0px;

  --sylva-look-y: 0px;

  --sylva-look-r: 0deg;

  position: fixed;

  right: max(12px, env(safe-area-inset-right));

  bottom: max(10px, env(safe-area-inset-bottom));

  z-index: 9990;

  width: var(--sylva-size);

  font-family: system-ui, sans-serif;

  /* Cachée jusqu’à l’initialisation du JavaScript. */
  visibility: hidden;

  filter: drop-shadow(0 10px 16px rgb(0 0 0 / .22));

  transition: opacity .25s ease, transform .25s ease;

}



.sylva-mascotte[hidden] { display: none; }
.sylva-mascotte.sylva-ready { visibility: visible; }



.sylva-scene {

  position: relative;

  width: 100%;

  aspect-ratio: 1202 / 1308;

  cursor: pointer;

  touch-action: none;

  user-select: none;

  transform-origin: 50% 100%;

  animation: sylva-breathe 4.8s ease-in-out infinite;

}



.sylva-pose {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

  opacity: 0;

  pointer-events: none;

  transition: opacity .22s ease;

}



.sylva-pose.is-active { opacity: 1; }



.sylva-close {

  position: absolute;

  right: -7px;

  bottom: 3px;

  z-index: 2;

  display: grid;

  place-items: center;

  width: 22px;

  height: 22px;

  border: 1px solid rgb(255 255 255 / .45);

  border-radius: 50%;

  color: #fff;

  background: rgb(22 48 38 / .58);

  cursor: pointer;

  font: 600 15px/1 system-ui, sans-serif;

  opacity: .48;

  transition: opacity .2s ease, background .2s ease;

}



.sylva-close:hover,

.sylva-close:focus-visible { background: #173d2e; opacity: 1; outline: 2px solid #f4d77b; }



.sylva-menu-toggle {

  display: none;

  position: absolute;

  left: -5px;

  bottom: 3px;

  z-index: 3;

  place-items: center;

  min-width: 32px;

  height: 22px;

  padding: 0 7px 3px;

  border: 1px solid rgb(244 215 123 / .5);

  border-radius: 999px;

  color: #f7efd0;

  background: rgb(22 48 38 / .7);

  cursor: pointer;

  font: 700 15px/1 system-ui, sans-serif;

  opacity: .72;

}



.sylva-menu-toggle:focus-visible,

.sylva-menu-toggle[aria-expanded="true"] { opacity: 1; background: #173d2e; outline: 2px solid #f4d77b; }



.sylva-open {

  position: fixed;

  right: max(10px, env(safe-area-inset-right));

  bottom: max(10px, env(safe-area-inset-bottom));

  z-index: 9990;

  padding: .38rem .68rem;

  border: 1px solid rgb(244 215 123 / .55);

  border-radius: 999px;

  color: #f7efd0;

  background: rgb(18 50 38 / .78);

  box-shadow: 0 4px 12px rgb(0 0 0 / .18);

  cursor: pointer;

  font: 600 .78rem/1.2 system-ui, sans-serif;

  opacity: .68;

}



.sylva-open:hover,

.sylva-open:focus-visible { opacity: 1; background: #173d2e; outline: 2px solid #f4d77b; }



.sylva-open[hidden] { display: none; }
.sylva-open { visibility: hidden; }
.sylva-open.sylva-ready { visibility: visible; }



.sylva-bulle {

  position: absolute;

  right: 72%;

  bottom: 63%;

  width: 210px;

  max-width: min(230px, 70vw);

  padding: .65rem .8rem;

  border: 1px solid rgb(255 255 255 / .72);

  border-radius: 15px 15px 4px 15px;

  color: #fff;

  background: rgb(18 50 38 / .94);

  box-shadow: 0 6px 18px rgb(0 0 0 / .2);

  font-size: .9rem;

  line-height: 1.35;

  opacity: 0;

  transform: translateY(6px);

  transition: opacity .2s ease, transform .2s ease;

  pointer-events: none;

}



.sylva-bulle.is-right {

  right: auto;

  left: 72%;

  border-radius: 15px 15px 15px 4px;

}



.sylva-bulle.is-below {

  top: 58%;

  bottom: auto;

}



.sylva-bulle.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }



.sylva-message { margin: 0 0 .55rem; }



.sylva-actions { display: grid; gap: .38rem; }



.sylva-action {

  padding: .46rem .65rem;

  border: 1px solid rgb(244 215 123 / .7);

  border-radius: 999px;

  color: #fff;

  background: rgb(255 255 255 / .08);

  cursor: pointer;

  font: 600 .82rem/1.2 system-ui, sans-serif;

}



.sylva-action:hover,

.sylva-action:focus-visible { color: #173d2e; background: #f4d77b; outline: none; }



.sylva-action:disabled { opacity: .55; cursor: wait; }



.sylva-video-action {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: .42rem;

  border-color: rgb(255 220 126 / .88);

  background: linear-gradient(135deg, rgb(244 215 123 / .18), rgb(255 255 255 / .06));

}



.sylva-video-action span {

  display: grid;

  place-items: center;

  width: 1.3rem;

  height: 1.3rem;

  border: 1px solid rgb(255 231 163 / .72);

  border-radius: 50%;

  color: #ffe39a;

  font-size: .58rem;

  padding-left: .08rem;

}



body.sylva-video-open { overflow: hidden; }



.sylva-video-modal {

  position: fixed;

  inset: 0;

  z-index: 10050;

  display: grid;

  place-items: center;

  box-sizing: border-box;

  padding: clamp(8px, 2vw, 24px);

  background:

    radial-gradient(circle at 50% 42%, rgb(41 91 66 / .2), transparent 48%),

    rgb(2 9 8 / .86);

  -webkit-backdrop-filter: blur(10px) saturate(.8);

  backdrop-filter: blur(10px) saturate(.8);

  opacity: 0;

  transition: opacity .26s ease;

}



.sylva-video-modal[hidden] { display: none; }
/* Évite tout affichage de la fenêtre vidéo avant initialisation. */
.sylva-video-modal:not(.sylva-ready) { display: none; }

.sylva-video-modal.is-visible { opacity: 1; }



.sylva-video-shell {

  position: relative;

  isolation: isolate;

  width: min(840px, calc(100vw - 28px), calc(100vh - 70px));

  width: min(840px, calc(100vw - 28px), calc(100dvh - 70px));

  max-width: 100%;

  box-sizing: border-box;

  padding: clamp(12px, 2vw, 22px);

  overflow: hidden;

  border: 1px solid rgb(244 215 123 / .56);

  border-radius: clamp(18px, 3vw, 30px);

  color: #f8f2da;

  background:

    linear-gradient(145deg, rgb(18 50 38 / .98), rgb(5 22 22 / .99) 56%, rgb(7 16 23 / .99));

  box-shadow:

    0 28px 90px rgb(0 0 0 / .62),

    0 0 0 1px rgb(255 255 255 / .06) inset,

    0 0 45px rgb(220 176 65 / .12);

  transform: translateY(18px) scale(.975);

  transition: transform .34s cubic-bezier(.2, .75, .2, 1);

}



.sylva-video-modal.is-visible .sylva-video-shell { transform: translateY(0) scale(1); }



.sylva-video-shell::before,

.sylva-video-shell::after {

  content: "";

  position: absolute;

  z-index: -1;

  width: 190px;

  height: 190px;

  border-radius: 50%;

  background: radial-gradient(circle, rgb(255 218 111 / .14), transparent 68%);

  pointer-events: none;

}



.sylva-video-shell::before { top: -88px; left: -62px; }

.sylva-video-shell::after { right: -72px; bottom: -96px; }



.sylva-video-glow {

  position: absolute;

  top: -1px;

  left: 14%;

  width: 72%;

  height: 1px;

  background: linear-gradient(90deg, transparent, #f6d475, transparent);

  box-shadow: 0 0 16px #f6d475;

  pointer-events: none;

}



.sylva-video-close {

  position: absolute;

  top: 11px;

  right: 12px;

  z-index: 4;

  display: grid;

  place-items: center;

  width: 38px;

  height: 38px;

  padding: 0 0 3px;

  border: 1px solid rgb(255 226 145 / .6);

  border-radius: 50%;

  color: #fff4d0;

  background: rgb(5 20 18 / .78);

  box-shadow: 0 6px 18px rgb(0 0 0 / .32);

  cursor: pointer;

  font: 300 28px/1 system-ui, sans-serif;

  transition: color .2s ease, background .2s ease, transform .2s ease;

}



.sylva-video-close:hover,

.sylva-video-close:focus-visible {

  color: #173d2e;

  background: #f4d77b;

  outline: 2px solid rgb(255 255 255 / .72);

  outline-offset: 2px;

  transform: rotate(5deg) scale(1.04);

}



.sylva-video-heading {

  padding: 0 52px .9rem 2px;

  text-align: left;

}



.sylva-video-kicker {

  display: block;

  margin-bottom: .28rem;

  color: #f4d77b;

  font: 700 clamp(.68rem, 1.3vw, .82rem)/1.3 system-ui, sans-serif;

  letter-spacing: .15em;

}



.sylva-video-heading h2 {

  margin: 0;

  color: #fff9e9;

  font: 500 clamp(1.35rem, 3.2vw, 2.2rem)/1.15 Georgia, serif;

  text-wrap: balance;

}



.sylva-video-frame {

  position: relative;

  overflow: hidden;

  border: 1px solid rgb(247 218 131 / .46);

  border-radius: clamp(13px, 2vw, 22px);

  background: #020807;

  box-shadow:

    0 18px 44px rgb(0 0 0 / .48),

    0 0 24px rgb(255 214 91 / .08) inset;

}



.sylva-video-frame video {

  display: block;

  width: 100%;

  height: auto;

  aspect-ratio: 16 / 9;

  border: 0;

  background: #020807;

  object-fit: contain;

}



.sylva-video-seed {

  position: absolute;

  right: 18px;

  top: 17px;

  width: 11px;

  height: 17px;

  border: 1px solid rgb(255 239 177 / .8);

  border-radius: 70% 30% 68% 32%;

  background: radial-gradient(circle at 35% 30%, #fff7c3, #e7b83e 46%, #775114 100%);

  box-shadow: 0 0 10px #f4cf68, 0 0 28px rgb(244 207 104 / .55);

  transform: rotate(33deg);

  pointer-events: none;

}



.sylva-video-note {

  margin: .9rem auto .05rem;

  max-width: 760px;

  color: rgb(247 239 211 / .82);

  font: 400 clamp(.82rem, 1.8vw, 1rem)/1.5 system-ui, sans-serif;

  text-align: center;

}



@keyframes sylva-breathe {

  0%, 100% { transform: translate(var(--sylva-look-x), var(--sylva-look-y)) rotate(var(--sylva-look-r)) scale(1); }

  50% { transform: translate(var(--sylva-look-x), calc(var(--sylva-look-y) - 2px)) rotate(var(--sylva-look-r)) scale(1.006, 1.012); }

}



@media (max-width: 600px) {

  .sylva-mascotte { --sylva-size: clamp(92px, 27vw, 120px); }

  .sylva-close { right: -5px; width: 20px; height: 20px; font-size: 14px; }

  .sylva-menu-toggle { display: grid; }

  .sylva-bulle { right: 62%; bottom: 70%; }

  .sylva-video-modal { padding: 9px; }

  .sylva-video-shell {

    width: min(calc(100vw - 18px), calc(100vh - 38px));

    width: min(calc(100vw - 18px), calc(100dvh - 38px));

    max-width: 100%;

    padding: 13px;

    border-radius: 18px;

  }

  .sylva-video-heading { padding: 2px 44px .72rem 1px; }

  .sylva-video-kicker { letter-spacing: .08em; }

  .sylva-video-close { top: 8px; right: 8px; width: 34px; height: 34px; font-size: 25px; }

  .sylva-video-frame { border-radius: 12px; }

  .sylva-video-note { margin-top: .7rem; }

}



@media (max-height: 560px) {

  .sylva-video-modal { padding: 6px; }

  .sylva-video-shell {

    width: min(700px, calc(100vw - 16px), calc(100vh - 34px));

    width: min(700px, calc(100vw - 16px), calc(100dvh - 34px));

    padding: 9px 11px;

    border-radius: 14px;

  }

  .sylva-video-heading { padding: 0 40px .4rem 0; }

  .sylva-video-kicker { margin-bottom: .08rem; font-size: .58rem; letter-spacing: .07em; }

  .sylva-video-heading h2 { font-size: 1.05rem; }

  .sylva-video-close { top: 6px; right: 6px; width: 30px; height: 30px; font-size: 22px; }

  .sylva-video-note { display: none; }

}



@media (prefers-reduced-motion: reduce) {

  .sylva-scene { animation: none; }

  .sylva-mascotte, .sylva-pose, .sylva-bulle { transition: none; }

  .sylva-video-modal, .sylva-video-shell, .sylva-video-close { transition: none; }

}