/* ==========================================================================
   Animations BCA (assets/js/bca-anim.js)
   Aucune règle ne change la mise en page : seulement opacité, transform et ombres.
   Les états cachés n'existent que si le JavaScript a ajouté html.anim-pret.
   ========================================================================== */

/* ---------- Icônes des réseaux ---------- */
.icone-plateforme.icone-reseau svg { width: 26px; height: 26px; display: block; }
@media (max-width: 767px) { .icone-plateforme.icone-reseau svg { width: 22px; height: 22px; } }
.icone-plateforme.icone-reseau { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s ease; }
.carte:hover .icone-plateforme.icone-reseau, .carte.touche .icone-plateforme.icone-reseau { transform: rotate(-8deg) scale(1.08); background: var(--bleu); }

/* ---------- Compteurs d'abonnés (cartes Plateformes) ---------- */
.abonnes { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--trait-clair); }
.abonnes__ligne { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.abonnes__nombre { font-family: var(--police-titre); font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; color: var(--bleu); font-variant-numeric: tabular-nums; }
.abonnes__libelle { font-size: 13px; line-height: 1.4; opacity: 0.72; }
.abonnes__libelle--fort { font-size: var(--petit); font-weight: 600; opacity: 1; color: var(--bleu); }
.abonnes__ligne:hover .abonnes__libelle, .abonnes__ligne:focus-visible .abonnes__libelle { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .abonnes__nombre { font-size: 22px; } }
.communaute { margin-top: 14px; font-size: var(--grand); line-height: 1.5; }
.communaute strong { font-family: var(--police-titre); color: var(--bleu); font-variant-numeric: tabular-nums; }
.communaute__note { margin-top: 4px; font-size: 12px; opacity: 0.55; }

/* ---------- Réseaux du pied de page ---------- */
.pied__reseaux { display: flex; gap: 10px; margin-top: 6px; }
.pied__colonne a.pied__reseau { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); opacity: 0.85; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.25s ease, opacity 0.2s ease; }
.pied__colonne a.pied__reseau:hover, .pied__colonne a.pied__reseau:focus-visible { opacity: 1; text-decoration: none; background: var(--bleu); border-color: var(--bleu); transform: translateY(-3px); }

/* ---------- Entrée de page ---------- */
html.anim-pret .e-con.hero .elementor-widget,
html.anim-pret .entete .conteneur > * {
  opacity: 0; translate: 0 28px;
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.anim-pret .entete .conteneur > * { translate: 0 -14px; transition-duration: 0.6s; }
html.anim-entree .e-con.hero .elementor-widget,
html.anim-entree .entete .conteneur > * { opacity: 1; translate: 0 0; }
html.anim-pret .e-con.hero .elementor-widget:nth-child(2) { transition-delay: 0.12s; }
html.anim-pret .e-con.hero .elementor-widget:nth-child(3) { transition-delay: 0.24s; }
html.anim-pret .e-con.hero .elementor-widget:nth-child(4) { transition-delay: 0.36s; }
html.anim-pret .e-con.hero .elementor-widget:nth-child(n+5) { transition-delay: 0.48s; }
html.anim-pret .entete .conteneur > *:nth-child(2) { transition-delay: 0.08s; }
html.anim-pret .entete .conteneur > *:nth-child(3) { transition-delay: 0.16s; }
html.anim-pret .e-con.hero .mot-geant { transition: transform 0.2s linear; }
/* Le halo bleu existant suit doucement la souris (ordinateur) */
html.anim-pret .e-con[class*="halo-"]::after { translate: var(--hdx, 0px) var(--hdy, 0px); transition: translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ---------- Apparition au défilement ---------- */
html.anim-pret .revele {
  opacity: 0; translate: 0 40px;
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) var(--retard, 0ms), translate 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) var(--retard, 0ms);
}
html.anim-pret .revele--image { translate: 0 0; scale: 0.94; transition-property: opacity, scale; transition-duration: 1s; }
html.anim-pret .revele--image.visible { scale: 1; }
html.anim-pret .revele.visible { opacity: 1; translate: 0 0; }

/* ---------- En-tête au défilement ---------- */
.entete { transition: box-shadow 0.3s ease; }
.entete.entete--defile { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }

