/* style.css v30 — Reggae Surprise
   - Deux diaporamas en MODE DÉCOR : autoplay, aucune interaction/contrôle
   - Images affichées EN ENTIER (object-fit: contain)
   - Diapo horizontale plus grande, verticale plus petite
*/

:root{
  --ja-green:#2AA843; --ja-yellow:#FFC300; --ja-red:#D62828;
  --text:#111; --bg:#fff; --border:#eee; --muted:#666;
  --shadow:0 12px 30px rgba(0,0,0,.12);
  --wrap:1100px;

  /* Tailles diapo */
  --h-max-w: 1200px; /* horizontale un peu plus large */
  --v-max-w: 720px;  /* verticale un peu plus étroite */
}

/* Reset */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; scroll-behavior:smooth; }
body{ font-family: Helvetica, Arial, sans-serif; color:var(--text); background:var(--bg); line-height:1.6; }

/* ---------- HEADER ---------- */
.site-header{ position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid var(--border); }

/* NAV horizontal + scroll possible */
.main-nav{
  display:flex; gap:18px; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width: thin; padding:10px 12px; white-space:nowrap;
}
.main-nav .nav-link{
  text-decoration:none; color:#222; font-weight:600; letter-spacing:.2px; padding:8px 6px; border-radius:8px;
}
.main-nav .nav-link:hover, .main-nav .nav-link.active{
  text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px;
}

/* Réseaux TOP — FOND GRIS */
.social-band.top{
  display:flex; gap:14px; justify-content:center; align-items:center;
  padding:12px 14px; border-top:1px solid var(--border); background:#e9e9e9;
}
.social-band img{ width:28px; height:28px; display:block; }

/* ---------- LECTEUR (FAB) ---------- */
.audio-fab{ position:fixed; right:18px; bottom:18px; z-index:1200; }
.logo-box{
  position:relative; width:100px; height:100px; border-radius:22px; overflow:hidden;
  background: rgba(255,255,255,.78); box-shadow: var(--shadow);
}
.logo-box.spin{ animation: spin 10s linear infinite, glow 2.2s ease-in-out infinite; }
#logo{ width:100%; height:100%; border-radius:22px; object-fit:cover; display:block; opacity:.9; }
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes glow{ 0%,100%{ filter:none; } 50%{ filter: brightness(1.06); } }
.fab-btn{
  position:absolute; right:-6px; bottom:-6px; width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:#111; color:#fff; font-size:18px; box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.fab-skip{
  position:absolute; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; display:grid; place-items:center; font-size:16px;
}
.fab-skip.prev{ left:4px; } .fab-skip.next{ right:4px; }
.fab-skip:hover{ background:rgba(0,0,0,.75); }

/* ---------- SECTIONS ---------- */
.section{ padding:44px 16px; text-align:center; scroll-margin-top:110px; }
.section-title{
  font-size:clamp(26px, 3.2vw, 36px); margin:0 0 18px; display:inline-flex; align-items:center; gap:10px;
}

/* ---------- ACCUEIL ---------- */
.accueil-photo-wrapper{
  position:relative; width:min(var(--wrap), 100% - 2rem); margin:0 auto; overflow:hidden; border-radius:16px;
}
.photo-accueil{
  width:100%; height:auto; display:block; border-radius:16px; box-shadow:var(--shadow);
}
.social-band.inside.full{
  position:absolute; left:0; right:0; bottom:0; transform:none; width:100%;
  padding: clamp(12px, 2.4vw, 22px) clamp(14px, 3vw, 28px);
  background: linear-gradient(180deg, rgba(233,233,233,.88), rgba(233,233,233,.96));
  display:flex; justify-content:center; align-items:center; gap: clamp(14px, 2.2vw, 24px);
  border-radius: 0 0 16px 16px; backdrop-filter: blur(8px);
}
.social-band.inside.big img{ width: clamp(30px, 5vw, 48px); height: clamp(30px, 5vw, 48px); }

/* ---------- GALERIES CLASSIQUES ---------- */
.gallery{ width:min(900px, 100% - 2rem); margin:18px auto; }
.gallery img{ width:100%; height:auto; display:block; border-radius:12px; box-shadow:var(--shadow); }

