html, body { min-height: 100%; }
.video-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; }
.video-bg video { width: 100%; height: 100%; object-fit: cover; }
.video-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(0,255,255,0.25) 0%, rgba(0,0,0,0.55) 40%, rgba(255,0,255,0.25) 100%);
  pointer-events: none; background-size: 200% 200%; animation: equinoxeFlow 18s ease infinite;
}
@keyframes equinoxeFlow { 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
header, nav, main { position: relative; z-index: 1; }

header {
  padding: 28px 20px 10px;
  text-align: center;
}

header h1 {
  margin: 0;
  color: #00ffff;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(0,255,255,0.9),
    0 0 22px rgba(0,255,255,0.55),
    0 0 40px rgba(255,0,255,0.35);
}

nav {
  text-align: center;
  margin-top: 8px;
}

nav a {
  color: #bfffff;
  text-shadow: 0 0 8px rgba(0,255,255,0.5);
  font-size: 0.9rem;
}

@media (max-width: 768px) { .video-bg video { filter: blur(2px); } }
body { display: flex; flex-direction: column; }

/* ═══ FICHES PRODUIT ═══ */
.produits-section {
  position: relative; z-index: 1;
  max-width: 1000px; margin: 50px auto 0; padding: 0 20px;
}
.produits-section > h2 {
  color: #00ffff; text-align: center; font-size: 1em;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-shadow: 0 0 14px rgba(0,255,255,0.5); margin-bottom: 30px;
}
.produits-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px;
}
@media (max-width: 800px) { .produits-grid { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; } }

