/* =========================================
   GUIDE D'ACHAT SOURIS - VISUELS (Correctifs)
   ========================================= */

/* Réutilisation du style container */
.content-section-card .visual-container {
    height: 200px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-4);
    background: #000;
    border-radius: var(--radius);
    padding: var(--space-2);
}

.visual-container svg {
    height: 100%;
    width: auto;
    max-width: 100%;
    overflow: visible;
}

/* --- 1. FPS (Souris blanche reconnaissable qui fonce sur la cible) --- */

.mouse-fast-move {
    /* Le groupe est à l'horizontale, on le fait bouger */
    animation: snapAim 2s infinite cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

.target-anim {
    animation: targetHit 2s infinite;
}

@keyframes snapAim {

    0%,
    20% {
        transform: translateX(70px) rotate(90deg);
    }

    /* Départ (souris verticale tournée) */
    30% {
        transform: translateX(100px) rotate(90deg);
    }

    /* Arrivée rapide */
    80% {
        transform: translateX(100px) rotate(90deg);
    }

    /* Pause */
    100% {
        transform: translateX(70px) rotate(90deg);
    }

    /* Retour */
}

@keyframes targetHit {

    0%,
    29% {
        stroke: var(--muted);
        transform: scale(1);
        transform-origin: 85px 50px;
    }

    30% {
        stroke: var(--accent);
        transform: scale(1.3);
        transform-origin: 85px 50px;
        filter: drop-shadow(0 0 5px var(--accent));
    }

    /* Impact */
    40% {
        stroke: var(--accent);
        transform: scale(1);
        transform-origin: 85px 50px;
    }

    100% {
        stroke: var(--muted);
    }
}


/* --- 2. MMO (Séquence boutons - inchangé) --- */

.mmo-btn {
    transition: fill 0.1s;
    animation: btnSequence 2s infinite;
}

.b1 {
    animation-delay: 0.0s;
}

.b2 {
    animation-delay: 0.2s;
}

.b3 {
    animation-delay: 0.4s;
}

.b4 {
    animation-delay: 0.6s;
}

.b5 {
    animation-delay: 0.8s;
}

.b6 {
    animation-delay: 1.0s;
}

@keyframes btnSequence {
    0% {
        fill: #333;
    }

    10% {
        fill: var(--accent);
        stroke: #FFF;
    }

    30% {
        fill: #333;
        stroke: var(--text);
    }
}

/* --- 3. POLYVALENT (Souris simple RGB) --- */

.rgb-wheel-simple,
.rgb-logo-simple {
    animation: simpleRgbCycle 6s infinite ease-in-out;
}

@keyframes simpleRgbCycle {

    0%,
    100% {
        fill: #aaa;
        /* Gris clair */
        filter: none;
    }

    33% {
        fill: var(--accent);
        /* Jaune GamerLab */
        filter: drop-shadow(0 0 3px var(--accent));
    }

    66% {
        fill: #00bfff;
        /* Bleu Cyan */
        filter: drop-shadow(0 0 3px #00bfff);
    }
}

/* =========================================
   CAPTEUR & PRÉCISION
   ========================================= */

/* --- 1. OPTIQUE (Scan large) --- */
.opt-beam {
    transform-origin: 50px 40px;
    /* Le haut du cône */
    animation: beamScan 3s infinite ease-in-out;
}

.opt-scan-dots circle {
    animation: dotBlink 1s infinite alternate;
}

.opt-scan-dots circle:nth-child(2) {
    animation-delay: 0.3s;
}

.opt-scan-dots circle:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes beamScan {

    0%,
    100% {
        transform: scaleX(1);
        opacity: 0.3;
    }

    50% {
        transform: scaleX(1.4);
        opacity: 0.6;
    }

    /* Respiration du cône */
}

@keyframes dotBlink {
    0% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}


/* --- 2. LASER (Scan précis avec Pivot) --- */
/* Pour animer une ligne SVG proprement, on utilise la rotation */
.laser-beam {
    transform-origin: 50px 40px;
    /* Pivot en haut (source) */
    animation: laserSwing 3s infinite ease-in-out;
}

/* Le point suit le mouvement du laser */
.laser-dot {
    animation: laserDotSlide 3s infinite ease-in-out;
}

@keyframes laserSwing {

    0%,
    100% {
        transform: rotate(0deg);
    }

    /* Centre */
    25% {
        transform: rotate(-20deg);
    }

    /* Gauche */
    75% {
        transform: rotate(20deg);
    }

    /* Droite */
}

@keyframes laserDotSlide {

    0%,
    100% {
        transform: translate(0, 0);
    }

    /* Centre */
    25% {
        transform: translate(-20px, -2px);
    }

    /* Gauche (suit la bosse) */
    75% {
        transform: translate(20px, -2px);
    }

    /* Droite (suit la bosse) */
}


/* --- 3. DPI (Comparaison vitesse via Translate) --- */
.cursor-low {
    animation: moveLow 2s infinite ease-in-out;
}

.cursor-high {
    animation: moveHigh 2s infinite ease-in-out;
}

.trail-high {
    animation: trailGrow 2s infinite ease-in-out;
}

/* On déplace avec translateX au lieu de changer cx */
@keyframes moveLow {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(20px);
    }

    /* Petit déplacement */
}

@keyframes moveHigh {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(70px);
    }

    /* Grand déplacement */
}

