/* ================================================
   PALETTE DE COULEURS — modifiez ici uniquement
   ================================================ */
:root {
  --fond-1:             #1a3a2a;
  --fond-2:             #0d1f17;
  --fond-3:             #060e0b;
  --tige-clair:         mediumseagreen;
  --tige-fonce:         darkgreen;
  --feuille-clair:      lightgreen;
  --feuille-fonce:      forestgreen;
  --petale-clair:       lightyellow;
  --petale-milieu:      orange;
  --petale-fonce:       darkorange;
  --petale2-clair:      goldenrod;
  --petale2-milieu:     chocolate;
  --petale2-fonce:      saddlebrown;
  --pistil-clair:       lightyellow;
  --pistil-milieu:      gold;
  --pistil-fonce:       darkgoldenrod;
  --titre-couleur:      rgba(255, 230, 150, 0.55);
  --hint-couleur:       rgba(255, 200, 100, 0.4);
  --particule-couleur:  rgba(255, 220, 100, 0.6);
  --modal-fond-1:       #1e3d2a;
  --modal-fond-2:       #0f2219;
  --modal-bordure:      rgba(255, 200, 80, 0.25);
  --modal-texte:        rgba(255, 235, 180, 0.9);
  --modal-bouton:       rgba(255, 200, 80, 0.4);
  --modal-bouton-texte: rgba(255, 200, 80, 0.7);
  --overlay-fond:       rgba(0, 0, 0, 0.75);
  --countdown-texte:    rgba(255, 230, 150, 0.9);
}

/* ================================================
   IMPORTS
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&family=Lora:ital@0;1&display=swap');

/* ================================================
   BASE
   ================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: radial-gradient(ellipse at 60% 30%, var(--fond-1) 0%, var(--fond-2) 60%, var(--fond-3) 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Lora', serif;
  overflow: hidden;
}

/* ================================================
   COUNTDOWN — fond géré par JS (diaporama)
   ================================================ */
#loading {
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: var(--fond-2);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition: opacity 0.8s ease;
}

/* Voile sombre pour lisibilité du texte */
#loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
}

/* Enfants au dessus du voile */
#loading > * {
  position: relative;
  z-index: 1;
}

#loading-heart {
  font-size: 80px;
  animation: batement 0.8s ease-in-out infinite;
}

#loading-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--countdown-texte);
  font-size: 1.1rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.9;
}

#loading-countdown {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.cd-bloc {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 2px;
}

.cd-bloc span {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: bold;
  color: var(--countdown-texte);
  letter-spacing: 0.02em;
  line-height: 1;
}

.cd-bloc small {
  font-family: 'Lora', serif;
  font-size: 0.7rem;
  color: rgba(255, 230, 150, 0.6);
  letter-spacing: 0.05em;
}

.cd-sep {
  font-size: 1.8rem;
  color: rgba(255, 230, 150, 0.4);
  font-family: 'Playfair Display', serif;
  margin: 0 2px;
}

#loading-date {
  font-family: 'Lora', serif;
  font-style: italic;
  color: rgba(255, 230, 150, 0.8);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
}

/* ================================================
   CODE SECRET
   ================================================ */
#code-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#code-label {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: rgba(255, 230, 150, 0.8);
  font-size: 1rem;
  letter-spacing: 0.2em;
}

#code-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}

#code-input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 200, 80, 0.4);
  border-radius: 10px;
  color: rgba(255, 230, 150, 0.9);
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  padding: 10px 18px;
  text-align: center;
  letter-spacing: 0.2em;
  outline: none;
  transition: border-color 0.3s ease;
  width: 180px;
}

#code-input::placeholder {
  color: rgba(255, 230, 150, 0.3);
}

#code-input:focus {
  border-color: rgba(255, 220, 100, 0.8);
}

#code-btn {
  background: rgba(255, 200, 80, 0.15);
  border: 1px solid rgba(255, 200, 80, 0.4);
  color: rgba(255, 220, 100, 0.9);
  font-size: 1.2rem;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#code-btn:hover {
  background: rgba(255, 200, 80, 0.3);
  color: gold;
}

#code-erreur {
  font-family: 'Lora', serif;
  font-size: 0.85rem;
  color: crimson;
  letter-spacing: 0.05em;
  min-height: 1.2em;
}

/* ================================================
   PARTICULES
   ================================================ */
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--particule-couleur), transparent);
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0%   { transform: translateY(100vh); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-10vh); opacity: 0; }
}

/* ================================================
   SCÈNE
   ================================================ */
.scene {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--titre-couleur);
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 40px;
  animation: fadeIn 2s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================
   FLEUR PRINCIPALE
   ================================================ */
#fleur-svg {
  width: 260px;
  height: 340px;
  cursor: pointer;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(255, 180, 80, 0.25));
  transition: filter 0.4s ease;
}
#fleur-svg:hover {
  filter: drop-shadow(0 0 35px rgba(255, 200, 80, 0.55));
}

/* ================================================
   FLEURS DE FOND
   ================================================ */
#bg-fleurs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-fleur {
  position: absolute;
  transform-origin: center bottom;
}
.bg-fleur svg {
  display: block;
  overflow: visible;
}

/* ================================================
   HINT
   ================================================ */
.hint {
  margin-top: 24px;
  color: var(--hint-couleur);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeIn 1s ease 4.5s forwards;
}

/* ================================================
   OVERLAY
   ================================================ */
#overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
}
#overlay.visible { opacity: 1; pointer-events: all; }

.overlay-bg {
  position: absolute; inset: 0;
  background: var(--overlay-fond);
  backdrop-filter: blur(6px);
}

/* ================================================
   MODAL
   ================================================ */
.modal {
  position: relative; z-index: 10;
  background: linear-gradient(145deg, var(--modal-fond-1), var(--modal-fond-2));
  border: 1px solid var(--modal-bordure);
  border-radius: 20px;
  padding: 50px 55px;
  max-width: 480px; width: 90%;
  text-align: center;
  box-shadow: 0 0 80px rgba(255, 180, 60, 0.12);
  transform: scale(0.7);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#overlay.visible .modal { transform: scale(1); }

.modal-flower {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 22px;
  display: block;
  animation: batement 0.8s ease-in-out infinite;
}

.modal-text {
  color: var(--modal-texte);
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.85;
  white-space: pre-line;
}

.modal-close {
  margin-top: 30px;
  display: inline-block;
  background: none;
  border: 1px solid var(--modal-bouton);
  color: var(--modal-bouton-texte);
  padding: 10px 28px;
  border-radius: 40px;
  cursor: pointer;
  font-family: 'Lora', serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}
.modal-close:hover {
  background: rgba(255, 200, 80, 0.12);
  color: rgba(255, 220, 100, 1);
}

/* ================================================
   ANIMATIONS
   ================================================ */
@keyframes batement {
  0%   { transform: scale(1);    }
  14%  { transform: scale(1.2);  }
  28%  { transform: scale(1);    }
  42%  { transform: scale(1.15); }
  56%  { transform: scale(1);    }
  100% { transform: scale(1);    }
}

@keyframes balancer {
  0%,100% { transform: rotate(0deg);  transform-origin: bottom center; }
  25%     { transform: rotate(2deg);  transform-origin: bottom center; }
  75%     { transform: rotate(-2deg); transform-origin: bottom center; }
}