/* ════════════════════════════════════════════════════════
   view-transitions.css — Moteur de transitions de page (View Transitions API,
   navigations cross-document).
   Chargé sur TOUTES les pages des DEUX sections du site (gpire.be — profil recruteurs — et
   /pro/ — offre B2B) : c'est le même fichier partout, voir la note d'architecture ci-dessous.
   Contrepartie JS : /assets/js/view-transition/bootstrap.js (typage de la transition, nommage
   juste-à-temps de l'élément-pivot — tout ce que le CSS seul ne peut pas décider).

   ─── Principe ───────────────────────────────────────────────────────────────────────────────
   1. Navigation DANS la même section (ex. accueil ↔ CV, ou accueil pro ↔ réalisations pro)
      → transition "classique" : fondu + léger glissement, sobre, rapide.
   2. Passage recruteurs → pro (ou l'inverse) → transition enrichie et DIRIGÉE : la page sortante
      se réduit et s'efface, la page entrante apparaît avec un peu plus de présence, et un
      élément-pivot commun aux deux pages (l'icône boutique côté recruteurs ↔ le badge de marque
      "GP" côté pro) se morphe littéralement de l'un vers l'autre au lieu de disparaître/
      réapparaître. C'est bootstrap.js qui décide QUAND ce mode s'active (via view-transition-
      types) et QUEL élément nommer — ce fichier ne fait que définir à quoi ça ressemble.
   3. `prefers-reduced-motion` est respecté à trois niveaux indépendants (opt-in coupé à la
      racine, styles enrichis jamais chargés, et un filet de sécurité qui met toute durée à 0
      si jamais une règle nous échappait) : voir chaque section ci-dessous.
   4. Rien de tout ceci ne nécessite de repli explicite : un navigateur qui ne connaît pas
      `@view-transition` ou les pseudo-éléments `::view-transition-*` les ignore purement et
      simplement (règle CSS inconnue = ignorée), la navigation redevient une navigation normale.
      Le `@supports` en section 3 sert uniquement à éviter d'attribuer `view-transition-name` /
      `contain` pour rien dans les navigateurs qui ne s'en serviront jamais, pas à fournir un
      quelconque repli visuel.
════════════════════════════════════════════════════════ */

/* ─── 1. Opt-in — désactivé d'office si l'utilisateur préfère moins de mouvement ────────────
   C'est la seule chose qui doit vivre EN DEHORS de `prefers-reduced-motion: no-preference` :
   au lieu de laisser les transitions se déclencher pour couper leur durée à 0 ensuite, on
   empêche le navigateur de les déclencher du tout. Plus simple, et ça évite tout état
   intermédiaire bizarre pendant lequel `event.viewTransition` existerait sans qu'on veuille
   réellement d'animation. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* ─── 2. Filet de sécurité — au cas où une règle d'animation nous échapperait malgré tout ─── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
  }
}

/* ─── 3. Habillage — uniquement dans les navigateurs qui comprennent la propriété ───────────
   (Chrome/Edge 126+, Safari 18.2+ pour le cross-document à l'heure où ceci est écrit ; Firefox
   pas encore. Progressive enhancement pur : ailleurs, navigation normale, sans rien à écrire.) */
