/* ==========================================================================
   page-transition.css — Signature "page qui se tourne"
   ==========================================================================
   Effet de transition entre pages : la page sortante pivote comme une
   feuille reliée sur son bord droit (charnière), avec courbure légère,
   ombre qui respire et reflet sur le bord qui se lève. La page entrante
   se dépose en douceur derrière.

   Deux chemins d'exécution, une seule direction artistique :
   1) API View Transitions (navigation cross-document) sur Chromium
      (Chrome/Edge — support natif depuis 2024/125-126) : le navigateur
      capture lui-même l'ancienne et la nouvelle page, on n'anime que les
      pseudo-éléments ::view-transition-old(root)/::view-transition-new(root).
      [Probable] Safari 18.2+ suit une implémentation similaire ; Firefox
      est encore en développement sur ce point à la date de ce projet — à
      revérifier au moment du déploiement, les navigateurs évoluent vite.
   2) Repli JS (page-transition.js) : un clone de la page est inséré dans
      un overlay et animé avec ces mêmes réglages, garantissant un rendu
      identique et fiable sur tous les navigateurs (y compris en local,
      protocole file://) sans dépendre du support de l'API native.
   ========================================================================== */

/* ┌─ RÉGLAGES AJUSTABLES ─────────────────────────────────────────────────
   │ DURÉE     : 820ms desktop / 640ms mobile (plage demandée : 600–900ms)
   │ ANGLE     : 100deg desktop / 82deg mobile (amplitude réduite au tactile ;
   │             >90deg est volontaire : backface-visibility:hidden masque
   │             la feuille avant qu'elle ne montre son "dos", la course
   │             se sent plus franche sans jamais afficher de miroir)
   │ EASING    : cubic-bezier organique (ni linéaire, ni "Material" clinique)
   │ PERSPECTIVE : 1200px desktop / 850px mobile — volontairement resserrée
   │               (plus la valeur est petite, plus la caméra est "proche"
   │               et plus la profondeur 3D se voit) ; alignée sur la
   │               charnière (bord droit) via perspective-origin, et posée
   │               sur .pt-stage / ::view-transition-image-pair, jamais sur
   │               l'élément qui pivote lui-même (sinon aucun effet 3D).
   │ COULEURS  : toujours teintées du vert de marque, jamais de noir pur
   └───────────────────────────────────────────────────────────────────── */

