*, *::after, *::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --dark-color: #080014;
  --green:      #3ddc6e;
  --green-dark: #1a7a3a;
  --green-mid:  #27a84f;
}

/* ─── Corps ─────────────────────────────────────────────── */
body {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--dark-color);
  overflow: hidden;
  perspective: 1000px;
}

/* ═══════════════════════════════════════════════════════════
   ÉCRAN MOT DE PASSE
═══════════════════════════════════════════════════════════ */
.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 30% 100%, rgba(120, 30, 180, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 100%, rgba(180, 30, 80, 0.4)  0%, transparent 55%),
    linear-gradient(to bottom, #060012 0%, #120230 40%, #1a0338 70%, #0a0118 100%);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.lock-screen--out {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

/* Carte centrale */
.lock-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 52px 48px 44px;
  border-radius: 32px;
  background: rgba(30, 5, 60, 0.55);
  border: 1px solid rgba(200, 130, 255, 0.2);
  backdrop-filter: blur(18px);
  box-shadow:
    0 0 60px rgba(140, 40, 220, 0.2),
    0 0 120px rgba(100, 20, 180, 0.1),
    inset 0 1px 0 rgba(255, 200, 255, 0.1);
  overflow: hidden;
}

/* Pétales décoratifs flottants dans la carte */
.lock-petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lock-petals span {
  position: absolute;
  border-radius: 70% 10% 70% 10%;
  opacity: 0.12;
  animation: lp-drift linear infinite;
}
.lock-petals span:nth-child(1) { width:18px; height:26px; background:#ff6b9d; top:10%; left:8%;  animation-duration:9s;  animation-delay:0s; }
.lock-petals span:nth-child(2) { width:14px; height:20px; background:#c084fc; top:20%; right:10%; animation-duration:11s; animation-delay:-3s; }
.lock-petals span:nth-child(3) { width:12px; height:18px; background:#fb923c; top:60%; left:5%;  animation-duration:8s;  animation-delay:-5s; }
.lock-petals span:nth-child(4) { width:16px; height:22px; background:#ff6b9d; top:70%; right:8%; animation-duration:10s; animation-delay:-2s; }
.lock-petals span:nth-child(5) { width:10px; height:16px; background:#c084fc; top:85%; left:20%; animation-duration:12s; animation-delay:-7s; }
.lock-petals span:nth-child(6) { width:14px; height:20px; background:#ff6b9d; top:5%;  right:20%; animation-duration:9s;  animation-delay:-4s; }

@keyframes lp-drift {
  0%   { transform: translate(0, 0)    rotate(0deg);   opacity: 0; }
  10%  { opacity: 0.14; }
  50%  { transform: translate(20px, 30px) rotate(120deg); }
  90%  { opacity: 0.10; }
  100% { transform: translate(40px, 70px) rotate(240deg); opacity: 0; }
}

/* Texte */
.lock-hint {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(255, 180, 210, 0.6);
  letter-spacing: 0.1em;
}

.lock-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 4vmin, 36px);
  color: rgba(255, 230, 245, 0.92);
  letter-spacing: 0.06em;
  text-shadow: 0 0 24px rgba(220, 120, 255, 0.5);
  text-align: center;
}

/* Champ de saisie */
.lock-field {
  position: relative;
  width: 200px;
  margin-top: 8px;
}

.lock-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 28px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  caret-color: rgba(255, 140, 200, 0.8);
  padding: 4px 0 8px;
}

.lock-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.4em;
}

.lock-underline {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 120, 255, 0.7), transparent);
  transition: height 0.3s, background 0.3s;
}

.lock-input:focus ~ .lock-underline {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 140, 200, 1), transparent);
  box-shadow: 0 0 12px rgba(255, 100, 200, 0.5);
}

/* Bouton valider */
.lock-btn {
  margin-top: 4px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 140, 200, 0.45);
  background: rgba(180, 60, 120, 0.18);
  color: rgba(255, 180, 220, 0.9);
  font-size: 22px;
  cursor: pointer;
  transition: background 0.25s, transform 0.15s, box-shadow 0.25s;
  box-shadow: 0 0 18px rgba(200, 80, 160, 0.2);
}
.lock-btn:hover {
  background: rgba(200, 80, 150, 0.32);
  box-shadow: 0 0 28px rgba(220, 100, 180, 0.45);
  transform: scale(1.08);
}
.lock-btn:active {
  transform: scale(0.95);
}

/* Message d'erreur */
.lock-error {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(255, 120, 160, 0.85);
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity 0.3s;
  min-height: 20px;
}
.lock-error--visible { opacity: 1; }

