/* ==========================================================================
   Compléments à Tailwind : effets qui ne s'écrivent pas bien en classes.
   ========================================================================== */

/* Titres : les mots clés sont en or, sans italique */
h1 em, h2 em, h3 em { font-style: normal; }

/* Grain photo très léger pour donner de la matière aux fonds noirs */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Hero : carte « niveau à bulle » flottante --- */
.float-a { animation: float 7s ease-in-out infinite; }

/* Niveau à bulle : la bulle glisse et se cale au centre */
.level {
  position: relative; height: 16px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(226,179,60,.18), rgba(226,179,60,.06));
  border: 1px solid rgba(226,179,60,.45);
}
.level::before, .level::after { /* repères centraux */
  content: ""; position: absolute; top: 2px; bottom: 2px; width: 1px; background: rgba(243,207,115,.7);
}
.level::before { left: calc(50% - 16px); }
.level::after { left: calc(50% + 16px); }
.bubble {
  position: absolute; top: 3px; height: 8px; width: 26px; left: calc(50% - 13px); border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #fff8e1, #f3cf73 60%, #d4a017);
  box-shadow: 0 0 12px rgba(243,207,115,.8);
  animation: settle 2.2s cubic-bezier(.34,1.56,.64,1) .8s both;
}

/* Règle graduée (section « Comment ça marche ») */
.ruler {
  height: 14px;
  background-image:
    repeating-linear-gradient(90deg, rgba(226,179,60,.55) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(245,243,238,.18) 0 1px, transparent 1px 12px);
  background-size: 100% 14px, 100% 7px; background-repeat: no-repeat; background-position: bottom;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* Accordéon FAQ : masquer le triangle natif */
summary::-webkit-details-marker { display: none; }

/* --- Apparitions (activées seulement si JS est présent, classe .js sur <html>) --- */
.js .hero-in { opacity: 0; transform: translateY(18px); animation: rise .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms) forwards; }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes settle { 0% { left: 6%; } 100% { left: calc(50% - 13px); } }

/* Respect des préférences d'accessibilité : pas de mouvement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .hero-in, .js .reveal { opacity: 1; transform: none; }
}

/* Les liens d'ancre (#services, #contact…) s'arrêtent sous le menu collant */
html { scroll-padding-top: 6rem; }
@media (min-width: 1024px) { html { scroll-padding-top: 8.5rem; } }