*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--f-body); font-size:var(--fs-md); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  min-height:100dvh;
}
h1,h2,h3,h4{ font-family:var(--f-title); margin:0; line-height:1.12; letter-spacing:-.02em; }
p{ margin:0 0 .7em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:700; }
button{ font:inherit; color:inherit; }
img{ max-width:100%; display:block; }

/* halo d'ambiance */
.bg-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(123,69,242,.20), transparent 62%),
    radial-gradient(760px 460px at 92% 8%,  rgba(255,59,92,.10),  transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(62,211,230,.07), transparent 65%);
}

.screen{ display:none; position:relative; z-index:1; min-height:100dvh; }
.screen.is-active{ display:block; }

.wrap{
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(16px,3.5vw,34px) clamp(14px,3.5vw,30px) 70px;
}
.is-hidden{ display:none !important; }

.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* accessibilité */
:where(button,a,[tabindex]):focus-visible{
  outline:2px solid var(--violet); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* barres de défilement discrètes */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.13); border-radius:999px; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); }

/* --- décor de fond : symboles du métier qui remontent --- */
.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.amb{
  position:absolute; bottom:-12%; width:var(--s); height:var(--s);
  color:#9B6BFF; opacity:0;
  animation:ambRise var(--d) linear var(--dl) infinite;
}
.amb svg{ width:100%; height:100%; display:block; }
.amb--left{ left:calc(var(--x) * 0.16); }
.amb--right{ right:calc(var(--x) * 0.16); color:#3ED3E6; }
.amb:nth-child(3n){ color:#FF3B5C; }
.amb:nth-child(5n){ color:#FFC857; }

@keyframes ambRise{
  0%   { transform:translate3d(0,0,0) rotate(0deg);              opacity:0; }
  12%  { opacity:.085; }
  88%  { opacity:.085; }
  100% { transform:translate3d(var(--dx),-118vh,0) rotate(24deg); opacity:0; }
}
@media (max-width:900px){ .amb{ opacity:0; animation-name:ambRiseSoft; } }
@keyframes ambRiseSoft{
  0%{ transform:translate3d(0,0,0); opacity:0; }
  15%{ opacity:.05; } 85%{ opacity:.05; }
  100%{ transform:translate3d(var(--dx),-118vh,0); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .ambient{ display:none; } }