/* =============================================================================
   fiche-nav.css — NAVIGATION ENTRE FICHES : fleches laterales + « au hasard ».
   =============================================================================
   Source : `style.css` l. 2403-2412 (`.py-nav`) et l. 2611-2622 (`.py-hasard`),
   plus `mobile.css` l. 702 et 709.

   ⚠️⚠️ CES DEUX COMPOSANTS N'EXISTENT DANS AUCUNE DES 14 PAGES HTML DE LA MAQUETTE : ils
   sont INJECTES PAR SON JS (`pays.js:186`, `animal.js:223`, dans `document.body`). C'est
   exactement l'angle mort structurel decrit dans CLAUDE.md — les deux scripts de controle
   partent de NOS vues, donc ce que nous n'avons jamais ecrit leur echappe par construction,
   et ils annoncaient « aucun ecart » sur une page a qui il manquait trois comportements.
   La parade, non appliquee ce jour-la : chercher dans le CSS de la maquette les classes
   ABSENTES DE TOUT SON HTML. `.py-nav` et `.py-hasard` y repondaient toutes les deux.

   ⚠️ LE NOM DE CLASSE EST `py-*` SUR LES DEUX FICHES, pays ET espece : `animal.js` reutilise
   telles quelles les classes de la fiche pays. Ne pas les renommer en `fiche-nav__*` pour
   « faire propre » — le CSS repris de la maquette cesserait de mordre, et c'est precisement
   le piege que CLAUDE.md decrit sous « toute divergence assumee se paie dans le CSS qu'on
   reprend sans l'avoir ecrit ».

   ⚠️ `.py-nav--art` (fiche ARTICLE, fleches qui se calent en bas) n'est PAS repris : il
   appartient a la fiche recit, et son `.is-docked` demande un JS que nous n'avons pas porte.
   ============================================================================= */

.py-nav{ position:fixed; top:50%; transform:translateY(-50%); z-index:600;
  display:flex; align-items:center; background:var(--blanc); color:var(--noir);
  border:1px solid rgba(14,14,14,.15); border-radius:999px; padding:11px;
  box-shadow:0 10px 30px rgba(0,0,0,.18); }
.py-nav svg{ width:22px; height:22px; flex:0 0 auto; }
/* le libelle est REPLIE au repos et se deploie au survol : `max-width:0` + `overflow:hidden`.
   ⚠️ Il reste dans le DOM et reste lu par un lecteur d'ecran — ce n'est pas un `display:none`. */
.py-nav span{ max-width:0; overflow:hidden; white-space:nowrap; font-size:var(--fs-label);
  font-weight:700; transition:max-width .3s var(--ease), padding .3s var(--ease); }
.py-nav:hover span{ max-width:220px; }
.py-nav--prev{ left:14px; } .py-nav--prev:hover span{ padding-left:8px; }
.py-nav--next{ right:14px; flex-direction:row-reverse; } .py-nav--next:hover span{ padding-right:8px; }

.py-hasard{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:600;
  display:flex; align-items:center; gap:9px;
  font:inherit; font-size:var(--fs-label); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--jaune); color:var(--noir); border:0; border-radius:999px; padding:13px 22px;
  box-shadow:0 14px 34px rgba(0,0,0,.22); cursor:pointer; text-decoration:none;
  transition:transform .2s var(--ease), filter .2s, opacity .25s var(--ease); }
.py-hasard svg{ width:19px; height:19px; flex:0 0 auto; }   /* le petit dé */
.py-hasard:hover{ transform:translateX(-50%) translateY(-2px); filter:brightness(1.05); }
/* ⚠️ MASQUE DES QUE LA GRILLE DE VOYAGES OU LE PIED DE PAGE ENTRE A L'ECRAN (`fiche-nav.js`) :
   sans cela il se pose sur les cartes de voyage. Il GLISSE vers le bas et devient non
   cliquable — `opacity:0` seul laisserait un bouton invisible qui intercepte les clics. */
.py-hasard.is-tucked{ opacity:0; transform:translateX(-50%) translateY(120%); pointer-events:none; }

/* ⚠️ LES DEUX DISPARAISSENT SOUS 1024 PX, et c'est une decision de Fix (22/07) et non un
   repli : « la pilule rend redondants les boutons de navigation de page ». Le menu mobile
   porte deja une fleche de retour. Les laisser sur telephone poserait trois elements fixes
   par-dessus un ecran de 390 px. */
@media (max-width:1024px){
  .py-nav{ display:none; }
  .py-hasard{ display:none; }
}
@media (hover:none){
  .py-hasard:hover{ transform:translateX(-50%); filter:none; }
}