/* =========================================
   VISUELS ANIMÉS GUIDE D'ACHAT (Ajout)
   ========================================= */

/* Conteneur des visuels dans les cartes */
.content-section-card .visual-container {
    height: 140px;
    /* Hauteur fixe pour le visuel */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-4);
    background: #000;
    /* Légère teinte de fond pour délimiter */
    border-radius: var(--radius);
    padding: var(--space-2);
}

.visual-container svg {
    height: 100%;
    width: auto;
    /* Le SVG s'adapte à la hauteur du conteneur */
    max-width: 100%;
    overflow: visible;
    /* Permet aux effets de dépasser légèrement si besoin */
}

/* --- ANIMATIONS DES SVG --- */

/* 1. Jeux Compétitifs (Radar précision) */
.precision-wave {
    opacity: 0;
    transform-origin: center;
    animation: sharpPulse 1.5s infinite ease-out;
}

.wave-top {
    animation-delay: 0s;
}

.wave-right {
    animation-delay: 0.4s;
}

.wave-left {
    animation-delay: 0.8s;
}

@keyframes sharpPulse {
    0% {
        opacity: 1;
        transform: scale(0.8) translateY(0);
        stroke-width: 4px;
    }

    100% {
        opacity: 0;
        transform: scale(1.2) translateY(-5px);
        /* Légère expansion et déplacement */
        stroke-width: 1px;
    }
}

/* 2. Jeux Immersifs (Surround enveloppant) */
.surround-waves {
    transform-origin: center;
    animation: slowRotate 20s linear infinite;
}

.surround-waves circle {
    animation: softExpand 4s ease-in-out infinite alternate;
}

/* Rotation lente de l'ensemble */
@keyframes slowRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Respiration douce des cercles */
@keyframes softExpand {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }

    100% {
        transform: scale(1.05);
        opacity: 0.7;
    }
}


/* 3. Jeux Multijoueurs (Communication active) */
.comm-line {
    stroke-dasharray: 5;
    animation: dashMove 1s linear infinite;
    opacity: 0.8;
}

.line-delay {
    animation-delay: 0.5s;
    /* Décale le flux de la deuxième ligne */
}

/* Fait bouger les pointillés le long de la ligne */
@keyframes dashMove {
    to {
        stroke-dashoffset: -10;
    }
}


/* 4. Usage Polyvalent (Orbite) */
.orbit-container {
    transform-origin: center;
    animation: orbitRotate 8s linear infinite;
}

@keyframes orbitRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Ajustement Responsive si nécessaire pour les cartes */
@media (max-width: 768px) {
    .content-section-card .visual-container {
        height: 120px;
        /* Un peu moins haut sur mobile */
    }
}

/* =========================================
   ANIMATIONS SECTION CONNECTIVITÉ
   ========================================= */

/* --- 1. Filaire (Flux continu) --- */
.data-flow {
    stroke-dashoffset: 20;
    animation: flowLine 0.8s linear infinite;
    /* Très rapide pour montrer "zéro latence" */
    opacity: 0.9;
}

@keyframes flowLine {
    to {
        stroke-dashoffset: 5;
        /* Déplacement vers la droite */
    }
}

/* --- 2. Sans Fil 2.4 GHz (Ondes rapides) --- */
.dongle-led {
    animation: blinkLed 0.5s infinite alternate;
    /* Clignotement rapide activité */
}

.wave-24 {
    opacity: 0;
    stroke-dasharray: 60;
    /* Permet de dessiner le trait progressivement */
    stroke-dashoffset: 60;
    animation: transmitFast 1.5s infinite ease-out;
}

.g-wave-1 {
    animation-delay: 0s;
}

.g-wave-2 {
    animation-delay: 0.2s;
}

.g-wave-3 {
    animation-delay: 0.4s;
}

@keyframes blinkLed {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
        box-shadow: 0 0 5px var(--accent);
    }
}

@keyframes transmitFast {
    0% {
        opacity: 1;
        stroke-dashoffset: 60;
    }

    50% {
        stroke-dashoffset: 0;
        /* Le trait est dessiné */
    }

    100% {
        opacity: 0;
        /* Disparition */
        stroke-dashoffset: 0;
    }
}

/* --- 3. Bluetooth (Ondes lentes/pulsation) --- */
.bt-ripple {
    opacity: 0;
    transform-origin: center;
    animation: pulseRipple 3s infinite ease-out;
    /* Plus lent que le 2.4GHz */
}

.delay-ripple {
    animation-delay: 1s;
    /* Décalage pour effet d'écho */
}

@keyframes pulseRipple {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
        stroke-width: 2px;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
        stroke-width: 0px;
    }
}

/* =========================================
   ANIMATIONS SECTION TYPE DE CASQUE
   ========================================= */

/* --- 1. Casque Fermé (Isolation et Basses) --- */
/* Les basses qui pulsent à l'intérieur */
.bass-pulse {
    transform-origin: 50% 55%;
    animation: heavyBass 1.2s infinite ease-out;
}

