/* =====================================================================
   Gregaming91 — Animations & effets visuels
   Vidéo de fond, imprimante 3D animée, apparitions au défilement
   ===================================================================== */

/* ---------- Hero avec arrière-plan vidéo / animé ---------- */
.hero--media { position: relative; overflow: hidden; }

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg video,
.hero-bg img.hero-video-poster {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
/* Fond vidéo YouTube (iframe) — recouvre le hero sans bandes noires */
.hero-bg .yt-bg {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
    z-index: 1; opacity: 0; transition: opacity 1.2s ease;  /* révélé quand la vidéo joue */
}
.hero-bg .yt-bg.playing { opacity: 1; }
.hero-bg .hero-overlay { z-index: 2; }
.hero-bg .yt-bg iframe {
    position: absolute !important; top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 177.78vh !important;   /* 16:9 calculé sur la hauteur */
    height: 56.25vw !important;   /* 16:9 calculé sur la largeur */
    min-width: 100% !important; min-height: 100% !important;
    border: 0 !important;
}
.hero-bg .hero-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(12,15,22,.78), rgba(12,15,22,.92)),
        linear-gradient(120deg, rgba(33,227,163,.16), transparent 45%, rgba(43,155,244,.18));
}
/* Overlay allégé quand une vraie vidéo joue (texte à gauche reste lisible) */
.hero-bg.has-media .hero-overlay {
    background:
        linear-gradient(90deg, rgba(12,15,22,.92) 0%, rgba(12,15,22,.6) 42%, rgba(12,15,22,.38) 100%),
        linear-gradient(0deg, rgba(12,15,22,.7), transparent 55%),
        linear-gradient(120deg, rgba(33,227,163,.12), transparent 50%, rgba(43,155,244,.14));
}
.hero--media .container { position: relative; z-index: 2; }

/* Fond animé "tech grid" (fallback quand pas de vidéo) */
.hero-grid-bg {
    position: absolute; inset: -2px;
    background-image:
        linear-gradient(rgba(31,200,227,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,200,227,.10) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 35%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 35%, transparent 75%);
    animation: gridSlide 22s linear infinite;
}
@keyframes gridSlide { to { background-position: 46px 46px; } }

/* Halos lumineux flottants */
.hero-blob {
    position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
    animation: blobFloat 14s ease-in-out infinite;
}
.hero-blob.b1 { width: 360px; height: 360px; top: -60px; left: -40px; background: rgba(33,227,163,.45); }
.hero-blob.b2 { width: 320px; height: 320px; bottom: -80px; right: -30px; background: rgba(43,155,244,.45); animation-delay: -5s; }
.hero-blob.b3 { width: 240px; height: 240px; top: 40%; left: 55%; background: rgba(31,200,227,.35); animation-delay: -9s; }
@keyframes blobFloat {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(30px,-25px) scale(1.08); }
    66%      { transform: translate(-20px,20px) scale(.95); }
}

/* Particules montantes (façon poussière / filament) */
.hero-particles { position: absolute; inset: 0; overflow: hidden; }
.hero-particles span {
    position: absolute; bottom: -10px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--cyan); opacity: .0;
    animation: rise linear infinite;
}
@keyframes rise {
    0%   { transform: translateY(0) scale(.6); opacity: 0; }
    10%  { opacity: .8; }
    90%  { opacity: .5; }
    100% { transform: translateY(-90vh) scale(1.1); opacity: 0; }
}

