/* ================= Transitions entre les pages ================= */
@media (prefers-reduced-motion: no-preference) {
  html.pt-leave, html.pt-enter { overflow-x: hidden; }
  html.pt-leave { pointer-events: none; }

  /* ---------- ROUTE : bandeau d'asphalte avec marquage et repère ---------- */
  html[data-pt="route"]::after {
    content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; visibility: hidden;
    transform: translateX(100%);
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 112'%3E%3Cpath d='M48 2C22 2 4 20 4 44c0 32 44 66 44 66s44-34 44-66C92 20 74 2 48 2z' fill='%23c1442a'/%3E%3Ccircle cx='48' cy='42' r='19' fill='%23fff'/%3E%3Ccircle cx='48' cy='42' r='6.5' fill='%23c1442a'/%3E%3C/svg%3E") center calc(50% - 46px) / 52px 60px no-repeat,
      repeating-linear-gradient(90deg, #fff 0 64px, transparent 64px 128px) center / 100% 6px no-repeat,
      #1c1c1c;
  }
  html[data-pt="route"].pt-leave::after { visibility: visible; animation: pt-route-in .43s cubic-bezier(.75,0,.25,1) forwards; }
  html[data-pt="route"].pt-enter::after { visibility: visible; transform: translateX(0); animation: pt-route-out .6s cubic-bezier(.75,0,.25,1) .08s forwards; }
  @keyframes pt-route-in  { from { transform: translateX(100%); } to { transform: translateX(0); } }
  @keyframes pt-route-out { from { transform: translateX(0); }    to { transform: translateX(-100%); } }

  /* ---------- GLISSE : comme on fait défiler des écrans ---------- */
  html[data-pt="glisse"].pt-leave :is(#main-content, footer) { animation: pt-g-out .26s cubic-bezier(.4,0,1,1) forwards; }
  html[data-pt="glisse"].pt-enter :is(#main-content, footer) { animation: pt-g-in .45s cubic-bezier(.15,.75,.25,1) both; }
  @keyframes pt-g-out { to   { opacity: 0; transform: translateX(-60px); } }
  @keyframes pt-g-in  { from { opacity: 0; transform: translateX(60px); } }

  /* ---------- PAGE : la feuille tourne ---------- */
  html[data-pt="page"].pt-leave :is(#main-content, footer) { transform-origin: left center; animation: pt-p-out .36s cubic-bezier(.5,0,.9,.5) forwards; }
  html[data-pt="page"].pt-enter :is(#main-content, footer) { transform-origin: right center; animation: pt-p-in .55s cubic-bezier(.1,.6,.25,1) both; }
  @keyframes pt-p-out { to   { opacity: 0; transform: perspective(1400px) rotateY(-32deg) translateX(-40px); } }
  @keyframes pt-p-in  { from { opacity: 0; transform: perspective(1400px) rotateY(26deg) translateX(40px); } }

  /* ---------- FONDU : sobre ---------- */
  html[data-pt="fondu"].pt-leave :is(#main-content, footer) { animation: pt-f-out .22s ease-in forwards; }
  html[data-pt="fondu"].pt-enter :is(#main-content, footer) { animation: pt-f-in .5s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes pt-f-out { to   { opacity: 0; transform: translateY(-8px); } }
  @keyframes pt-f-in  { from { opacity: 0; transform: translateY(16px); } }
}