@supports (view-transition-name: none) {
  @media (prefers-reduced-motion: no-preference) {
    /* ---- 3.1 Transition CLASSIQUE (même section) — le cas par défaut ------------------------
       Fondu + léger glissement horizontal : discret, "propre", jamais tape-à-l'œil. C'est la
       transition qu'on voit tant qu'on reste accueil ↔ CV ↔ articles, ou accueil pro ↔
       réalisations ↔ devis. */
    ::view-transition-group(root) {
      animation-duration: 420ms;
      animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    ::view-transition-old(root) {
      animation: gp-classic-out 420ms cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    ::view-transition-new(root) {
      animation: gp-classic-in 420ms cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    @keyframes gp-classic-out {
      to {
        opacity: 0;
        transform: translateX(-12px) scale(0.99);
      }
    }

    @keyframes gp-classic-in {
      from {
        opacity: 0;
        transform: translateX(16px) scale(0.99);
      }
    }

    /* ---- 3.2 Transition ENRICHIE — changement de section, dirigée -------------------------
       Activée uniquement quand bootstrap.js pose le type `to-pro` / `to-recruiter` via
       `event.viewTransition.types` (voir le fichier JS). Sans ce type actif, ces règles ne
       matchent rien et 3.1 s'applique — c'est pour ça qu'elles n'ont pas besoin de !important :
       la sélectivité (::view-transition-group(root) préfixé par le pseudo-classe de type) suffit
       à prendre le dessus le moment venu. Un léger flash de la couleur de marque traverse la
       transition (via le fond du groupe, visible entre le fondu sortant et le fondu entrant) —
       clin d'œil de continuité entre les deux univers du site, qui partagent déjà ce jaune.

       Chorégraphie volontairement étalée sur ~1s (et non simultanée) pour laisser le temps de la
       voir : la page sortante s'efface vite (260ms, dégage le champ), puis l'élément-pivot (3.3)
       a la scène pour lui seul pendant ~400ms avant que la page entrante ne commence à apparaître
       par-dessus (délai 420ms) — sans ce temps de battement, tout se chevauchait et donnait
       l'impression d'un clignotement plutôt que d'une transition. */
    html:active-view-transition-type(to-pro)::view-transition-group(root),
    html:active-view-transition-type(to-recruiter)::view-transition-group(root) {
      animation-duration: 1040ms;
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
      background: var(--accent-yellow, #f4dc6f);
    }

    html:active-view-transition-type(to-pro)::view-transition-old(root),
    html:active-view-transition-type(to-recruiter)::view-transition-old(root) {
      animation: gp-section-out 260ms cubic-bezier(0.4, 0, 1, 1) both;
    }

    /* → vers /pro/ : la nouvelle page "monte" légèrement à l'arrivée. */
    html:active-view-transition-type(to-pro)::view-transition-new(root) {
      animation: gp-section-in-up 620ms 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /* → retour vers gpire.be : sens inverse, pour que la direction reste lisible. */
    html:active-view-transition-type(to-recruiter)::view-transition-new(root) {
      animation: gp-section-in-down 620ms 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes gp-section-out {
      to {
        opacity: 0;
        transform: scale(0.94);
      }
    }

    @keyframes gp-section-in-up {
      from {
        opacity: 0;
        transform: translateY(22px) scale(0.97);
      }
    }

    @keyframes gp-section-in-down {
      from {
        opacity: 0;
        transform: translateY(-22px) scale(0.97);
      }
    }

    /* ---- 3.3 Élément-pivot "section-bridge" — morph nommé, posé par bootstrap.js ----------
       bootstrap.js donne temporairement ce nom à UN SEUL élément par page, juste avant la
       capture (juste-à-temps, jamais posé au chargement — voir le fichier JS pour le pourquoi).
       Easing "back-out" = léger dépassement avant de se stabiliser, façon ressort : c'est ce qui
       donne un rendu "travaillé" plutôt qu'un simple redimensionnement linéaire, sans tomber
       dans l'effet gadget (un seul rebond, pas une oscillation). `object-fit: contain` évite
       toute déformation du contenu (icône + texte) pendant que la boîte change de forme entre
       la pastille "Solutions pour PME" et le badge "GP", qui n'ont pas les mêmes proportions.
       Durée alignée sur 3.2 : l'icône a fini son rebond (950ms) juste avant que la page entrante
       n'arrive à son opacité finale (1040ms) — elle reste donc le seul élément qui bouge pendant
       une bonne partie de la transition, plutôt que de se perdre dans un fondu simultané. */
    ::view-transition-group(section-bridge) {
      animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
      animation-duration: 950ms;
      z-index: 10;
    }

    ::view-transition-old(section-bridge),
    ::view-transition-new(section-bridge) {
      object-fit: contain;
    }

    ::view-transition-new(section-bridge) {
      animation: gp-bridge-glow 950ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes gp-bridge-glow {
      0%   { filter: drop-shadow(0 0 0 rgb(244 220 111 / 0%)); }
      45%  { filter: drop-shadow(0 0 16px rgb(244 220 111 / 55%)); }
      100% { filter: drop-shadow(0 0 0 rgb(244 220 111 / 0%)); }
    }

    /* ---- 3.4 Chrome persistante de /pro/ — en-tête et nav de pied de page --------------------
       Identiques sur les 3 pages de /pro/ (mêmes liens, même contenu) : les faire quand même
       disparaître puis réapparaître à chaque clic (comportement par défaut de 3.1, puisqu'ils
       font partie de "root" comme le reste) donnait un clignotement inutile pour un élément qui,
       littéralement, ne change pas.
       C'est bootstrap.js qui les nomme juste-à-temps ("pro-header" / "pro-footer") — MAIS
       uniquement lors d'une navigation interne à /pro/, jamais lors d'un changement de section :
       l'élément-pivot de 3.3 (`.pro-brand-mark` / `.pro-footer-back-link`) se trouve justement à
       l'intérieur de l'un de ces deux blocs, les nommer en même temps imbriquerait deux groupes
       l'un dans l'autre pour rien. Résultat : ces deux règles ne s'activent donc QUE pour la
       transition classique de 3.1, jamais en même temps que 3.2/3.3 — pas besoin ici de les
       conditionner à `:active-view-transition-type()`. */
    ::view-transition-group(pro-header),
    ::view-transition-group(pro-footer),
    ::view-transition-old(pro-header),
    ::view-transition-old(pro-footer),
    ::view-transition-new(pro-header),
    ::view-transition-new(pro-footer) {
      animation: none;
    }
  }

  /* Indice de mise en isolation pour les éléments susceptibles d'être nommés — améliore la
     qualité de capture du "snapshot" par le navigateur (recommandation MDN/Chrome), sans rien
     changer visuellement en dehors d'une transition. Volontairement en dehors du bloc
     `prefers-reduced-motion` juste au-dessus : ce n'est pas une animation, juste un indice de
     rendu, donc pas de raison de le retirer pour les utilisateurs "reduced motion". */
  .explore-link[href="/pro/"],
  .pro-brand-mark,
  .pro-footer-back-link,
  .pro-header,
  .pro-footer-nav {
    contain: layout;
  }
}