/* ============================================================
   Effets « vivants » — validés par Azdine le 18/08/2026 (référence :
   hafsapsychologue.com / zeenadigital.fr, dont les compteurs animés).
   Couche indépendante de main.css, chargée sur toutes les pages.
   js/effets.js pose les classes fx-stagger / fx-tilt automatiquement,
   anime les compteurs (.fx-count) et la barre de lecture.
   Tout est désactivé pour prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. Entrée en douceur des heros (fondu + flou + montée, en cascade) ---------- */
@keyframes fx-up { from { opacity: 0; transform: translateY(22px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
.hero > h1, .hero > .hero-sub, .hero > .hero-actions, .hero > .fx-badges,
.prof-hero > *, .page-hero > *, .contact-hero > *, .blog-header > *, .nl-hero > *,
.category-page > .article-breadcrumb, .category-hero, .article-page > article > .article-breadcrumb, .article-page > article > h1, .article-hero > *, .article-page > article > .article-summary {
  animation: fx-up 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero > .hero-sub, .prof-hero > :nth-child(2), .page-hero > :nth-child(2), .contact-hero > :nth-child(2), .blog-header > :nth-child(2), .nl-hero > :nth-child(2), .article-hero > :nth-child(2), .article-page > article > h1 { animation-delay: 0.14s; }
.hero > .hero-actions, .prof-hero > :nth-child(3), .page-hero > :nth-child(3), .contact-hero > :nth-child(3), .blog-header > :nth-child(3), .nl-hero > :nth-child(3), .article-hero > :nth-child(3), .category-hero { animation-delay: 0.28s; }
.hero > .fx-badges, .page-hero > :nth-child(4), .blog-header > :nth-child(4), .nl-hero > :nth-child(4), .article-hero > :nth-child(4), .article-page > article > .article-summary { animation-delay: 0.42s; }
.blog-header > :nth-child(5) { animation-delay: 0.56s; }

/* ---------- 2. Halos lumineux qui dérivent derrière les heros ---------- */
.hero, .prof-hero, .page-hero, .blog-header, .nl-hero, .contact-hero { position: relative; }
.hero::before, .hero::after, .prof-hero::before, .page-hero::before, .blog-header::before, .nl-hero::before, .contact-hero::before {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  filter: blur(80px); opacity: 0.5;
}
.hero::before, .prof-hero::before, .page-hero::before, .blog-header::before, .nl-hero::before, .contact-hero::before { width: 620px; height: 620px; top: -260px; left: -260px; background: radial-gradient(circle, #b0c03f 0%, rgba(176, 192, 63, 0) 62%); animation: fx-drift1 16s ease-in-out infinite; }
.hero::after { width: 520px; height: 520px; bottom: -240px; right: -220px; background: radial-gradient(circle, #e0b45e 0%, rgba(224, 180, 94, 0) 62%); animation: fx-drift2 20s ease-in-out infinite; }
[data-theme="dark"] .hero::before, [data-theme="dark"] .hero::after, [data-theme="dark"] .prof-hero::before, [data-theme="dark"] .page-hero::before, [data-theme="dark"] .blog-header::before, [data-theme="dark"] .nl-hero::before, [data-theme="dark"] .contact-hero::before { opacity: 0.22; }
@keyframes fx-drift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, 40px); } }
@keyframes fx-drift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-50px, -40px); } }
.hero > *, .prof-hero > *, .page-hero > *, .blog-header > *, .nl-hero > *, .contact-hero > * { position: relative; z-index: 1; }

/* ---------- 3. Titres en dégradé : léger reflet qui glisse ---------- */
@keyframes fx-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.gradient-text { background-size: 200% auto; animation: fx-shimmer 7s linear infinite; }

/* ---------- 4. Badges flottants du hero de l'accueil (chiffres clés) ---------- */
@keyframes fx-bob { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-7px) rotate(var(--r, 0deg)); } }
.fx-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin-top: 38px; }
.fx-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px;
  background: var(--color-bg-card); border: 1px solid color-mix(in srgb, #c9973a 45%, var(--color-border));
  border-radius: var(--radius-full); box-shadow: var(--shadow-md); font-size: 13.5px; color: var(--color-text);
  white-space: nowrap; will-change: transform;
}
.fx-badge strong { font-size: 18px; font-weight: 800; color: var(--color-text-heading); letter-spacing: -0.02em; margin-right: 4px; }
.fx-badge .fx-badge-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, #c9973a 14%, transparent); color: #a8782a; }
.fx-badge-1 { --r: -1.5deg; animation: fx-bob 6s ease-in-out 1.2s infinite; }
.fx-badge-2 { --r: 1.5deg; animation: fx-bob 7s ease-in-out 1.6s infinite; }
.fx-badge-3 { --r: -1deg; animation: fx-bob 6.5s ease-in-out 2s infinite; }
@media (max-width: 560px) { .fx-badge { font-size: 12.5px; padding: 7px 12px 7px 8px; } .fx-badge strong { font-size: 16px; } }