/* ---------- Imprimante 3D animée (CSS pur) ---------- */
.printer-scene {
    position: relative; width: 100%; max-width: 360px; margin: 0 auto;
    aspect-ratio: 1 / 1;
    display: grid; place-items: center;
}
.printer {
    position: relative; width: 280px; height: 280px;
    --accent: var(--cyan);
}
/* Cadre */
.printer__frame {
    position: absolute; inset: 0;
    border: 6px solid #2a3346; border-radius: 12px;
    background: linear-gradient(180deg, rgba(22,27,39,.9), rgba(12,15,22,.95));
    box-shadow: inset 0 0 40px rgba(0,0,0,.6), var(--glow);
}
.printer__frame::before { /* montant gauche */
    content: ''; position: absolute; top: 14px; bottom: 60px; left: 26px;
    width: 8px; border-radius: 6px;
    background: linear-gradient(180deg, #3a455e, #232b3c);
}
.printer__frame::after { /* montant droit */
    content: ''; position: absolute; top: 14px; bottom: 60px; right: 26px;
    width: 8px; border-radius: 6px;
    background: linear-gradient(180deg, #3a455e, #232b3c);
}
/* Portique X (barre horizontale qui monte au fil de l'impression) */
.printer__gantry {
    position: absolute; left: 18px; right: 18px; height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg, #303a51, #41506e, #303a51);
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
    bottom: 70px;
    animation: gantryRise 6s ease-in-out infinite;
}
@keyframes gantryRise {
    0%, 8%   { bottom: 70px; }
    50%      { bottom: 150px; }
    92%, 100%{ bottom: 70px; }
}
/* Tête d'impression qui se déplace gauche-droite */
.printer__head {
    position: absolute; top: -6px; left: 50%;
    width: 34px; height: 26px; margin-left: -17px;
    background: linear-gradient(180deg, #4a5a7c, #2c3650);
    border-radius: 5px;
    animation: headMove 1.4s ease-in-out infinite;
}
@keyframes headMove {
    0%, 100% { transform: translateX(-78px); }
    50%      { transform: translateX(78px); }
}
/* Buse + extrémité incandescente */
.printer__nozzle {
    position: absolute; bottom: -10px; left: 50%; margin-left: -5px;
    width: 10px; height: 12px;
    background: linear-gradient(180deg, #6b7a9c, #c9d3e8);
    clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%);
}
.printer__nozzle::after {
    content: ''; position: absolute; bottom: -3px; left: 50%; margin-left: -3px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--vert); box-shadow: 0 0 10px 3px rgba(33,227,163,.8);
    animation: nozzleGlow 1.4s ease-in-out infinite;
}
@keyframes nozzleGlow { 0%,100%{opacity:.5} 50%{opacity:1} }

/* Plateau */
.printer__bed {
    position: absolute; left: 30px; right: 30px; bottom: 42px; height: 12px;
    border-radius: 4px;
    background: linear-gradient(180deg, #39455f, #232b3c);
    box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
/* Objet en cours d'impression (grandit couche par couche) */
.printer__print {
    position: absolute; left: 50%; bottom: 54px; width: 70px; margin-left: -35px;
    height: 0;
    border-radius: 6px 6px 0 0;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 3px, transparent 3px 6px),
        var(--gradient);
    box-shadow: 0 0 20px rgba(31,200,227,.5);
    animation: printGrow 6s ease-in-out infinite;
}
@keyframes printGrow {
    0%, 6%    { height: 0; }
    50%       { height: 78px; }
    90%, 100% { height: 78px; opacity: 1; }
    97%       { opacity: 1; }
}
/* Bobine de filament qui tourne */
.printer__spool {
    position: absolute; top: 16px; right: -34px;
    width: 56px; height: 56px; border-radius: 50%;
    border: 9px solid var(--bleu);
    background: radial-gradient(circle, #11151f 28%, transparent 30%);
    box-shadow: 0 0 16px rgba(43,155,244,.5);
    animation: spin 4s linear infinite;
}
.printer__spool::after {
    content: ''; position: absolute; inset: -9px; border-radius: 50%;
    border: 2px dashed rgba(255,255,255,.25);
}
.printer-caption {
    position: absolute; bottom: 4px; left: 0; right: 0; text-align: center;
    font-size: .8rem; color: var(--text-muted);
    letter-spacing: .04em;
}
.printer-caption b { color: var(--vert); }

/* ---------- Apparition au défilement ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }

/* ---------- Texte dégradé animé ---------- */
.gradient-text.shimmer {
    background: linear-gradient(120deg, #21e3a3, #1fc8e3, #2b9bf4, #1fc8e3, #21e3a3);
    background-size: 250% auto;
    -webkit-background-clip: text; background-clip: text;
    animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 250% center; } }

/* ---------- Bande de stats animées ---------- */
.stats-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.stat-anim { text-align: center; }
.stat-anim .big {
    font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1;
}
.stat-anim .lbl { color: var(--text-muted); margin-top: .4rem; font-size: .95rem; }

/* ---------- Effet de brillance sur les boutons ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
    content: ''; position: absolute; top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
}
.btn-primary:hover::after { left: 140%; }

/* ---------- Carte produit : léger lift déjà géré, on ajoute le glow image ---------- */
.product-thumb::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(12,15,22,.55));
    opacity: 0; transition: opacity .3s;
}
.product-card:hover .product-thumb::after { opacity: 1; }

/* ---------- Galerie vidéo ---------- */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.video-item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    transition: transform .2s, border-color .2s, box-shadow .25s;
}
.video-item:hover { transform: translateY(-5px); border-color: rgba(31,200,227,.5); box-shadow: var(--glow); }
.video-item video {
    width: 100%; display: block; aspect-ratio: 4/5; object-fit: cover; background: #000;
}
.video-item .video-title { padding: .85rem 1.1rem; font-weight: 500; }
.video-item .tiktok-embed { margin: 0 !important; }
/* Vignette TikTok cliquable (chargement au clic) */
.tiktok-facade {
    position: relative; width: 100%; aspect-ratio: 4/5; border: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
    color: #fff; text-align: center; padding: 1rem;
    background: radial-gradient(circle at 50% 35%, rgba(31,200,227,.22), transparent 60%), #0c0f16;
    transition: filter .2s ease;
}
.tiktok-facade:hover { filter: brightness(1.12); }
.tiktok-facade .ttf-badge { position: absolute; top: .7rem; left: .7rem; font-size: .78rem; font-weight: 600; background: rgba(0,0,0,.45); padding: .2rem .55rem; border-radius: 999px; }
.tiktok-facade .ttf-play {
    width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
    font-size: 1.4rem; background: var(--gradient); color: #06121b;
    box-shadow: 0 6px 22px rgba(31,200,227,.5); transition: transform .2s ease;
}
.tiktok-facade:hover .ttf-play { transform: scale(1.08); }
.tiktok-facade .ttf-label { font-weight: 600; font-size: .92rem; max-width: 90%; line-height: 1.3; }
.video-embed { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.video-empty {
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem;
    padding: 2rem 1rem;
}
.tiktok-cta {
    margin-top: 2.5rem; display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    background: var(--gradient-soft); border: 1px solid rgba(31,200,227,.35);
    border-radius: var(--radius); padding: 1.6rem 2rem;
}
.tiktok-cta h3 { margin-bottom: .3rem; }

/* ---------- Bannière de page (catalogue, devis…) ---------- */
.page-banner {
    position: relative; overflow: hidden;
    padding: 3.2rem 0 2.6rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner .breadcrumb { margin-bottom: 1rem; }
.page-banner h1 { margin-bottom: .4rem; }
.page-banner p { color: var(--text-muted); max-width: 60ch; }

/* ---------- Fond de particules global (toutes les pages) ---------- */
.site-fx {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    opacity: .9;
}
.site-fx canvas { width: 100%; height: 100%; display: block; }

/* Voile + grille tech derrière le contenu */
.site-fx::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(31,200,227,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,200,227,.05) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridSlide 30s linear infinite;
}

/* ---------- Barre de progression au défilement ---------- */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    z-index: 200; background: var(--gradient);
    box-shadow: 0 0 12px rgba(31,200,227,.7);
    transition: width .08s linear;
}

/* ---------- Lueur qui suit le curseur (légère) ---------- */
.cursor-glow {
    position: fixed; top: 0; left: 0; width: 380px; height: 380px;
    margin: -190px 0 0 -190px; border-radius: 50%;
    background: radial-gradient(circle, rgba(31,200,227,.10), transparent 60%);
    pointer-events: none; z-index: 0; transition: opacity .3s;
    opacity: 0; will-change: transform;
}

/* ---------- Apparition supplémentaire : cartes & détails ---------- */
.product-detail .gallery-main { animation: fadeIn .8s ease both; }
@keyframes fadeIn { from { opacity:0; transform: scale(.97); } to { opacity:1; transform:none; } }

/* ---------- Curseur personnalisé : buse d'impression 3D (partout) ----------
   SVG en data-URI inline (rendu curseur fiable sous Chrome/Edge/Firefox). */
@media (pointer: fine) {
    body.fx-cursor, body.fx-cursor * {
        cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='36' viewBox='0 0 30 36'><rect x='4' y='4' width='22' height='13' rx='3' fill='%231fc8e3' stroke='%230c0f16' stroke-width='1.5'/><path d='M9 17H21L16 28 15 32 14 28Z' fill='%23cfd8e8' stroke='%230c0f16' stroke-width='1.5'/><circle cx='15' cy='31' r='2.6' fill='%237af3c8'/></svg>") 15 32, auto;
    }
    /* Variante « extrusion » au survol des éléments interactifs (et champs) */
    body.fx-cursor a, body.fx-cursor button, body.fx-cursor .btn, body.fx-cursor [role="button"],
    body.fx-cursor summary, body.fx-cursor label, body.fx-cursor input, body.fx-cursor textarea,
    body.fx-cursor select, body.fx-cursor .product-card, body.fx-cursor .cat-card,
    body.fx-cursor .social-rail a, body.fx-cursor .nav-toggle, body.fx-cursor .gallery-thumbs img,
    body.fx-cursor .filter-list a, body.fx-cursor .nav-links a, body.fx-cursor .tag {
        cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='38' viewBox='0 0 30 38'><rect x='4' y='4' width='22' height='13' rx='3' fill='%2321e3a3' stroke='%230c0f16' stroke-width='1.5'/><path d='M9 17H21L16 28 15 32 14 28Z' fill='%23cfd8e8' stroke='%230c0f16' stroke-width='1.5'/><rect x='13.6' y='30' width='2.8' height='6' rx='1.4' fill='%2321e3a3'/><circle cx='15' cy='35' r='2.4' fill='%237af3c8'/></svg>") 15 32, pointer;
    }
}

/* ---------- Cartes 3D holographiques (catalogue futuriste) ---------- */
.card-3d {
    position: relative;
    overflow: visible;                 /* indispensable pour le rendu 3D des couches */
    transform-style: preserve-3d;
    transition: transform .16s ease, box-shadow .3s ease, border-color .3s ease;
    will-change: transform;
}
.card-3d .product-thumb { border-radius: var(--radius) var(--radius) 0 0; }
.card-3d .product-thumb,
.card-3d .product-body,
.card-3d .product-badge { transition: transform .3s ease; }

.card-3d:hover {
    border-color: rgba(31,200,227,.55);
    box-shadow: 0 0 0 1px rgba(31,200,227,.35), 0 28px 60px rgba(0,0,0,.55), var(--glow);
}
.card-3d:hover .product-thumb  { transform: translateZ(34px); }
.card-3d:hover .product-body   { transform: translateZ(20px); }
.card-3d:hover .product-badge  { transform: translateZ(55px); }
/* Le bouton favori doit rester DEVANT toutes les couches 3D, sinon le lien
   image (translateZ) le recouvre et intercepte le clic. */
.card-3d .fav-btn,
.card-3d:hover .fav-btn        { transform: translateZ(70px); }
.card-3d:hover .fav-btn:hover  { transform: translateZ(70px) scale(1.1); }

/* Reflet holographique qui suit le curseur */
.card-glare {
    position: absolute; inset: 0; z-index: 5; pointer-events: none;
    border-radius: var(--radius); opacity: 0; transition: opacity .3s;
    background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
                rgba(255,255,255,.22), rgba(31,200,227,.06) 38%, transparent 62%);
    mix-blend-mode: screen;
}
.card-3d:hover .card-glare { opacity: 1; }

