body {
			font-family: Arial, sans-serif;
		}

		.hero {
			background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),  no-repeat center center;
			background-size: cover;
			color: white;
			padding: 50px 0;
			text-align: center;
		}

		.hero h1 {
			font-size: 2.5rem;
			font-weight: bold;
		}

		.feature-icon {
			font-size: 2.5rem;
			color: #ffc107;
		}

		.checklist li::before {
			content: "✅ ";
		}

		footer {
			background: #222;
			color: #ccc;
			padding: 20px 0;
		}

		.cta-phone {
			position: fixed;
			bottom: 20px;
			right: 20px;
			background: #ffc107;
			color: black;
			padding: 15px 20px;
			border-radius: 50px;
			font-weight: bold;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
			z-index: 1000;
			text-decoration: none;
		}

    a {
      text-decoration: none;
    }


.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
	background-color:darkgrey
}

.marquee p {
  display: inline-block;
  padding-left: 100%;
  animation: defilement 40s linear infinite;
	
}

@keyframes defilement {
  from { transform: translateX(0%); }
  to { transform: translateX(-100%); }
}


 /* Clignotement du fond (≈0.8 Hz, < 3 Hz pour l'accessibilité) */
    .blink-bg {
      animation: bg-blink 1.2s steps(1, end) infinite;
      color: #fff;
    }
    @keyframes bg-blink {
      0%, 100% { background-color: #dc3545; }  /* rouge */
      50%      { background-color: #fd7e14; }  /* orange */
    }

    /* Variante plus douce : pulsation (si tu préfères) */
    .pulse-bg {
      background: #dc3545;
      color: #fff;
      animation: bg-pulse 2.4s ease-in-out infinite;
    }
    @keyframes bg-pulse {
      0%, 100% { filter: brightness(0.90); }
      50%      { filter: brightness(2 .75); }
    }

    /* Respecte les préférences de l’utilisateur (réduction d’animations) */
    @media (prefers-reduced-motion: reduce) {
      .blink-bg, .pulse-bg { animation: none !important; }
    }