/* AGC Logiciels : micro-interactions (survol, apparition au défilement).
   Survols réservés aux souris (hover: hover) ; tout est coupé si l'utilisateur réduit les animations. */

/* ---------- Offres : carte qui se soulève, halo qui suit le pointeur, filet d'accent ---------- */
.offer {
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s var(--ease);
}
.offer::before { /* halo sous le pointeur, position fournie par site.js (--mx, --my) */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 11%, transparent), transparent 62%);
  transition: opacity 0.4s var(--ease);
}
.offer::after { /* filet d'accent qui se trace en haut de la carte */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0); transition: transform 0.6s var(--ease);
}
.offer-list li::before { transition: width 0.35s var(--ease); }

@media (hover: hover) {
  .offer:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--accent) 38%, var(--rule));
    box-shadow: 0 34px 60px -42px rgba(10, 12, 20, 0.42), 0 2px 6px -2px rgba(10, 12, 20, 0.08);
  }
  .offer.is-featured:hover {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--ink));
    box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--accent) 45%, rgba(10, 12, 20, 0.6));
  }
  .offer:hover::before { opacity: 1; }
  .offer:hover::after { transform: scaleX(1); }
  .offer:hover .offer-list li::before { width: 14px; }
  .offer:hover .offer-list li:nth-child(2)::before { transition-delay: 0.03s; }
  .offer:hover .offer-list li:nth-child(3)::before { transition-delay: 0.06s; }
  .offer:hover .offer-list li:nth-child(4)::before { transition-delay: 0.09s; }
  .offer:hover .offer-list li:nth-child(5)::before { transition-delay: 0.12s; }
  .offer:hover .offer-list li:nth-child(6)::before { transition-delay: 0.15s; }
  .offer:hover .btn .arrow { transform: translateX(3px); }

  /* Réalisations : la carte se soulève légèrement */
  .case { transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease); }
  .case:hover { transform: translateY(-3px); box-shadow: 0 40px 80px -60px rgba(10, 12, 20, 0.45); }

  /* Sites vitrines : l'ordinateur et le téléphone se décalent en profondeur */
  .browser, .phone-site { transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease); }
  .devices:hover .browser { transform: translateY(-4px); box-shadow: 0 60px 110px -60px rgba(10, 12, 20, 0.55); }
  .devices:hover .phone-site { transform: translate(-4px, -6px); }

  /* Points forts : le filet se colore de gauche à droite */
  .traits li { position: relative; }
  .traits li::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent);
    transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
  }
  .traits li:hover::before { transform: scaleX(1); }

  /* Badges des stores et liens de navigation */
  .badge img { border-radius: 8px; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
  .badge:hover img { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(10, 12, 20, 0.5); }
  .nav a:not(.btn) {
    background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 0 1px no-repeat;
    transition: background-size 0.3s var(--ease), color 0.2s var(--ease);
  }
  .nav a:not(.btn):hover { background-size: 100% 1px; }
}

/* Toute la carte d'offre mène à son bouton (le lien reste le seul élément focalisable) */
.offer { cursor: pointer; }
.offer .btn::after { content: ""; position: absolute; inset: 0; } /* arrondi assuré par overflow: hidden de .offer */
.offer .btn:focus-visible { outline-offset: 3px; }

/* ---------- Apparition au défilement (classes posées par site.js, seulement sous la ligne de flottaison) ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--rv-delai, 0s); }
.rv.is-in { opacity: 1; transform: none; }
.offer.rv.is-in { transition: opacity 0.8s var(--ease) var(--rv-delai, 0s), transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s var(--ease); }

@media print, (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
}