/* Shake sur erreur */
.lock-input--shake {
  animation: shake 0.4s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

/* ═══════════════════════════════════════════════════════════
   RATS MIGNONS
═══════════════════════════════════════════════════════════ */
.rats {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 25;
  overflow: hidden;
}

/* Conteneur principal → mouvement horizontal */
.rat {
  position: absolute;
  bottom: var(--bot, 4px);
  width: 72px;
  transform-origin: center bottom;
  animation: rat-run var(--speed, 9s) linear var(--delay, 0s) infinite;
  will-change: transform;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* Rat 3 va de gauche à droite */
.rat--3 { animation-name: rat-run-rev; }

/* Enfant → rebond vertical + légère rotation */
.rat-inner {
  animation: rat-hop 0.22s ease-in-out infinite;
  transform-origin: center bottom;
}

.rat-svg {
  display: block;
  overflow: visible;
}

/* Pattes qui alternent */
.leg-1, .leg-3 { animation: leg-up   0.22s ease-in-out infinite; }
.leg-2, .leg-4 { animation: leg-down 0.22s ease-in-out infinite; }

/* Queue qui se tortille */
.rat-tail {
  transform-origin: 57px 18px;
  animation: tail-wag 0.44s ease-in-out infinite alternate;
}

/* ── Keyframes ─────────────────────────────────────── */
@keyframes rat-run {
  from { transform: scaleX(var(--dir,1)) scale(var(--scale,1)) translateX(110vw); }
  to   { transform: scaleX(var(--dir,1)) scale(var(--scale,1)) translateX(-20vw); }
}
@keyframes rat-run-rev {
  from { transform: scaleX(var(--dir,1)) scale(var(--scale,1)) translateX(-110vw); }
  to   { transform: scaleX(var(--dir,1)) scale(var(--scale,1)) translateX(120vw); }
}
@keyframes rat-hop {
  0%, 100% { transform: translateY(0)   rotate(0deg); }
  50%       { transform: translateY(-5px) rotate(-3deg); }
}
@keyframes leg-up {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}
@keyframes leg-down {
  0%, 100% { transform: translateY(-4px); }
  50%       { transform: translateY(0); }
}
@keyframes tail-wag {
  from { transform: rotate(-15deg); }
  to   { transform: rotate(12deg); }
}

/* ─── Fond étoilé ────────────────────────────────────────── */
.bg {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  filter: blur(0.1vmin);
  background-image:
    radial-gradient(ellipse at top,    transparent 0%, var(--dark-color)),
    radial-gradient(ellipse at bottom, var(--dark-color), rgba(140, 40, 200, 0.22)),
    repeating-linear-gradient(220deg, rgb(8,0,20) 0px, rgb(8,0,20) 19px, transparent 19px, transparent 22px),
    repeating-linear-gradient(189deg, rgb(8,0,20) 0px, rgb(8,0,20) 19px, transparent 19px, transparent 22px),
    repeating-linear-gradient(148deg, rgb(8,0,20) 0px, rgb(8,0,20) 19px, transparent 19px, transparent 22px),
    linear-gradient(90deg, rgb(60, 10, 120), rgb(120, 20, 80));
}

/* ─── Tour Eiffel ────────────────────────────────────────── */
.eiffel-wrap {
  position: fixed;
  bottom: 0;
  right: 0;
  width: min(520px, 62vmin);
  z-index: 2;
  pointer-events: none;
}

/* L'image SVG : silhouette violette sombre avec halo */
.eiffel-img {
  width: 100%;
  height: auto;
  display: block;
  filter:
    brightness(0.08)
    sepia(1)
    hue-rotate(220deg)
    saturate(4)
    drop-shadow(0 0 10px rgba(140, 70, 255, 0.55))
    drop-shadow(0 0 30px rgba(100, 40, 200, 0.3));
  animation: eiffel-breathe 5s ease-in-out infinite;
}

@keyframes eiffel-breathe {
  0%, 100% {
    filter:
      brightness(0.07) sepia(1) hue-rotate(220deg) saturate(4)
      drop-shadow(0 0 8px  rgba(140, 70, 255, 0.5))
      drop-shadow(0 0 24px rgba(100, 40, 200, 0.25));
  }
  50% {
    filter:
      brightness(0.13) sepia(1) hue-rotate(230deg) saturate(5)
      drop-shadow(0 0 16px rgba(160, 90, 255, 0.8))
      drop-shadow(0 0 44px rgba(120, 60, 220, 0.45));
  }
}

/* Overlay des scintillements */
.eiffel-sparks {
  position: absolute;
  inset: 0;
}

.sp {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff8b0;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 3px 1px rgba(255, 230, 80, 0.9),
    0 0 8px 3px rgba(255, 200, 60, 0.5);
}

/* 6 timings distincts pour un effet chaotique naturel */
.sp-a { animation: sparkle 2.3s ease-in-out infinite 0.0s; }
.sp-b { animation: sparkle 3.1s ease-in-out infinite 0.7s; }
.sp-c { animation: sparkle 1.9s ease-in-out infinite 1.4s; }
.sp-d { animation: sparkle 2.8s ease-in-out infinite 0.3s; }
.sp-e { animation: sparkle 3.5s ease-in-out infinite 1.1s; }
.sp-f { animation: sparkle 2.1s ease-in-out infinite 1.8s; }

@keyframes sparkle {
  0%, 100% {
    opacity: 0.06;
    transform: translate(-50%, -50%) scale(0.5);
    box-shadow: 0 0 2px 1px rgba(255, 230, 80, 0.3);
  }
  45%, 55% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.4);
    box-shadow:
      0 0 5px 2px rgba(255, 245, 120, 1),
      0 0 14px 5px rgba(255, 210, 60, 0.7),
      0 0 28px 8px rgba(255, 180, 40, 0.3);
  }
}

/* ─── Message ────────────────────────────────────────────── */
.title {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 0;
  left: 0;
  margin-top: 44px;
  color: #fff;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 7vmin, 72px);
  letter-spacing: 0.06em;
  text-shadow:
    0 0 20px rgba(255, 140, 180, 0.9),
    0 0 60px rgba(200, 80, 160, 0.5),
    0 0 120px rgba(160, 40, 120, 0.3);
}

/* ─── Conteneur fleurs ───────────────────────────────────── */
.flowers {
  position: relative;
  transform: scale(0.9);
}

/* ═══════════════════════════════════════════════════════════
   FLEURS
═══════════════════════════════════════════════════════════ */
.flower {
  position: absolute;
  bottom: 10vmin;
  transform-origin: bottom center;
  z-index: 10;
  --fl-speed: 0.8s;
}