.produit-card {
  background: linear-gradient(135deg, rgba(0,0,0,0.78), rgba(20,10,40,0.78));
  border: 1px solid rgba(0,255,255,0.18);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 18px rgba(0,255,255,0.07);
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.produit-card:hover { transform: translateY(-5px); box-shadow: 0 0 28px rgba(0,255,255,0.18); }
.produit-card.selected { border-color: #00ffff; box-shadow: 0 0 28px rgba(0,255,255,0.30); }
.produit-card.selected-collector { border-color: #ff9600; box-shadow: 0 0 28px rgba(255,150,0,0.30); }

.produit-img-wrap { position: relative; overflow: hidden; aspect-ratio: 3/4; background: #050505; }
.produit-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; display: block; }
.produit-card:hover .produit-img-wrap img { transform: scale(1.05); }

.produit-badge {
  position: absolute; top: 10px; right: 10px;
  padding: 4px 11px; border-radius: 20px; font-size: 0.72em; font-weight: 500;
}
.badge-ebook    { background: rgba(0,170,255,0.88); color: #fff; }
.badge-broche   { background: rgba(160,80,255,0.88); color: #fff; }
.badge-collector{ background: linear-gradient(135deg,#ff9600,#ff4400); color: #fff; box-shadow: 0 0 10px rgba(255,150,0,0.5); }

.produit-body { padding: 16px 18px 20px; }
.produit-nom  { color: #fff; font-size: 1em; font-weight: 500; margin-bottom: 3px; }
.produit-sous { color: rgba(0,255,255,0.65); font-size: 0.76em; letter-spacing: 0.04em; margin-bottom: 12px; }

.produit-desc { color: rgba(255,255,255,0.60); font-size: 0.82em; line-height: 1.55; margin-bottom: 12px; font-style: italic; }

.produit-features { list-style: none; padding: 0; margin: 0 0 14px; }
.produit-features li {
  font-size: 0.80em; color: rgba(255,255,255,0.60);
  padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex; align-items: flex-start; gap: 7px; line-height: 1.4;
}
.produit-features li:last-child { border-bottom: none; }
.produit-features li::before { content: '✦'; color: #00ffcc; font-size: 0.68em; flex-shrink: 0; margin-top: 3px; }
.collector-feat::before { color: #ff9600 !important; }

.produit-prix { font-size: 1.5em; font-weight: 500; color: #fff; display: flex; align-items: baseline; gap: 5px; }
.produit-prix .cur { font-size: 0.58em; color: rgba(255,255,255,0.40); }

.produit-btn {
  margin-top: 12px; width: 100%; padding: 9px;
  border: 1px solid rgba(0,255,255,0.35); border-radius: 7px;
  background: transparent; color: #00ffff; font-size: 0.85em;
  cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.produit-btn:hover { background: rgba(0,255,255,0.09); }
.produit-card.selected .produit-btn { background: rgba(0,255,255,0.13); border-color: #00ffff; }
.produit-card.selected-collector .produit-btn { background: rgba(255,150,0,0.13); border-color: #ff9600; color: #ff9600; }

/* ═══ FORMULAIRE ═══ */
main.container {
  background: linear-gradient(135deg, rgba(0,0,0,0.75), rgba(20,10,40,0.75));
  border: 1px solid rgba(0,255,255,0.25);
  box-shadow: 0 0 30px rgba(0,255,255,0.15), inset 0 0 40px rgba(255,0,255,0.05);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 36px 50px; max-width: 520px; margin: 0 auto 120px;
  border-radius: 14px; animation: fadeInEquinoxe 1.2s ease forwards;
}
@keyframes fadeInEquinoxe { from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }

main.container h2 { color: #00ffff; text-shadow: 0 0 12px rgba(0,255,255,0.6); font-size: 1em; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
main.container label { color: #ffffff; font-size: 0.9em; }

main.container input, main.container select {
  width: 100%; padding: 10px; box-sizing: border-box;
  background: rgba(0,0,0,0.7); border: 1px solid rgba(0,255,255,0.3);
  color: #ffffff; font-size: 1em; font-family: inherit; border-radius: 6px;
}
main.container input:focus, main.container select:focus {
  outline: none; border-color: #ff00ff; box-shadow: 0 0 10px rgba(255,0,255,0.4);
}
main.container button[type=submit] {
  margin-top: 20px; width: 100%; padding: 13px;
  background: linear-gradient(135deg, #ff00ff, #00ffff);
  border: none; color: #000; font-weight: bold; cursor: pointer;
  font-size: 1em; border-radius: 8px; box-shadow: 0 0 15px rgba(255,0,255,0.6);
}
main.container button[type=submit]:hover { filter: brightness(1.12); }

/* Récap produit */
.produit-recap {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,255,255,0.06); border: 1px solid rgba(0,255,255,0.15);
  border-radius: 8px; padding: 11px 14px; margin-bottom: 20px;
}
.recap-nom  { color: #fff; font-size: 0.92em; font-weight: 500; }
.recap-prix { color: #00ffcc; font-size: 0.88em; margin-left: auto; white-space: nowrap; }

.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }

#bloc-livraison { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0,255,255,0.15); }
#bloc-livraison.visible { display: block; }
#bloc-dedicace { display: none; }

.section-label {
  color: #00ffff; font-size: 0.82em; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 14px;
  text-shadow: 0 0 8px rgba(0,255,255,0.5);
}

/* Audio */
.audio-control {
  position: fixed; right: 20px; z-index: 10;
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-radius: 14px; background: rgba(0,0,0,0.6);
  border: 1px solid rgba(0,255,255,0.3); backdrop-filter: blur(6px);
  box-shadow: 0 0 12px rgba(0,255,255,0.2); transition: bottom 0.3s ease;
}
.audio-control button { background: none; border: none; color: #00ffff; font-size: 1em; cursor: pointer; }
.audio-control input[type="range"] { width: 60px; }
footer { position: relative; z-index: 2; }
.footer-equinoxe {
  margin-top: 0; padding: 25px 20px; text-align: center; font-size: 0.9em; color: #fff;
  background: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(20,10,40,0.65));
  border-top: 1px solid rgba(0,255,255,0.25);
  box-shadow: 0 -10px 30px rgba(0,255,255,0.12), inset 0 0 20px rgba(255,0,255,0.05);
  backdrop-filter: blur(6px);
}
.footer-sub { font-size: 0.8em; color: #00ffff; letter-spacing: 0.05em; }
.footer-links { margin-top: 10px; font-size: 0.78em; }
.footer-links a { color: rgba(0,255,255,0.6); text-decoration: none; margin: 0 8px; }
.footer-links a:hover { color: #00ffff; text-decoration: underline; }


.commande-subtitle {
  margin: 8px 0 0;
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255,255,255,0.35);
}