@keyframes trailGrow {

    0%,
    100% {
        opacity: 0;
        transform: translateX(0) scaleX(0.5);
    }

    50% {
        opacity: 0.6;
        transform: translateX(35px) scaleX(2);
    }

    /* Traînée visible */
}


/* --- 4. POLLING RATE (Flux continu) --- */
.poll-smooth {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: drawLine 2s infinite linear;
}

.poll-dot {
    animation: dotTravel 2s infinite linear;
}

@keyframes drawLine {
    0% {
        stroke-dashoffset: 80;
    }

    50% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -80;
    }
}

@keyframes dotTravel {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(80px);
        opacity: 0;
    }
}

/* =========================================
   ERGONOMIE & POIDS
   ========================================= */

/* --- 1. FORME (Alternance Gauche / Droite) --- */

.side-left {
    animation: sideFade 3s infinite;
}

.side-right {
    animation: sideFade 3s infinite;
    animation-delay: 1.5s;
    /* Décalage pour alterner */
}

@keyframes sideFade {

    0%,
    45% {
        opacity: 0.3;
        fill: var(--muted);
        stroke: var(--muted);
    }

    50%,
    95% {
        opacity: 1;
        fill: var(--accent);
        stroke: var(--accent);
        transform: scale(1.1);
        transform-origin: center;
    }

    /* Actif */
    100% {
        opacity: 0.3;
        fill: var(--muted);
        stroke: var(--muted);
    }
}


/* --- 2. POIDS (Lévitation Honeycomb) --- */

.floating-mouse {
    animation: floatUp 3s infinite ease-in-out;
}

.levitate-lines {
    animation: linesRise 3s infinite linear;
}

@keyframes floatUp {

    0%,
    100% {
        transform: translateY(5px);
    }

    50% {
        transform: translateY(-10px);
    }

    /* La souris monte */
}

@keyframes linesRise {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}


/* --- 3. POIDS AJUSTABLE (Insertion) --- */

.weight-disk {
    animation: insertWeight 3s infinite ease-in-out;
}

.insert-arrow {
    animation: arrowPush 3s infinite ease-in-out;
}

@keyframes insertWeight {
    0% {
        transform: translateX(35px);
        opacity: 0;
    }

    /* Départ hors souris */
    20% {
        opacity: 1;
    }

    50%,
    80% {
        transform: translateX(0);
        opacity: 1;
    }

    /* En place */
    100% {
        transform: translateX(0);
        opacity: 0;
    }
}