/* Coins HUD futuristes */
.hud {
    position: absolute; width: 16px; height: 16px; z-index: 6; pointer-events: none;
    border: 2px solid var(--cyan); opacity: 0;
    transition: opacity .3s, transform .3s; box-shadow: 0 0 8px rgba(31,200,227,.6);
}
.hud-tl { top: 9px;  left: 9px;  border-right: none; border-bottom: none; }
.hud-tr { top: 9px;  right: 9px; border-left: none;  border-bottom: none; }
.hud-bl { bottom: 9px; left: 9px;  border-right: none; border-top: none; }
.hud-br { bottom: 9px; right: 9px; border-left: none;  border-top: none; }
.card-3d:hover .hud { opacity: .95; }
.card-3d:hover .hud-tl { transform: translate(-3px,-3px); }
.card-3d:hover .hud-tr { transform: translate(3px,-3px); }
.card-3d:hover .hud-bl { transform: translate(-3px,3px); }
.card-3d:hover .hud-br { transform: translate(3px,3px); }

/* Ligne de scan sur l'image */
.product-thumb .scanline {
    position: absolute; left: 0; right: 0; top: 0; height: 45%; z-index: 3; pointer-events: none;
    background: linear-gradient(180deg, rgba(31,200,227,.28), transparent);
    opacity: 0;
}
.card-3d:hover .scanline { opacity: 1; animation: scan 2.4s linear infinite; }
@keyframes scan { 0% { transform: translateY(-110%); } 100% { transform: translateY(260%); } }