/* ---------- Cartes inclinées en 3D (ordinateur) ---------- */
.e-con.carte.inclinable {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
  will-change: transform;
}
.e-con.carte.inclinable:hover { box-shadow: 0 24px 50px rgba(21, 0, 255, 0.16); transition-duration: 0.12s, 0.35s; }
.e-con.carte.inclinable::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 255, 255, 0.16), transparent 45%);
  transition: opacity 0.3s ease;
}
.e-con.carte.inclinable:hover::after { opacity: 1; }
.e-con.carte--image img, .e-con.couverture img { transition: scale 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.e-con.carte--image:hover img, .e-con.couverture:hover img { scale: 1.05; }

/* ---------- Toucher (mobile, tablette) ---------- */
.carte.touche, a.touche, button.touche { scale: 0.98; transition: scale 0.15s ease; }

/* ---------- Curseur (ordinateur) ---------- */
.curseur-anneau {
  position: fixed; left: -18px; top: -18px; z-index: 100000; width: 36px; height: 36px;
  border: 1.5px solid var(--bleu); border-radius: 50%; pointer-events: none; opacity: 0;
  mix-blend-mode: difference; border-color: #fff;
  transition: scale 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s ease, opacity 0.2s ease;
}
.curseur-anneau--lien { scale: 1.7; background: rgba(255, 255, 255, 0.12); }
.curseur-anneau--clic { scale: 0.8; }
body.menu-ouvert .curseur-anneau { opacity: 0 !important; }

/* ---------- Bouton WhatsApp flottant (toutes les pages) ---------- */
.wa-flottant {
  position: fixed; right: 24px; bottom: 24px; z-index: 9990;
  display: flex; align-items: center; gap: 12px; text-decoration: none;
}
.wa-flottant__rond {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%; background: #25d366; color: var(--blanc);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
  transition: scale 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
}
.wa-flottant__rond svg { width: 30px; height: 30px; display: block; }
.wa-flottant__rond::before, .wa-flottant__rond::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; opacity: 0; pointer-events: none;
}
.wa-flottant:hover .wa-flottant__rond, .wa-flottant:focus-visible .wa-flottant__rond { scale: 1.08; box-shadow: 0 16px 40px rgba(37, 211, 102, 0.6); }
.wa-flottant:focus-visible { outline: none; }
.wa-flottant:focus-visible .wa-flottant__rond { outline: 2px solid var(--blanc); outline-offset: 3px; }
.wa-flottant__bulle {
  padding: 10px 16px; border-radius: 999px; background: var(--blanc); color: var(--noir);
  font-family: var(--police-texte); font-size: var(--petit); font-weight: 600; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  opacity: 0; translate: 12px 0; pointer-events: none;
  transition: opacity 0.35s ease, translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wa-flottant.wa-bulle-visible .wa-flottant__bulle, .wa-flottant:hover .wa-flottant__bulle { opacity: 1; translate: 0 0; }
body.menu-ouvert .wa-flottant { opacity: 0; pointer-events: none; }
@media (max-width: 767px) {
  .wa-flottant { right: 16px; bottom: 16px; gap: 10px; }
  .wa-flottant__rond { width: 54px; height: 54px; }
  .wa-flottant__rond svg { width: 27px; height: 27px; }
  .wa-flottant__bulle { font-size: 13px; padding: 9px 14px; }
}
/* Mouvement : arrivée, ondes régulières, petit rebond au clic */
html.anim-pret .wa-flottant__rond { animation: wa-arrivee 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both; }
html.anim-pret .wa-flottant__rond::before { animation: wa-onde 3s cubic-bezier(0.2, 0.8, 0.2, 1) 2.2s infinite; }
html.anim-pret .wa-flottant__rond::after { animation: wa-onde 3s cubic-bezier(0.2, 0.8, 0.2, 1) 2.7s infinite; }
html.anim-pret .wa-flottant.wa-clic .wa-flottant__rond { animation: wa-clic 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes wa-arrivee { from { scale: 0; rotate: -30deg; } to { scale: 1; rotate: 0deg; } }
@keyframes wa-onde { 0% { opacity: 0.7; scale: 1; } 100% { opacity: 0; scale: 1.7; } }
@keyframes wa-clic { 0% { scale: 1; } 35% { scale: 0.86; } 100% { scale: 1; } }

/* ---------- Retour visuel au clic (boutons, cartes, images, icônes) ---------- */
.onde-hote { position: relative; overflow: hidden; isolation: isolate; }
.onde {
  position: absolute; z-index: -1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: currentColor; opacity: 0.28; pointer-events: none;
  animation: onde-clic 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes onde-clic { to { scale: 40; opacity: 0; } }
.presse { animation: presse 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes presse { 0% { scale: 1; } 40% { scale: 0.97; } 100% { scale: 1; } }

/* Pas de débordement horizontal quand un mot géant glisse */
body.bca { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  .curseur-anneau { display: none; }
  .wa-flottant__rond, .wa-flottant__rond::before, .wa-flottant__rond::after, .wa-flottant__bulle { animation: none !important; transition: none; }
  .e-con.carte.inclinable { transform: none; }
}