:root{
  --bg:#0b1020;
  --card:#121a33;
  --muted:#9fb0ff;
  --text:#eef1ff;
  --accent:#ff4fd8;
  --accent2:#7c5cff;
  --ok:#2ee59d;
  --warn:#ffcc66;
  --bad:#ff6b6b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(1200px 800px at 20% 10%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(900px 700px at 90% 20%, rgba(255,79,216,.18), transparent 55%),
              var(--bg);
  color:var(--text);
}

a{color:inherit}
.container{
	position: relative; z-index: 10;
  width:min(1100px, 92vw);
  margin:0 auto;
  padding:24px 0 40px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 0;
}
.brand{
  display:flex; flex-direction:column; gap:4px;
}
.brand h1{margin:0; font-size:18px; letter-spacing:.2px}
.brand small{color:var(--muted)}
/* Topbar nav: base */
.nav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.nav-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  line-height:1;
}

.nav-btn:hover{ background:rgba(255,255,255,.09); }

.nav-btn .ico{
  font-size:16px;
}

.nav-btn .txt{
  white-space:nowrap;
}

/* Make topbar adapt on small screens */
@media (max-width: 520px){
  .topbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .brand{
    align-items:flex-start;
  }

  .nav{
    justify-content:space-between;
  }

  /* Hide long texts, keep icons */
  .nav-btn .txt{
    display:none;
  }

  /* Keep touch-friendly size */
  .nav-btn{
    padding:10px 10px;
    min-width:44px;
    justify-content:center;
  }

  /* Language select smaller */
  .langsel{
    min-width:76px;
    padding:10px 10px;
  }
}

.card{
  background:rgba(18,26,51,.82);
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  padding:16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.col-6{grid-column: span 6}
.col-12{grid-column: span 12}

@media (max-width: 860px){
  .col-6{grid-column: span 12}
}

.h2{margin:0 0 10px; font-size:18px}
.muted{color:var(--muted)}
hr.sep{border:0; border-top:1px solid rgba(255,255,255,.09); margin:14px 0}

.input, select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}
label{display:block; margin:10px 0 7px; color:var(--muted); font-size:13px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.08);
  cursor:pointer;
  color:var(--text);
  text-decoration:none;
  user-select:none;
}
.btn:hover{background:rgba(255,255,255,.12)}
.btn.primary{
  background: linear-gradient(135deg, rgba(255,79,216,.95), rgba(124,92,255,.95));
  border-color: rgba(255,255,255,.16);
}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ok{background: rgba(46,229,157,.16); border-color: rgba(46,229,157,.35)}
.btn.bad{background: rgba(255,107,107,.16); border-color: rgba(255,107,107,.35)}

.flash{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  margin-bottom:12px;
}
.flash.ok{background: rgba(46,229,157,.12); border-color: rgba(46,229,157,.35)}
.flash.bad{background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.35)}
.flash.warn{background: rgba(255,204,102,.12); border-color: rgba(255,204,102,.35)}

.theme-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 860px){ .theme-grid{grid-template-columns:1fr} }

.theme{
  position:relative;
  overflow:hidden;
  min-height:90px;
}
.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  display:inline-flex;
  width:max-content;
}

.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono";
  font-size:12px;
  padding:2px 6px;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

/* ===== Valentine background petals ===== */
body[data-theme="valentine"] /* Le conteneur qui prend tout l'écran */
.petals {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Important : laisse passer les clics au travers */
  z-index: 5;        /* Toujours au-dessus */
  overflow: hidden;
}

/* Le style du cœur */
.petal {
  position: absolute;
  top: -10vh; /* On commence un peu au-dessus de l'écran */
  display: block;
  font-size: 2rem; /* Taille de base */
  line-height: 1;
  user-select: none;
  
  /* Animation définie ici, mais la durée est contrôlée par ton JS */
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  
  /* Un petit effet de flou/lueur romantique */
  text-shadow: 0 0 5px rgba(255, 100, 100, 0.5);
  will-change: transform;
}

/* L'animation de chute */
@keyframes fall {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg); }
  25%  { transform: translate3d(15px, 20vh, 0) rotate(90deg); }
  50%  { transform: translate3d(-15px, 55vh, 0) rotate(180deg); }
  75%  { transform: translate3d(15px, 85vh, 0) rotate(270deg); }
  100% { transform: translate3d(0, 112vh, 0) rotate(360deg); }
}

/* Valentine card layout */
.val-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
}
.val-stage{
  position:relative;
  min-height: 320px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:22px;
  gap:14px;
}
.val-stage h2{margin:0; font-size:22px}
.val-actions{
  position: static; /* IMPORTANT: pas de position:relative */
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  margin-top:8px;
}
/* On laisse le bouton normal par défaut */
.val-no{ position: static; width:auto; }

