/* ---- Layout de page commun (comme paint) ------------------------------ */
:root{
  --lsc-bg: #0b0b16;
  --lsc-card-bg: rgba(12,12,30,.55);
  --lsc-card-brd: #ff2537;
  --lsc-text: #e8ecff;
  --lsc-muted: #b8c1ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#000 url("/images/bg.jpg") center/cover fixed no-repeat;
  color:var(--lsc-text);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Conteneur centré */
.container{
  width:min(1400px, 94%);
  margin:0 auto 60px;
  padding-top:120px;            /* espace sous la bannière */
  position:relative;
}

/* Bouton retour LSC (même style) */
.btn-style-lsc{
  position:absolute; top:130px; left:5px; z-index:1000;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:12px 20px;
  border:2px solid var(--lsc-card-brd);
  border-radius:26px;
  background:#0c0c4e;
  color:#fff; text-decoration:none;
  box-shadow:0 0 0 2px rgba(255,37,55,.2) inset, 0 6px 18px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .2s ease;
}
.btn-style-lsc:hover{ transform:translateY(-1px); box-shadow:0 0 0 2px rgba(255,37,55,.35) inset, 0 10px 22px rgba(0,0,0,.45) }

/* Titre comme paint */
h1{
  margin:0 0 26px;
  text-align:center;
  font-size:clamp(26px, 3.6vw, 42px);
  font-weight:800;
  letter-spacing:.4px;
  text-shadow:0 4px 18px rgba(0,0,0,.55);
}

/* ---- Grille de vignettes ---------------------------------------------- */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:26px;
}
@media (max-width:1100px){ .grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width:720px){  .grid{ grid-template-columns: 1fr;} }

/* Carte image (même look que paint) */
.image-box{
  background:var(--lsc-card-bg);
  border:2px solid var(--lsc-card-brd);
  border-radius:18px;
  padding:14px;
  backdrop-filter:saturate(125%) blur(2px);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  transition:transform .15s ease, box-shadow .2s ease;
}
.image-box:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.55) }

.image-box img{
  width:100%;
  height:210px;
  object-fit:cover;
  border-radius:12px;
  display:block;
  background:#0a0a16;
  cursor:pointer;
}

/* Légende */
.image-box p{
  margin:10px 6px 2px;
  text-align:center;
  font-size:14px;
  color:var(--lsc-muted);
}

/* ---- Modal plein écran ------------------------------------------------- */
.modal{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.85);
  z-index:3000; align-items:center; justify-content:center;
}
.modal-content{
  max-width:min(96vw, 1400px);
  max-height:90vh;
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
}
.close{
  position:absolute; top:20px; right:28px;
  font-size:34px; color:#fff; cursor:pointer;
}