@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Permanent+Marker&family=Montserrat:wght@400;600;700&display=swap');

:root{--accent:#00D4FF;--accent-hover:#00A8CC;--bg:#000000;--text-primary:#00D4FF;--text-secondary:#FFFFFF;--text-muted:#888;--card-bg:#1a1a1a}
body{font-family:'Montserrat',sans-serif;background:var(--bg);color:var(--text-secondary);margin:0;padding:0}
header{background:var(--card-bg);padding:1.5rem 1.25rem;border-bottom:2px solid var(--accent)}
main{padding:1.25rem;max-width:900px;margin:1rem auto}
h1{font-family:'Pacifico',cursive;color:var(--accent);margin:0 0 .5rem;font-size:2.5rem;text-shadow:2px 2px 4px rgba(0,212,255,0.3)}
h2{font-family:'Permanent Marker',cursive;color:var(--accent);font-size:1.8rem}
.product, .free-offer{background:var(--card-bg);padding:1.5rem;border:2px solid var(--accent);margin-bottom:1rem;border-radius:8px;box-shadow:0 4px 12px rgba(0,212,255,0.2)}
.btn{display:inline-block;padding:.75rem 1.5rem;background:var(--accent);color:#000;font-weight:700;text-decoration:none;border-radius:6px;transition:all 0.3s;box-shadow:0 2px 8px rgba(0,212,255,0.4)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,212,255,0.6)}
.upload-form label{display:block;margin:.5rem 0}
.upload-form input[type=text],.upload-form input[type=email],.upload-form textarea{width:100%;padding:.75rem;border:1px solid var(--accent);background:var(--card-bg);color:var(--text-secondary);border-radius:4px}
.upload-form input:focus,.upload-form textarea:focus{outline:none;border-color:var(--accent-hover);box-shadow:0 0 8px rgba(0,212,255,0.3)}
.center{text-align:center;padding:2rem}
footer{padding:1.5rem;text-align:center;color:var(--text-muted);font-size:.9rem;border-top:1px solid var(--accent)}
footer a{color:var(--accent);text-decoration:none}
footer a:hover{text-decoration:underline}
button[disabled]{opacity:.6}

/* Helpers */
.hidden{display:none}
.center{ text-align:center;padding:2rem }

/* Carousel styles */
.carousel-section{max-width:1000px;margin:0 auto}
.carousel{position:relative;overflow:hidden;background:var(--card-bg);border:2px solid var(--accent);border-radius:8px;box-shadow:0 4px 12px rgba(0,212,255,0.2)}
.carousel-track{display:flex;transition:transform 400ms ease}

/* default autoplay interval (ms). Override per-carousel using data-autoplay on the element */
:root{--carousel-autoplay:5000}
.slide{display:block;flex:0 0 100%;text-align:center}
.slide img{width:100%;height:auto;display:block}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.4);color:#fff;border:0;padding:.5rem 0.6rem;border-radius:4px;cursor:pointer}
.carousel-btn.prev{left:8px}
.carousel-btn.next{right:8px}
.carousel-btn:focus{outline:2px solid #fff}

/* Gestion des citations et figcaption pour mobile */
figcaption {
  background: rgba(0, 0, 0, 0.85) !important;
  color: #ffffff !important;
  padding: 1rem;
  margin: 0.5rem 0;
  border-left: 3px solid var(--accent);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.4;
  backdrop-filter: blur(5px);
  border-radius: 4px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Amélioration pour mobile */
@media (max-width: 768px) {
  figcaption {
    font-size: 0.85rem !important;
    padding: 1rem !important;
    margin: 1rem 0 !important;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 1) !important;
    background: rgba(0, 0, 0, 0.95) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
  }
  
  figcaption span {
    color: var(--accent) !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1) !important;
  }
  
  /* Éviter les encadrés vides sur mobile */
  .carousel-section {
    padding: 0 0.5rem;
  }
  
  main {
    padding: 0.5rem;
    margin: 0.5rem auto;
  }
  
  .hero-section figure {
    margin: 0 !important;
    padding: 0 !important;
  }
}