/* ══════════════════════════════════════════════════════════════════
   site-fx.css — couche d'animations « vivantes » commune au site
   (accueil, catalogue de prods, devis & mise en relation, collab, faq…)

   COULEURS = thème actif (--a1/--a2 en RGB). 100 % additif, transform/opacity
   uniquement. Pas de gate reduced-motion (animations toujours actives sur ce site).
   ══════════════════════════════════════════════════════════════════ */

/* ── 0) Footer : l'adresse mail tient sur UNE seule ligne (mobile compris) ──
   Elle se coupait en plein milieu du mot dans la colonne étroite du footer. */
footer a.footer-mail{white-space:nowrap;font-size:.78rem}
@media(max-width:768px){
  footer a.footer-mail{font-size:.68rem;letter-spacing:-.02em}
}

/* ── Cartes « stars montantes » ──
   La carte entière est cliquable (ouvre la fiche détaillée).
   Sur mobile on épure : photo + métier + réseaux seulement ; la description
   complète se lit dans la fiche qui s'ouvre au clic. */
.star-card{cursor:pointer}
@media(max-width:768px){
  .star-card .star-desc{display:none}
}

/* ── 1) Survol des « cases » : élévation + halo + bordure aux couleurs du thème ── */
.talent-card, .additionnel-card, .recrute-card, .star-card,
.prod-card, .service-card, .path-card, .summary-card,
.collab-card, .cc-card, .faq-composer-card, .formule-card {
  transition:
    transform .32s cubic-bezier(.2,.7,.2,1),
    box-shadow .32s ease,
    border-color .32s ease;
  will-change: transform;
}
.talent-card:hover, .additionnel-card:hover, .recrute-card:hover, .star-card:hover,
.prod-card:hover, .service-card:hover, .path-card:hover, .summary-card:hover,
.collab-card:hover, .cc-card:hover, .faq-composer-card:hover, .formule-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 22px 48px -20px rgba(var(--a1), .38),
    0 8px 20px -12px rgba(var(--a2), .30);
  border-color: rgba(var(--a1), .5) !important;
}

/* Les cartes de la liste collab « glissent » légèrement vers la droite au survol
   (renforce l'invitation au clic) */
.collab-card:hover { transform: translateX(4px) translateY(-4px); }

/* ── 2) « Reflet » qui balaie les mots importants — utilitaire .km-shine ── */
.km-shine {
  background: linear-gradient(100deg,
      currentColor 0%, currentColor 38%,
      rgb(var(--a1)) 48%, #fff 52%, rgb(var(--a2)) 56%,
      currentColor 66%, currentColor 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: km-shine-move 4.5s ease-in-out infinite;
}
@keyframes km-shine-move {
  0%   { background-position: 180% 0; }
  55%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

/* ── 3) Apparition au scroll — utilitaire .km-reveal (classe .in ajoutée par site-fx.js) ── */
.km-reveal {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
.km-reveal.in { opacity: 1; transform: none; }
.km-reveal.km-reveal-2 { transition-delay: .08s; }
.km-reveal.km-reveal-3 { transition-delay: .16s; }

/* ── 4) Petit éclat sur les boutons dégradés au survol ── */
.btn-grad { position: relative; overflow: hidden; }
.btn-grad::after {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.btn-grad:hover::after { animation: km-btn-sheen .8s ease; }
@keyframes km-btn-sheen { to { left: 160%; } }