/* — Fleur 1 : rose incarnat, centrale — */
.flower--1 { animation: moving-flower-1 4s linear infinite; }
.flower--1 .flower__line { height: 70vmin; animation-delay: 0.3s; }
.flower--1 .flower__line__leaf--1 { animation: blooming-leaf-right var(--fl-speed) 1.6s backwards; }
.flower--1 .flower__line__leaf--2 { animation: blooming-leaf-right var(--fl-speed) 1.4s backwards; }
.flower--1 .flower__line__leaf--3 { animation: blooming-leaf-left  var(--fl-speed) 1.2s backwards; }
.flower--1 .flower__line__leaf--4 { animation: blooming-leaf-left  var(--fl-speed) 1.0s backwards; }
.flower--1 .flower__line__leaf--5 { animation: blooming-leaf-right var(--fl-speed) 1.8s backwards; }
.flower--1 .flower__line__leaf--6 { animation: blooming-leaf-left  var(--fl-speed) 2.0s backwards; }

/* — Fleur 2 : corail doux, penchée droite — */
.flower--2 {
  left: 50%;
  transform: rotate(20deg);
  animation: moving-flower-2 4s linear infinite;
}
.flower--2 .flower__line { height: 60vmin; animation-delay: 0.6s; }
.flower--2 .flower__line__leaf--1 { animation: blooming-leaf-right var(--fl-speed) 1.9s backwards; }
.flower--2 .flower__line__leaf--2 { animation: blooming-leaf-right var(--fl-speed) 1.7s backwards; }
.flower--2 .flower__line__leaf--3 { animation: blooming-leaf-left  var(--fl-speed) 1.5s backwards; }
.flower--2 .flower__line__leaf--4 { animation: blooming-leaf-left  var(--fl-speed) 1.3s backwards; }

/* — Fleur 3 : lavande, penchée gauche — */
.flower--3 {
  left: 50%;
  transform: rotate(-15deg);
  animation: moving-flower-3 4s linear infinite;
}
.flower--3 .flower__line { animation-delay: 0.9s; }
.flower--3 .flower__line__leaf--1 { animation: blooming-leaf-right var(--fl-speed) 2.5s backwards; }
.flower--3 .flower__line__leaf--2 { animation: blooming-leaf-right var(--fl-speed) 2.3s backwards; }
.flower--3 .flower__line__leaf--3 { animation: blooming-leaf-left  var(--fl-speed) 2.1s backwards; }
.flower--3 .flower__line__leaf--4 { animation: blooming-leaf-left  var(--fl-speed) 1.9s backwards; }

/* ─── Pétales (leafs) ───────────────────────────────────── */
.flower__leafs {
  position: relative;
  animation: blooming-flower 2s backwards;
}
.flower__leafs--1 { animation-delay: 1.1s; }
.flower__leafs--2 { animation-delay: 1.4s; }
.flower__leafs--3 { animation-delay: 1.7s; }

