:root{--bg:#0e0e0e;--fg:#f4f0ea;--muted:#a9a29a;--card:#191919;--accent:#b78b57}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5}a{color:inherit}.top{display:flex;justify-content:space-between;align-items:center;padding:24px 5vw;border-bottom:1px solid #252525;position:sticky;top:0;background:rgba(14,14,14,.9);backdrop-filter:blur(10px);z-index:10}.brand{text-decoration:none;font-weight:800;letter-spacing:.08em;text-transform:uppercase}nav{display:flex;gap:18px;flex-wrap:wrap}nav a{text-decoration:none;color:var(--muted)}main{min-height:72vh}.hero{padding:12vw 5vw;max-width:1100px}.hero h1{font-size:clamp(42px,8vw,110px);line-height:.9;margin:0 0 24px}.hero p,.text p{font-size:clamp(18px,2vw,24px);color:var(--muted);max-width:780px}.btn,button{display:inline-block;border:0;background:var(--accent);color:#111;padding:13px 18px;border-radius:999px;font-weight:700;text-decoration:none;cursor:pointer}section{padding:48px 5vw}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;display:block;background:#222}.cards article{background:var(--card);padding:10px;border-radius:18px}.cards span{display:inline-block;margin-top:10px;color:var(--accent);font-size:13px;text-transform:uppercase;letter-spacing:.08em}.text{max-width:900px}.install,.admin{padding:40px 5vw;max-width:1100px;margin:auto}.card{background:var(--card);border:1px solid #292929;border-radius:18px;padding:22px;margin:16px 0;display:flex;flex-direction:column;gap:12px;text-decoration:none}input,textarea,select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid #333;background:#0f0f0f;color:var(--fg)}.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.error{background:#4a1111;color:#ffdede;padding:12px;border-radius:12px}.ok{background:#123d22;color:#dbffe7;padding:12px;border-radius:12px}.admin-list{display:flex;flex-direction:column;gap:10px}.row{display:grid;grid-template-columns:80px 1fr 130px 150px 90px 70px 100px;gap:10px;align-items:center;background:var(--card);padding:10px;border-radius:14px}.row img{width:80px;height:80px;object-fit:cover;border-radius:10px}footer{padding:30px 5vw;color:var(--muted);border-top:1px solid #252525}@media(max-width:760px){.top{align-items:flex-start;gap:12px;flex-direction:column}.row{grid-template-columns:70px 1fr}.row>*{min-width:0}}

.muted{color:var(--muted)}
.social-buttons,.footer-socials{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.social-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:999px;border:1px solid #343434;background:#151515;color:var(--fg);text-decoration:none;font-weight:700;transition:.18s ease}
.social-btn:hover{transform:translateY(-1px);border-color:var(--accent);color:var(--accent)}
.contact-page h2{margin-top:34px}.contact-page .social-btn{min-width:130px}
.footer-socials{margin-top:10px}.footer-socials .social-btn{padding:8px 12px;font-size:13px;color:var(--muted)}
small{color:var(--muted);display:block;margin-top:6px}

/* Update appearance/home */
.site-logo{max-height:46px;max-width:220px;width:auto;display:block}
.hero-media{min-height:68vh;background-size:cover;background-position:center;display:flex;align-items:center}
.hero-inner{max-width:1100px}.home-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px);gap:32px;align-items:center}.home-intro p{font-size:clamp(17px,1.8vw,22px);color:var(--muted);max-width:720px}.home-intro img{width:100%;border-radius:22px;object-fit:cover;aspect-ratio:4/5;background:#222}.media-preview{margin:8px 0 16px}.media-preview img{max-width:260px;max-height:160px;border-radius:14px;background:#222;border:1px solid #333;object-fit:contain}.inline{display:flex;gap:8px;align-items:center;color:var(--muted)}.inline input{width:auto}@media(max-width:760px){.home-intro{grid-template-columns:1fr}.site-logo{max-height:40px}.hero-media{min-height:62vh}}


/* Appearance V2 - réglages visuels contrôlés */
.top{padding:var(--header-padding,24px 5vw)}
.site-logo{max-height:var(--logo-height,46px);max-width:260px;width:auto;display:block}
.hero.hero-media{max-width:none;width:100%;padding:0 5vw;min-height:var(--hero-height,85vh);background-size:var(--hero-size,cover);background-position:var(--hero-pos-x,center) var(--hero-pos-y,center);background-repeat:no-repeat;display:flex;align-items:center}
.hero-inner{width:100%;max-width:var(--hero-content-width,820px)}
.hero-align-center{justify-content:center;text-align:center}.hero-align-center .hero-inner{margin:auto}.hero-align-left{justify-content:flex-start;text-align:left}
.hero-title-normal h1{font-size:clamp(38px,6vw,82px)}.hero-title-large h1{font-size:clamp(48px,7.8vw,112px)}.hero-title-massive h1{font-size:clamp(56px,10vw,150px)}
.gallery{grid-template-columns:var(--gallery-columns,repeat(auto-fill,minmax(210px,1fr)))}.gallery img{aspect-ratio:var(--gallery-ratio,1 / 1);border-radius:var(--gallery-radius,16px)}
.logo-small{--logo-height:34px}.logo-medium{--logo-height:46px}.logo-large{--logo-height:64px}
.header-compact{--header-padding:16px 5vw}.header-normal{--header-padding:24px 5vw}.header-large{--header-padding:34px 5vw}
@media(max-width:760px){.hero.hero-media{min-height:calc(var(--hero-height,85vh) * .78);background-size:cover}.hero-title-massive h1{font-size:clamp(44px,14vw,78px)}.gallery{grid-template-columns:repeat(2,1fr)!important}}

/* UX V3 - desktop polish, CTA, lightbox */
main > section:not(.hero){max-width:1280px;margin:0 auto;width:100%;}
.hero.hero-media{max-width:none;margin:0;width:100%;}
.home-intro{max-width:1280px;margin:0 auto;}
.gallery{align-items:start;}
.gallery a{display:block;text-decoration:none;}
.home-cta{max-width:1280px;margin:22px auto 72px;padding:42px 5vw;border-top:1px solid #252525;text-align:center;}
.home-cta h2{margin:0 0 12px;font-size:clamp(28px,4vw,52px);line-height:1;}
.home-cta p{margin:0 auto 24px;color:var(--muted);max-width:680px;font-size:clamp(16px,1.5vw,20px)}
.home-cta .social-buttons{justify-content:center;margin-top:18px}
.home-cta .btn{font-size:16px;padding:15px 22px}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:9999;padding:28px;}
.lightbox.is-open{display:flex;}
.lightbox img{max-width:min(1200px,92vw);max-height:86vh;object-fit:contain;border-radius:10px;box-shadow:0 20px 80px rgba(0,0,0,.6)}
.lightbox-close,.lightbox-prev,.lightbox-next{position:fixed;border:1px solid rgba(255,255,255,.18);background:rgba(20,20,20,.72);color:#fff;border-radius:999px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;cursor:pointer;backdrop-filter:blur(10px)}
.lightbox-close{top:22px;right:22px}.lightbox-prev{left:22px;top:50%;transform:translateY(-50%)}.lightbox-next{right:22px;top:50%;transform:translateY(-50%)}
.lightbox-caption{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);color:var(--muted);font-size:14px;max-width:80vw;text-align:center}
@media(min-width:1200px){
  .gallery{gap:18px;}
  .hero-inner{padding-left:0;}
  body:not(.force-wide) main > section:not(.hero){padding-left:5vw;padding-right:5vw;}
}
@media(max-width:760px){
  .home-cta{text-align:left;padding-top:32px;margin-bottom:44px}.home-cta .social-buttons{justify-content:flex-start}
  .lightbox{padding:14px}.lightbox img{max-width:96vw;max-height:80vh}.lightbox-prev,.lightbox-next{width:40px;height:40px}.lightbox-caption{display:none}
}

/* UX V5 — correctif lightbox desktop + home centrée + durcissement visuel */
body{overflow-x:hidden}
main > section:not(.hero){max-width:1280px;margin-left:auto;margin-right:auto;}
.hero.hero-media{max-width:1280px;margin-left:auto;margin-right:auto;width:100%;}
.home-intro,.home-cta{max-width:1280px;margin-left:auto;margin-right:auto;}
@media(min-width:1024px){
  .hero.hero-media{border-left:1px solid rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.04)}
  .hero-align-left .hero-inner{margin-left:0;margin-right:auto;}
  .hero-align-center .hero-inner{margin-left:auto;margin-right:auto;}
  .top{justify-content:center;gap:min(48vw,820px)}
  .gallery{justify-content:center;}
  .home-page .home-intro{text-align:left;}
  .home-page .home-cta{text-align:center;}
}
@media(min-width:1440px){
  main > section:not(.hero){padding-left:0;padding-right:0;}
  .home-cta{padding-left:0;padding-right:0;}
}