/* Duo : taille stable, côte à côte (gal2/gal3) */
.gallery.duo{
  width:min(820px, 100% - 2rem);
  display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:center;
}
.gallery.duo img{ aspect-ratio: 4 / 3; object-fit: cover; }

/* Single : hérite de .gallery */
.gallery.single{}

/* ---------- RENCONTRE / CARROUSEL ---------- */
.rencontre-text{ max-width:70ch; margin:0 auto 16px; font-size:clamp(18px, 2.6vw, 22px); }
.carousel{ position:relative; width:min(700px, 100% - 2rem); margin:20px auto; }
.carousel img{ width:100%; height:auto; border-radius:12px; box-shadow:var(--shadow); display:block; }
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.6); color:#fff; border:0;
  width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:20px;
}
.carousel-btn.left{ left:10px; } .carousel-btn.right{ right:10px; }
.carousel-btn:hover{ background:rgba(0,0,0,.78); }
.member-text{ max-width:80ch; margin:10px auto 0; white-space:pre-wrap; padding:0 8px; }

/* ---------- VIDÉOS ---------- */
.videos-grid{
  width:min(var(--wrap), 100% - 2rem); margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
.video iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:12px; box-shadow:var(--shadow); }
@media (max-width:900px){ .videos-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .videos-grid{ grid-template-columns:1fr; } }

/* ---------- CONCERTS / SOUVENIRS ---------- */
.concert-img, .merch-img{ width:min(var(--wrap), 100% - 2rem); display:block; margin:0 auto; border-radius:12px; box-shadow:var(--shadow); }
.souvenir-text{ font-size:clamp(18px, 2.6vw, 22px); margin:0 0 12px; }

/* ---------- 🎞️ DIAPORAMAS (images ENTIERES) ---------- */
.diapo{
  position:relative;
  width:100%;
  margin:18px auto 0;
  border-radius:12px;
  overflow:hidden;
  box-shadow: var(--shadow);
  background: transparent;
}

/* tailles : horizontale plus grande, verticale plus petite */
.diapo.h{ width:min(var(--h-max-w), 100% - 1rem); aspect-ratio: 16/9; }
.diapo.v{ width:min(var(--v-max-w), 100% - 2rem); aspect-ratio: 9/16; }

/* Images en ENTIER + fondu */
.diapo img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: contain;
  opacity:0; transition: opacity .8s ease;
  display:block; user-select:none; -webkit-user-drag:none;
  background: transparent;
}
.diapo img.show{ opacity:1; }

/* MODE DÉCOR : pas de contrôles ni d’interactions */
.diapo[data-decor="true"]{ pointer-events:none; }
.diapo[data-decor="true"] .diapo-arrow,
.diapo[data-decor="true"] .diapo-controls{ display:none !important; }

/* ---------- CONTACT ---------- */
form{ width:min(680px, 100% - 2rem); margin:0 auto; display:grid; gap:12px; text-align:left; }
label{ font-weight:600; }
input, textarea, button{ font:inherit; }
input, textarea{
  padding:12px 14px; border:1px solid #ccc; border-radius:10px; background:#fff; outline:none;
}
input:focus, textarea:focus{ border-color:#999; box-shadow:0 0 0 3px rgba(0,0,0,.05); }
button#sendBtn{
  padding:12px 14px; border:0; border-radius:10px; cursor:pointer; background:#111; color:#fff; font-weight:700;
}
button#sendBtn:hover{ filter:brightness(1.05); }
#formStatus{ min-height:20px; }

/* ---------- FOOTER ---------- */
footer{ padding:28px 0 40px; border-top:1px solid var(--border); text-align:center; }
.footer-socials{
  display:inline-flex; gap:18px; justify-content:center; align-items:center; padding:10px 14px; border-radius:999px; background:#e9e9e9;
}
.footer-socials img{ width:28px; height:28px; display:block; }
.footer-meta{
  width:min(var(--wrap), 100% - 2rem); margin:12px auto 0; display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap;
  color:#555; font-size:14px; letter-spacing:.1px;
}
.footer-meta .sep::before{ content:"·"; color:#777; }
.footer-meta a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.footer-meta a:hover{ text-decoration-thickness:2px; }