/* ---------- Effet machine à écrire ---------- */
.typewriter {
    display: inline-block;
    min-height: 1.1em;
    min-width: 1ch;
}
.typewriter::after {
    content: '';
    display: inline-block;
    width: 4px; height: 1em;
    margin-left: 5px;
    background: var(--cyan);
    box-shadow: 0 0 10px rgba(31,200,227,.9);
    vertical-align: -0.12em;
    border-radius: 1px;
    animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* ---------- Barre latérale réseaux sociaux ---------- */
.social-rail {
    position: fixed; right: 14px; top: 50%; transform: translateY(-50%);
    z-index: 95; display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
.social-rail .rail-title {
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: .2rem;
}
.social-rail .rail-line {
    width: 1px; height: 28px;
    background: linear-gradient(var(--cyan), transparent);
}
.social-rail .rail-line:last-child { background: linear-gradient(transparent, var(--cyan)); }
.social-rail a {
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; position: relative;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    transition: transform .2s, background .25s, color .25s, box-shadow .25s;
}
.social-rail a:hover {
    background: var(--gradient); color: #06121b;
    transform: translateX(-5px) scale(1.06);
    box-shadow: var(--glow);
}
/* Pastille animée d'accent */
.social-rail a::before {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    border: 1px solid rgba(31,200,227,.35); opacity: 0; transition: opacity .25s;
}
.social-rail a:hover::before { opacity: 1; }
/* Étiquette au survol */
.social-rail a::after {
    content: attr(data-label); position: absolute; right: 56px; top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
    padding: .3rem .65rem; border-radius: 8px; font-size: .8rem; font-weight: 500;
    white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.social-rail a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 992px) { .social-rail { display: none; } }

/* ===================================================================
   Effets futuristes supplémentaires
   =================================================================== */

/* Scanlines CRT (overlay global, subtil) */
.fx-scanlines {
    position: fixed; inset: 0; z-index: 60; pointer-events: none;
    background: repeating-linear-gradient(to bottom,
        rgba(0,0,0,.10) 0 1px, transparent 1px 4px);
    opacity: .14;
}
/* Faisceau de scan qui balaie verticalement (discret) */
.fx-beam {
    position: fixed; left: 0; right: 0; top: 0; height: 140px; z-index: 61;
    pointer-events: none; opacity: .25;
    background: linear-gradient(to bottom, transparent, rgba(31,200,227,.05) 70%, rgba(31,200,227,.09));
    animation: beamSweep 11s linear infinite;
}
@keyframes beamSweep {
    0% { transform: translateY(-180px); }
    100% { transform: translateY(105vh); }
}

/* Glitch sur le nom de marque au survol */
.brand:hover span {
    animation: glitchShadow .35s steps(2) 2;
}
@keyframes glitchShadow {
    0%   { text-shadow: 2px 0 #2b9bf4, -2px 0 #21e3a3; }
    33%  { text-shadow: -2px 0 #2b9bf4, 2px 0 #21e3a3; }
    66%  { text-shadow: 2px 1px #21e3a3, -2px -1px #2b9bf4; }
    100% { text-shadow: none; }
}

/* Soulignement néon des liens de nav */
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
    content: ''; position: absolute; left: .9rem; right: .9rem; bottom: .28rem; height: 2px;
    background: var(--gradient); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
    box-shadow: 0 0 8px rgba(31,200,227,.8);
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).active::after { transform: scaleX(1); }

/* Curseur clignotant du scramble */
.scramble.decoding { color: var(--cyan); }

/* Bordures holographiques animées (encarts clés) */
.tiktok-cta, .cyber-promo { position: relative; }
.tiktok-cta::after, .cyber-promo::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
    pointer-events: none;
    background: conic-gradient(from 0deg, #21e3a3, #1fc8e3, #2b9bf4, #7b5cff, #21e3a3);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: holoHue 5s linear infinite;
}
@keyframes holoHue { to { filter: hue-rotate(360deg); } }

/* ===================================================================
   Effets futuristes sur les boutons
   =================================================================== */
.btn { position: relative; overflow: hidden; isolation: isolate; }

/* Retour de pression au clic */
.btn:active { transform: translateY(1px) scale(.97); }

/* Bouton principal : pulsation lumineuse au survol */
.btn-primary:hover { animation: btnPulse 1.5s ease-in-out infinite; }
@keyframes btnPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(31,200,227,.45); }
    50%      { box-shadow: 0 0 40px rgba(33,227,163,.7), 0 0 14px rgba(43,155,244,.55); }
}

/* Bouton outline : bordure holographique animée + texte dégradé au survol */
.btn-outline { z-index: 0; }
.btn-outline::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; z-index: -1;
    background: conic-gradient(from 0deg, #21e3a3, #1fc8e3, #2b9bf4, #7b5cff, #21e3a3);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .3s; animation: holoHue 4s linear infinite;
}
.btn-outline:hover { border-color: transparent; color: #fff; box-shadow: var(--glow); }
.btn-outline:hover::before { opacity: 1; }

/* Balayage lumineux pour outline et ghost (le primaire l'a déjà) */
.btn-outline::after, .btn-ghost::after {
    content: ''; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
    transform: skewX(-20deg); transition: left .6s ease; z-index: 1; pointer-events: none;
}
.btn-outline:hover::after, .btn-ghost:hover::after { left: 150%; }

/* Onde au clic (ripple) */
.btn-ripple {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 2;
    background: rgba(255,255,255,.45); transform: scale(0);
    animation: ripple .6s ease-out forwards;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ===================================================================
   Section « Je monte votre PC de gaming »
   =================================================================== */
.pc-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.pc-features { list-style: none; display: grid; gap: .75rem; margin: 0; padding: 0; }
.pc-features li { display: flex; align-items: center; gap: .75rem; }
.pc-ico {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.1rem;
    background: var(--gradient-soft); border: 1px solid var(--border);
}

.pc-visual { display: grid; place-items: center; }
.pc-rig { position: relative; width: 260px; max-width: 80vw; aspect-ratio: 3/4; }
.pc-glow {
    position: absolute; inset: -28px; border-radius: 50%;
    background: conic-gradient(#21e3a3, #1fc8e3, #2b9bf4, #7b5cff, #21e3a3);
    filter: blur(58px); opacity: .35; animation: holoHue 6s linear infinite;
}
.pc-case {
    position: absolute; inset: 0; border-radius: 18px; overflow: hidden;
    background: linear-gradient(160deg, #161b27, #0c0f16);
    border: 1.6px solid var(--border);
    box-shadow: inset 0 0 40px rgba(0,0,0,.6), var(--shadow);
}
.pc-case::before {
    content: ''; position: absolute; inset: 10px; border-radius: 12px;
    border: 1px solid rgba(31,200,227,.25);
    background: linear-gradient(135deg, rgba(31,200,227,.06), transparent 60%);
}
.pc-rgb {
    position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 3;
    background: linear-gradient(90deg, #21e3a3, #1fc8e3, #2b9bf4, #7b5cff, #21e3a3);
    background-size: 200% 100%; animation: rgbflow 4s linear infinite;
}
@keyframes rgbflow { to { background-position: 200% 0; } }
.pc-fan {
    position: absolute; left: 22px; width: 60px; height: 60px; border-radius: 50%; z-index: 2;
    background: conic-gradient(from 0deg, rgba(31,200,227,.12), rgba(123,92,255,.55), rgba(33,227,163,.12), rgba(31,200,227,.12));
    border: 2px solid rgba(255,255,255,.08); animation: spin 3s linear infinite;
}
.pc-fan::after {
    content: ''; position: absolute; inset: 22px; border-radius: 50%;
    background: #0c0f16; box-shadow: 0 0 6px rgba(31,200,227,.6);
}
.pc-fan.f1 { top: 24px; }
.pc-fan.f2 { top: 96px; animation-duration: 2.4s; }
.pc-fan.f3 { top: 168px; animation-duration: 3.6s; }
.pc-gpu {
    position: absolute; right: 18px; top: 122px; width: 118px; height: 34px; z-index: 2;
    border-radius: 6px; background: linear-gradient(90deg, #1d2433, #2a3346);
    border: 1px solid rgba(31,200,227,.3); box-shadow: 0 0 16px rgba(43,155,244,.3);
}
.pc-gpu::after {
    content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    width: 62%; height: 6px; border-radius: 3px; background: var(--gradient);
    animation: pcPulse 2s ease-in-out infinite;
}
.pc-led {
    position: absolute; right: 20px; bottom: 18px; width: 8px; height: 8px; border-radius: 50%; z-index: 3;
    background: #21e3a3; box-shadow: 0 0 10px #21e3a3; animation: pcBlink 1.6s ease-in-out infinite;
}
@keyframes pcPulse { 50% { opacity: .5; } }
@keyframes pcBlink { 50% { opacity: .25; } }
@media (max-width: 900px) { .pc-grid { grid-template-columns: 1fr; } }

/* ---------- Cartes de configuration PC ---------- */
.config-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 2rem 1.6rem;
    transition: transform .2s, border-color .2s, box-shadow .25s;
}
.config-card:hover { transform: translateY(-6px); border-color: rgba(31,200,227,.5); box-shadow: var(--glow); }
.config-card.featured { border-color: transparent; }
.config-card.featured::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; pointer-events: none;
    background: conic-gradient(from 0deg, #21e3a3, #1fc8e3, #2b9bf4, #7b5cff, #21e3a3);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: holoHue 5s linear infinite;
}
.config-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--gradient); color: #06121b; font-size: .72rem; font-weight: 700;
    padding: .3rem .9rem; border-radius: 999px; box-shadow: var(--glow); white-space: nowrap;
}
.config-card h3 { font-size: 1.5rem; }
.config-tag { color: var(--text-muted); font-size: .9rem; margin-bottom: .8rem; }
.config-price { font-size: 1rem; color: var(--text-muted); margin-bottom: 1.1rem; }
.config-price strong { font-size: 1.7rem; display: inline-block; }
.config-specs { list-style: none; display: grid; gap: .4rem; margin: 0 0 1rem; padding: 0; flex: 1; }
.config-specs li {
    display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem;
    padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.config-specs li span:first-child { color: var(--text-muted); }
.config-specs li span:last-child { text-align: right; font-weight: 500; }
.config-for { font-size: .88rem; color: var(--text-muted); margin: 0 0 1.3rem; }

/* ---------- Respect des préférences de mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    .pc-glow, .pc-fan, .pc-rgb, .pc-led, .pc-gpu::after, .config-card.featured::before { animation: none !important; }
    .hero-grid-bg, .hero-blob, .hero-particles span,
    .printer__gantry, .printer__head, .printer__print,
    .printer__spool, .printer__nozzle::after,
    .gradient-text.shimmer, .btn-primary::after,
    .site-fx::before, .product-detail .gallery-main, .scanline,
    .fx-beam, .tiktok-cta::after, .cyber-promo::after, .brand:hover span,
    .btn-primary:hover, .btn-outline::before, .btn-ripple, .wa-btn, .pwa-install {
        animation: none !important;
    }
    .reveal { opacity: 1; transform: none; transition: none; }
    .card-3d:hover { transform: none; }
    .fx-beam { display: none; }
    .hero-bg video { display: none; }
    .cursor-glow { display: none; }
}

@media (max-width: 900px) {
    .stats-band { grid-template-columns: repeat(2,1fr); }
    .printer-scene { max-width: 300px; }
    .printer__spool { right: -10px; }
    .video-grid { grid-template-columns: repeat(2,1fr); }
    .tiktok-cta { flex-direction: column; text-align: center; }
}
@media (max-width: 560px) {
    .stats-band { grid-template-columns: 1fr 1fr; }
    .video-grid { grid-template-columns: 1fr; }
}