/* Micro-interactions VoltaNova.
   Objectif : que chaque geste produise une petite confirmation visuelle,
   sans jamais retarder l'action ni distraire. Rien de décoratif ici, que
   du retour tactile.

   Trois règles suivies partout :
   • uniquement transform et opacity, les deux seules propriétés que le
     navigateur anime sans recalculer la mise en page ;
   • des durées courtes (120-260 ms) : au-delà, l'interface paraît molle ;
   • tout est neutralisé si le visiteur a demandé moins d'animations. */

/* ── Retour au clic ───────────────────────────────────────
   Le plus important : un bouton qui s'enfonce légèrement confirme que le
   clic est parti, y compris quand la page met un instant à répondre. */

.btn,
button:not(.vn-nl-x):not(.tab):not(.filter),
a[class*="rounded-full"],
a[class*="bg-blue-"],
a[class*="bg-green-"],
input[type="submit"] {
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s ease,
              background-color 0.2s ease,
              filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active,
button:not(.vn-nl-x):not(.tab):not(.filter):active,
a[class*="rounded-full"]:active,
a[class*="bg-blue-"]:active,
a[class*="bg-green-"]:active,
input[type="submit"]:active {
  transform: scale(0.97);
}

/* ── Accessibilité au clavier ─────────────────────────────
   Un contour net et visible, mais seulement pour qui navigue au clavier :
   la souris ne déclenche pas :focus-visible. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.55);
  outline-offset: 3px;
}

/* ── Liens de texte ───────────────────────────────────────
   Le soulignement se déploie depuis la gauche au lieu d'apparaître d'un
   bloc : c'est ce qui donne l'impression que le lien « répond ». */

.vn-link,
main a:not([class*="rounded-full"]):not([class*="bg-"]):not(.vn-nl-no) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.vn-link:hover,
main a:not([class*="rounded-full"]):not([class*="bg-"]):not(.vn-nl-no):hover {
  background-size: 100% 1.5px;
}

/* ── Cartes ───────────────────────────────────────────────
   Un décollement discret suffit à signaler qu'un bloc est interactif. */

.vn-lift {
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.24s ease;
}

.vn-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -24px rgba(15, 23, 42, 0.45);
}

/* ── Champs de formulaire ─────────────────────────────────
   Le halo bleu confirme le champ actif sans déplacer quoi que ce soit
   autour, contrairement à une bordure qui changerait d'épaisseur. */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.13);
}

/* ── Cases à cocher ───────────────────────────────────────
   Une petite impulsion à la coche : c'est un geste d'engagement, il
   mérite une confirmation. */

input[type="checkbox"] {
  accent-color: #2563eb;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

input[type="checkbox"]:active { transform: scale(0.88); }
input[type="checkbox"]:checked { animation: vn-check 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Contrastes communs aux pages locales. Les utilitaires d'origine sont trop
   pâles pour du texte courant sur les aplats bleu et vert. */
section.bg-blue-600 p.text-blue-100 { color: #ffffff; }
a.bg-green-500.text-white { background-color: #15803d; }

@keyframes vn-check {
  0% { transform: scale(0.8); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Confirmation d'envoi ─────────────────────────────────
   Après un envoi réussi, le message de succès arrive en montant plutôt
   qu'en apparaissant sec. */

.vn-pop-in {
  animation: vn-pop 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes vn-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ── Apparition au défilement ─────────────────────────────
   Classe posée par assets/interactions.js, jamais dans le HTML : si le
   JavaScript ne s'exécute pas, rien n'est masqué. */

.vn-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.vn-reveal.vn-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ── Respect du réglage système ───────────────────────────
   Certains visiteurs ont des troubles vestibulaires : le mouvement leur
   donne réellement la nausée. Ici tout s'arrête, rien ne disparaît. */

@media (prefers-reduced-motion: reduce) {
  .vn-reveal,
  .vn-reveal.vn-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .vn-pop-in { animation: none !important; }
  input[type="checkbox"]:checked { animation: none !important; }
  * { scroll-behavior: auto !important; }
}