/* ══ profil-menu.css — LE MENU DE PROFIL : MISE EN PAGE ET TRANSITION ═══
   Elia, 28/08, vidéo à l'appui : « regarde la différence entre Airbnb et
   nous. Airbnb, ça reste sur la même page et c'est juste la partie de
   droite qui bouge ; sur notre site ça change toute la page pour ensuite
   revenir sur la même. »

   ── ⚠️ POURQUOI UNE FEUILLE, ET PAS DU CSS INJECTÉ PAR LE SCRIPT ─────
   `@view-transition` et `view-transition-name` doivent être connus du
   navigateur AU MOMENT où il prend l'instantané : au départ pour la page
   qu'on quitte, et au PREMIER RENDU pour celle qui arrive. Un `<style>`
   posé par un script `defer` arrive trop tard pour la page entrante — la
   transition ne se déclencherait qu'une fois sur deux, ce qui est pire
   que pas de transition du tout. D'où ce fichier, lié dans le `<head>`.

   ── ⚠️ CE N'EST PAS UNE APPLICATION MONOPAGE, ET C'EST VOLONTAIRE ────
   Charger le contenu en fetch et l'injecter donnerait le comportement
   d'Airbnb au pixel près — mais chaque page du profil embarque SES
   scripts (le questionnaire du bilan, les modules Firebase du classement,
   le chargeur de favoris). Les rejouer à la main est le genre de
   réécriture qui casse trois écrans qui marchaient. La transition entre
   documents donne le même RESSENTI — le menu ne bouge pas, seule la
   colonne de droite change — sans toucher à un seul de ces scripts.
   ══════════════════════════════════════════════════════════════════ */

@view-transition { navigation: auto; }

/* Le menu ne bouge pas : même nom des deux côtés, aucune animation. Le
   navigateur le reconnaît comme LE MÊME élément et le laisse en place. */
@media (min-width: 900px) {
  .pfm-side, .pf-side { view-transition-name: deca-profil-menu; }
  .pfm-main, .pf-main { view-transition-name: deca-profil-contenu; }
}
::view-transition-old(deca-profil-menu),
::view-transition-new(deca-profil-menu) { animation: none; }
/* Seule la droite change, en fondu court — assez pour qu'on voie que
   quelque chose s'est passé, assez bref pour ne pas se faire attendre. */
::view-transition-old(deca-profil-contenu) { animation: deca-sortie .16s ease both; }
::view-transition-new(deca-profil-contenu) { animation: deca-entree .22s ease both; }
@keyframes deca-sortie { to { opacity: 0; } }
@keyframes deca-entree { from { opacity: 0; transform: translateY(6px); } }

/* ⚠️ Respect du réglage système : une personne qui a demandé moins
   d'animations n'en reçoit aucune. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ⚠️ LA RÈGLE QUI MASQUAIT LES DOUBLONS DU HAMBURGER A ÉTÉ RETIRÉE
   (28/08). Elle ne servait que sur les cinq pages du profil — or Elia les
   voyait depuis l'ACCUEIL, qui ne charge pas cette feuille. Masquer par
   CSS était le mauvais outil : Favoris, Classement et Empreinte carbone
   sont désormais RETIRÉS du menu lui-même, dans `airbnb-chrome.js` ET
   dans sa copie `bottom-nav.js`. Une entrée absente ne peut pas
   réapparaître sur une page qui aurait oublié une feuille de style. */