.delay-bass {
    animation-delay: 0.2s;
}

@keyframes heavyBass {
    0% {
        transform: scale(1);
        opacity: 0.8;
        stroke-width: 3px;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.4;
        stroke-width: 1px;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
        stroke-width: 3px;
    }
}

/* Le bruit extérieur qui rebondit */
.noise-blocked {
    animation: noiseRebound 2s infinite ease-in-out;
}

@keyframes noiseRebound {

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

    50% {
        transform: translateX(-3px);
        opacity: 1;
    }

    /* Petit mouvement de pression contre la coque */
}

/* --- 2. Casque Ouvert (Passage de l'air/son) --- */
/* Les ondes qui sortent librement */
.air-flow {
    stroke-dasharray: 4;
    animation: flowOut 2s linear infinite;
    opacity: 0.7;
}

.delay-flow-1 {
    animation-delay: 0.5s;
}

.delay-flow-2 {
    animation-delay: 1s;
}

@keyframes flowOut {
    to {
        stroke-dashoffset: -20;
        /* Mouvement fluide vers l'extérieur */
    }
}

/* =========================================
   ANIMATIONS SECTION TYPE DE CASQUE (Version 3)
   ========================================= */

/* --- 1. Casque Fermé (Confinement) --- */

/* L'onde interne qui symbolise les basses puissantes et confinées */
.bass-inner-pulse {
    transform-origin: 50% 55%;
    animation: innerPulseV3 1.5s infinite ease-out;
}

.delay-pulse {
    animation-delay: 0.3s;
}

@keyframes innerPulseV3 {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    30% {
        transform: scale(1.1);
        opacity: 1;
    }

    60% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(0.5);
        opacity: 0;
    }
}

/* Le bruit extérieur qui est rejeté ou ne passe pas */
.blocked-noise {
    transform-origin: right center;
    animation: blockAttempt 2s infinite alternate;
}

.delay-blocked {
    animation-delay: 1s;
}

@keyframes blockAttempt {

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

    50% {
        transform: translateX(-5px);
        stroke-width: 4px;
    }

    /* Mouvement de pression sur le côté */
}


/* --- 2. Casque Ouvert (Diffusion) --- */

/* Les ondes qui s'échappent librement */
.spatial-wave {
    stroke-dashoffset: 0;
    animation: flowAndExpand 3s linear infinite;
    opacity: 0.8;
}

.wave-out-1 {
    animation-delay: 0s;
}

.wave-out-2 {
    animation-delay: 0.75s;
}

.wave-out-3 {
    animation-delay: 1.5s;
}

.wave-out-4 {
    animation-delay: 2.25s;
}

@keyframes flowAndExpand {
    0% {
        stroke-dashoffset: 0;
        opacity: 0.2;
    }

    50% {
        stroke-dashoffset: 20;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 40;
        opacity: 0;
    }
}

/* =========================================
   ANIMATIONS SECTION QUALITÉ SONORE
   ========================================= */

/* --- 1. Stéréo (2.0) --- */
/* Les ondes claires et distinctes Gauche/Droite */
.stereo-wave {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: simpleStereo 2s ease-out infinite;
    opacity: 0.8;
}

