/*
 * Correctifs responsives communs au site historique Shâm33.
 * Les styles originaux de chaque page restent présents afin de conserver
 * leur identité visuelle. Ce fichier corrige surtout l'affichage mobile,
 * les débordements, la navigation et l'accessibilité.
 */
:root{
  --sham-bg:#02020a;
  --sham-panel:rgba(20,20,40,.72);
  --sham-gold:#e0b34c;
  --sham-purple:#8b5cf6;
  --sham-text:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--sham-bg)}
body{min-height:100vh;max-width:100%;overflow-x:hidden!important;background:var(--sham-bg);color:var(--sham-text)}
img,video,iframe,canvas,svg{max-width:100%;height:auto}
a{color:#d8c1ff;text-underline-offset:3px}
a:hover{color:#f4d778}
header{
  position:relative!important;
  z-index:20;
  width:100%!important;
  padding:22px clamp(16px,4vw,50px)!important;
  display:flex!important;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center!important;
  gap:18px;
  background:rgba(2,2,10,.78)!important;
  border-bottom:1px solid rgba(224,179,76,.2);
  backdrop-filter:blur(12px);
}
header .logo,.logo{
  max-width:100%;
  font-size:clamp(1.65rem,4.3vw,4.5rem)!important;
  line-height:1.08;
  overflow-wrap:anywhere;
}
header nav,body>nav,section>nav{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  margin:0!important;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:#fff!important;
  text-decoration:none;
  opacity:.92!important;
}
nav a:hover,nav a:focus-visible{background:rgba(139,92,246,.3);border-color:rgba(224,179,76,.55)}
body>h1,body>h2,body>h3,body>p,body>section,body>div:not(#loginModal):not(.carousel){
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}
body>h1{padding-inline:16px;margin-top:36px}
.section{padding:clamp(22px,5vw,64px) clamp(14px,3vw,32px)!important}
.courses{width:min(1100px,100%);grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))!important}
.course,.temple-box{border:1px solid rgba(255,255,255,.1)}
.course img,.course video{height:auto!important;min-height:0;aspect-ratio:auto;object-fit:contain!important;background:rgba(0,0,0,.2)}
.temple-row{width:min(1100px,100%);grid-template-columns:repeat(2,minmax(0,1fr))!important;padding-inline:16px}
.portal-btn,button,input[type=submit]{max-width:100%;min-height:44px}
input,textarea,select{max-width:100%;font:inherit}
footer{margin-top:42px;border-top:1px solid rgba(255,255,255,.1)}
.sham33-access-bar{
  position:sticky;top:0;z-index:9999;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;
  padding:9px 14px;background:rgba(7,5,22,.95);border-bottom:1px solid rgba(224,179,76,.35);font-size:.9rem
}
.sham33-access-bar a{display:inline-flex;padding:7px 13px;border-radius:999px;background:linear-gradient(135deg,var(--sham-gold),var(--sham-purple));color:#fff;text-decoration:none;font-weight:700}
.sham33-menu-button{display:none;border:1px solid rgba(255,255,255,.2);background:rgba(139,92,246,.25);color:#fff;border-radius:999px;padding:9px 16px}
@media (max-width:850px){
  header{align-items:center!important}
  header nav{display:none}
  header nav.is-open{display:flex}
  .sham33-menu-button{display:inline-flex}
  .temple-row{grid-template-columns:1fr!important;gap:24px!important;margin:35px auto!important}
  .ns-player,.container{display:block!important;height:auto!important}
  .sidebar{width:100%!important;max-height:42vh}
  .player{padding:20px 8px}
}
@media (max-width:520px){
  body{font-size:15px}
  h1{font-size:clamp(1.75rem,9vw,2.5rem)!important}
  h2{font-size:clamp(1.25rem,6vw,1.8rem)!important}
  .section{padding-inline:10px!important}
  .course,.temple-box{border-radius:10px!important}
  audio{width:100%}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* === COSMOS BACKGROUND === */

#cosmos,
#energy {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#cosmos {
    z-index: 0;
    background: black;
}

#energy {
    z-index: 1;
    pointer-events: none;
}

/* ton contenu doit passer au-dessus */
body {
    position: relative;
    z-index: 2;
}
}

@keyframes starsMove {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-500px, -500px);
    }
}
body {
    position: relative;
    z-index: 1;
}
canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}