/* Mode orbite */
.val-stage{ position:relative; overflow:visible; } /* IMPORTANT */
.val-no.orbiting{
  position:absolute !important;   /* relatif à .val-stage */
  z-index:20;
  transform: translate(-50%, -50%);
  will-change: left, top;
}
.val-hint{font-size:13px; color:var(--muted)}
.game{
  margin-top:10px;
  display:none;
  width:min(420px, 90vw);
}
.game.on{display:block}
.grid-hearts{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.heart{
  padding:12px 0;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer;
  font-size:22px;
}
select option {
  background: #ffffff;
  color: #111111;
}

/* --- Password reveal --- */
.pw-wrap{ position:relative; }
.pw-toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:var(--text);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
.pw-toggle:hover{ background:rgba(255,255,255,.12); }
/* --- Language switcher --- */
.langform{display:inline-flex; align-items:center}
.langsel{
  width:auto;
  min-width:92px;
  padding:10px 12px;
  border-radius:12px;
}
/* Petals: reduce motion on mobile / accessibility */
@media (prefers-reduced-motion: reduce) {
  .petal { animation: none !important; }
}

/* On small screens, fewer petals via JS, but also reduce blur */
@media (max-width: 520px){
  .petal{ filter:none; opacity:.75; }
}
.val-photo{
  width: min(220px, 62vw);
  height: min(220px, 62vw);
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.val-note{
  max-width: 640px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
}

/* animation d’apparition (val-card) */
.val-card.val-enter { opacity: 0; transform: translateY(12px) scale(.98); }
.val-card.val-enter.val-enter-on { transition: .55s ease; opacity: 1; transform: translateY(0) scale(1); }
.sound-gate{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 999999;
  padding: 18px;
}
/* WOW after sound */
.sound-gate.off{ animation: gateOut .35s ease forwards; }
@keyframes gateOut { to{ opacity:0; transform: scale(1.02); } }

.val-card.wow{
  animation: cardPop .65s cubic-bezier(.2,.9,.2,1) both;
  box-shadow: 0 18px 60px rgba(255, 90, 140, .20);
}
@keyframes cardPop{
  0%{ opacity:0; transform: translateY(18px) scale(.96); filter: blur(2px); }
  60%{ opacity:1; transform: translateY(0) scale(1.02); filter: blur(0); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}

.sparkle-burst{ position:fixed; inset:0; pointer-events:none; z-index:999997; }
.sparkle-burst span{
  position:absolute;
  font-size:18px;
  animation: spark 1.15s ease forwards;
  opacity:0;
}
@keyframes spark{
  0%{ transform: translate(0,0) scale(.6); opacity:0; }
  15%{ opacity:1; }
  100%{ transform: translate(var(--dx), var(--dy)) scale(1.25) rotate(160deg); opacity:0; }
}

/* petals intensity after sound */
.petals.boost .petal{ opacity: .85 !important; filter: blur(0); }
.card.val-card{ position:relative; overflow:hidden; } /* important pour orbite */

.val-no.orbiting{
  position:absolute !important;
  z-index:20;
  left:0; top:0;
  transform: translate(-50%, -50%);
  will-change: left, top;
}
.no-orbit-layer{
  position:absolute;
  inset:0;
  overflow:hidden;       /* double sécurité */
  pointer-events:none;   /* la couche ne bloque pas les clics */
  z-index:30;
}
.no-orbit-layer .val-no{
  pointer-events:auto;   /* MAIS le bouton reste cliquable */
}

.val-no.orbiting{
  position:absolute !important;
  left:0;
  top:0;
  transform: translate(-50%, -50%);
  will-change: left, top;
}
/* Message NON : highlight / toast */
.val-hint[data-no-msg]{
  max-width: 680px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: .2s ease;
  position: relative;
}

/* état flash */
.val-hint.is-flash{
  color: var(--text);
  background: linear-gradient(135deg, rgba(255,79,216,.22), rgba(124,92,255,.18));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 6px rgba(255,79,216,.10), 0 14px 40px rgba(0,0,0,.25);
  animation: msgPop .38s ease, msgGlow .9s ease;
}

@keyframes msgPop{
  0%{ transform: translateY(6px) scale(.96); opacity:.6; }
  60%{ transform: translateY(0) scale(1.02); opacity:1; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}
@keyframes msgGlow{
  0%,100%{ filter: none; }
  50%{ filter: brightness(1.12); }
}

/* petit shake optionnel */
.val-hint.is-shake{
  animation: msgShake .28s ease;
}
@keyframes msgShake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-3px); }
  50%{ transform: translateX(3px); }
  75%{ transform: translateX(-2px); }
  100%{ transform: translateX(0); }
}
.val-photo.is-hidden { display:none; }

.val-photo.reveal {
  display:block !important;
  animation: photoReveal .55s ease both;
}
@keyframes photoReveal{
  0%{ opacity:0; transform: translateY(10px) scale(.96); filter: blur(2px); }
  100%{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}