/* Lightbox autonome : reste cachée même si le JS charge avant/après le CSS */
.lightbox{position:fixed!important;inset:0!important;background:rgba(0,0,0,.94)!important;display:none!important;align-items:center!important;justify-content:center!important;z-index:2147483000!important;padding:28px!important;}
.lightbox.is-open{display:flex!important;}
.lightbox img{max-width:min(1200px,92vw)!important;max-height:86vh!important;width:auto!important;height:auto!important;object-fit:contain!important;border-radius:10px!important;box-shadow:0 20px 80px rgba(0,0,0,.65)!important;background:#111!important;}
.lightbox-close,.lightbox-prev,.lightbox-next{position:fixed!important;border:1px solid rgba(255,255,255,.18)!important;background:rgba(20,20,20,.72)!important;color:#fff!important;border-radius:999px!important;width:46px!important;height:46px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:26px!important;line-height:1!important;cursor:pointer!important;backdrop-filter:blur(10px)!important;padding:0!important;}
.lightbox-close{top:22px!important;right:22px!important}.lightbox-prev{left:22px!important;top:50%!important;transform:translateY(-50%)!important}.lightbox-next{right:22px!important;top:50%!important;transform:translateY(-50%)!important}
.lightbox-caption{position:fixed!important;left:50%!important;bottom:22px!important;transform:translateX(-50%)!important;color:var(--muted)!important;font-size:14px!important;max-width:80vw!important;text-align:center!important}

/* UX V7 — desktop centré + lightbox blindée */
@media (min-width: 900px){
  main > section:not(.hero){
    width:min(1280px, calc(100% - 10vw));
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .page-home .hero{
    width:min(1280px, calc(100% - 10vw));
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    overflow:hidden;
  }
  .page-home .hero .hero-inner{
    padding-left:0;
  }
  .page-home .home-intro,
  .page-home .home-cta{
    width:min(1280px, calc(100% - 10vw));
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .page-home section > h2,
  .page-portfolio section > h2,
  .page-flashs section > h2{
    text-align:left;
  }
  .gallery{
    width:100%;
    justify-content:center;
  }
}

/* Ne jamais laisser le lightbox se comporter comme un bloc en bas de page */
body.tsc-lightbox-open{overflow:hidden!important;}
#tsc-lightbox,
.lightbox{
  position:fixed!important;
  inset:0!important;
  background:rgba(0,0,0,.94)!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:2147483647!important;
  padding:28px!important;
  width:100vw!important;
  height:100vh!important;
}
#tsc-lightbox.is-open,
.lightbox.is-open{display:flex!important;}
#tsc-lightbox img,
.lightbox img{
  max-width:min(1200px,92vw)!important;
  max-height:86vh!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  border-radius:10px!important;
  box-shadow:0 20px 80px rgba(0,0,0,.65)!important;
  background:#111!important;
}
#tsc-lightbox button,
.lightbox button{font-family:inherit!important;}


/* Header centré V8 */
.header-centered .top.top-centered{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  padding-top:22px!important;
  padding-bottom:18px!important;
  text-align:center!important;
}
.header-centered .brand-centered{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  width:100%!important;
  text-align:center!important;
  margin:0 auto!important;
}
.header-centered .site-logo{
  margin:0 auto!important;
  max-width:min(360px,70vw)!important;
  height:auto!important;
}
.header-centered nav{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:24px!important;
  width:100%!important;
  font-size:14px!important;
}
@media(max-width:760px){
  .header-centered .top.top-centered{
    gap:12px!important;
    padding:18px 5vw!important;
  }
  .header-centered nav{
    gap:16px!important;
    flex-wrap:wrap!important;
    font-size:14px!important;
  }
  .header-centered .site-logo{
    max-width:min(260px,76vw)!important;
  }
}


/* V9 — logo header centré lisible + version mobile compacte */
.header-centered .top-centered{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:0!important;
  padding:18px 5vw 16px!important;
}
.header-centered .brand-centered{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  width:100%!important;
  margin:0 0 12px!important;
  line-height:1!important;
}
.header-centered .site-logo{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:min(520px,74vw)!important;
  max-height:76px!important;
  object-fit:contain!important;
}
.header-centered .top-centered nav{
  width:100%!important;
  justify-content:center!important;
  align-items:center!important;
  gap:30px!important;
}
.header-centered .top-centered nav a{
  line-height:1!important;
}
@media(max-width:760px){
  .header-centered .top-centered{
    padding:14px 4vw 14px!important;
  }
  .header-centered .brand-centered{
    margin-bottom:14px!important;
  }
  .header-centered .site-logo{
    max-width:68vw!important;
    max-height:58px!important;
  }
  .header-centered .top-centered nav{
    gap:24px!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    font-size:18px!important;
  }
  .header-centered .top-centered nav::-webkit-scrollbar{display:none!important;}
}
