/* ============================================================ ZOOM LECTEUR — pastille flottante de l'encyclopedie Cree le 2026-09-15. Feuille UNIQUE du composant : pour le retoucher, c'est ici et dans `js/zoom.js`, jamais page par page. A QUOI CA SERT : certains visiteurs ont un ecran dont la mise a l'echelle systeme (Windows a 125/150 %, portable a resolution reduite) affiche le site beaucoup plus gros que prevu. Plutot que de leur demander de regler leur systeme, on leur donne le reglage a l'ecran, visible, comme sur les rapports d'expedition. PORTEE DU ZOOM : la classe `.fmz-zone` est posee PAR LE JS sur la zone de contenu (`.species-section` ou `.encyclopedia-section` selon la page). La nav, le pied de page et les modales de niveau restent donc a taille fixe, comme le chrome d'un lecteur PDF. ⚠ Ne pas deplacer ce zoom sur : les surcouches en `position:fixed` prendraient la zone zoomee comme reference et ne couvriraient plus l'ecran. APPARENCE : reprise telle quelle des rapports (`.rzoom` de `css/report.css`), pour que ce soit le meme objet d'un bout a l'autre du site. Le rayon rond est assume ici : c'est du chrome flottant, pas un composant de contenu (la regle « rayons 2px » vise les cartes, pop-ups, images et badges des pages d'encyclopedie). ============================================================ */ .fmz-zone{ zoom: var(--fmz, 1); } .fmz{ position:fixed; right:18px; bottom:18px; z-index:60; display:flex; align-items:center; gap:2px; background:rgba(26,22,18,.94); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:4px 6px; box-shadow:0 6px 20px rgba(0,0,0,.35); } html[dir="rtl"] .fmz{ right:auto; left:18px; } /* ORDRE DES BOUTONS : toujours – / % / + , meme en arabe. Sans ca le flex suit le `dir="rtl"` de la page et miroite la pastille, donc le « + » se retrouve a gauche et le « – » a droite (signale par Rayane le 2026-09-20). Un reglage de taille se lit comme une reglette, pas comme du texte : on fige donc le sens interne en LTR. Le placement de la pastille dans la page, lui, reste bien miroite (regle au-dessus). */ .fmz{ direction:ltr; } .fmz button{ width:30px; height:30px; border:0; background:none; color:#F4EFE7; font-size:20px; line-height:1; cursor:pointer; border-radius:50%; transition:background .15s ease, opacity .15s ease; } .fmz button:hover:not(:disabled){ background:rgba(255,255,255,.14); } .fmz button:disabled{ opacity:.35; cursor:default; } .fmz button:focus-visible{ outline:2px solid #F4EFE7; outline-offset:2px; } /* Le niveau est un bouton : un clic revient a 100 %. */ .fmz .fmz-lvl{ min-width:44px; padding:0 2px; border:0; background:none; color:#F4EFE7; font-family:"Lato",Helvetica,Arial,sans-serif; font-size:12px; text-align:center; cursor:pointer; border-radius:2px; } .fmz .fmz-lvl:hover{ text-decoration:underline; } .fmz .fmz-lvl:disabled{ cursor:default; text-decoration:none; } .fmz .fmz-lvl:focus-visible{ outline:2px solid #F4EFE7; outline-offset:2px; } /* MOBILE : pas de pastille (Rayane 2026-09-19). `js/zoom.js` ne l'installe deja plus sous 768px ; cette regle est le filet de securite (page servie depuis le cache, fenetre de bureau retrecie sous le seuil) et remet le contenu a sa taille nominale. */ @media (max-width: 768px){ .fmz{ display:none !important; } .fmz-zone{ zoom:1 !important; } } /* A l'impression : pas de pastille, et le contenu reprend sa taille nominale. */ @media print{ .fmz{ display:none !important; } .fmz-zone{ zoom:1 !important; } }