/* Interactions Sawce Vintage
   Discrètes et cohérentes : une seule courbe d'animation, la couleur brune de la marque
   au survol, et chaque effet signale quelque chose (cliquable, ajouté, où l'on va). */
:root{--sv-ease:cubic-bezier(.2,.7,.2,1);--sv-brown:#8a6248}

/* Repère clavier visible (accessibilité) */
:focus-visible{outline:2px solid var(--sv-brown);outline-offset:3px}

/* Boutons : transitions harmonisées et léger enfoncement au clic (aussi sur mobile) */
.sv-btn{transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .18s var(--sv-ease)!important}
.sv-btn:active{transform:scale(.97)}

/* 👌🏾 : petit rebond qui confirme l'ajout à la liste d'envies */
.sv-like.sv-pop span{animation:sv-pop .45s var(--sv-ease)}
@keyframes sv-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* Parallaxe : préparée pour rester fluide */
[data-parallax]{will-change:transform}

/* Étiquette « Aperçu rapide » des cartes article (masquée par défaut) */
.sv-quick{position:absolute;left:10px;right:10px;bottom:10px;padding:13px 12px;background:rgba(250,248,244,.94);color:#161310;font:500 12px/1 Jost,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-align:center;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .4s var(--sv-ease)}

@media (hover:hover) and (pointer:fine){
  /* Carte article : toute la carte réagit, puisque toute la carte ouvre l'article */
  .sv-card:hover .sv-card-media img{transform:scale(1.05)!important}
  .sv-card:hover .sv-card-media img+img{opacity:1!important}
  .sv-card:hover .sv-quick{opacity:1;transform:none}
  .sv-card-name{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--sv-ease)}
  .sv-card:hover .sv-card-name{background-size:100% 1px}

  /* Liens soulignés : le soulignement descend et passe au brun */
  .sv-ulink{transition:color .25s ease,text-underline-offset .25s var(--sv-ease),text-decoration-color .25s ease!important}
  .sv-ulink:hover{text-underline-offset:8px!important;text-decoration-color:var(--sv-brown)!important}

  /* Menu principal : un filet se dessine sous la rubrique survolée */
  .sv-nav[data-pill="false"]{position:relative}
  .sv-nav[data-pill="false"]::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--sv-ease)}
  .sv-nav[data-pill="false"]:hover{opacity:1!important}
  .sv-nav[data-pill="false"]:hover::after{transform:scaleX(1)}

  /* Catégories et grandes tuiles : une flèche ou l'étiquette indique la destination */
  .sv-tile-name{transition:color .25s ease}
  .sv-tile-name::after{content:"→";display:inline-block;margin-left:8px;opacity:0;transform:translateX(-6px);transition:opacity .3s ease,transform .4s var(--sv-ease)}
  .sv-tile:hover .sv-tile-name{color:var(--sv-brown)}
  .sv-tile:hover .sv-tile-name::after{opacity:1;transform:none}
  .sv-tag{transition:background-color .3s ease,color .3s ease}
  .sv-tile:hover .sv-tag{background:#161310!important;color:#fff!important}

  /* Galerie de l'histoire : l'image s'assombrit à peine, la loupe annonce l'agrandissement */
  .sv-zoomable{transition:filter .4s ease}
  .sv-zoomable:hover{filter:brightness(.88)}
}

/* Respect du réglage « réduire les animations » du système */
@media (prefers-reduced-motion:reduce){
  [data-parallax]{transform:none!important;will-change:auto}
  .sv-quick,.sv-card-name,.sv-nav::after,.sv-tile-name::after,.sv-btn{transition:none!important}
  .sv-btn:active{transform:none}
}