/* Halo lumineux au-dessus de la fleur */
.flower__leafs::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -100%);
  width: 8vmin; height: 8vmin;
  border-radius: 50%;
  filter: blur(10vmin);
}
.flower--1 .flower__leafs::after { background-color: #ff6b9d; }
.flower--2 .flower__leafs::after { background-color: #ff9966; }
.flower--3 .flower__leafs::after { background-color: #b07dff; }

/* Pétale de base */
.flower__leaf {
  position: absolute;
  bottom: 0; left: 50%;
  width: 8vmin; height: 11vmin;
  border-radius: 51% 49% 47% 53% / 44% 45% 55% 69%;
  transform-origin: bottom center;
  opacity: 0.92;
}

/* Couleurs par fleur */
.flower--1 .flower__leaf {
  background-color: #c9184a;
  background-image: linear-gradient(to top, #ff4d6d, #ffb3c6);
  box-shadow: inset 0 0 2vmin rgba(255, 77, 109, 0.45);
}
.flower--2 .flower__leaf {
  background-color: #d4531a;
  background-image: linear-gradient(to top, #ff6b35, #ffd6b0);
  box-shadow: inset 0 0 2vmin rgba(255, 107, 53, 0.45);
}
.flower--3 .flower__leaf {
  background-color: #7b2d8b;
  background-image: linear-gradient(to top, #b05de0, #e8d5ff);
  box-shadow: inset 0 0 2vmin rgba(176, 93, 224, 0.45);
}

/* Positions 3-D des pétales */
.flower__leaf--1 { transform: translate(-10%, 1%)   rotateY(40deg)  rotateX(-50deg); }
.flower__leaf--2 { transform: translate(-50%, -4%)  rotateX(40deg); }
.flower__leaf--3 { transform: translate(-90%, 0%)   rotateY(45deg)  rotateX(50deg); }
.flower__leaf--4 {
  width: 8vmin; height: 8vmin;
  transform-origin: bottom left;
  border-radius: 4vmin 10vmin 4vmin 4vmin;
  transform: translate(0%, 18%) rotateX(70deg) rotate(-43deg);
  opacity: 0.8;
}

/* ─── Centre de la fleur ─────────────────────────────────── */
.flower__white-circle {
  position: absolute;
  left: -3.5vmin; top: -3vmin;
  width: 9vmin; height: 4vmin;
  border-radius: 50%;
  background-color: #fff8e7;
}
.flower__white-circle::after {
  content: "";
  position: absolute;
  left: 50%; top: 45%;
  transform: translate(-50%, -50%);
  width: 60%; height: 60%;
  border-radius: inherit;
  background-image:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 1px, transparent 1px, transparent 12px),
    linear-gradient(90deg, rgb(255, 210, 60), rgb(255, 170, 0));
}

/* ─── Particules lumineuses ──────────────────────────────── */
.flower__light {
  position: absolute;
  bottom: 0;
  width: 1vmin; height: 1vmin;
  border-radius: 50%;
  filter: blur(0.2vmin);
  animation: light-ans 4s linear infinite backwards;
  background-color: #ffd6e7;
}
.flower__light:nth-child(odd) { background-color: #ffe066; }

.flower__light--1 { left: -2vmin;  animation-delay: 1.0s; }
.flower__light--2 { left:  3vmin;  animation-delay: 0.5s; }
.flower__light--3 { left: -6vmin;  animation-delay: 0.3s; }
.flower__light--4 { left:  6vmin;  animation-delay: 0.9s; }
.flower__light--5 { left: -1vmin;  animation-delay: 1.5s; }
.flower__light--6 { left: -4vmin;  animation-delay: 3.0s; }
.flower__light--7 { left:  3vmin;  animation-delay: 2.0s; }
.flower__light--8 { left: -6vmin;  animation-delay: 3.5s; }

/* ─── Tige ───────────────────────────────────────────────── */
.flower__line {
  height: 55vmin;
  width: 1.5vmin;
  background-image:
    linear-gradient(to left, rgba(0,0,0,0.25), transparent, rgba(255,255,255,0.12)),
    linear-gradient(to top, transparent 10%, var(--green-mid), var(--green));
  box-shadow: inset 0 0 2px rgba(0,0,0,0.4);
  animation: grow-flower-tree 4s backwards;
}

/* ─── Feuilles de tige ───────────────────────────────────── */
.flower__line__leaf {
  --w: 7vmin;
  --h: calc(var(--w) + 2vmin);
  position: absolute;
  top: 20%; left: 90%;
  width: var(--w); height: var(--h);
  border-top-right-radius: var(--h);
  border-bottom-left-radius: var(--h);
  background-image: linear-gradient(to top, rgba(39, 168, 79, 0.4), var(--green));
}
.flower__line__leaf--1 { transform: rotate(70deg) rotateY(30deg); }
.flower__line__leaf--2 { top: 45%; transform: rotate(70deg) rotateY(30deg); }
.flower__line__leaf--3,
.flower__line__leaf--4,
.flower__line__leaf--6 {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: var(--h);
  border-bottom-right-radius: var(--h);
  left: -460%;
  top: 12%;
  transform: rotate(-70deg) rotateY(30deg);
}
.flower__line__leaf--4 { top: 40%; }
.flower__line__leaf--5 { top: 0; transform-origin: left;  transform: rotate(70deg)  rotateY(30deg) scale(0.6); }
.flower__line__leaf--6 { top: -2%; left: -450%; transform-origin: right; transform: rotate(-70deg) rotateY(30deg) scale(0.6); }

/* ═══════════════════════════════════════════════════════════
   HERBE / FEUILLAGE
═══════════════════════════════════════════════════════════ */

/* ─── Touffe d'herbe ─────────────────────────────────────── */
.flower__grass {
  --c: var(--green);
  --line-w: 1.5vmin;
  position: absolute;
  bottom: 12vmin; left: -7vmin;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 20;
  transform-origin: bottom center;
  transform: rotate(-48deg) rotateY(40deg);
}
.flower__grass--1 { animation: moving-grass   2.0s linear infinite; }
.flower__grass--2 {
  left: 2vmin; bottom: 10vmin;
  transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg);
  opacity: 0.8; z-index: 0;
  animation: moving-grass--2 1.5s linear infinite;
}

.flower__grass--top {
  width: 7vmin; height: 10vmin;
  border-top-right-radius: 100%;
  border-right: var(--line-w) solid var(--c);
  transform-origin: bottom center;
  transform: rotate(-2deg);
}
.flower__grass--bottom {
  margin-top: -2px;
  width: var(--line-w); height: 25vmin;
  background-image: linear-gradient(to top, transparent, var(--c));
}

.flower__grass__leaf {
  --size: 10vmin;
  position: absolute;
  width: calc(var(--size) * 2.1); height: var(--size);
  border-top-left-radius: var(--size);
  border-top-right-radius: var(--size);
  background-image: linear-gradient(to top, transparent, transparent 30%, var(--c));
  z-index: 100;
}
.flower__grass__leaf--1 { top:-6%;  left:30%;   --size:6vmin;  transform:rotate(-20deg);             animation:growing-grass-ans--1 2s 2.6s backwards; }
.flower__grass__leaf--2 { top:-5%;  left:-110%; --size:6vmin;  transform:rotate(10deg);              animation:growing-grass-ans--2 2s 2.4s linear backwards; }
.flower__grass__leaf--3 { top:5%;   left:60%;   --size:8vmin;  transform:rotate(-18deg) rotateX(-20deg); animation:growing-grass-ans--3 2s 2.2s linear backwards; }
.flower__grass__leaf--4 { top:6%;   left:-135%; --size:8vmin;  transform:rotate(2deg);               animation:growing-grass-ans--4 2s 2.0s linear backwards; }
.flower__grass__leaf--5 { top:20%;  left:60%;   --size:10vmin; transform:rotate(-24deg) rotateX(-20deg); animation:growing-grass-ans--5 2s 1.8s linear backwards; }
.flower__grass__leaf--6 { top:22%;  left:-180%; --size:10vmin; transform:rotate(10deg);              animation:growing-grass-ans--6 2s 1.6s linear backwards; }
.flower__grass__leaf--7 { top:39%;  left:70%;   --size:10vmin; transform:rotate(-10deg);             animation:growing-grass-ans--7 2s 1.4s linear backwards; }
.flower__grass__leaf--8 { top:40%;  left:-215%; --size:11vmin; transform:rotate(10deg);              animation:growing-grass-ans--8 2s 1.2s linear backwards; }

.flower__grass__overlay {
  position: absolute;
  top: -10%; right: 0;
  width: 100%; height: 100%;
  background-color: rgba(8, 0, 20, 0.55);
  filter: blur(1.5vmin);
  z-index: 100;
}

/* ─── Tige longue décorative ─────────────────────────────── */
.flower__g-long {
  --w: 2vmin; --h: 6vmin; --c: var(--green);
  position: absolute;
  bottom: 10vmin; left: -3vmin;
  transform-origin: bottom center;
  transform: rotate(-30deg) rotateY(-20deg);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  animation: flower-g-long-ans 3s linear infinite;
}
.flower__g-long__top {
  top: calc(var(--h) * -1);
  width: calc(var(--w) + 1vmin); height: var(--h);
  border-top-right-radius: 100%;
  border-right: 0.7vmin solid var(--c);
  transform: translate(-0.7vmin, 1vmin);
}
.flower__g-long__bottom {
  width: var(--w); height: 50vmin;
  transform-origin: bottom center;
  background-image: linear-gradient(to top, transparent 30%, var(--c));
  box-shadow: inset 0 0 2px rgba(0,0,0,0.4);
  clip-path: polygon(35% 0, 65% 1%, 100% 100%, 0% 100%);
}

/* ─── Grandes feuilles latérales ─────────────────────────── */
.flower__g-right {
  position: absolute;
  bottom: 6vmin; left: -2vmin;
  transform-origin: bottom left;
  transform: rotate(20deg);
}
.flower__g-right .leaf {
  width: 30vmin; height: 50vmin;
  border-top-left-radius: 100%;
  border-left: 2vmin solid var(--green-dark);
  background-image: linear-gradient(to bottom, transparent, var(--dark-color) 60%);
  -webkit-mask-image: linear-gradient(to top, transparent 30%, #fff 60%);
}
.flower__g-right--1 { animation: flower-g-right-ans   2.5s linear infinite; }
.flower__g-right--2 {
  left: 5vmin;
  transform: rotateY(-180deg);
  animation: flower-g-right-ans--2 3.0s linear infinite;
}
.flower__g-right--2 .leaf { height: 75vmin; filter: blur(0.3vmin); opacity: 0.8; }

/* ─── Feuillage de premier plan ──────────────────────────── */
.flower__g-front {
  position: absolute;
  bottom: 6vmin; left: 2.5vmin;
  z-index: 100;
  transform-origin: bottom center;
  transform: rotate(-28deg) rotateY(30deg) scale(1.04);
  animation: flower__g-front-ans 2s linear infinite;
}
.flower__g-front__line {
  width: 0.3vmin; height: 20vmin;
  background-image: linear-gradient(to top, transparent, var(--green), transparent 100%);
  position: relative;
}
.flower__g-front__leaf-wrapper {
  position: absolute; top: 0; left: 0;
  transform-origin: bottom left;
  transform: rotate(10deg);
}
.flower__g-front__leaf-wrapper:nth-child(even) {
  left: 0;
  transform: rotateY(-180deg) rotate(5deg);
  animation: flower__g-front__leaf-left-ans 1s ease-in backwards;
}
.flower__g-front__leaf-wrapper:nth-child(odd) {
  animation: flower__g-front__leaf-ans 1s ease-in backwards;
}
.flower__g-front__leaf-wrapper--1 { top:-8vmin; transform:scale(0.7);                     animation:flower__g-front__leaf-ans       1s 5.5s ease-in backwards !important; }
.flower__g-front__leaf-wrapper--2 { top:-8vmin; transform:rotateY(-180deg) scale(0.7) !important; animation:flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important; }
.flower__g-front__leaf-wrapper--3 { top:-3vmin; animation:flower__g-front__leaf-ans       1s 4.6s ease-in backwards; }
.flower__g-front__leaf-wrapper--4 { top:-3vmin; transform:rotateY(-180deg) scale(0.9) !important; animation:flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important; }
.flower__g-front__leaf-wrapper--5,
.flower__g-front__leaf-wrapper--6 { top: 2vmin; }
.flower__g-front__leaf-wrapper--7,
.flower__g-front__leaf-wrapper--8 { top: 6.5vmin; }
.flower__g-front__leaf-wrapper--2 { animation-delay: 5.2s !important; }
.flower__g-front__leaf-wrapper--3 { animation-delay: 4.9s !important; }
.flower__g-front__leaf-wrapper--5 { animation-delay: 4.3s !important; }
.flower__g-front__leaf-wrapper--6 { animation-delay: 4.1s !important; }
.flower__g-front__leaf-wrapper--7 { animation-delay: 3.8s !important; }
.flower__g-front__leaf-wrapper--8 { animation-delay: 3.5s !important; }
.flower__g-front__leaf {
  width: 10vmin; height: 10vmin;
  border-radius: 100% 0% 0% 100% / 100% 100% 0% 0%;
  box-shadow: inset 0 2px 1vmin rgba(61, 220, 110, 0.2);
  background-image:
    linear-gradient(to bottom left, transparent, var(--dark-color)),
    linear-gradient(to bottom right, var(--green-mid) 50%, transparent 50%);
  -webkit-mask-image: linear-gradient(to bottom right, #fff 50%, transparent 50%);
  mask-image:         linear-gradient(to bottom right, #fff 50%, transparent 50%);
}

/* ─── Feuillage droite (g-fr) ────────────────────────────── */
.flower__g-fr {
  position: absolute;
  bottom: -4vmin; left: 0;
  transform-origin: bottom left;
  z-index: 10;
  animation: flower__g-fr-ans 2s linear infinite;
}
.flower__g-fr .leaf {
  width: 30vmin; height: 50vmin;
  border-top-left-radius: 100%;
  border-left: 2vmin solid var(--green-dark);
  -webkit-mask-image: linear-gradient(to top, transparent 25%, #fff 50%);
  position: relative; z-index: 1;
}
.flower__g-fr__leaf {
  position: absolute;
  top: 0; left: 0;
  width: 10vmin; height: 10vmin;
  border-radius: 100% 0% 0% 100% / 100% 100% 0% 0%;
  box-shadow: inset 0 2px 1vmin rgba(61, 220, 110, 0.2);
  background-image:
    linear-gradient(to bottom left, transparent, var(--dark-color) 98%),
    linear-gradient(to bottom right, var(--green-mid) 45%, transparent 50%);
  -webkit-mask-image: linear-gradient(135deg, #fff 40%, transparent 50%);
}
.flower__g-fr__leaf--1 { left:20vmin;             transform:rotate(45deg);               animation:flower__g-fr-leaft-ans-1 0.5s 5.2s linear backwards; }
.flower__g-fr__leaf--2 { left:12vmin; top:-7vmin;  transform:rotate(25deg) rotateY(-180deg); animation:flower__g-fr-leaft-ans-6 0.5s 5.0s linear backwards; }
.flower__g-fr__leaf--3 { left:15vmin; top: 6vmin;  transform:rotate(55deg);               animation:flower__g-fr-leaft-ans-5 0.5s 4.8s linear backwards; }
.flower__g-fr__leaf--4 { left: 6vmin; top:-2vmin;  transform:rotate(25deg) rotateY(-180deg); animation:flower__g-fr-leaft-ans-6 0.5s 4.6s linear backwards; }
.flower__g-fr__leaf--5 { left:10vmin; top:14vmin;  transform:rotate(55deg);               animation:flower__g-fr-leaft-ans-5 0.5s 4.4s linear backwards; }
.flower__g-fr__leaf--6 { left: 0;     top: 6vmin;  transform:rotate(25deg) rotateY(-180deg); animation:flower__g-fr-leaft-ans-6 0.5s 4.2s linear backwards; }
.flower__g-fr__leaf--7 { left: 5vmin; top:22vmin;  transform:rotate(45deg);               animation:flower__g-fr-leaft-ans-7 0.5s 4.0s linear backwards; }
.flower__g-fr__leaf--8 { left:-4vmin; top:15vmin;  transform:rotate(15deg) rotateY(-180deg); animation:flower__g-fr-leaft-ans-8 0.5s 3.8s linear backwards; }

/* ─── Longues herbes d'arrière-plan ──────────────────────── */
.long-g {
  position: absolute;
  bottom: 25vmin; left: -42vmin;
  transform-origin: bottom left;
}
.long-g--1 { bottom:0;   transform:scale(0.8) rotate(-5deg); }
.long-g--1 .leaf { -webkit-mask-image: linear-gradient(to top, transparent 40%, #fff 80%) !important; }
.long-g--1 .leaf--1 { --w:5vmin; --h:60vmin; left:-2vmin; transform:rotate(3deg) rotateY(-180deg); }
.long-g--2, .long-g--3 { bottom:-3vmin; left:-35vmin; transform-origin:center; transform:scale(0.6) rotateX(60deg); }
.long-g--2 .leaf, .long-g--3 .leaf { -webkit-mask-image: linear-gradient(to top, transparent 50%, #fff 80%) !important; }
.long-g--2 .leaf--1, .long-g--3 .leaf--1 { left:-1vmin; transform:rotateY(-180deg); }
.long-g--3 { left:-17vmin; bottom:0; }
.long-g--3 .leaf { -webkit-mask-image: linear-gradient(to top, transparent 40%, #fff 80%) !important; }
.long-g--4 { left:25vmin; bottom:-3vmin; transform-origin:center; transform:scale(0.6) rotateX(60deg); }
.long-g--4 .leaf { -webkit-mask-image: linear-gradient(to top, transparent 50%, #fff 80%) !important; }
.long-g--5 { left:42vmin; bottom:0; transform:scale(0.8) rotate(2deg); }
.long-g--6 { left:0; bottom:-20vmin; z-index:100; filter:blur(0.3vmin); transform:scale(0.8) rotate(2deg); }
.long-g--7 { left:35vmin; bottom:20vmin; z-index:-1; filter:blur(0.3vmin); transform:scale(0.6) rotate(2deg); opacity:0.7; }

.long-g .leaf {
  --w: 15vmin; --h: 40vmin; --c: var(--green-dark);
  position: absolute; bottom: 0;
  width: var(--w); height: var(--h);
  border-top-left-radius: 100%;
  border-left: 2vmin solid var(--c);
  -webkit-mask-image: linear-gradient(to top, transparent 20%, var(--dark-color));
  transform-origin: bottom center;
}
.long-g .leaf--0 { left:2vmin;  animation:leaf-ans-1 4s linear infinite; }
.long-g .leaf--1 { --w:5vmin; --h:60vmin; animation:leaf-ans-1 4s linear infinite; }
.long-g .leaf--2 { --w:10vmin; --h:40vmin; left:-0.5vmin; bottom:5vmin; transform-origin:bottom left; transform:rotateY(-180deg); animation:leaf-ans-2 3s linear infinite; }
.long-g .leaf--3 { --w:5vmin; --h:30vmin; left:-1vmin; bottom:3.2vmin; transform-origin:bottom left; transform:rotate(-10deg) rotateY(-180deg); animation:leaf-ans-3 3s linear infinite; }

/* ─── Utilitaire d'apparition ────────────────────────────── */
.grow-ans {
  animation: grow-ans 2s var(--d) backwards;
}
.growing-grass {
  animation: growing-grass-ans 1s 2s backwards;
}

/* ─── Pause avant chargement ─────────────────────────────── */
.not-loaded * {
  animation-play-state: paused !important;
}

/* ═══════════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════════ */

@keyframes moving-flower-1 {
  0%, 100% { transform: rotate(2deg); }
  50%       { transform: rotate(-2deg); }
}
@keyframes moving-flower-2 {
  0%, 100% { transform: rotate(18deg); }
  50%       { transform: rotate(14deg); }
}
@keyframes moving-flower-3 {
  0%, 100% { transform: rotate(-18deg); }
  50%       { transform: rotate(-20deg) rotateY(-10deg); }
}

@keyframes blooming-flower {
  0% { transform: scale(0); }
}
@keyframes blooming-leaf-right {
  0% { transform-origin: left;  transform: rotate(70deg)  rotateY(30deg) scale(0); }
}
@keyframes blooming-leaf-left {
  0% { transform-origin: right; transform: rotate(-70deg) rotateY(30deg) scale(0); }
}
@keyframes grow-flower-tree {
  0% { height: 0; border-radius: 1vmin; }
}

@keyframes light-ans {
  0%   { opacity: 0; transform: translateY(0); }
  25%  { opacity: 1; transform: translateY(-5vmin)  translateX(-2vmin); }
  50%  { opacity: 1; transform: translateY(-15vmin) translateX( 2vmin); filter: blur(0.2vmin); }
  75%  {             transform: translateY(-20vmin) translateX(-2vmin); filter: blur(0.2vmin); }
  100% { opacity: 0; transform: translateY(-30vmin); filter: blur(1vmin); }
}

@keyframes moving-grass {
  0%, 100% { transform: rotate(-48deg) rotateY(40deg); }
  50%       { transform: rotate(-50deg) rotateY(40deg); }
}
@keyframes moving-grass--2 {
  0%, 100% { transform: scale(0.5) rotate(75deg)  rotateX(10deg) rotateY(-200deg); }
  50%       { transform: scale(0.5) rotate(79deg)  rotateX(10deg) rotateY(-200deg); }
}
@keyframes growing-grass-ans {
  0% { transform: scale(0); }
}

@keyframes growing-grass-ans--1 { 0% { transform-origin:bottom left;  transform:rotate(-20deg) scale(0); } }
@keyframes growing-grass-ans--2 { 0% { transform-origin:bottom right; transform:rotate(10deg)  scale(0); } }
@keyframes growing-grass-ans--3 { 0% { transform-origin:bottom left;  transform:rotate(-18deg) rotateX(-20deg) scale(0); } }
@keyframes growing-grass-ans--4 { 0% { transform-origin:bottom right; transform:rotate(2deg)   scale(0); } }
@keyframes growing-grass-ans--5 { 0% { transform-origin:bottom left;  transform:rotate(-24deg) rotateX(-20deg) scale(0); } }
@keyframes growing-grass-ans--6 { 0% { transform-origin:bottom right; transform:rotate(10deg)  scale(0); } }
@keyframes growing-grass-ans--7 { 0% { transform-origin:bottom left;  transform:rotate(-10deg) scale(0); } }
@keyframes growing-grass-ans--8 { 0% { transform-origin:bottom right; transform:rotate(10deg)  scale(0); } }

@keyframes flower-g-long-ans {
  0%, 100% { transform: rotate(-30deg) rotateY(-20deg); }
  50%       { transform: rotate(-32deg) rotateY(-20deg); }
}
@keyframes flower-g-right-ans {
  0%, 100% { transform: rotate(20deg); }
  50%       { transform: rotate(24deg) rotateX(-20deg); }
}
@keyframes flower-g-right-ans--2 {
  0%, 100% { transform: rotateY(-180deg) rotate(0deg) rotateX(-20deg); }
  50%       { transform: rotateY(-180deg) rotate(6deg) rotateX(-20deg); }
}
@keyframes flower__g-front-ans {
  0%, 100% { transform: rotate(-28deg) rotateY(30deg) scale(1.04); }
  50%       { transform: rotate(-35deg) rotateY(40deg) scale(1.04); }
}
@keyframes flower__g-front__leaf-ans       { 0% { transform: rotate(10deg) scale(0); } }
@keyframes flower__g-front__leaf-left-ans  { 0% { transform: rotateY(-180deg) rotate(5deg) scale(0); } }
@keyframes flower__g-front__leaf-left-ans-2{ 0% { transform: rotateY(-180deg) scale(0); } }
@keyframes flower__g-fr-ans {
  0%, 100% { transform: rotate(2deg); }
  50%       { transform: rotate(4deg); }
}
@keyframes flower__g-fr-leaft-ans-1 { 0% { transform-origin:left;  transform:rotate(45deg)               scale(0); } }
@keyframes flower__g-fr-leaft-ans-5 { 0% { transform-origin:left;  transform:rotate(55deg)               scale(0); } }
@keyframes flower__g-fr-leaft-ans-6 { 0% { transform-origin:right; transform:rotate(25deg) rotateY(-180deg) scale(0); } }
@keyframes flower__g-fr-leaft-ans-7 { 0% { transform-origin:left;  transform:rotate(45deg)               scale(0); } }
@keyframes flower__g-fr-leaft-ans-8 { 0% { transform-origin:right; transform:rotate(15deg) rotateY(-180deg) scale(0); } }

@keyframes leaf-ans-1 {
  0%, 100% { transform: rotate(-5deg) scale(1); }
  50%       { transform: rotate(5deg)  scale(1.1); }
}
@keyframes leaf-ans-2 {
  0%, 100% { transform: rotateY(-180deg) rotate(5deg); }
  50%       { transform: rotateY(-180deg) rotate(0deg) scale(1.1); }
}
@keyframes leaf-ans-3 {
  0%, 100% { transform: rotate(-10deg) rotateY(-180deg); }
  50%       { transform: rotate(-20deg) rotateY(-180deg); }
}

@keyframes grow-ans {
  0% { transform: scale(0); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   BULLES DE MESSAGE
═══════════════════════════════════════════════════════════ */
.bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.bubble {
  position: absolute;
  max-width: 260px;
  padding: 14px 20px;
  border-radius: 22px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(14px, 2.2vmin, 18px);
  line-height: 1.5;
  color: rgba(255, 230, 240, 0.92);
  background: rgba(80, 10, 60, 0.45);
  border: 1px solid rgba(255, 140, 180, 0.3);
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 24px rgba(200, 60, 130, 0.18),
    inset 0 1px 0 rgba(255, 200, 220, 0.15);
  animation: bubble-float 6s ease-in-out infinite;
  opacity: 0;
}

/* Queue de la bulle */
.bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 22px;
  width: 18px; height: 10px;
  background: rgba(80, 10, 60, 0.45);
  clip-path: polygon(0 0, 100% 0, 30% 100%);
  border-left: 1px solid rgba(255, 140, 180, 0.3);
}

/* Positions et délais des bulles */
.bubble--1 {
  top: 18%; left: 4%;
  animation-delay: 5s;
  animation-duration: 7s;
}
.bubble--2 {
  top: 38%; right: 4%;
  animation-delay: 7s;
  animation-duration: 6s;
}
.bubble--2::after {
  left: auto; right: 22px;
  clip-path: polygon(0 0, 100% 0, 70% 100%);
}
.bubble--3 {
  top: 60%; left: 3%;
  animation-delay: 9s;
  animation-duration: 8s;
}
.bubble--4 {
  top: 22%; right: 5%;
  animation-delay: 11s;
  animation-duration: 7s;
}
.bubble--4::after {
  left: auto; right: 22px;
  clip-path: polygon(0 0, 100% 0, 70% 100%);
}

@keyframes bubble-float {
  0%   { opacity: 0;    transform: translateY(14px) scale(0.94); }
  12%  { opacity: 1;    transform: translateY(0)    scale(1); }
  88%  { opacity: 1;    transform: translateY(-8px) scale(1); }
  100% { opacity: 0;    transform: translateY(-20px) scale(0.96); }
}

/* ═══════════════════════════════════════════════════════════
   MESSAGES QUI TOMBENT
═══════════════════════════════════════════════════════════ */
.falling-msgs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.fmsg {
  position: absolute;
  top: -6%;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(13px, 2vmin, 17px);
  color: rgba(255, 200, 220, 0.85);
  text-shadow: 0 0 12px rgba(255, 100, 160, 0.7);
  white-space: nowrap;
  animation: msg-fall linear infinite;
  opacity: 0;
}

/* Positions horizontales et timings variés */
.fmsg--1  { left:  8%; animation-duration: 9s;  animation-delay:  2s;  font-size: 2.4vmin; }
.fmsg--2  { left: 18%; animation-duration: 11s; animation-delay:  5s;  }
.fmsg--3  { left: 28%; animation-duration: 10s; animation-delay:  8s;  }
.fmsg--4  { left: 38%; animation-duration: 8s;  animation-delay:  1s;  font-size: 2.8vmin; color: rgba(255, 220, 100, 0.7); text-shadow: 0 0 12px rgba(255, 200, 60, 0.6); }
.fmsg--5  { left: 50%; animation-duration: 12s; animation-delay:  4s;  }
.fmsg--6  { left: 62%; animation-duration: 9s;  animation-delay:  7s;  font-size: 2.6vmin; }
.fmsg--7  { left: 72%; animation-duration: 11s; animation-delay: 10s;  }
.fmsg--8  { left: 80%; animation-duration: 8s;  animation-delay:  3s;  font-size: 2.8vmin; color: rgba(255, 220, 100, 0.7); text-shadow: 0 0 12px rgba(255, 200, 60, 0.6); }
.fmsg--9  { left: 88%; animation-duration: 10s; animation-delay:  6s;  }
.fmsg--10 { left: 14%; animation-duration: 13s; animation-delay: 12s;  font-size: 2.4vmin; }
.fmsg--11 { left: 55%; animation-duration: 9s;  animation-delay: 14s;  }
.fmsg--12 { left: 90%; animation-duration: 11s; animation-delay: 16s;  font-size: 2.6vmin; color: rgba(255, 220, 100, 0.7); }

@keyframes msg-fall {
  0%   { opacity: 0;    transform: translateY(0)     rotate(-6deg); }
  8%   { opacity: 0.85; }
  50%  {                transform: translateY(52vh)   rotate(4deg);  }
  90%  { opacity: 0.7;  }
  100% { opacity: 0;    transform: translateY(108vh)  rotate(-3deg); }
}