/* Interactions — L’agence Rêverie
 *
 * Le runtime exporté n'implémente pas l'attribut style-hover produit par l'outil
 * de design : tous les survols du site sont inertes. Seules les cartes de
 * services sont rétablies ici, en CSS réel, via l'attribut [data-svc].
 *
 * !important est indispensable partout : les styles de base sont portés par des
 * attributs style= inline, qui l'emportent sinon sur toute règle externe —
 * y compris pour la propriété transition.
 *
 * L'orange n'est PAS appliqué via background-image : Chrome n'interpole pas les
 * dégradés, le survol basculerait d'un coup. Il est peint par une ombre interne
 * de très grand rayon dont on anime l'alpha — box-shadow, lui, s'interpole.
 * L'ombre interne est rognée sur la boîte de padding : le liseré dégradé de la
 * carte, dessiné par le second calque en border-box, reste donc intact.
 */

[data-svc] {
  transition: box-shadow .22s ease !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    inset 0 0 0 9999px rgba(254, 179, 118, 0) !important;
}

[data-svc] h3,
[data-svc] p,
[data-svc] [data-mono] {
  transition: color .22s ease !important;
}

/* Orange plein au survol, aligné sur la carte accentuée du design (#FEB376). */
[data-svc]:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 196, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    inset 0 0 0 9999px rgba(254, 179, 118, 1) !important;
}

/* Le texte repasse en sombre pour rester lisible sur l'orange. */
[data-svc]:hover h3          { color: #221A12 !important; }
[data-svc]:hover p           { color: rgba(34, 26, 18, .78) !important; }
[data-svc]:hover [data-mono] { color: rgba(34, 26, 18, .66) !important; }

/* Respecte les préférences système de réduction d'animation. */
@media (prefers-reduced-motion: reduce) {
  [data-svc],
  [data-svc] h3,
  [data-svc] p,
  [data-svc] [data-mono] { transition: none !important; }
}