/* ===============================================================
   effets-ssir.css
   Effets visuels partages : grille animee, halo curseur, bascule
   3D des cartes au survol, parallaxe du hero.
   A charger sur toutes les pages via <link rel="stylesheet">.
   =============================================================== */

/* --- Grille animee en fond de page --------------------------- */
.grille-animee {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(0, 210, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 255, .05) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: derive-grille 30s linear infinite;
    mask-image: radial-gradient(circle at 50% 30%, black, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, black, transparent 75%);
}
@keyframes derive-grille {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 48px 48px, 48px 48px; }
}

/* --- Halo qui suit le curseur ---------------------------------- */
.halo-curseur {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
        520px circle at var(--souris-x, 50%) var(--souris-y, 40%),
        rgba(0, 210, 255, 0.07),
        transparent 42%
    );
    transition: background .15s ease;
}

/* Le contenu doit passer au-dessus des deux calques de fond */
nav, header, main, section, footer {
    position: relative;
    z-index: 2;
}

/* --- Bascule 3D sur les cartes au survol ------------------------ */
.tilt-3d {
    transform-style: preserve-3d;
    transition: transform .25s ease, box-shadow .25s ease;
    will-change: transform;
}

/* --- Parallaxe legere (translateY pilote en JS) ------------------ */
.parallaxe {
    will-change: transform;
}

/* --- Respect des preferences d'accessibilite --------------------- */
@media (prefers-reduced-motion: reduce) {
    .grille-animee { animation: none; }
    .halo-curseur { display: none; }
    .tilt-3d { transition: none !important; transform: none !important; }
    .parallaxe { transform: none !important; }
}