/* ---------- 5. Bandeau défilant (remèdes de la Sunna), avec de l'air avant le bloc suivant ---------- */
.fx-marquee {
  overflow: hidden; padding: 14px 0; margin: 0 0 56px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  background: var(--color-bg-alt);
}
.fx-marquee-track { display: flex; align-items: center; gap: 0; width: max-content; animation: fx-marquee 46s linear infinite; }
.fx-marquee:hover .fx-marquee-track { animation-play-state: paused; }
.fx-marquee-track span { display: inline-flex; align-items: center; gap: 22px; padding: 0 22px 0 0; font-size: 13.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-light); white-space: nowrap; }
.fx-marquee-track span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c9973a; }
@keyframes fx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 720px) { .fx-marquee { margin-bottom: 36px; } }

/* ---------- 6. Révélation en cascade : les enfants de .fx-stagger arrivent l'un après l'autre (JS pose --i et .fx-visible) ---------- */
.fx-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 80ms + 0.1s); }
.fx-stagger.fx-visible > * { opacity: 1; transform: none; }

/* ---------- 7. Compteurs animés (.fx-count) + trait dégradé sous les cartes de chiffres ---------- */
.fx-count { display: inline-block; font-variant-numeric: tabular-nums; }
/* dans les cartes de chiffres, le <span> compteur ne doit pas hériter du style du libellé (.stat-card span / .prof-stat span) */
.stat-card strong > .fx-count, .prof-stat strong > .fx-count, .fx-badge strong.fx-count, .theme-card-count > .fx-count, .blog-count > .fx-count {
  display: inline; font-size: inherit; color: inherit; font-weight: inherit; line-height: inherit; margin: 0; letter-spacing: inherit;
}
.stat-card, .prof-stat { position: relative; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.stat-card::after, .prof-stat::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--gradient-main); transform: scaleX(0); transform-origin: left; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s; }
.fx-visible > .stat-card::after, .fx-visible > .prof-stat::after { transform: scaleX(1); }

/* ---------- 8. Cartes : inclinaison 3D légère au survol (JS pose --rx/--ry) + reflet qui suit la souris ---------- */
.fx-tilt { position: relative; transform-style: preserve-3d; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; will-change: transform; }
.fx-tilt.fx-tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); transition: transform 0.08s linear, box-shadow 0.25s ease; box-shadow: var(--shadow-md); }
.fx-tilt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.35), transparent 45%); z-index: 3; }
.fx-tilt.fx-tilting::before { opacity: 1; }
[data-theme="dark"] .fx-tilt::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.10), transparent 45%); }

/* ---------- 9. Boutons principaux : halo qui respire + éclat au survol ---------- */
@keyframes fx-halo { 0%, 100% { box-shadow: 0 8px 22px rgba(107, 125, 34, 0.25), 0 0 0 0 rgba(107, 125, 34, 0.35); } 50% { box-shadow: 0 10px 26px rgba(107, 125, 34, 0.35), 0 0 0 10px rgba(107, 125, 34, 0); } }
.hero .btn-main, .cursus-promo .btn-main, .cta-final .btn-main, .page-hero .btn-main, .prof-hero .btn-main, .nl-final .btn-main { animation: fx-halo 3.2s ease-in-out infinite; }
.btn-main { position: relative; overflow: hidden; }
.btn-main::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-20deg); transition: left 0.6s; }
.btn-main:hover::after { left: 125%; }

/* ---------- 10. Barre de progression de lecture (articles) ---------- */
.fx-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--gradient-main); z-index: 1000; transition: width 0.1s linear; }

/* ---------- 11. Compte à rebours : petit rebond des secondes ---------- */
@keyframes fx-tick { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.fx-tick { animation: fx-tick 0.35s ease-out; }

/* ---------- Respect des préférences d'accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero > *, .prof-hero > *, .page-hero > *, .contact-hero > *, .blog-header > *, .nl-hero > *, .category-hero, .article-hero > *, .article-page > article > *,
  .fx-badge, .fx-badges, .gradient-text, .fx-marquee-track, .hero::before, .hero::after, .prof-hero::before, .page-hero::before, .blog-header::before, .nl-hero::before, .contact-hero::before, .btn-main, .fx-tick { animation: none !important; }
  .fx-stagger > * { opacity: 1; transform: none; transition: none; }
  .fx-tilt.fx-tilting { transform: none; }
}