/*******************************************************************************
 * 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:#e8edf5;
  --muted:#9fb0c3;
  --ink:#150c36;
  --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:linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
  padding-bottom: env(safe-area-inset-bottom);
}

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

/* ─────────────────────────── 1) Header & menu ───────────────────────────── */

.navbar{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1rem;
  padding:1rem 2rem; background:rgba(11,22,35,.75); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.menu{ display:flex; justify-content:flex-end; gap:1.5rem; flex-wrap:wrap }
.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;
}

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

body.home-page .navbar{ grid-template-columns:1fr; justify-items:center }
body.home-page .menu{ display:none }
body.home-page .logo{ width:450px; justify-self:center }

/* ─────────────────────────── 2) Contenu générique ───────────────────────── */
.container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:2rem;
  max-width:900px;
  margin:0 auto;

  /* min-height:100%;  ← supprime cette ligne */
}


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

/* Boutons unifiés */
.btn{
  display:inline-block;
  padding:.65rem 1.2rem;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  border:2px solid var(--accent);     /* ← ajoute la bordure */
  color:var(--accent);                 /* ← texte orange */
  background:transparent;              /* ← fond transparent */
  line-height:1.2;
  transition: color .25s, background .25s, box-shadow .25s, transform .2s;
  cursor:pointer;
}
.btn:hover,.btn:focus-visible{
  background:var(--accent);
  color:var(--ink);
  box-shadow:0 0 12px var(--accent), 0 0 26px rgba(254,121,0,.7);
  transform:translateY(-1px);
  outline:none;
}
/* Variantes */
.btn.primary{ background:var(--accent); color:var(--ink) }
.btn.ghost{ background:transparent; color:var(--accent); border:2px solid var(--accent) }


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

.wrap{ max-width:980px; margin:0 auto; padding:24px }
.section{ margin:22px 0 }
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; }
h2{ font-size:clamp(18px,3vw,24px); margin:0 0 10px 0 }
.note{ color:var(--muted); 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,0.02); border:1px dashed var(--border); border-radius:12px; padding:12px }
.date{ font-variant-numeric:tabular-nums }
.poster{
  width:500px;
  height:400px;
  overflow:hidden; /* on garde, mais pas obligatoire */
  border-radius:12px;
  border:1px solid var(--border);
  margin-top:8px;
  background:#000; /* optionnel : fond noir si image ne remplit pas */
}
.poster img{
  width:100%;
  height:100%;
  object-fit:contain;  /* ← montre toute l’image, sans la couper */
}


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

/* ─────────────────────────── 5) Lightbox ───────────────────────── */

.lightbox{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:var(--overlay) }
.lightbox.open{ display:flex }
.lightbox__dialog{ position:relative; max-width:min(92vw,1200px); max-height:92vh; outline:0; }
.lightbox__img{ max-width:100%; max-height:92vh; display:block; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.5); }
.lightbox__caption{ margin-top:10px; text-align:center; color:#cfd7e1; font-size:14px; }
.lightbox__close{ position:absolute; top:-12px; right:-12px; background:#111827; border:1px solid #374151; color:#e5e7eb; border-radius:999px; width:40px; height:40px; display:grid; place-items:center; cursor:pointer; font-size:20px; line-height:1; }
.lightbox__close:hover{ background:#0b1220 }
.no-scroll{ overflow:hidden }

/* ─────────────────────────── 6) Slideshow (images + vidéos) ───────────────── */

.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 }
.slideshow-buttons{
  display:flex;
  gap:1rem;
  margin-top:1rem;
}
.slideshow-buttons button{
  composes: btn; /* ⚠️ si PostCSS dispo ; sinon copie manuelle */
  appearance:none;
  font:inherit;
  font-weight:600;
  background:transparent;
  border:2px solid var(--accent);
  color:var(--accent);
  cursor:pointer;
  padding:.65rem 1.2rem;
  border-radius:999px;
  line-height:1.2;
  transition: color .25s, background .25s, box-shadow .25s, transform .2s;
}
.slideshow-buttons button:hover,
.slideshow-buttons button:focus-visible{
  background:var(--accent);
  color:var(--ink);
  box-shadow:0 0 12px var(--accent), 0 0 26px rgba(254,121,0,.7);
  transform:translateY(-1px);
  outline:none;
}

/* ─────────────────────────── 7) Responsive ───────────────────────── */

@media (max-width:768px){
  .navbar{ padding:.75rem 1rem }
  .logo{ width:180px } body.home-page .logo{ width:300px }
  .menu{ gap:.75rem; justify-content:center }
  .menu a{ padding:.35rem .6rem; border-radius:999px; background:rgba(255,255,255,.06) }
  .container{ padding:1rem } .card{ padding:1.25rem; margin:0 1rem }
  .btn{ display:block; width:100%; margin:.4rem 0 }
}
@media (max-width:420px){
  h1{ font-size:clamp(1.4rem, 8vw, 2rem) }
  .logo{ width:150px } body.home-page .logo{ width:240px }
}