:root {
  --pt-duration: 820ms;
  --pt-angle: 100deg;
  --pt-easing: cubic-bezier(0.65, 0, 0.35, 1);
  --pt-perspective: 1200px;
  --pt-bg: var(--color-bg, #F9FAFA);

  /* Teinte des ombres = vert de marque (jamais de noir pur, cf. charte ECC) */
  --pt-shadow-rgb: 36, 60, 56;
  --pt-rim-rgb: 216, 234, 243; /* bleu clair de la charte, pour le reflet */
}

@media (max-width: 768px) {
  :root {
    --pt-duration: 640ms;
    --pt-angle: 82deg;
    --pt-perspective: 850px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   1. ACTIVATION DE L'API VIEW TRANSITIONS (navigation cross-document)
   ═══════════════════════════════════════════════════════════════════════ */

@view-transition {
  navigation: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. ACCESSIBILITÉ — prefers-reduced-motion
   On ne coupe pas brutalement l'animation à 0ms : on la remplace par un
   fondu doux, bien plus confortable qu'un instantané sec.
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --pt-duration: 260ms;
  }

  /* @view-transition reste actif (déclaré plus bas, hors media query) : on
     ne modifie ici que le style des pseudo-éléments, pas l'activation de
     la fonctionnalité — @view-transition n'est pas garanti valide imbriqué
     dans un @media selon les navigateurs. */

  ::view-transition-group(root) {
    animation-duration: var(--pt-duration);
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: pt-soft-fade var(--pt-duration) ease-out both;
    transform: none;
    box-shadow: none;
    border-radius: 0;
  }

  .pt-overlay {
    animation: pt-soft-fade var(--pt-duration) ease-out forwards !important;
    perspective: none;
  }

  .pt-overlay::before,
  .pt-overlay::after,
  .pt-overlay__sheen {
    display: none !important;
  }

  @keyframes pt-soft-fade {
    from { opacity: 1; }
    to { opacity: 0; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   3. NAVIGATEUR CHROMIUM — API VIEW TRANSITIONS NATIVE
   ═══════════════════════════════════════════════════════════════════════ */

::view-transition-group(root) {
  animation-duration: var(--pt-duration);
  animation-timing-function: var(--pt-easing);
}

::view-transition-image-pair(root) {
  perspective: var(--pt-perspective);
  perspective-origin: 100% 50%; /* aligné sur la charnière (bord droit) */
  isolation: isolate;
}

/* ---- 3a. Page sortante : elle pivote sur son bord droit ---- */
::view-transition-old(root) {
  animation: pt-page-turn-out var(--pt-duration) var(--pt-easing) both;
  transform-origin: right center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  z-index: 2;
}

/* ---- 3b. Page entrante : se dépose en douceur derrière ---- */
::view-transition-new(root) {
  animation: pt-page-settle-in var(--pt-duration) var(--pt-easing) both;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. KEYFRAMES PARTAGÉES — la "signature" de l'effet
   Même chorégraphie utilisée par le chemin natif (ci-dessus) et par le
   repli JS cloné (§5) pour un rendu identique quel que soit le navigateur.

   Lecture physique du mouvement :
   - la page reste quasi opaque tant qu'elle présente une face visible ;
   - l'ombre portée gonfle puis se résorbe (elle est maximale quand la
     feuille est le plus "décollée" de la page du dessous, vers 45%) ;
   - un léger galbe (scaleY + rotateX + arrondi progressif du bord) casse
     la rigidité d'un simple plan qui pivote, sans simuler un vrai papier
     découpé en lamelles (compromis fiabilité/réalisme) ;
   - l'opacité ne chute qu'en toute fin de course, quand la feuille est
     presque de profil (perte de largeur par la perspective, pas un fondu
     arbitraire) : le papier reste "solide" le plus longtemps possible.
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes pt-page-turn-out {
  0% {
    transform: rotateY(0deg) rotateX(0deg) scaleY(1);
    opacity: 1;
    border-radius: 0;
    box-shadow:
      0 0 0 rgba(var(--pt-shadow-rgb), 0),
      0 0 0 rgba(var(--pt-rim-rgb), 0);
  }
  10% {
    transform: rotateY(calc(var(--pt-angle) * -0.09)) rotateX(0.8deg) scaleY(0.998);
    opacity: 1;
    border-radius: 0 5px 5px 0;
    box-shadow:
      -10px 0 24px rgba(var(--pt-shadow-rgb), 0.14),
      -2px 0 0 rgba(var(--pt-rim-rgb), 0.28);
  }
  25% {
    transform: rotateY(calc(var(--pt-angle) * -0.26)) rotateX(1.5deg) scaleY(0.991);
    opacity: 0.99;
    border-radius: 0 10px 10px 0;
    box-shadow:
      -32px 9px 48px rgba(var(--pt-shadow-rgb), 0.24),
      -3px 0 0 rgba(var(--pt-rim-rgb), 0.44);
  }
  45% {
    /* Pic de décollement : ombre la plus large, reflet le plus net */
    transform: rotateY(calc(var(--pt-angle) * -0.53)) rotateX(2deg) scaleY(0.983);
    opacity: 0.97;
    border-radius: 0 16px 16px 0;
    box-shadow:
      -55px 20px 76px rgba(var(--pt-shadow-rgb), 0.30),
      -4px 0 0 rgba(var(--pt-rim-rgb), 0.55);
  }
  65% {
    /* La feuille s'incline vers le profil : l'ombre se résorbe (perspective) */
    transform: rotateY(calc(var(--pt-angle) * -0.74)) rotateX(1.4deg) scaleY(0.99);
    opacity: 0.86;
    border-radius: 0 9px 9px 0;
    box-shadow:
      -38px 14px 52px rgba(var(--pt-shadow-rgb), 0.20),
      -3px 0 0 rgba(var(--pt-rim-rgb), 0.30);
  }
  85% {
    transform: rotateY(calc(var(--pt-angle) * -0.92)) rotateX(0.4deg) scaleY(0.997);
    opacity: 0.4;
    border-radius: 0 3px 3px 0;
    box-shadow:
      -14px 6px 24px rgba(var(--pt-shadow-rgb), 0.10),
      0 0 0 rgba(var(--pt-rim-rgb), 0.08);
  }
  100% {
    /* Feuille de profil : largeur nulle par perspective, pas un fondu arbitraire */
    transform: rotateY(calc(var(--pt-angle) * -1)) rotateX(0deg) scaleY(1);
    opacity: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

@keyframes pt-page-settle-in {
  0% {
    opacity: 0.82;
    transform: scale(1.012);
    filter: brightness(0.97);
  }
  55% {
    opacity: 0.92;
    transform: scale(1.004);
    filter: brightness(0.99);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   5. REPLI — OVERLAY CLONÉ (Safari, Firefox, protocole file://)
   Même chorégraphie que ci-dessus, appliquée à un clone réel du <body>.
   Le JS ne fait qu'ajouter/retirer des classes : tout le rendu visuel vit
   ici, dans le CSS (séparation des responsabilités).
   ═══════════════════════════════════════════════════════════════════════ */

/* .pt-stage porte la perspective (elle ne s'applique qu'aux ENFANTS d'un
   élément, jamais à l'élément qui la déclare) : la rotation 3D doit donc
   vivre sur .pt-overlay, un cran plus bas, sous peine de tourner "à plat"
   sans aucune profondeur — c'est ce qui rendait l'effet peu visible. */
.pt-stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: 99999;
  overflow: hidden;
  perspective: var(--pt-perspective);
  perspective-origin: 100% 50%;
  background: var(--pt-bg);
  pointer-events: none;
}

.pt-overlay {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: right center;
  transform-style: preserve-3d;
  will-change: transform, opacity, box-shadow;
  backface-visibility: hidden;
}

/* ---- 5a. Trait de charnière : ombre de pli le long du bord droit ---- */
.pt-overlay::before {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 9%;
  min-width: 24px;
  background: linear-gradient(
    to left,
    rgba(var(--pt-shadow-rgb), 0.30),
    rgba(var(--pt-shadow-rgb), 0) 100%
  );
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

/* ---- 5b. Reflet mobile sur le bord qui se lève ---- */
.pt-overlay__sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 5px;
  background: linear-gradient(
    to bottom,
    rgba(var(--pt-rim-rgb), 0) 0%,
    rgba(var(--pt-rim-rgb), 0.95) 50%,
    rgba(var(--pt-rim-rgb), 0) 100%
  );
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transform: translateZ(2px);
}

.pt-overlay--turning {
  animation: pt-fall-back-out var(--pt-duration) var(--pt-easing) forwards;
}

.pt-overlay--turning::before {
  animation: pt-hinge-crease var(--pt-duration) var(--pt-easing) forwards;
}

.pt-overlay--turning .pt-overlay__sheen {
  animation: pt-sheen-sweep var(--pt-duration) var(--pt-easing) forwards;
}

/* Reprend exactement la chorégraphie de §4, appliquée à l'overlay entier */
@keyframes pt-fall-back-out {
  0% {
    transform: rotateY(0deg) rotateX(0deg) scaleY(1);
    opacity: 1;
    border-radius: 0;
    box-shadow: 0 0 0 rgba(var(--pt-shadow-rgb), 0);
  }
  10% {
    transform: rotateY(calc(var(--pt-angle) * -0.09)) rotateX(0.8deg) scaleY(0.998);
    opacity: 1;
    border-radius: 0 5px 5px 0;
    box-shadow: -10px 0 24px rgba(var(--pt-shadow-rgb), 0.14);
  }
  25% {
    transform: rotateY(calc(var(--pt-angle) * -0.26)) rotateX(1.5deg) scaleY(0.991);
    opacity: 0.99;
    border-radius: 0 10px 10px 0;
    box-shadow: -32px 9px 48px rgba(var(--pt-shadow-rgb), 0.24);
  }
  45% {
    transform: rotateY(calc(var(--pt-angle) * -0.53)) rotateX(2deg) scaleY(0.983);
    opacity: 0.97;
    border-radius: 0 16px 16px 0;
    box-shadow: -55px 20px 76px rgba(var(--pt-shadow-rgb), 0.30);
  }
  65% {
    transform: rotateY(calc(var(--pt-angle) * -0.74)) rotateX(1.4deg) scaleY(0.99);
    opacity: 0.86;
    border-radius: 0 9px 9px 0;
    box-shadow: -38px 14px 52px rgba(var(--pt-shadow-rgb), 0.20);
  }
  85% {
    transform: rotateY(calc(var(--pt-angle) * -0.92)) rotateX(0.4deg) scaleY(0.997);
    opacity: 0.4;
    border-radius: 0 3px 3px 0;
    box-shadow: -14px 6px 24px rgba(var(--pt-shadow-rgb), 0.10);
  }
  100% {
    transform: rotateY(calc(var(--pt-angle) * -1)) rotateX(0deg) scaleY(1);
    opacity: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

@keyframes pt-hinge-crease {
  0%   { opacity: 0; }
  10%  { opacity: 0.5; }
  45%  { opacity: 1; }
  75%  { opacity: 0.4; }
  100% { opacity: 0; }
}

@keyframes pt-sheen-sweep {
  0%   { opacity: 0; transform: translateZ(2px) scaleY(0.6); }
  20%  { opacity: 0.8; transform: translateZ(2px) scaleY(0.85); }
  45%  { opacity: 1; transform: translateZ(2px) scaleY(1); }
  70%  { opacity: 0.5; transform: translateZ(2px) scaleY(1); }
  100% { opacity: 0; transform: translateZ(2px) scaleY(1); }
}