@keyframes arrowPush {
    0% {
        transform: translateX(5px);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    50% {
        transform: translateX(-15px);
        opacity: 0;
    }

    /* Pousse le poids */
    100% {
        transform: translateX(-15px);
        opacity: 0;
    }
}

/* =========================================
   BOUTONS & PERSONNALISATION
   ========================================= */

/* --- 1. BOUTONS (Switch 2 vs 12) --- */

.btn-group-std {
    animation: toggleStd 4s infinite;
}

.btn-group-mmo {
    animation: toggleMmo 4s infinite;
}

/* On alterne l'opacité pour montrer les deux configurations */
@keyframes toggleStd {

    0%,
    45% {
        opacity: 1;
    }

    50%,
    95% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes toggleMmo {

    0%,
    45% {
        opacity: 0;
    }

    50%,
    95% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/* --- 2. MOLETTE (Scroll + Tilt) --- */

.wheel-texture {
    animation: scrollWheel 1s infinite linear;
}

.tilt-arrow {
    animation: tiltPulse 2s infinite ease-in-out;
}

.left {
    animation-delay: 0s;
}

.right {
    animation-delay: 1s;
}

/* Simulation de roulement vertical */
@keyframes scrollWheel {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(5px);
        opacity: 0;
    }
}

/* Clignotement des flèches latérales */
@keyframes tiltPulse {

    0%,
    100% {
        opacity: 0.2;
        transform: translateX(0);
    }

    50% {
        opacity: 1;
        transform: translateX(2px);
        stroke: var(--accent);
    }
}


/* --- 3. LOGICIEL (Slider qui bouge) --- */

.soft-slider-knob {
    animation: moveKnob 3s infinite ease-in-out;
}

.soft-mouse-icon {
    animation: changeColor 3s infinite ease-in-out;
}

/* Le curseur glisse de gauche à droite */
@keyframes moveKnob {

    0%,
    100% {
        cx: 50;
    }

    50% {
        cx: 75;
    }
}

/* La souris change de couleur en fonction du slider */
@keyframes changeColor {

    0%,
    100% {
        fill: #555;
    }

    50% {
        fill: var(--accent);
        filter: drop-shadow(0 0 2px var(--accent));
    }
}

/* =========================================
   CONNECTIVITÉ SOURIS
   ========================================= */

/* --- 1. FILAIRE (Flux de données) --- */
.data-stream {
    stroke-dasharray: 10;
    animation: cableFlow 1s infinite linear;
}

@keyframes cableFlow {
    to {
        stroke-dashoffset: -20;
    }
}


/* --- 2. 2.4 GHz (Ondes rapides) --- */
.wave-signal {
    opacity: 0;
    animation: wirelessZip 1s infinite linear;
}

.w1 {
    animation-delay: 0.0s;
}

.w2 {
    animation-delay: 0.15s;
}

.w3 {
    animation-delay: 0.3s;
}

.w4 {
    animation-delay: 0.45s;
}

@keyframes wirelessZip {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(10px);
        opacity: 0;
    }
}


/* --- 3. BLUETOOTH (Alternance Appareils) --- */

.bt-device {
    transition: stroke 0.3s;
}

/* Séquence : PC s'allume -> Ligne PC apparaît -> Pause -> Tablette s'allume... */
.dev-pc {
    animation: deviceHighlight 4s infinite;
}

.line-pc {
    animation: lineConnect 4s infinite;
}

.dev-tab {
    animation: deviceHighlight 4s infinite;
    animation-delay: 2s;
}

.line-tab {
    animation: lineConnect 4s infinite;
    animation-delay: 2s;
}

@keyframes deviceHighlight {

    0%,
    45% {
        stroke: var(--accent);
        stroke-width: 3px;
    }

    /* Actif */
    50%,
    100% {
        stroke: var(--muted);
        stroke-width: 2px;
    }

    /* Inactif */
}

@keyframes lineConnect {

    0%,
    45% {
        opacity: 1;
        stroke-dashoffset: 0;
    }

    50%,
    100% {
        opacity: 0;
        stroke-dashoffset: -10;
    }
}

/* =========================================
   FONCTIONS SUPPLÉMENTAIRES
   ========================================= */

/* --- 1. RGB (Cycle complet) --- */

.rgb-stroke {
    fill: var(--surface);
    animation: rgbStrokeCycle 4s infinite linear;
}

.rgb-fill {
    animation: rgbFillCycle 4s infinite linear;
}

@keyframes rgbStrokeCycle {
    0% {
        stroke: #ff0000;
        filter: drop-shadow(0 0 2px #ff0000);
    }

    25% {
        stroke: #00ff00;
        filter: drop-shadow(0 0 2px #00ff00);
    }

    50% {
        stroke: #0000ff;
        filter: drop-shadow(0 0 2px #0000ff);
    }

    75% {
        stroke: #ffff00;
        filter: drop-shadow(0 0 2px #ffff00);
    }

    100% {
        stroke: #ff0000;
        filter: drop-shadow(0 0 2px #ff0000);
    }
}

@keyframes rgbFillCycle {
    0% {
        fill: #ff0000;
        filter: drop-shadow(0 0 4px #ff0000);
    }

    25% {
        fill: #00ff00;
        filter: drop-shadow(0 0 4px #00ff00);
    }

    50% {
        fill: #0000ff;
        filter: drop-shadow(0 0 4px #0000ff);
    }

    75% {
        fill: #ffff00;
        filter: drop-shadow(0 0 4px #ffff00);
    }

    100% {
        fill: #ff0000;
        filter: drop-shadow(0 0 4px #ff0000);
    }
}


/* --- 2. RECHARGE (Flux d'énergie) --- */

.energy-waves path {
    animation: chargeFlow 1.5s infinite ease-out;
}

.energy-waves path:nth-child(2) {
    animation-delay: 0.2s;
}

.energy-waves path:nth-child(3) {
    animation-delay: 0.4s;
}

.battery-fill {
    animation: batteryPulse 1.5s infinite;
}

@keyframes chargeFlow {
    0% {
        transform: translateY(5px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-10px);
        opacity: 0;
    }
}

@keyframes batteryPulse {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }
}


/* --- 3. MÉMOIRE (Sauvegarde) --- */

.settings-gear {
    animation: gearSave 3s infinite ease-in-out;
}

.save-arrow {
    animation: arrowGuide 3s infinite;
}

.chip-light {
    animation: chipFlash 3s infinite;
}

/* L'engrenage descend dans la souris */
@keyframes gearSave {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    40% {
        transform: translateY(38px) rotate(180deg);
        opacity: 1;
    }

    /* Rentre dans la puce */
    45% {
        transform: translateY(38px) rotate(180deg);
        opacity: 0;
    }

    /* Disparaît */
    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
}

/* La flèche indique le mouvement */
@keyframes arrowGuide {

    0%,
    40% {
        opacity: 1;
    }

    45%,
    100% {
        opacity: 0;
    }
}

/* La puce s'allume pour confirmer la sauvegarde */
@keyframes chipFlash {

    0%,
    40% {
        opacity: 0;
    }

    45% {
        opacity: 1;
        fill: #00ff00;
    }

    /* Flash vert */
    60% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}