/* Langage visuel commun aux pages secondaires (quiz, nouveautés, sources, refs, profil, bienvenue, à propos, 404).
   Même vocabulaire que l'accueil : faisceau de bordure, reflet sur les boutons principaux, trame de points, focus visible. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
:focus-visible{outline:2px solid var(--cyan,#42e8e0);outline-offset:3px;border-radius:6px}

/* faisceau lumineux qui parcourt la bordure d'un bloc (ajouté par fx.js dans [data-beam]) */
.beam-host{position:relative}
.beam{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;z-index:2}
.beam::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ba,0deg), transparent 0 70%, var(--lime,#c6ff4a) 82%, var(--cyan,#42e8e0) 90%, transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:beamspin 6s linear infinite}
@property --ba{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes beamspin{to{--ba:360deg}}

/* reflet qui balaie les boutons principaux */
.btn-primary,.nav-cta{position:relative;overflow:hidden}
.btn-primary::after,.nav-cta::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-60%;width:40%;background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);transform:skewX(-20deg);animation:shimmer 3.2s ease-in-out infinite;pointer-events:none}
@keyframes shimmer{0%,55%{left:-60%}100%{left:130%}}

/* trame de points discrète derrière une zone (classe .dots sur un conteneur en position:relative) */
.dots::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(var(--line,#332a4d) 1px, transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);opacity:.55}
.dots>*{position:relative;z-index:1}

/* zone 3D (mode soirée, page de ref) */
.hero3d{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.hero3d.on{opacity:.9}
.hero3d canvas{display:block;width:100%;height:100%}

@media (prefers-reduced-motion:reduce){.beam::before,.btn-primary::after,.nav-cta::after{animation:none}.btn-primary::after,.nav-cta::after{display:none}}