/* =============================================================================
   kw-ds-anim.css — animations discrètes du site public (lots ANIM puis ANIM3, 15/10/2026, demande du dirigeant :
   « le site est un peu statique »). Chargée par header.tpl après les autres feuilles du nouveau design.
   Script : js/kw-ds-anim.js. Tout dépend de html.kw-anim, posé dans <head> si l'appareil accepte les animations.
   · Entrée au chargement (CSS seul, 0,6 s) : titre, accroche et contenu principal de chaque page — c'est ce qui donne
     du mouvement aux pages courtes (contact, centre d'aide, conditions, transfert).
   · Apparition au défilement : le script ne marque (.kw-a-reveler) QUE les blocs situés sous l'écran au moment où il
     démarre ; rien de ce qui est déjà visible ne disparaît, même si la page est lente (lot ANIM3 : l'ancienne méthode
     masquait tout dès le <head> et devait se retirer au bout de 3 s, trop tôt pour les pages du panier).
   · Survol : cartes soulevées, flèches qui avancent, icônes qui grossissent ; boutons qui réagissent au clic.
   ============================================================================= */

/* ── Entrée au chargement ── */
@keyframes kwEntree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.kw-anim .kw-ds :is(.heros-centre h1, .heros-centre .accroche, .heros-centre .recherche-xl, .heros-centre .ext-vedettes,
  .kw2-hero-eyebrow, .kw2-hero h1, .kw2-hero-sub, .kw2-hero-chips, .kw-ssl-hero h1, .kw-ssl-hero p,
  #main-body .card, .kw-transfer-card, .tete-dom) {
  animation: kwEntree .6s cubic-bezier(.2, .7, .2, 1) both;
}
html.kw-anim .kw-ds :is(.heros-centre .accroche, .kw2-hero h1, .kw-ssl-hero p) { animation-delay: .08s; }
html.kw-anim .kw-ds :is(.heros-centre .recherche-xl, .kw2-hero-sub) { animation-delay: .16s; }
html.kw-anim .kw-ds :is(.heros-centre .ext-vedettes, .kw2-hero-chips) { animation-delay: .24s; }

/* ── Apparition au défilement ── */
html.kw-anim .kw-ds .kw-a-reveler:not(.kw-vu) { opacity: 0; transform: translateY(18px); }
html.kw-anim .kw-ds .kw-en-cours {
  transition: opacity .6s ease var(--kw-delai, 0ms), transform .65s cubic-bezier(.2, .7, .2, 1) var(--kw-delai, 0ms) !important;
}

/* ── Survol ── */
html.kw-anim .kw-ds :is(.famille, .tuile, .preuve, .moyens > *, .kw2-card, .kw2-benefit, .ext-tuile, .kw-ssl-card, .kw-ssl-benefit-card, .kw-ssl-guide-card) {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
html.kw-anim .kw-ds :is(.fl, .kw2-btn-arrow, .kn-ic-s, .tuile .ico, .kn-tuile, .kw2-card-icon, .kw2-benefit-ico) { transition: transform .2s ease, background-color .2s ease, color .2s ease; }
@media (hover: hover) {
  html.kw-anim .kw-ds :is(.famille, .tuile, .preuve, .moyens > *, .kw2-benefit, .kw2-card, .kw-ssl-card, .kw-ssl-benefit-card, .kw-ssl-guide-card):hover {
    transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 23, 51, .10);
  }
  html.dark-mode.kw-anim .kw-ds :is(.famille, .tuile, .preuve, .moyens > *, .kw2-benefit, .kw2-card, .kw-ssl-card, .kw-ssl-benefit-card, .kw-ssl-guide-card):hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, .40);
  }
  html.kw-anim .kw-ds :is(.tuile:hover .fl, .famille:hover .fl, .kw2-btn:hover .kw2-btn-arrow, .kn-bas a:hover .kn-ic-s, a.bouton:hover .fl) { transform: translateX(4px); }
  html.kw-anim .kw-ds.kw-rtl :is(.tuile:hover .fl, .famille:hover .fl, .kw2-btn:hover .kw2-btn-arrow, a.bouton:hover .fl, .kn-bas a:hover .kn-sens) { transform: translateX(-4px) scaleX(-1); }
  html.kw-anim .kw-ds :is(.tuile:hover .ico, .kn-item:hover .kn-tuile, .kw2-card:hover .kw2-card-icon, .kw2-benefit:hover .kw2-benefit-ico) { transform: scale(1.08); }
  html.kw-anim .kw-ds :is(.bouton-plein, .kw2-btn-solid):hover { box-shadow: 0 8px 20px color-mix(in srgb, var(--orange) 35%, transparent); }
}
html.kw-anim .kw-ds :is(.bouton, .kw2-btn) { transition: transform .12s ease, box-shadow .2s ease, background-color .15s, border-color .15s, color .15s; }
html.kw-anim .kw-ds :is(.bouton, .kw2-btn):active { transform: scale(.97); }