/* VIVANT : instrument de terrain. Les effets accompagnent de vraies données. */
:root { --rayon: 13px; --rayon-s: 8px; --dex-chassis:#704637; --dex-paper:#e9e9d9; }
.entete { background:var(--dex-chassis); color:#fff4df; padding:calc(13px + env(safe-area-inset-top)) 18px 12px; border-bottom:4px solid #49372e; box-shadow:0 5px 0 color-mix(in srgb,var(--fond) 82%,transparent); backdrop-filter:none; }
.entete-ligne { align-items:center; gap:10px; max-width:1100px; margin:auto; }
.dex-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.dex-lens { width:29px; height:29px; border:4px solid #e8ddc2; border-radius:50%; background:radial-gradient(circle at 34% 30%,#d5ebd3 0 10%,#8cad94 12%,#2b6352 62%,#153f34 85%); box-shadow:0 2px 0 #3f302a,inset 0 0 0 2px #72937e; }
.marque { font-family:var(--mono); font-size:15px; letter-spacing:.1em; font-weight:700; }
.dex-brand small { display:block; margin-top:2px; font:9px/1.4 var(--mono); letter-spacing:.09em; opacity:.78; }
.compteur { color:#f3e4cf; margin-left:auto; font-size:11px; white-space:nowrap; }
.compteur b { color:#fff; font-size:18px; }
.dex-son { display:grid; justify-items:center; gap:1px; width:44px; min-height:44px; border:1px solid #c5ac8b80; border-radius:8px; color:#f7ead4; background:#332e2566; font:9px/1.3 var(--mono); flex:none; }
.dex-son[aria-pressed=true] { color:#173c2b; background:#d6e9bc; border-color:#d6e9bc; }
.dex-son[aria-pressed=false] svg { opacity:.65; }
.dex-son:disabled { opacity:.45; }
.jauge { max-width:1100px; margin:10px auto 0; height:4px; background:#342d25; border-radius:1px; }
.jauge span { width:100%; transform:scaleX(0); transform-origin:left; background:#c9dcab; transition:transform .5s ease-out; }
main { max-width:1160px; margin:auto; }
.dex-intro { margin:24px 18px 16px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:12px; }
.dex-kicker { margin:0 0 8px; font:10px/1.5 var(--mono); letter-spacing:.14em; color:var(--texte-doux); text-transform:uppercase; }
.dex-intro h2 { margin:0; font-size:clamp(27px,5vw,42px); line-height:1.1; font-weight:600; letter-spacing:-.055em; text-wrap:balance; }
.dex-intro p:not(.dex-kicker) { max-width:46ch; margin:10px 0 0; color:var(--texte-doux); font-size:12px; line-height:1.7; }
.dex-stamp { width:56px; aspect-ratio:1; display:grid; align-content:center; text-align:center; border:1px solid var(--bord-net); border-radius:50%; font:9px/1.4 var(--mono); color:var(--texte-doux); transform:rotate(-9deg); flex:none; }
.dex-stamp strong { font-size:15px; font-weight:500; }
.dex-legend { display:flex; flex-wrap:wrap; gap:14px; margin:0 18px 14px; font:10px/1.6 var(--mono); color:var(--texte-doux); }
.dex-legend span { display:inline-flex; align-items:center; gap:6px; }
.dex-legend i { width:7px; height:7px; border:1px solid var(--texte-doux); border-radius:1px; }
.dex-legend .dex-known { background:var(--accent); border-color:var(--accent); }
.barre-outils { padding:8px 18px 10px; gap:12px; }
.recherche { border-radius:7px; box-shadow:inset 0 1px 2px #15271b0a; }
.puce { border-radius:5px; font-size:11px; padding:8px 12px; }
.rangee-puces { gap:6px; }
.grille { padding:6px 18px 18px; gap:12px; }
.carte { border-radius:10px; background:var(--surface); box-shadow:0 2px 0 var(--bord); }
.carte:hover { border-color:var(--bord-net); }
.carte:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.carte .vignette { aspect-ratio:1.12; border-bottom:1px solid var(--bord); }
.carte .vignette::before { content:""; position:absolute; inset:7px; border:1px solid #c8e0c524; border-radius:3px; z-index:1; pointer-events:none; }
.carte.vue .vignette::before { border-color:#f5f4df65; }
.carte .numero { top:8px; left:auto; right:8px; z-index:3; background:#10271fe8; color:#e5ebcf; border-radius:3px; font-size:10px; padding:3px 5px; }
.carte .vignette .badge-groupe { left:8px; top:auto; bottom:8px; font:9px/1.6 var(--mono); padding:3px 6px; border-radius:3px; box-shadow:none; }
.corps-carte { padding:11px 11px 13px; gap:5px; }
.carte .nom { font-size:12px; font-weight:600; letter-spacing:-.02em; }
.carte .latin { font-size:10px; }
.carte:not(.vue) .nom { color:var(--texte); }
.dex-state { display:flex; align-items:center; gap:5px; font:9px/1.4 var(--mono); color:var(--texte-doux); margin-top:3px; }
.dex-state::before { content:""; width:5px; height:5px; border:1px solid currentColor; border-radius:1px; }
.carte.vue .dex-state { color:var(--accent); }
.carte.vue .dex-state::before { background:currentColor; }
.rarete { font-size:9px; letter-spacing:.02em; }
.dex-pagination { text-align:center; padding:4px 18px 28px; }
.dex-pagination p { margin:0 0 12px; font:11px/1.6 var(--mono); color:var(--texte-doux); }
.dex-pagination button { min-height:46px; padding:10px 20px; border:1px solid var(--bord-net); border-radius:6px; background:var(--surface); color:var(--texte); font-size:12px; }
.nav { border-top:1px solid var(--bord-net); background:var(--surface); box-shadow:0 -4px 18px #15271b0d; gap:2px; padding-left:6px; padding-right:6px; }
.nav button { font:10px/1.5 var(--police); letter-spacing:-.02em; min-width:0; border-radius:7px; margin:5px 0; padding-top:8px; padding-bottom:7px; }
.nav button[aria-current=page] { background:var(--accent-sourd); color:var(--accent); }
.nav button .icone { width:20px; height:20px; }
.fiche { background:var(--fond); max-width:850px; margin:auto; border-left:1px solid var(--bord); border-right:1px solid var(--bord); }
.fiche-image { aspect-ratio:1.15; overflow:hidden; }
.fiche-image::before { content:""; position:absolute; inset:16px; z-index:1; border:1px solid #f1f0d24a; border-radius:5px; pointer-events:none; }
.fiche-corps { padding:4px 22px 48px; }
.fiche-titre { font-size:32px; letter-spacing:-.055em; line-height:1.15; }
.dex-numero { font-size:29px; letter-spacing:-.04em; color:var(--accent); }
.dex-fiche .dex-entete { margin:0 0 16px; }
.dex-fiche .dex-entete .badge-groupe { border-radius:4px; box-shadow:none; font-family:var(--mono); font-size:11px; }
.dex-flavor { border-radius:5px; border-left-width:2px; padding:16px 15px; background:var(--surface); }
.dex-data { font-size:12px; }
.section-titre { font-family:var(--mono); font-size:11px; letter-spacing:.04em; margin-top:25px; }
.sacre { background:#10241edb; backdrop-filter:blur(7px); }
.sacre-carte { border:2px solid var(--bord-net); border-radius:12px; box-shadow:0 22px 75px #081b1455; padding:26px 22px; background:var(--fond); overflow:hidden; }
.sacre-sur { font:11px/1.6 var(--mono); letter-spacing:.1em; color:var(--accent); }
.sacre-image { border:1px solid var(--bord-net); border-radius:7px; }
.sacre-numero { font-size:29px; color:var(--accent); margin:17px 0 8px; }
.sacre h2 { font-size:27px; line-height:1.15; letter-spacing:-.04em; }
.sacre-note { font-size:12px; color:var(--texte-doux); }
.sacre-carte .bouton { width:100%; border-radius:6px; margin-top:14px; }
@media(min-width:700px) { .dex-intro,.dex-legend { margin-left:28px; margin-right:28px; }.grille{padding:8px 28px 22px;grid-template-columns:repeat(4,minmax(0,1fr))}.barre-outils{padding-left:28px;padding-right:28px}.dex-intro{margin-top:34px}.corps-carte{padding:14px}.carte .nom{font-size:14px}.dex-stamp{width:70px} }
@media(prefers-color-scheme:light) { :root { --fond:#f3f2e9;--fond-2:#e9ecdf;--surface:#fcfcf7;--surface-haute:#f6f6ec;--bord:#d8ddcf;--bord-net:#b6c4b0;--texte:#1c3027;--texte-doux:#536459;--texte-faible:#637467;--accent:#2c6b48;--accent-sourd:#e1ead8;--dex-chassis:#94513f; }.badge-groupe{filter:saturate(.75)} }
@media(prefers-color-scheme:dark) { :root { --fond:#11211a;--fond-2:#16291f;--surface:#1a3024;--surface-haute:#223c2c;--bord:#314b38;--bord-net:#46614a;--texte:#edf0da;--texte-doux:#b3c1a8;--texte-faible:#a4b89d;--accent:#bdd39a;--accent-sourd:#334c31; } }
@media(prefers-reduced-motion:no-preference) { .dex-son,.dex-pagination button{transition:background .18s,transform .18s}.dex-son:active,.dex-pagination button:active{transform:scale(.96)}.fiche-image::before{animation:dex-register .6s ease-out}.sacre-carte::before{content:"";display:block;width:35px;height:3px;margin:0 auto 14px;background:var(--accent);animation:dex-stamp .4s ease-out} }
@keyframes dex-register { from {opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)} }
@keyframes dex-stamp { from {opacity:0;transform:scaleX(.1)}to{opacity:1;transform:scaleX(1)} }
@media(prefers-reduced-motion:reduce) { .jauge span,.carte,.nav button{transition:none}.sacre,.sacre-carte,.radar-balayage,.squelette,.pastille-anim{animation:none!important} }

.badge-groupe.g-oiseau{background:#245f99}.badge-groupe.g-mammifere{background:#6d4c30}.badge-groupe.g-amphibien{background:#28683e}.badge-groupe.g-reptile{background:#566530}.badge-groupe.g-insecte{background:#8b551b}.badge-groupe.g-arachnide{background:#65487c}.badge-groupe.g-plante{background:#3b6d41}.badge-groupe.g-poisson{background:#276876}.badge-groupe.g-champignon{background:#715740}.badge-groupe.g-mollusque{background:#665b6d}
@media(prefers-color-scheme:light){:root{--r1:#65705b;--r2:#716d4d;--r3:#806c2e;--r4:#886522;--r5:#795913}}
@media(prefers-color-scheme:dark){:root{--r1:#b0bea0;--r2:#c2be95;--r3:#d4c48b;--r4:#e1ca7e;--r5:#ead474}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:360px){.entete{padding-left:12px;padding-right:12px}.dex-brand{gap:8px}.dex-brand small{display:none}.dex-lens{width:25px;height:25px}.marque{font-size:14px}.compteur{font-size:10px}.compteur b{font-size:15px}.dex-son{width:40px}.entete-ligne{gap:8px}}