@keyframes simpleStereo {
    0% {
        stroke-dashoffset: 60;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    /* Le trait arrive au centre */
    100% {
        opacity: 0;
    }
}

/* --- 2. Surround (Immersion 360) --- */
/* Les sources sonores qui pulsent */
.sound-source {
    animation: sourcePulse 1.5s infinite alternate;
}

/* Les lignes de son qui se déplacent de la source vers le joueur */
.sound-line {
    stroke-dasharray: 10, 5;
    stroke-dashoffset: 0;
    animation: surroundFlow 1.5s linear infinite;
}

/* Décalage pour le mouvement 360 */
.line-front {
    animation-delay: 0s;
}

.line-right {
    animation-delay: 0.3s;
}

.line-back {
    animation-delay: 0.6s;
}

.line-left {
    animation-delay: 0.9s;
}


@keyframes sourcePulse {
    from {
        transform: scale(1);
        opacity: 0.8;
    }

    to {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes surroundFlow {
    0% {
        stroke-dashoffset: 0;
        opacity: 0;
    }

    50% {
        stroke-dashoffset: 15;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 30;
        opacity: 0;
    }
}

/* =========================================
   ANIMATIONS SECTION QUALITÉ SONORE (Version 4 - Nettoyée)
   ========================================= */

/* --- 1. Stéréo (2.0) : Flux linéaire --- */
/* Le rectangle jaune qui se déplace */
.stereo-flow {
    animation: 1.5s linear infinite;
}

.flow-left {
    /* Déplacement vers le centre */
    animation-name: flowToCenterL;
}

.flow-right {
    /* Déplacement vers le centre */
    animation-name: flowToCenterR;
}

/* Le flux part de Gauche (x=10) et va vers le centre (x=40) */
@keyframes flowToCenterL {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    90% {
        transform: translateX(30px);
        opacity: 1;
    }

    /* 30px de 10 à 40 */
    100% {
        transform: translateX(30px);
        opacity: 0;
    }
}

/* Le flux part de Droite (x=80) et va vers le centre (x=50) */
@keyframes flowToCenterR {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    90% {
        transform: translateX(-30px);
        opacity: 1;
    }

    /* 30px de 80 à 50 */
    100% {
        transform: translateX(-30px);
        opacity: 0;
    }
}


/* --- 2. Surround (360) : Sources tournantes --- */
/* Le groupe de sources sonores tourne sur l'axe central */
.surround-orbit {
    transform-origin: 50% 50%;
    animation: fullOrbit 10s linear infinite;
    /* Rotation lente et continue */
}

/* La tête au centre subit une légère pulsation (immersion) */
.center-pulse-v2 {
    transform-origin: 50% 50%;
    animation: centerPulseV2 3s infinite alternate;
}

@keyframes fullOrbit {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes centerPulseV2 {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* =========================================
   ANIMATIONS SECTION MICROPHONE (Version 5 - Qualité d'Onde)
   ========================================= */

/* --- 1. Micro Intégré (Onde bruyante/faible) --- */
.waveform-v5-noisy {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    /* Animation Lente et peu stable */
    animation: moveNoisyWave 4s linear infinite;
    opacity: 0.7;
    /* Pour simuler un signal qui tremble légèrement */
    transform: translateY(0);
}

@keyframes moveNoisyWave {

    /* Le décalage fait bouger la forme d'onde vers la droite */
    0% {
        stroke-dashoffset: 0;
        transform: translateY(0);
    }

    50% {
        stroke-dashoffset: -80;
        transform: translateY(1px);
    }

    100% {
        stroke-dashoffset: -160;
        transform: translateY(0);
    }
}


/* --- 2. Micro Externe (Onde claire/forte) --- */
.waveform-v5-clean {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    /* Animation Rapide et stable */
    animation: moveCleanWave 2s linear infinite;
    opacity: 1;
}

@keyframes moveCleanWave {

    /* Le décalage fait bouger la forme d'onde vers la droite, 2x plus vite */
    0% {
        stroke-dashoffset: 0;
        transform: scale(1);
    }

    50% {
        stroke-dashoffset: -80;
        transform: scale(1.02);
    }

    100% {
        stroke-dashoffset: -160;
        transform: scale(1);
    }
}

/* =========================================
   ANIMATIONS SECTION FONCTIONS (Version 4 - RGB GLOW FIX)
   ========================================= */

/* --- 1. Mixage audio (inchangé) --- */
.mix-flow {
    stroke-dashoffset: 0;
    animation: flowMix 2s linear infinite;
}

.flow-game {
    animation-delay: 0s;
}

.flow-chat {
    animation-delay: 1s;
}

.flow-mixed {
    stroke-dashoffset: 0;
    animation: flowResult 1.5s linear infinite;
    animation-delay: 0.5s;
}

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

@keyframes flowResult {
    from {
        stroke-dashoffset: 20;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* --- 2. ANC (Version 2 - Annulation) --- */
.noise-v2 {
    stroke-dasharray: 50;
    animation: noiseInV2 2.5s linear infinite;
    opacity: 0.8;
}

.delay-noise-v2 {
    animation-delay: 1.2s;
}

@keyframes noiseInV2 {
    0% {
        stroke-dashoffset: 50;
    }

    50% {
        stroke-dashoffset: 0;
    }

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

.cancel-v2 {
    stroke-dasharray: 50;
    animation: cancelOutV2 2.5s linear infinite;
    opacity: 0.8;
}

.delay-cancel-v2 {
    animation-delay: 1.2s;
}

@keyframes cancelOutV2 {
    0% {
        stroke-dashoffset: -50;
        opacity: 0;
    }

    50% {
        stroke-dashoffset: 0;
    }

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


/* --- 3. Double batterie (Niveaux ajustés, animation inchangée) --- */
.transfer-arrow-v2 {
    stroke-dasharray: 5, 5;
    animation: chargeTransfer 1.5s linear infinite;
}

.battery-fill-1-v2 {
    animation: batt1Pulse 3s infinite alternate;
}

.battery-fill-2-v2 {
    animation: batt2Pulse 3s infinite alternate;
}

@keyframes chargeTransfer {
    to {
        stroke-dashoffset: -10;
    }
}

@keyframes batt1Pulse {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-2px);
    }
}

@keyframes batt2Pulse {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-1px);
    }
}

/* --- 4. RGB (Nouveau: Filtre SVG pour Lueur) --- */

/* L'animation de rotation du dégradé, appliquée au cercle flouté */
.rgb-circle-glow {
    transform-origin: center;
    animation: rotateGradientV3 10s linear infinite;
}

@keyframes rotateGradientV3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Vous pouvez ajouter une légère pulsation au centre si désiré */
.fonction-rgb-v3 text {
    animation: textPulse 2s infinite alternate;
}

@keyframes textPulse {
    from {
        opacity: 0.9;
    }

    to {
        opacity: 1;
    }
}