/*******************************************************************************
 * Le P’tit Spot — feuille de style unifiée
 * Thème sombre + menu + boutons + slideshow + archives/agenda/lightbox
 *******************************************************************************/

/* ─────────────────────────── 0) Variables & Base ─────────────────────────── */

:root{
  --bg1:#0b1623;
  --bg2:#162032;
  --accent:#fe7900;
  --text:#cfd6df;
  --muted:#9fb0c3;
  --ink:#150c36;
  --title:#e8edf5;              /* ajout : utilisé par h1-h3 */
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --card:#0f1b29;
  --border:#213044;
  --overlay:rgba(0,0,0,0.85);
  -webkit-tap-highlight-color:transparent;
}

*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }

body{
  min-height:100vh;
  display:grid; grid-template-rows:auto 1fr auto;
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background: radial-gradient(ellipse at top, #0b1623 0%, #101c2e 40%, #1a1512 100%);
  color:var(--text);
  padding-bottom:env(safe-area-inset-bottom);
}

/* Liens (consolidé en un seul bloc) */
a, a:visited{ color:var(--accent); text-decoration:none; transition:color .3s }
a:hover{ color:#fff }

/* Titres & texte */
h1,h2,h3{ color:var(--title); letter-spacing:.02em }
p,li,span{ color:var(--text) }

/* Notes, petits textes et crédits */
.note, small, footer, .credit{ color:var(--muted) }


/* ─────────────────────────── 1) Header & Navigation ─────────────────────── */

.navbar{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8rem; padding:1.2rem 0;
  background:rgba(11,22,35,.75); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.logo{ width:240px; height:auto; transition:filter .3s, transform .3s }
.logo:hover{ filter:drop-shadow(0 0 10px var(--accent)) brightness(1.25); transform:scale(1.05) }

.menu{ display:flex; justify-content:center; flex-wrap:wrap; gap:1.2rem }
.menu a{
  color:var(--accent); font-weight:bold; transition:color .3s, text-shadow .25s
}
.menu a:hover{ color:#fff; text-shadow:0 0 10px var(--accent), 0 0 22px var(--accent) }
.menu a.active{
  background:var(--accent); color:var(--ink);
  padding:.4rem .8rem; border-radius:999px
}


/* ─────────────────────────── 2) Structure & Layout ──────────────────────── */

.wrap, main, body{ margin:0 auto; max-width:980px; padding:0 1rem }
.section{ margin:2rem 0 }

.container{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; padding:2rem; max-width:900px; margin:0 auto
}


/* ─────────────────────────── 3) Boutons unifiés ─────────────────────────── */

.btn{
  display:inline-block;
  padding:.9rem 1.2rem;
  border-radius:var(--radius);
  text-decoration:none;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  box-shadow:var(--shadow);
  transition:transform .06s ease, opacity .2s ease, box-shadow .2s ease;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); opacity:.95 }
.btn:active{ transform:translateY(0); opacity:.9 }

/* Variante accent (CTA) */
.btn.accent{
  background:var(--accent);
  color:var(--ink);
  border-color:transparent;
  font-weight:600;
}

/* Variantes additionnelles (si besoin) */
.btn.primary{ background:var(--accent); color:var(--ink) }
.btn.ghost{ background:transparent; color:var(--accent); border:2px solid var(--accent) }


/* ─────────────────────────── 4) Cartes, Archives & Agenda ───────────────── */

.card{
  background:rgba(15,27,41,.55);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:18px;
  backdrop-filter:blur(12px) brightness(1.05);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  transition:background .3s ease, box-shadow .3s ease
}
.card:hover{ background:rgba(15,27,41,.45); box-shadow:0 8px 28px rgba(0,0,0,.35) }

h2{ font-size:clamp(18px,3vw,24px); margin:0 0 10px 0 }
.note{ font-size:14px }

.list{ display:grid; gap:10px; margin-top:12px }

.row{
  display:flex; gap:12px; justify-content:space-between; align-items:flex-start;
  background:rgba(255,255,255,.02);
  border:1px dashed var(--border);
  border-radius:12px;
  padding:12px
}

.date{ font-variant-numeric:tabular-nums }

.poster{
  width:500px; height:400px; overflow:hidden; border-radius:12px;
  border:1px solid var(--border); margin-top:8px; background:#000
}
.poster img{ width:100%; height:100%; object-fit:contain }

footer{
  border-top:1px solid var(--border);
  margin-top:28px; padding-top:18px;
  color:var(--muted); font-size:14px
}


/* ─────────────────────────── 5) Lightbox (images + vidéos) ──────────────── */

.lb{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  z-index:1000; background:rgba(0,0,0,.92); opacity:0; transition:opacity .35s ease
}
.lb.open{ display:flex; opacity:1 }

.lb__stage{
  position:relative; z-index:1001;
  max-width:min(94vw,1400px); max-height:92vh
}

.lb__stage video,.lb__stage img{
  display:block; object-fit:contain; width:100%; height:auto; max-height:90vh;
  background:#000; z-index:1002; opacity:0; transition:opacity .4s ease
}
.lb.open .lb__stage video,.lb.open .lb__stage img{ opacity:1 }

.lb__close,.lb__prev,.lb__next{
  position:absolute; z-index:1003; background:transparent;
  border:2px solid var(--accent); color:var(--accent);
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; user-select:none;
  transition:color .25s, background .25s, box-shadow .25s
}
.lb__prev{ left:-56px; top:50%; transform:translateY(-50%) }
.lb__next{ right:-56px; top:50%; transform:translateY(-50%) }
.lb__close{ top:-56px; right:0 }

.lb__close:hover,.lb__prev:hover,.lb__next:hover{
  background:var(--accent); color:var(--ink); box-shadow:0 0 12px var(--accent)
}
.lb__close:focus-visible,.lb__prev:focus-visible,.lb__next:focus-visible{
  outline:2px solid var(--accent); outline-offset:4px
}

.lb__caption{ color:#9fb0c3; text-align:center; margin-top:10px; font-size:14px }
.no-scroll{ overflow:hidden }


/* ─────────────────────────── 6) Slideshow ──────────────────────────────── */

.slideshow-wrapper{
  width:100%; display:flex; flex-direction:column; align-items:center; margin:2rem 0
}
.slideshow-container{
  position:relative; width:100%; max-width:1100px; aspect-ratio:16/9; overflow:hidden;
  background:#000; border-radius:var(--radius); box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.08)
}
.slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1s
}
.slide.active{ opacity:1; z-index:1 }


/* ─────────────────────────── 7) Contact (page dédiée) ───────────────────── */

.contact-info{
  display:grid; gap:1rem; margin:2rem auto; text-align:center
}
.contact-info a{ font-weight:bold; color:var(--accent); text-decoration:none }
.contact-info a:hover{ text-decoration:underline }

.contact-method{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:var(--shadow);
  transition:transform .2s ease, background .3s ease
}
.contact-method:hover{ transform:translateY(-4px); background:rgba(255,255,255,.08) }


/* ─────────────────────────── 8) Liens externes / crédits ────────────────── */

.row strong a{ color:var(--accent); text-decoration:underline; font-weight:600; transition:color .2s }
.row strong a:hover{ color:#fff }
.credit{ display:block; margin-top:4px; font-size:14px }
.credit a{ color:var(--accent); text-decoration:underline; font-weight:500 }
.credit a:hover{ color:#fff }


/* ─────────────────────────── 9) Fond animé (lucioles) ───────────────────── */

.fireflies{ position:fixed; inset:0; overflow:hidden; z-index:-1; pointer-events:none }
.firefly{
  position:absolute; width:4px; height:4px;
  background:radial-gradient(circle, rgba(255,200,120,.9), rgba(255,150,0,.1));
  border-radius:50%; box-shadow:0 0 6px rgba(255,150,0,.8);
  animation:fly 20s linear infinite, flicker 2s ease-in-out infinite
}

@keyframes fly{
  0%{ transform:translate(0,0) scale(1) }
  25%{ transform:translate(30px,-40px) scale(1.2) }
  50%{ transform:translate(-20px,30px) scale(.9) }
  75%{ transform:translate(40px,20px) scale(1.1) }
  100%{ transform:translate(0,0) scale(1) }
}
@keyframes flicker{ 0%,100%{ opacity:.6; filter:brightness(1) } 50%{ opacity:1; filter:brightness(1.8) } }


/* ─────────────────────────── 10) Responsive ─────────────────────────────── */

@media (max-width:900px){
  .navbar{ padding:.75rem 1rem }
  .menu{ gap:.6rem }
  .menu a{ background:rgba(255,255,255,.06); padding:.35rem .8rem; border-radius:999px; font-size:14px }
  .logo{ width:180px }
  .container{ padding:1rem; max-width:95% }
  .row{ flex-direction:column; align-items:center; text-align:center; padding:10px }
  .poster{ width:100%; max-width:420px; height:auto; aspect-ratio:4/3; margin-top:10px }
  .poster img{ width:100%; height:100%; object-fit:cover; border-radius:12px }
  footer{ text-align:center; font-size:13px; line-height:1.4 }
}

/* Transparence renforcée sur mobile */
@media (max-width:600px){
  .card{ background:rgba(10,20,30,.45); backdrop-filter:blur(8px) brightness(1.1) }
}


/* ─────────────────────────── 11) Accessibilité & Préférences ───────────── */

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

/* ─────────────────────────── 12) Utilitaires globaux ───────────────────── */
.center{ text-align:center }
.muted{ color: var(--muted) }
.hash{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }

/* Empêche les débordements sur mobile pour les longs codes/hash */
code, .hash{ word-break: break-all; white-space: normal }

/* Titres plus fluides sur petits écrans */
h1{ font-size: clamp(28px, 6vw, 40px) }

/* CTA plein écran sur mobile + confort tactile */
@media (max-width: 600px){
  .btn{ display:block; width:100%; text-align:center; padding:1rem 1.1rem }
  .navbar .logo{ width:160px }
  .section{ margin-top: 1.5rem }
}