.liste-voyants {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         gap: 5px;
		 margin-top: 100px;
        }

        .carte-voyant {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 23%;
            height: 160px;
            border: 2px solid #7ba389;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            background-color: #fff;
            box-sizing: border-box;
            position: relative;
        }

        .photo-voyant {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #7ba389;
            margin-right: 15px;
        }

        .details-voyant {
            flex-grow: 1;
        }

        .pseudo-voyant {
            font-size: 1.2em;
            font-weight: bold;
            color: #2F4F4F;
			margin-top: 2px;
        }

        .infos-voyant {
            font-size: 0.9em;
            color: #C72C48;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .icone-etoile {
            color: #C72C48;
            font-size: 22px;
        }
        
        .icone-telephone {
            width: 18px;
            height: auto;
        }

        .avis-telephone {
            font-size: 18px;
            color: #C72C48;
        }

        .avis-moyenne {
            font-size: 18px;
            color: #C72C48;
        }

        .code-expert {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 16px;
            font-weight: bold;
            color: #b5995a;
        }

        .btn-consultez {
            display: inline-block;
            padding: 8px 12px;
            background-color: #fff;
            color: #556B2F;
            text-decoration: none;
            border: 2px solid #556B2F;
            border-radius: 4px;
            transition: background-color 0.3s, color 0.3s;
        }

        .btn-consultez:hover {
            background-color: #556B2F;
            color: #fff;
        }
        
        /* Styles responsives pour les écrans plus petits */
        @media (max-width: 1024px) {
            .carte-voyant {
                width: 48%; /* Deux cartes par ligne sur un écran moyen */
                height: auto;
                flex-direction: column;
                text-align: center;
            }

            .photo-voyant {
                margin-right: 0;
                margin-bottom: 10px;
            }
        }

        @media (max-width: 768px) {
            .carte-voyant {
                width: 100%; /* Une carte par ligne sur un écran plus petit */
                flex-direction: column;
                height: auto;
            }

            .photo-voyant {
                width: 80px;
                height: 80px;
            }

            .pseudo-voyant {
                font-size: 1.1em;
            }

            .icone-etoile {
                font-size: 18px;
            }
        }

        @media (max-width: 480px) {
            .carte-voyant {
                width: 100%;
                padding: 8px;
            }

            .photo-voyant {
                width: 90px;
                height: 90px;
            }

            .pseudo-voyant {
                font-size: 20px;
            }

            .icone-etoile, .icone-telephone {
                font-size: 16px;
            }

            .details-voyant {
                padding: 0 10px;
            }
        }
        /* Animation du bouton "Découvrez moi" */
        @property --border-angle-1 {
            syntax: "<angle>";
            inherits: true;
            initial-value: 0deg;
        }
        @property --border-angle-2 {
            syntax: "<angle>";
            inherits: true;
            initial-value: 90deg;
        }
        @property --border-angle-3 {
            syntax: "<angle>";
            inherits: true;
            initial-value: 180deg;
        }
        :root {
            --custom-green: #477757;
            --custom-pink: #ff7384;
            --custom-gold: #b5995a;
            --background: #ffffff;
            --foreground: black;
            --border-size: 2px;
            --border-radius: 0.75em;
        }
        @keyframes rotateBackground {
            to { --border-angle-1: 360deg; }
        }
        @keyframes rotateBackground2 {
            to { --border-angle-2: -270deg; }
        }
        @keyframes rotateBackground3 {
            to { --border-angle-3: 540deg; }
        }
		
        .discover-me-button {
            --border-angle-1: 0deg;
            --border-angle-2: 90deg;
            --border-angle-3: 180deg;
            color: inherit;
            font-size: 16px;
            font-family: inherit;
            border: 0;
            padding: var(--border-size);
            display: flex;
            width: max-content;
            border-radius: var(--border-radius);
            background-color: transparent;
            background-image: conic-gradient(
                from var(--border-angle-1) at 10% 15%,
                transparent,
                var(--custom-green) 10%,
                transparent 30%,
                transparent
            ),
            conic-gradient(
                from var(--border-angle-2) at 70% 60%,
                transparent,
                var(--custom-pink) 10%,
                transparent 60%,
                transparent
            ),
            conic-gradient(
                from var(--border-angle-3) at 50% 20%,
                transparent,
                var(--custom-gold) 10%,
                transparent 50%,
                transparent
            );
            animation: 
                rotateBackground 3s linear infinite,
                rotateBackground2 8s linear infinite,
                rotateBackground3 13s linear infinite;
        }
        .discover-me-button div {
            background: var(--background); 
            padding: 0.2em 1.5em;
            border-radius: calc(var(--border-radius) - var(--border-size));
            color: var(--foreground);
        }