/* Styles des effets de effets.js (écran d'accueil, halo, inclinaison des cartes, onde, apparition au défilement, confettis)
   et quelques animations en plus. Tout est dans « no-preference » : rien ne bouge si l'appareil demande moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
  /* ---------- Écran d'accueil après la connexion ---------- */
  .ecran-bienvenue {
    position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 35%, var(--fond)), var(--fond) 70%);
    transition: opacity .8s ease, transform .8s cubic-bezier(.7, 0, .84, 0), clip-path .8s ease;
  }
  .ecran-bienvenue.part { opacity: 0; transform: scale(1.25); pointer-events: none; }
  .bienvenue-logo {
    width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; font-size: 56px; color: #fff; background: var(--degrade);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
    animation: logo-arrive .9s cubic-bezier(.34, 1.56, .64, 1) both, engrenage 3s linear infinite, onde-logo 1.4s ease-out .5s infinite;
  }
  @keyframes logo-arrive { from { transform: scale(0) rotate(-180deg); opacity: 0; } }
  @keyframes onde-logo { to { box-shadow: 0 0 0 46px rgb(0 0 0 / 0); } }
  .bienvenue-texte { margin: 14px 0 0; font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 700; letter-spacing: -.03em; animation: apparait .6s .35s cubic-bezier(.16, 1, .3, 1) both; }
  .bienvenue-site { margin: 0; color: var(--muted); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; animation: apparait .6s .55s cubic-bezier(.16, 1, .3, 1) both; }

  /* ---------- Halo de lumière qui suit la souris ---------- */
  .halo-souris {
    position: fixed; left: -260px; top: -260px; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; z-index: -1;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%); will-change: transform;
  }

  /* ---------- Cartes inclinées sous la souris, avec reflet ---------- */
  .incline {
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) scale(1.02) !important;
    transition: transform .08s linear, box-shadow .3s, border-color .25s !important;
    box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--accent) 65%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 60%, var(--bord)) !important;
    background-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%);
  }

  /* ---------- Onde au clic ---------- */
  .porte-onde { position: relative; overflow: hidden; }
  .onde {
    position: absolute; width: var(--taille); height: var(--taille); margin: calc(var(--taille) / -2) 0 0 calc(var(--taille) / -2); border-radius: 50%;
    background: rgb(255 255 255 / .45); pointer-events: none; animation: onde .65s ease-out both;
  }
  .btn.secondaire .onde, .conv .onde, .barre nav a .onde { background: color-mix(in srgb, var(--accent) 28%, transparent); }
  @keyframes onde { from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } }

  /* ---------- Apparition au défilement ---------- */
  .a-reveler { opacity: 0 !important; transform: translateY(34px) scale(.96) !important; animation: none !important; }
  main .carte, main .groupe-procs, main .badge-carte, main .carte-jeu, main table tr, main .liste > li { transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, border-color .25s; }

  /* ---------- Confettis ---------- */
  .confetti-site { position: fixed; z-index: 99; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; animation: confetti-site 1.6s cubic-bezier(.2, .7, .3, 1) both; }
  @keyframes confetti-site {
    from { transform: translate(0, 0) rotate(0); opacity: 1; }
    to { transform: translate(var(--dx), calc(var(--dy) + 420px)) rotate(var(--tour)); opacity: 0; }
  }

  /* ---------- Animations en plus ---------- */
  /* Pastille « en ligne » : elle respire */
  .point { animation: respire 2.2s ease-in-out infinite; }
  @keyframes respire { 50% { box-shadow: 0 0 0 7px rgb(74 222 128 / .12); } }
  /* Étiquettes, filtres et niveaux : petit ressort au survol */
  .tag, .filtres a, .rang, .mini-badge { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
  .tag:hover, .filtres a:hover, .rang:hover { transform: translateY(-2px) scale(1.06); }
  .mini-badge:hover { transform: scale(1.35) rotate(-8deg); }
  /* Badges obtenus : l'emoji flotte, les verrouillés tremblent au survol */
  .badge-carte.obtenu .badge-emoji { animation: flotte-emoji 3.2s ease-in-out infinite; display: inline-block; }
  @keyframes flotte-emoji { 50% { transform: translateY(-6px) rotate(4deg); } }
  .badge-carte.verrouille:hover .badge-emoji { animation: tremble .4s ease-in-out; display: inline-block; }
  @keyframes tremble { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
  /* Barres de progression : elles se remplissent */
  .progression span { animation: remplit 1.1s .3s cubic-bezier(.16, 1, .3, 1) both; transform-origin: left; }
  @keyframes remplit { from { transform: scaleX(0); } }
  /* Photos de profil : léger zoom au survol */
  .avatar { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
  a:hover > .avatar, .conv:hover .avatar, .tech:hover .avatar { transform: scale(1.12); }
  /* Champ de recherche : il s'élargit quand on écrit dedans */
  .recherche input { transition: width .4s cubic-bezier(.16, 1, .3, 1), border-color .15s, box-shadow .15s; }
  .recherche input:focus { width: 340px; }
  /* Bannière : les techniciens en ligne arrivent un par un */
  .techs li:nth-child(2) { animation-delay: 80ms; } .techs li:nth-child(3) { animation-delay: 160ms; } .techs li:nth-child(n + 4) { animation-delay: 240ms; }
  /* Bandeau de concours : liseré lumineux qui tourne */
  .bandeau-concours { position: relative; }
  .bandeau-concours::before {
    content: ""; position: absolute; inset: -1px; border-radius: 13px; padding: 1.5px; pointer-events: none;
    background: conic-gradient(from var(--angle), transparent 0 70%, var(--couleur-concours), transparent 95%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: tourne 4s linear infinite;
  }
}