/* Rendu overlays raster (range + migration) : toggle net/flou via data attribut.
   Par defaut = flou (rendu bilinear, transitions douces).
   body[data-map-render="sharp"] = pixels nets (crisp-edges). */
body[data-map-render="sharp"] .sharp-overlay { image-rendering: pixelated; image-rendering: crisp-edges; }

/* Source Serif 4 (Adobe, licence SIL OFL, voir assets/fonts/LICENSE-SourceSerif4.md), prise
   telle quelle sur github.com/adobe-fonts/source-serif le 2026-10-02. Deux graisses seulement,
   les deux que les titres utilisent : 79 + 80 Ko, contre 417 Ko pour la version variable. Pas
   de sous-ensemble : la licence reserve le nom « Source » aux fichiers non modifies.
   swap : le titre s'affiche tout de suite en Palatino, puis bascule. */
@font-face { font-family:"Source Serif 4"; src:url("assets/fonts/SourceSerif4-Semibold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Source Serif 4"; src:url("assets/fonts/SourceSerif4-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap; }

:root {
    --bg: #eef2f1;
    --surface: #ffffff;
    --surface-2: #e7eceb;
    --surface-3: #dde4e2;
    --ink: #15201e;
    --ink-2: #47534f;
    --ink-3: #616966;
    /* Encre des elements poses sur un fond BLANC FIXE (pastilles de l'en-tete de fiche,
       bouton fermer, fleches de navigation). Elle ne doit JAMAIS suivre le theme : ces
       fonds restent blancs en sombre, et --ink y devient clair. Mesure le 2026-09-29 sur
       la fiche espece en sombre : 1,10:1 avec --ink, 16,04:1 avec celle-ci.
       A ne PAS redeclarer dans les blocs sombres plus bas. */
    --ink-sur-blanc: #15201e;
    /* Meme raison, en gris secondaire : le numero pose sur la vignette du Birdydex a une
       pilule blanche a 85 %, donc claire dans les deux themes. Mesure le 2026-09-29 :
       --ink-3 sombre sur cette pilule donne 2,94:1 sur 466 vignettes ; celui-ci donne
       4,53:1. A ne PAS redeclarer dans les blocs sombres plus bas. */
    --ink-3-sur-blanc: #5b6361;
    --line: rgba(21,32,30,0.10);
    --line-2: rgba(21,32,30,0.16);
    --accent: #0b7c77;
    --accent-ink: #075a56;
    --accent-2: #c05e33;
    --gold: #b98d22;
    --shadow: 0 1px 2px rgba(21,32,30,.06), 0 8px 28px rgba(21,32,30,.07);

    /* friend series (validated categorical) */
    --s0:#2a78d6; --s1:#1baf7a; --s2:#eda100; --s3:#008300;
    --s4:#4a3aa7; --s5:#e34948; --s6:#e87ba4; --s7:#eb6834;

    /* rarity tiers, cool -> hot */
    --t-all:#6b7f7a; --t-common:#2f9e6f; --t-uncommon:#c0891f;
    --t-rare:#df6b34; --t-unique:#c93f66;

    /* Police des titres (nom de l'appli, titres de page) : Source Serif 4, servie par nous
       puisque la CSP n'autorise que nos propres polices. Les noms latins en italique restent
       sur --serif : on n'embarque pas la version italique. */
    --titre: "Source Serif 4","Palatino Linotype","Iowan Old Style",Georgia,serif;
    --serif: "Palatino Linotype","Iowan Old Style","Hoefler Text",Georgia,"Times New Roman",serif;
    --sans: "Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
    --mono: "Cascadia Code",Consolas,"SF Mono",ui-monospace,Menlo,monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg:#0d1513; --surface:#131f1d; --surface-2:#1a2827; --surface-3:#223231;
      --ink:#e9f1ef; --ink-2:#a7b6b2; --ink-3:#8b9c97;
      --line:rgba(233,241,239,0.10); --line-2:rgba(233,241,239,0.16);
      --accent:#2bbcb0; --accent-ink:#54cfc4; --accent-2:#e08a4e; --gold:#e0bc59;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
      --s0:#3987e5; --s1:#199e70; --s2:#c98500; --s3:#22a022;
      --s4:#9085e9; --s5:#e66767; --s6:#d55181; --s7:#d95926;
      --t-all:#8fa39e; --t-common:#37b784; --t-uncommon:#e4b352;
      --t-rare:#ef8a54; --t-unique:#e86a92;
    }
  }
  :root[data-theme="dark"] {
    --bg:#0d1513; --surface:#131f1d; --surface-2:#1a2827; --surface-3:#223231;
    --ink:#e9f1ef; --ink-2:#a7b6b2; --ink-3:#8b9c97;
    --line:rgba(233,241,239,0.10); --line-2:rgba(233,241,239,0.16);
    --accent:#2bbcb0; --accent-ink:#54cfc4; --accent-2:#e08a4e; --gold:#e0bc59;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
    --s0:#3987e5; --s1:#199e70; --s2:#c98500; --s3:#22a022;
    --s4:#9085e9; --s5:#e66767; --s6:#d55181; --s7:#d95926;
    --t-all:#8fa39e; --t-common:#37b784; --t-uncommon:#e4b352;
    --t-rare:#ef8a54; --t-unique:#e86a92;
  }
  :root[data-theme="light"] {
    --bg:#eef2f1; --surface:#ffffff; --surface-2:#e7eceb; --surface-3:#dde4e2;
    --ink:#15201e; --ink-2:#47534f; --ink-3:#616966;
    --line:rgba(21,32,30,0.10); --line-2:rgba(21,32,30,0.16);
    --accent:#0b7c77; --accent-ink:#075a56; --accent-2:#c05e33; --gold:#b98d22;
    --s0:#2a78d6; --s1:#1baf7a; --s2:#eda100; --s3:#008300;
    --s4:#4a3aa7; --s5:#e34948; --s6:#e87ba4; --s7:#eb6834;
    --t-all:#6b7f7a; --t-common:#2f9e6f; --t-uncommon:#c0891f;
    --t-rare:#df6b34; --t-unique:#c93f66;
  }

  * { box-sizing: border-box; }

  /* Un seul anneau de focus pour tout ce qui se rejoint au clavier. Ecrit en :where(),
     donc a specificite ZERO : n'importe quelle regle de focus deja ecrite plus bas gagne
     sans avoir a etre retouchee, et ajouter un composant demain le fait entrer tout seul.
     Le navigateur en dessinait bien un par defaut, mais mesure le 2026-09-29 : 0,9px de
     large, parce que body porte zoom:0.85. C'est trop fin pour se voir sur une pastille.
     3px et non 2 : Chrome arrondit outline-width au pixel entier AVANT d'appliquer le
     zoom. Mesure le 2026-09-29 sur la meme pastille : 2px et 2,5px ecrits rendent tous
     les deux 1,88px, 3px et 3,5px rendent tous les deux 2,82px. Ecrire 2,5px ne servait
     donc a rien. 3px ecrits font 2,55px reels, au-dessus du minimum de 2px.
     Couleur --accent : mesure le meme jour, 4,23:1 au pire sur les fonds clairs de
     l'appli et 6,48:1 sur les sombres, la le seuil d'un indicateur non textuel etant 3:1.
     Le decalage sort l'anneau de l'element : il reste visible sur un bouton rempli
     d'accent, ou un anneau colle au bord se fondrait dans le fond. */
  :where(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }

  /* Tout ce qui porte une infobulle prend le curseur « aide » : le point d'interrogation
     annonce qu'il y a quelque chose a lire, ce qui est precisement le role de l'infobulle.
     Seule la pastille exotique des vignettes l'avait.
     La regle est posee ICI, avant les composants, et a specificite minimale : ceux qui ont
     une action propre - boutons, lignes de selecteur, zones de carte - declarent
     cursor:pointer plus bas et gagnent donc, puisqu'a specificite egale c'est la derniere
     declaration qui l'emporte. On ne promet pas une explication la ou l'on attend un clic.
     [title] est vise aussi : l'attribut n'est converti en data-tip qu'au premier survol,
     trop tard pour le curseur.
     Les champs de formulaire sont ecartes - un select a son propre curseur, un input
     attend une saisie - et l'exclusion passe par :where(), qui ne compte pour rien dans la
     specificite : avec :not() la regle serait montee a 0-1-3 et aurait ecrase les
     cursor:pointer des composants, soit exactement l'inverse du but. */
  :root { --curseur-aide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ctext x='7' y='10.5' text-anchor='middle' font-family='system-ui,sans-serif' font-size='11' font-weight='700' stroke='%23fff' stroke-width='2.6' stroke-linejoin='round' paint-order='stroke'%3E?%3C/text%3E%3Ctext x='7' y='10.5' text-anchor='middle' font-family='system-ui,sans-serif' font-size='11' font-weight='700' fill='%23000'%3E?%3C/text%3E%3C/svg%3E") 4 2, help; }
  :where(:not(select, input, textarea))[data-tip]:where(:not([data-tip=""])),
  :where(:not(select, input, textarea))[title]:where(:not([title=""])) { cursor: var(--curseur-aide); }
  /* Les trois tris du Classement ouvrent une bulle d'explication au survol : ils prennent le
     « ? » malgre leur clic, a la demande de Mathis (2026-10-05) - c'est la regle de tout ce
     qui explique au survol. */
  #boardModes button { cursor: var(--curseur-aide); }
  /* Meme regle pour les deux tris du fil, dont l'explication est passee en bulle (2026-10-14). */
  #feedModeSeg button { cursor: var(--curseur-aide); }
  /* L'ascenseur est toujours la. Sans ca il apparait des que le contenu depasse la hauteur
     de l'ecran et disparait quand il rentre - et toute la page, centree, glisse
     lateralement a chaque fois. Ca sautait entre un birdydex filtre sur une seule espece et
     le birdydex complet, et aussi a l'ouverture d'une fiche espece, qui pose
     overflow:hidden sur le body ; pose sur html, l'ascenseur tient dans les deux cas.
     Les fiches, qui sont en position fixe, changeaient de largeur pour la meme raison -
     1 280 px sur une page courte, 1 265 sur une longue.
     overflow-y:scroll plutot que scrollbar-gutter:stable : les deux reservent la meme
     place et tiennent la page aussi bien, mais le premier y met une vraie glissiere la ou
     le second laisse une bande vide, qui se lit comme un defaut a cote d'une fiche. Sur
     macOS, ou les ascenseurs se superposent au contenu, il ne reserve rien du tout. */
  /* Le fond est pose sur html ET sur body. D habitude celui de body suffit, le navigateur le
     propageant au canvas de la page ; mais body porte zoom:0.85, ce qui ramene sa hauteur a
     85 % de l ecran : le reste tombait sur le blanc par defaut, une bande visible en bas de
     page, criante en theme sombre. */
  html { overflow-y: scroll; background:var(--bg); }
  /* Le gras s'arrete a 700 partout. Par defaut <b> vaut « bolder » : dans un texte deja a 600,
     le navigateur montait a 900 et « Download (csv) » se lisait mal (Mathis, 2026-10-05). Les
     graisses 800 posees sur du texte sont descendues a 700 le meme jour ; seules les pastilles
     rondes chiffrees (rarete, etapes) gardent 800, lisible a cette taille. */
  b, strong { font-weight:700; }
  body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
    line-height:1.5; -webkit-font-smoothing:antialiased;
    /* zoom global 0.85 : rendu par defaut plus dense, comme si le user etait a 85% de zoom
       navigateur. Reduit tout uniformement sans casser les proportions. */
    zoom:0.85; }
  /* 28 px sous le pied de page depuis le 2026-10-15 (80 avant, trop de vide : Mathis). */
  .wrap { max-width:1560px; margin:0 auto; padding:24px 24px 28px; }
  /* Bloque le scroll de la page quand la fiche espece est ouverte. La molette n'affecte
     que le contenu de la fiche, peu importe la position de la souris. */
  body.species-modal-open { overflow:hidden; }
  /* Auth : 3 etats via [data-auth] sur <html>.
     - pending : Firebase resout, on affiche le splash neutre
     - signed-out : on affiche le gate d'auth
     - signed-in : on affiche l'app */
  html[data-auth="pending"] .wrap,
  html[data-auth="signed-out"] .wrap { display:none !important; }
  html[data-auth="pending"] .auth-gate,
  html[data-auth="signed-in"] .auth-gate { display:none !important; }
  html[data-auth="signed-in"] .auth-splash,
  html[data-auth="signed-out"] .auth-splash { display:none !important; }
  html[data-auth="pending"], html[data-auth="signed-out"] { overflow:hidden; }
  /* L ecran d attente ne part plus des que Firebase a repondu, mais quand le contenu est
     pret - et jamais avant une seconde, pour qu il ne clignote pas. C est app.js qui retire
     data-splash.
     Cette regle a la MEME specificite que html[data-auth="signed-in"] .auth-splash juste
     au-dessus, toutes deux en !important : c est donc sa place APRES qui la fait gagner, et
     la deplacer plus haut la rendrait sans effet, en silence.
     On ne masque PAS .wrap ici, expres : le contenu se construit derriere avec ses vraies
     dimensions - une carte ou un canvas mesures dans un conteneur cache rendent n importe
     quoi - et le splash, opaque et en position fixe, le recouvre le temps qu il faut. */
  html[data-splash="on"] .auth-splash { display:flex !important; }
  /* Compat retrocompatible avec l'ancienne classe auth-gated (avant data-auth) */
  body.auth-gated .wrap, html.auth-gated .wrap { display:none !important; }
  body.auth-gated, html.auth-gated { overflow:hidden; }
  /* Splash : plein ecran centre avec logo bouncing sur bg */
  .auth-splash { position:fixed; inset:0; z-index:9500;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--surface)) 0%, var(--surface-2) 60%); }
  .auth-splash-logo { width:112px; height:112px; object-fit:contain; animation:auth-logo-bounce 1.4s ease-in-out infinite; border-radius:22px; }
  .auth-gate { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--surface)) 0%, var(--surface-2) 60%);
    overflow:hidden; padding:24px; box-sizing:border-box; }
  /* Le decor d oiseaux flottants de l ecran de connexion a ete retire le 26/09/2026 :
     quatre PNG de 1500x1500 affiches a 200px au plus, 5,19 Mo au total, telecharges a
     chaque visite meme connecte - un <img> dans un sous-arbre display:none est quand meme
     recupere par le navigateur. Regles .auth-gate-bg / .auth-bird* et keyframes auth-float
     supprimees avec lui. */
  .auth-gate-card { position:relative; background:var(--surface); border:1px solid var(--line-2); border-radius:22px;
    width:min(520px, 100%); padding:40px 38px; box-shadow:0 24px 60px rgba(0,0,0,.18);
    max-height:calc(100vh - 48px); overflow-y:auto; z-index:1; }
  .auth-gate-brand { text-align:center; margin-bottom:22px; }
  .auth-gate-logo { width:150px; height:150px; object-fit:contain; margin-bottom:14px; animation:auth-logo-bounce 3s ease-in-out infinite; display:block; margin-left:auto; margin-right:auto; }
  /* mix-blend-mode:multiply retire le 2026-10-05 : il effacait le fond blanc d'un ancien logo,
     et en theme sombre il noircissait l'oiseau. Le martin.svg a un fond transparent. */
  @keyframes auth-logo-bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
  .auth-gate-brand h1 { font-size:30px; margin:0; color:var(--ink); font-weight:700; letter-spacing:-.02em; }
  .auth-gate-tag { margin:8px 0 0; font-size:15px; color:var(--ink-3); }
  .auth-gate-tabs { display:flex; gap:4px; background:var(--surface-2); border-radius:10px; padding:4px; margin-bottom:22px; }
  .auth-gate-tab { flex:1; border:none; background:transparent; padding:11px 14px; font:600 15px var(--sans); color:var(--ink-2); cursor:pointer; border-radius:8px; transition:all .12s; }
  .auth-gate-tab:hover { color:var(--ink); }
  .auth-gate-tab.on { background:var(--surface); color:var(--accent-ink); box-shadow:0 1px 3px rgba(0,0,0,.06); }
  .auth-gate-form { display:flex; flex-direction:column; gap:14px; }
  .auth-gate-field { display:flex; flex-direction:column; gap:6px; }
  .auth-gate-field label { font-size:13px; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.5px; }
  .auth-gate-field input { padding:14px 16px; border:1.5px solid var(--line-2); border-radius:11px; font:inherit; font-size:16px; background:var(--surface-2); color:var(--ink); transition:border-color .12s, background .12s; }
  /* La bordure qui change de couleur ne suffit pas : 1,5px, et le seul signal est la
     couleur. L'anneau s'ajoute par-dessus plutot que de remplacer. */
  .auth-gate-field input:focus { outline:3px solid var(--accent); outline-offset:2px; border-color:var(--accent); background:var(--surface); }
  .auth-gate-consent { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--ink-3); line-height:1.4; cursor:pointer; }
  .auth-gate-consent input { flex:0 0 auto; margin-top:2px; }
  .auth-gate-cta { padding:15px; border:none; background:var(--accent); color:#fff; border-radius:11px; font:700 16px var(--sans); cursor:pointer; margin-top:6px; transition:filter .12s, transform .1s; }
  .auth-gate-cta:hover { filter:brightness(1.08); }
  .auth-gate-cta:active { transform:scale(.98); }
  .auth-gate-cta:disabled { opacity:.6; cursor:wait; }
  .auth-gate-forgot { background:none; border:none; font:inherit; font-size:12.5px; color:var(--ink-3); cursor:pointer; padding:4px; margin-top:2px; text-align:center; }
  .auth-gate-forgot:hover { color:var(--accent-ink); text-decoration:underline; }
  .auth-gate-msg { min-height:1.2em; font-size:12.5px; text-align:center; }
  .auth-gate-msg.err { color:#c33; }
  .auth-gate-msg.ok { color:#2a8f3a; }
  .auth-gate-footer { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3); text-align:center; }
  .auth-gate-switch { color:var(--accent-ink); font-weight:600; text-decoration:none; }
  .auth-gate-switch:hover { text-decoration:underline; }
  @media (max-width:480px){
    .auth-gate { padding:14px; }
    .auth-gate-card { padding:24px 22px; }
    .auth-gate-brand h1 { font-size:20px; }
    .auth-gate-logo { width:64px; height:64px; }
  }

  /* ---------- header ---------- */
  /* Logo, theme et onglets collent au haut de l'ecran quand on descend (Mathis, 2026-10-15).
     Les marges negatives etirent le fond sur les gouttieres de .wrap, pour que la page ne
     passe pas visible sur les cotes, et gardent la mise en page d'avant au repos.
     top:0 et 24 px au-dessus du logo (26 avant, 20 essaye) : l'entete ne bouge plus du tout en defilant.
     Le top:-16px de la v779 la faisait remonter au debut du defilement, ce qui faisait bizarre
     (Mathis, meme jour). */
  .entete-fixe { position:sticky; top:0; z-index:60; background:var(--bg);
    margin:-24px -24px 0; padding:24px 24px 0; }
  header.top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
  .brand { display:flex; gap:14px; align-items:center; }
  .mark { width:54px; height:54px; flex:none; display:grid; place-items:center;
    position:relative; border-radius:11px;
    overflow:hidden;
    /* Calibre pareil que .auth-splash-logo : meme ratio border-radius (22/112 = ~19.6%
       sur 112px de splash -> 11px sur 54px de mark) et meme ombre (halo doux, pas de
       hairline var(--shadow) qui donnait un contour lisant comme double bordure).
       TEST 2026-09-28 : fond blanc et ombre retires, l'ombre dessinait un carre
       flottant sans rien dedans une fois le fond parti. */ }
  .mark img.mark-emoji { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
  h1 { font-family:var(--titre); font-weight:700; font-size:29px; margin:0; letter-spacing:-.01em;
    text-wrap:balance; }
  .tag { color:var(--ink-2); font-size:14px; margin-top:2px; max-width:52ch; }
  /* Interrupteur soleil / lune (variante B choisie le 2026-10-15). La bille se place selon le
     theme REEL : reglage de l'appareil tant que l'interrupteur n'a pas ete touche, puis data-theme. */
  .theme-sw { position:relative; flex:none; width:68px; height:34px; padding:0; border-radius:17px;
    border:1px solid var(--line-2); background:var(--surface-2); cursor:pointer; }
  .theme-sw:hover { border-color:var(--accent); }
  .theme-sw svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .theme-sw-s, .theme-sw-l { position:absolute; top:8px; width:16px; height:16px; color:var(--ink-3); }
  .theme-sw-s { left:9px; } .theme-sw-l { right:9px; }
  .theme-sw-bille { position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%;
    background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.25); display:grid; place-items:center;
    color:var(--accent-ink); transition:left .2s; }
  .theme-sw-bille svg { grid-area:1/1; width:16px; height:16px; }
  .theme-sw-bille .b-l { display:none; }
  :root[data-theme="dark"] .theme-sw-bille { left:37px; }
  :root[data-theme="dark"] .theme-sw-bille .b-s { display:none; }
  :root[data-theme="dark"] .theme-sw-bille .b-l { display:block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-sw-bille { left:37px; }
    :root:not([data-theme="light"]) .theme-sw-bille .b-s { display:none; }
    :root:not([data-theme="light"]) .theme-sw-bille .b-l { display:block; }
  }

  /* ---------- panels ---------- */
  .panel { background:var(--surface); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow); }
  /* Les surtitres en capitales (.eyebrow) ont disparu le 2026-10-02 a la demande de Mathis.
     Ceux qui etaient le seul nom de leur bloc (Connexion, Votre fiche, Vos statistiques)
     sont devenus ce petit titre. */
  .bloc-titre { font:600 17px var(--titre); color:var(--ink); margin:0; }
  .bloc-titre-note { font:400 14px var(--sans); color:var(--ink-3); }
  h2 { font-family:var(--titre); font-weight:600; font-size:21px; margin:0; }
  /* Titre en tete de chaque page, sans surtitre ni emoji : repris de la maquette « guide de
     terrain » choisie par Mathis le 2026-10-02 (notes-privees/maquettes/design-birdydex.html). */
  /* Plus petit que le nom de l'appli (h1, 29 px / 24 px sur telephone) : a 30 px, le titre de
     page lui volait la vedette, remarque de Mathis le 2026-10-02. */
  h2.page-title { font-weight:700; font-size:24px; line-height:1.15; letter-spacing:-.01em; }
  @media (max-width:560px){ h2.page-title { font-size:21px; } }

  /* Masquage visuel qui GARDE l'element dans l'ordre de tabulation, contrairement a [hidden]
     (display:none en sort). C'est ce qui rend les quatre envois de fichier atteignables au clavier. */
  .visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

  /* ---------- intake / dropzone ---------- */
  /* 20 px comme les autres pages : a 22, le titre « Ma liste » tombait 2 px plus bas (2026-10-05). */
  #leaguebar { margin-top:22px; padding:20px; }
  /* display:block parce que .drop est une <label>, qui serait inline par defaut */
  .drop { display:block; border:2px dashed var(--line-2); border-radius:14px; padding:32px 22px; text-align:center;
    background:linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--accent) 4%, var(--surface-2)));
    transition:border-color .15s, background .15s, transform .1s; cursor:pointer; }
  .drop:hover { border-color:color-mix(in srgb, var(--accent) 50%, var(--line-2)); }
  /* Les quatre champs de fichier sont masques visuellement : l'anneau de focus doit donc se dessiner
     sur l'element visible, sinon le clavier atteint une cible qu'on ne voit pas. */
  #file:focus-visible + .drop { outline:3px solid var(--accent); outline-offset:3px; }
  .btn:has(input[type=file]:focus-visible),
  .chat-imgbtn:has(input[type=file]:focus-visible) { outline:3px solid var(--accent); outline-offset:2px; }
  .drop.drag { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface-2)); transform:scale(1.01); }
  .drop .big { font-size:16px; font-weight:700; color:var(--ink); }
  .drop .small { color:var(--ink-2); font-size:14px; margin-top:6px; }
  .drop code { font-family:var(--mono); background:var(--surface); padding:2px 7px; border-radius:6px; font-size:14px; }
  /* ---------- Ma liste : quatre box au-dessus de la liste (refonte du 2026-10-05) ----------
     Direction C de la maquette (notes-privees/maquettes/ma-liste/), titres seuls : Mathis a refuse
     les petites lignes sous les titres (« ca surcharge les box »). */
  .ml-boxes { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-top:14px; }
  .ml-box { display:flex; align-items:center; gap:12px; text-align:left; font:inherit; font-size:15px; font-weight:600;
    cursor:pointer; padding:12px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--line-2); color:var(--ink); }
  .ml-box:hover { background:var(--surface-2); }
  .ml-box:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
  .ml-ic { flex:0 0 38px; height:38px; border-radius:10px; display:grid; place-items:center;
    background:color-mix(in srgb, var(--accent) 12%, var(--surface)); color:var(--accent-ink); }
  .ml-ic svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .ml-box-danger .ml-ic { background:color-mix(in srgb, #c0392b 10%, var(--surface)); color:#c0392b; }
  .ml-box-danger:hover { color:#c0392b; }
  /* Qui arrive n'a que « Charger ma liste » : elle doit sauter aux yeux, en couleur pleine */
  #leaguebar:not(.est-membre) .ml-membre { display:none; }
  #leaguebar:not(.est-membre) .ml-boxes { grid-template-columns:minmax(0,320px); }
  #leaguebar:not(.est-membre) .ml-box-charger { background:var(--accent); border-color:var(--accent); color:#fff; font-size:16px; padding:14px 16px; }
  #leaguebar:not(.est-membre) .ml-box-charger .ml-ic { background:color-mix(in srgb, #fff 18%, transparent); color:#fff; }
  #leaguebar:not(.est-membre) .ml-box-charger:hover { filter:brightness(1.06); }
  .ml-accueil { margin:4px 0 0; color:var(--ink-2); font-size:15px; }
  @media (max-width:700px){
    .ml-boxes { grid-template-columns:repeat(2, minmax(0,1fr)); }
  }

  /* Les trois fenetres de Ma liste (tuto, prenom, ajout). La marge interieure est sur
     .ml-dialog-in : un clic sur la fenetre elle-meme veut alors dire « sur le fond ». */
  .ml-dialog { width:min(520px, calc(100vw - 32px)); padding:0; border:1px solid var(--line);
    border-radius:16px; background:var(--surface); color:var(--ink); box-shadow:0 12px 40px rgba(0,0,0,.3); }
  /* overflow visible : la liste des suggestions deborde sous la fenetre au lieu d'y etre coupee
     (elle tenait dans 60 px, avec sa barre de defilement, au premier essai) */
  .ml-dialog-large { width:min(680px, calc(100vw - 32px)); overflow:visible; }
  .ml-dialog::backdrop { background:rgba(0,0,0,.35); }
  .ml-dialog-in { padding:18px 22px 20px; }
  .ml-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .ml-dialog-head .bloc-titre { margin:0; }
  .ml-dialog-close { border:none; background:transparent; color:var(--ink-3); font-size:16px; cursor:pointer;
    width:36px; height:36px; border-radius:8px; flex:0 0 auto; }
  .ml-dialog-close:hover { background:var(--surface-2); color:var(--ink); }
  .ml-etape { margin:2px 0 14px; font-size:14px; color:var(--ink-3); }
  .ml-note { margin:6px 0 12px; font-size:14px; color:var(--ink-3); line-height:1.5; }
  .ml-note:empty { display:none; }
  .ml-prenom-slot { margin-bottom:14px; }
  .ml-prenom-slot:empty { display:none; }
  .tuto-choix { display:grid; gap:10px; }
  .tuto-ch { text-align:left; font:inherit; cursor:pointer; padding:14px 16px; border-radius:12px;
    background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink); }
  .tuto-ch:hover { border-color:var(--accent); }
  .tuto-ch b { display:block; font-size:15px; font-weight:600; }
  .tuto-ch span { display:block; font-size:14px; color:var(--ink-3); margin-top:3px; line-height:1.4; }
  .tuto-step { display:flex; gap:14px; align-items:flex-start; padding:2px 0 4px; }
  .tuto-num { flex:0 0 32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800;
    display:grid; place-items:center; font-size:15px; }
  .tuto-step p { margin:4px 0 0; font-size:15px; color:var(--ink); line-height:1.45; }
  .tuto-step code { font-family:var(--mono); font-size:14px; }
  .tuto-lien { margin-top:10px; text-decoration:none; }
  .tuto-nav { display:flex; justify-content:space-between; gap:10px; margin-top:18px; }
  .tuto-nav[hidden], .tuto-nav [hidden] { display:none; }
  .manual-body > .ml-note { margin-top:2px; }

  /* Le guide de l'appli : un voile qui avale les clics, un trou qui eclaire la cible (son ombre
     immense fait le fond sombre) et une bulle posee a cote. Au-dessus des boutons flottants
     (1600), du menu ☰ (1700) et de la fiche espece. Positions ecrites par _guidePlace(), en pixels CSS. */
  /* Au-dessus de la fiche espece aussi (2147483000), que l'etape « La fiche espece » ouvre. */
  .guide { position:fixed; inset:0; z-index:2147483600; }
  .guide[hidden] { display:none; }
  .guide-voile { position:fixed; inset:0; }
  .guide.sans-cible .guide-voile { background:rgba(0,0,0,.45); }
  .guide-trou { position:fixed; border-radius:12px; pointer-events:none;
    box-shadow:0 0 0 3px var(--accent), 0 0 0 9999px rgba(0,0,0,.45); }
  .guide.sans-cible .guide-trou { display:none; }
  .guide-bulle { position:fixed; width:min(380px, calc(100vw - 32px)); box-sizing:border-box;
    padding:14px 18px 16px; border:1px solid var(--line); border-radius:16px;
    background:var(--surface); color:var(--ink); box-shadow:0 12px 40px rgba(0,0,0,.3); }
  .guide-tete { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:2px; }
  .guide-etape { font-size:14px; color:var(--ink-3); }
  .guide-bulle .bloc-titre { margin:0 0 6px; }
  .guide-texte { margin:0; font-size:15px; line-height:1.5; color:var(--ink-2); }
  .guide-nav { display:flex; justify-content:space-between; gap:10px; margin-top:16px; }
  .guide-nav [hidden] { display:none; }
  .guide-nav .btn:only-child, .guide-nav [hidden] + .btn { margin-left:auto; }

  /* ---------- Inviter des amis : fenetre ouverte depuis le menu ☰ ---------- */
  .invite-dialog { width:min(460px, calc(100vw - 32px)); padding:18px 20px; border:1px solid var(--line);
    border-radius:16px; background:var(--surface); color:var(--ink); box-shadow:0 12px 40px rgba(0,0,0,.3); }
  .invite-dialog::backdrop { background:rgba(0,0,0,.35); }
  .invite-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .invite-dialog-close { border:none; background:transparent; color:var(--ink-3); font-size:16px; cursor:pointer;
    width:32px; height:32px; border-radius:8px; }
  .invite-dialog-close:hover { background:var(--surface-2); color:var(--ink); }
  .invite-dialog-help { margin:6px 0 12px; font-size:13.5px; color:var(--ink-2); line-height:1.45; }
  .invite-link { display:block; font-family:var(--mono); font-size:13px; color:var(--ink-2); background:var(--surface-2);
    border:1px solid var(--line); border-radius:8px; padding:8px 10px; overflow-wrap:anywhere; }
  .invite-actions { display:flex; gap:6px; justify-content:flex-end; margin-top:12px; flex-wrap:wrap; }

  .btn { display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:#fff;
    border:none; border-radius:9px; padding:9px 15px; font:inherit; font-weight:600; font-size:14px;
    cursor:pointer; }
  .btn:hover { filter:brightness(1.06); }
  .btn.ghost { background:transparent; color:var(--accent-ink); border:1px solid var(--line-2); }
  .btn.ghost:hover { border-color:var(--accent); }
  .btn.tiny { padding:5px 10px; font-size:14px; }
  .intake-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; align-items:center; }
  /* Cache le conteneur quand le statut est vide : pas d'espace vide sous la zone de depot */
  .intake-actions:has(#myStatus:empty) { display:none; }
  .help { font-size:14px; color:var(--ink-3); margin-top:14px; line-height:1.55; }
  .help b { color:var(--ink-2); font-weight:600; }

  /* league bar */
  .league-head { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-start; }
  .league-actions { display:flex; gap:8px; flex-wrap:wrap; }
  #leagueCode { font-family:var(--mono); color:var(--accent-ink); letter-spacing:1px; }
  .linkbox { display:flex; align-items:center; gap:8px; margin-top:12px; background:var(--surface-2);
    border:1px solid var(--line-2); border-radius:9px; padding:8px 11px; max-width:100%; }
  .linkbox code { font-family:var(--mono); font-size:12.5px; color:var(--ink-2); overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
  .me-name label { font-size:14px; color:var(--ink-2); font-weight:600; }
  .me-name input { display:block; margin-top:5px; background:var(--surface-2); border:1px solid var(--line-2);
    border-radius:9px; padding:8px 11px; font:inherit; color:var(--ink); font-size:14px; width:240px; max-width:100%; }
  .me-name input:focus { outline:3px solid var(--accent); }
  /* Le champ reclame son contenu : une liste a ete deposee sans prenom et attend. Le bord
     epais suffit a designer l endroit, le texte de #myStatus dit quoi faire. Remplace la
     fenetre prompt() du navigateur, qui se posait par-dessus le champ qu elle demandait. */
  .me-name input.attend-saisie { border-color:var(--accent); border-width:2px;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
  .profile { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
  .prof-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
  .prof-grid label { font-size:14px; color:var(--ink-2); font-weight:600; display:flex; flex-direction:column; gap:5px; }
  .prof-grid input, .prof-grid select { background:var(--surface-2); border:1px solid var(--line-2);
    border-radius:9px; padding:8px 11px; font:inherit; color:var(--ink); font-size:14px; font-weight:400; }
  .prof-grid input:focus, .prof-grid select:focus { outline:3px solid var(--accent); }
  .mystatus { font-size:14px; color:var(--accent-ink); font-weight:600; }
  .join-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px; }
  .join-row .search { max-width:280px; }
  .linkbtn { border:none; background:transparent; color:var(--accent-ink); cursor:pointer; font:inherit;
    font-size:14px; text-decoration:underline; padding:2px; }
  .linkbtn:hover { color:var(--t-rare); }
  .manual-row { display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; }
  .manual-search { position:relative; flex:1 1 220px; min-width:180px; }
  .manual-search input { width:100%; box-sizing:border-box; padding:9px 12px; border:1px solid var(--line-2); border-radius:10px; font:inherit; background:var(--surface); color:var(--ink); }
  .manual-search input:focus { outline:3px solid var(--accent); outline-offset:1px; }
  .manual-row select, .manual-row input[type=date] { padding:9px 10px; border:1px solid var(--line-2); border-radius:10px; font:inherit; background:var(--surface); color:var(--ink); }
  .manual-suggest { position:absolute; top:100%; left:0; right:0; margin-top:2px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.08); z-index:10; max-height:280px; overflow-y:auto; display:none; }
  .manual-suggest.open { display:block; }
  .manual-suggest-item { padding:8px 12px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--line); }
  .manual-suggest-item:last-child { border-bottom:none; }
  .manual-suggest-item:hover, .manual-suggest-item.active { background:color-mix(in srgb, var(--accent) 12%, var(--surface)); }
  .manual-suggest-item .sci { display:block; font-size:11px; color:var(--ink-3); font-style:italic; }
  .manual-suggest-item .tag { font-size:10px; background:var(--surface-2); color:var(--ink-3); padding:1px 6px; border-radius:8px; margin-left:6px; }
  .manual-picked { margin-top:10px; padding:8px 12px; background:color-mix(in srgb, var(--accent) 12%, var(--surface)); border:1px solid var(--accent); border-radius:10px; font-size:13px; color:var(--accent-ink); }
  .manual-picked .sci { font-style:italic; color:var(--ink-3); font-size:11.5px; margin-left:6px; }
  .manual-msg { margin-top:8px; font-size:12.5px; min-height:1em; }
  .manual-msg.err { color:#c33; }
  .manual-msg.ok { color:#2a8f3a; }
  .pick-map-modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:2000; padding:12px; overflow:hidden; overscroll-behavior:contain; }
  .pick-map-inner { background:var(--surface); border-radius:14px; width:100%; max-width:720px; max-height:calc(100vh - 24px); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.35); }
  .pick-map-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); }
  .pick-map-head h3 { margin:0; font-size:15px; color:var(--ink); }
  .pick-map-close { background:transparent; border:none; font-size:20px; cursor:pointer; color:var(--ink-3); padding:2px 6px; }
  .pick-map-close:hover { color:var(--ink); }
  .pick-map-search { display:flex; gap:6px; padding:10px 16px; border-bottom:1px solid var(--line); }
  .pick-map-search input { flex:1; padding:8px 12px; border:1px solid var(--line-2); border-radius:10px; font:inherit; background:var(--surface); color:var(--ink); }
  .pick-map-search input:focus { outline:3px solid var(--accent); outline-offset:1px; }
  .pick-map-el { flex:1; min-height:360px; }
  .pick-map-actions { display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--line); flex-wrap:wrap; }
  .pick-map-coords { flex:1; font-size:12.5px; color:var(--ink-2); font-family:var(--mono); }
  @media (max-width:600px){ .pick-map-el { min-height:280px; } }

  /* People : cards grid (nouveau layout) */
  .people { margin-top:14px; }
  .pcards { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
  .pcards-empty { padding:16px; text-align:center; color:var(--ink-3); font-size:13px; font-style:italic; }
  .pcard { position:relative; display:flex; gap:12px; padding:12px 14px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px; transition:border-color .12s, transform .1s; }
  .pcard:hover { border-color:color-mix(in srgb, var(--accent) 40%, var(--line-2)); }
  .pcard.is-me { background:color-mix(in srgb, var(--accent) 6%, var(--surface-2)); border-color:color-mix(in srgb, var(--accent) 30%, var(--line-2)); }
  .pcard.is-online { border-left:3px solid #2ecc71; }
  .pcard-avatar-wrap { position:relative; flex:0 0 auto; }
  .pcard-avatar-wrap .user-avatar { width:44px !important; height:44px !important; font-size:22px !important; line-height:1; }
  .pcard-online-dot { position:absolute; bottom:-2px; right:-2px; width:12px; height:12px; border-radius:50%; background:#2ecc71; border:2px solid var(--surface-2); box-shadow:0 0 0 1px color-mix(in srgb, #2ecc71 30%, transparent); }
  .pcard-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .pcard-name { font-weight:700; font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:6px; }
  .pcard-status { font-size:11.5px; font-style:italic; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pcard-stats { font-size:12px; color:var(--ink-2); margin-top:2px; }
  .pcard-count { font-weight:700; color:var(--ink); font-size:14px; }
  .pcard-unit { font-size:11.5px; color:var(--ink-3); }
  .pcard-progress { height:4px; background:var(--surface); border-radius:2px; margin-top:6px; overflow:hidden; }
  .pcard-progress-fill { height:100%; background:linear-gradient(90deg, var(--series, var(--accent)), color-mix(in srgb, var(--series, var(--accent)) 70%, #fff)); border-radius:2px; transition:width .3s; }
  .pcard-admin { position:absolute; top:6px; right:6px; display:flex; gap:2px; opacity:0; transition:opacity .1s; }
  .pcard:hover .pcard-admin { opacity:1; }
  .pcard-admin-btn { background:var(--surface); border:1px solid var(--line-2); border-radius:6px; padding:2px 6px; cursor:pointer; font-size:11px; color:var(--ink-3); }
  .pcard-admin-btn:hover { color:var(--accent-ink); border-color:var(--accent); }
  .pcard-admin-del:hover { color:#c0392b; border-color:#c0392b; }
  .pchip { display:flex; align-items:center; gap:8px; background:var(--surface-2);
    border:1px solid var(--line); border-radius:10px; padding:6px 10px; }
  .pchip .dot { width:11px; height:11px; border-radius:50%; background:var(--series); flex:none; }
  .pchip .pname { font-weight:600; font-size:13.5px; }
  .pchip .n { color:var(--ink-3); font-size:12px; font-variant-numeric:tabular-nums; }
  .youtag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#fff;
    background:var(--accent); border-radius:20px; padding:1px 6px; margin-left:4px; }


  #fbError { margin-top:16px; padding:12px 14px; border-radius:10px;
    background:color-mix(in srgb,var(--t-rare) 12%,var(--surface));
    border:1px solid color-mix(in srgb,var(--t-rare) 40%,transparent); color:var(--ink); font-size:13px;
    display:none; line-height:1.5; }
  #fbError code { font-family:var(--mono); font-size:12px; }

  /* ---------- results ---------- */
  /* Pas de marge en haut : la rangee des tris, premiere enfant, se colle sous l'entete pendant
     le defilement. Avec 22 px ici, elle tombait 22 px plus bas en haut de page qu'une fois
     collee, et la bande vide n'apparaissait qu'en remontant (Mathis, 2026-10-22). Son propre
     rembourrage de 10 px fait l'ecart avec les onglets, dans les deux cas. */
  #results { margin-top:0; display:none; flex-direction:column; gap:22px; }
  /* Plus d'apparition en fondu glisse : elle rejouait a chaque ouverture du Classement, seule
     page a le faire. Retiree le 2026-10-05 a la demande de Mathis. */
  #results.show { display:flex; }

  .section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    margin-bottom:12px; flex-wrap:wrap; }
  .section-head p { margin:2px 0 0; color:var(--ink-2); font-size:13px; }

  /* stat tiles */

  /* scoreboard (feuille) */
  #board { padding:20px; }
  .board-list { margin-top:16px; }
  .board-list .sheet-scroll { overflow-x:auto; border:1px solid var(--line-2); border-radius:10px; }
  /* Tableau du classement, mis d'aplomb le 2026-10-05 (Mathis : « pas d'incoherence, police
     differente, texte pas centre »). Mesure avant : le rang en Cascadia, des cellules a 13,5
     et d'autres a 13 px, les en-tetes a 11,5 ou 13 px selon la colonne, le texte colle en haut
     a cote de chiffres centres, et le nom du joueur en display:flex sur le td lui-meme - ce qui
     sortait la cellule du tableau : nom en haut, trait parasite dessous. Desormais une seule
     police, 14 px partout, tout centre en hauteur ; la flexbox vit dans .who-in. */
  .board-sheet td { font-size:14px; vertical-align:middle; }
  #viewRanking .seg button { font-size:14px; }
  /* Toute la page Classement suit le tableau des especes de Ma liste (.mylist-th, .mylist-row),
     mesure le 2026-10-05 : en-tetes et etiquettes en 13 px gras en capitales, espacement 0,4 px,
     --ink-3 ; texte 14 px, nom en 600, le reste en --ink-2 ; noms latins 14 px, italique.
     Avant : sept tailles de 10 a 16 px, system-ui a cote de Segoe UI, en-tetes a 14 px. */
  #viewRanking thead th, #viewRanking .fp-title, #viewRanking .fp-title-inline {
    font:700 13px var(--sans); text-transform:uppercase; letter-spacing:.4px; color:var(--ink-3); vertical-align:middle; }
  #viewRanking thead th { padding:7px 14px; }
  #viewRanking tbody td { padding-left:14px; padding-right:14px; }
  #viewRanking tbody td.pcol { padding:0; }
  #viewRanking td.sp, #viewRanking td.sp .sp-link { font-size:14px; }
  #viewRanking td.sp .sci, #viewRanking .mc-sci { font-size:14px; }
  #viewRanking .board-sheet td.c-txt, #viewRanking td.cnt { color:var(--ink-2); font-size:14px; }
  #viewRanking td.pcol .chk { font-size:14px; }
  /* Pastille de rarete de la grille : pleine, texte blanc, comme le filtre de rarete juste
     au-dessus (Mathis, 2026-10-05 : « les couleurs ne correspondent pas »). Meme couleur de
     depart (t.color), seul le rendu differait - teinte a 16 % et mot colore. */
  #viewRanking .chip { font-size:13px; background:var(--tc); border-color:var(--tc); color:#fff; }
  /* Dans le tableau, l'etiquette ne doit pas depasser la hauteur du nom de l'espece (21 px) :
     a 25,4 px elle faisait passer chaque ligne de 37,9 a 42,3 px aux tris de rarete, et le
     tableau changeait de hauteur selon le tri (Mathis, 2026-10-12). Alignee en haut et non au
     milieu : au milieu, la ligne de texte de la case l'entourait encore et ajoutait 1,2 px. */
  #viewRanking td .chip { line-height:17px; padding:1px 8px; vertical-align:top; }
  #viewRanking .youtag { font-size:12px; }
  /* « TOI » a cote du prenom, dans le classement et dans le choix « Les observations de qui ? »
     du fil : 11,5 px gras, lettres a peine ecartees, pastille de 20 px - variante C choisie par
     Mathis le 2026-10-15 sur notes-privees/maquettes/toi/tailles-gras.html, apres un essai a la
     taille du prenom (trop gros) et en minuscules (refuse). 8 px d'air apres le prenom : le
     classement met son gap a 0 et la pastille collait au nom. */
  #boardList .youtag, .cp-item .youtag { font-family:inherit; font-size:11.5px; font-weight:700; text-transform:uppercase;
    letter-spacing:.02em; line-height:1; height:20px; padding:0 7px 0 7.2px; box-sizing:border-box;
    display:inline-flex; align-items:center; justify-content:center; margin-left:8px; vertical-align:middle; }
  #viewRanking .fp-hint, #viewRanking .miss-toggle { font-size:14px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-3); }
  #viewRanking .miss-toggle { color:var(--ink-2); }
  #viewRanking .person-chip, #viewRanking .fp-reset, #viewRanking .rar-chip,
  #viewRanking .filt-sel { font-family:var(--sans); font-size:14px; }
  #viewRanking .mc-sp, #viewRanking .mc-person { font-size:14px; }
  #viewRanking .mc-count { font-family:var(--sans); font-size:14px; }
  .board-sheet .who-cell { font-weight:600; }
  .board-sheet .who-in { display:flex; align-items:center; gap:9px; }
  .board-sheet .who-cell .dot { width:11px; height:11px; border-radius:50%; background:var(--series); flex:none; }
  /* Le nom ouvre la fiche du joueur. Bouton pour rester atteignable au clavier, mais rendu
     comme le texte qu il remplace - un bouton visible ici alourdirait chaque ligne. */
  .board-sheet .who-cell .who-name { background:none; border:0; padding:0; margin:0; font:inherit;
    color:inherit; cursor:pointer; text-align:left; }
  .board-sheet .who-cell .who-name:hover { text-decoration:underline; }
  .board-sheet .who-cell .who-name:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:3px; }
  .c-num { text-align:right !important; font-variant-numeric:tabular-nums; }
  /* max-width 190 -> 260 : a 1 500 px le tableau laissait 220 px vides a droite pendant que
     chaque texte passait sur trois lignes. */
  .board-sheet td.c-txt { min-width:120px; max-width:260px; white-space:normal; }
  /* Version « I » du classement, choisie par Mathis le 2026-10-19 (maquettes dans
     notes-privees/maquettes/classement-3/). Deux blocs, le joueur et ses oiseaux, separes par
     un filet. Leur rangee de titres (« Le joueur », « Ses oiseaux ») est retiree le 2026-10-23
     a la demande de Mathis. */
  .board-sheet .debut-oiseaux { border-left:2px solid var(--line-2); }
  /* Ta ligne : a 7 % d'accent elle etait plus pale que l'alternance des lignes paires (surface-2
     a 45 %), mesure le 2026-10-19 ; 10 % et un trait d'accent en tete la distinguent. */
  .board-sheet tbody tr.board-moi td:not(.c-rank):not(.on-metric) { background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }
  .board-sheet tbody tr.board-moi td.c-rank { box-shadow:inset 3px 0 0 var(--accent); }
  /* Sous le score, sa part de celui du premier. */
  .board-score { display:inline-flex; flex-direction:column; align-items:flex-end; gap:5px; }
  .board-ecart { display:block; width:56px; height:4px; border-radius:2px; overflow:hidden; background:color-mix(in srgb, var(--accent) 18%, var(--surface)); }
  .board-ecart i { display:block; height:100%; background:var(--accent); }
  /* Une espece : petite photo ronde puis son nom, le tout cliquable (ouvre la fiche). La photo
     seule, sans nom, ne se lisait pas dans un tableau. Photos passees de 38 a 46 px (36 a 44
     pour les preferees) : dans des lignes de 62 px, elles paraissaient perdues (Mathis, 2026-10-20).
     Puis ramenees a 34 px partout : les lignes etaient montees a 70 px, « les photos prennent trop
     de place », et elles n'avaient pas toutes la meme taille - 36, 34 pour les preferees, 32 dans le
     cadre du reve (Mathis, 2026-10-22). Le reve fait 44 px : 34 de photo, 3 + 2 de cadre par cote. */
  .board-sheet td.c-esp { max-width:none; }
  .board-sp { display:flex; align-items:center; gap:12px; min-width:150px; padding:0; margin:0; border:0; background:none;
    font:inherit; color:inherit; text-align:left; cursor:pointer; }
  .board-sp:hover .board-sp-txt { text-decoration:underline; }
  .board-sp-txt { color:var(--ink); line-height:1.25; }
  /* Plus pale que --ink-3, le gris le plus clair de la charte (Mathis, 2026-10-22 : « plus en
     gris »). Melange avec la surface pour suivre le theme sombre aussi. */
  .board-sp-sous { display:block; color:color-mix(in srgb, var(--ink-3) 75%, var(--surface)); }
  .board-sp:focus-visible, .board-pile .board-rond:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:8px; }
  .board-rond { position:relative; flex:none; display:block; width:34px; height:34px; padding:0; border:0; border-radius:50%; background:none; }
  .board-ph { display:block; width:100%; height:100%; border-radius:50%; overflow:hidden; background:var(--surface-3); }
  .board-ph img { width:100%; height:100%; object-fit:cover; display:block; }
  /* La plus rare : le palier en sous-titre, son rond de 20 px (celui des vignettes du
     Birdydex) puis son nom. Plus d'anneau ni de rond pose sur la photo (Mathis, 2026-10-22). */
  .board-pal { display:flex; align-items:center; gap:6px; margin-top:2px; }
  .board-pal i { display:inline-grid; place-items:center; flex:none; width:20px; height:20px; border-radius:50%;
    color:#fff; font:800 10px/1 var(--sans); font-style:normal; padding-top:1px; }
  .board-badge { position:absolute; right:-5px; bottom:-5px; min-width:20px; height:20px; border-radius:50%; background:var(--pal, var(--accent));
    color:#fff; font:800 11px/20px var(--sans); text-align:center; box-shadow:0 0 0 2px var(--surface); }
  /* Espece de reve : en gris dans un cercle en pointilles tant qu'elle n'est pas vue,
     cerclee d'accent et cochee ensuite. */
  .board-rond.reve { width:44px; height:44px; padding:3px; border:2px dashed var(--line-2); }
  .board-rond.reve .board-ph { filter:grayscale(1); opacity:.75; }
  .board-rond.exauce { box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
  /* Ce qui a moins d'une semaine s'allume. */
  .board-neuf { color:var(--accent-ink); font-weight:600; }
  .board-neuf:not(.sans-point)::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:6px; vertical-align:1px; }
  /* Preferees cote a cote, sans bord : empilees, et cerclees de blanc pour se detacher les
     unes des autres, elles paraissaient plus petites (Mathis, 2026-10-20). */
  .board-pile { display:flex; align-items:center; gap:6px; }
  .board-pile .board-rond { width:34px; height:34px; cursor:pointer; }
  .board-pile-txt { margin-left:8px; }
  .board-pile-txt:first-child { margin-left:0; }
  /* Hauteur uniforme des lignes du board : posée en JS après render (--rowh) sur chaque tr. */
  .board-sheet tbody tr { height:var(--rowh); }
  /* Matrice "Qui a vu quoi" : Espece, Rarete et les comptes ont une largeur bloquee ; les
     personnes, voir plus bas. */
  .tbl-scroll table { width:auto; }
  .tbl-scroll thead th:first-child, .tbl-scroll tbody td.sp {
    width:260px; min-width:260px; max-width:260px; }
  #matrix:not(.sans-rarete) .tbl-scroll thead th:nth-child(2), #matrix:not(.sans-rarete) .tbl-scroll tbody tr td:nth-child(2) {
    width:140px; min-width:140px; max-width:140px; }
  /* Les deux raretes (reelle et ligue) : des ronds de 20 px et au plus trois lettres, pas des mots. 96 px suffisent
     au plus large (« 9 N X ») ; 140 laissaient un grand vide (Mathis, 2026-10-22). */
  #matrix.rar-ronds:not(.sans-rarete) .tbl-scroll thead th:nth-child(2), #matrix.rar-ronds:not(.sans-rarete) .tbl-scroll tbody tr td:nth-child(2) {
    width:96px; min-width:96px; max-width:96px; }
  .tbl-scroll thead th.cnt, .tbl-scroll tbody td.cnt {
    width:78px; min-width:78px; max-width:78px; }
  /* Personnes : toutes de la meme largeur, 104 px au moins. Peu nombreuses, elles se partagent
     a parts egales la place laissee par les colonnes bloquees, jusqu'au bord (Mathis, 2026-10-23) ;
     nombreuses, elles restent a 104 px et le tableau defile. Le partage se fait au prorata de la
     largeur naturelle de chaque colonne : le nom ne doit donc pas en avoir, d'ou contain:inline-size
     sur .cap - sans lui, la derniere colonne (sans trait a droite) sortait 2 px plus etroite. Le
     nom est coupe par « … » s'il depasse sa colonne, moins 6 px de marge de chaque cote ; th porte
     le nom entier en infobulle. */
  #matrix .tbl-scroll table { width:100%; }
  #matrix .tbl-scroll th.pcol, #matrix .tbl-scroll td.pcol { width:auto; min-width:104px; }
  #matrix .tbl-scroll th.pcol { padding-left:6px; padding-right:6px; }
  #matrix .tbl-scroll th.pcol .cap { display:flex; justify-content:center; contain:inline-size; }
  #matrix .tbl-scroll th.pcol .cap-nom { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  #matrix .tbl-scroll th.pcol .cap > * { flex:none; }
  #matrix .tbl-scroll th.pcol .cap > .cap-nom { flex:0 1 auto; }
  /* Les traits du tableau sont portes par CHAQUE CASE, a droite et en bas (border-collapse:
     separate). En border-collapse, une bordure appartient au tableau et non a la case : une case
     collante (colonnes figees, en-tete) la perdait en defilant - traits qui disparaissent, fente
     blanche entre Espece et Rarete, cases qui se « cassent » et se redessinent (Mathis,
     2026-10-22). Trois rustines avaient precede (ombres de 1 px a la place des bordures, bordure
     gauche retiree, trait dessine a l'interieur de la case) : ne pas revenir a border-collapse
     ici. Le cadre de .tbl-scroll fait le tour du tableau. */
  #matrix .tbl-scroll table { border-collapse:separate; border-spacing:0; }
  #matrix .tbl-scroll th, #matrix .tbl-scroll td { border:0; border-right:1px solid var(--line-2);
    border-bottom:1px solid var(--line-2); box-sizing:border-box; }
  #matrix .tbl-scroll tr > :last-child { border-right:0; }
  #matrix .tbl-scroll tbody tr:last-child td { border-bottom:0; }
  /* Colonnes figees quand on fait defiler les personnes : Espece (2026-10-12), de 0 a 260 px -
     sa largeur, bordure comprise -, puis Rarete (2026-10-22). Fond opaque, sinon les cases qui
     passent dessous se lisent a travers. */
  #matrix .tbl-scroll thead th:first-child, #matrix .tbl-scroll tbody td.sp { position:sticky; left:0; }
  #matrix:not(.sans-rarete) .tbl-scroll thead th:nth-child(2),
  #matrix:not(.sans-rarete) .tbl-scroll tbody td:nth-child(2) { position:sticky; left:260px; }
  #matrix .tbl-scroll thead th:first-child, #matrix:not(.sans-rarete) .tbl-scroll thead th:nth-child(2) { z-index:3; }
  #matrix .tbl-scroll tbody td.sp, #matrix:not(.sans-rarete) .tbl-scroll tbody td:nth-child(2) { z-index:1; background:var(--surface); }
  #matrix .tbl-scroll tbody tr:nth-child(even) td.sp,
  #matrix:not(.sans-rarete) .tbl-scroll tbody tr:nth-child(even) td:nth-child(2) { background:color-mix(in srgb,var(--surface-2) 45%,var(--surface)); }
  #matrix .tbl-scroll tbody tr:hover td.sp,
  #matrix:not(.sans-rarete) .tbl-scroll tbody tr:hover td:nth-child(2) { background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
  /* Le bord des colonnes figees : un trait de 2 px plus fonce que les autres, apres la derniere
     d'entre elles - Rarete, ou Espece au classement par nombre (version 1 des maquettes
     notes-privees/maquettes/separation/, Mathis, 2026-10-22). Tire de --ink, il suit le theme sombre. */
  #matrix { --sep-fige:color-mix(in srgb, var(--ink) 38%, transparent); }
  #matrix.sans-rarete .tbl-scroll thead th:first-child, #matrix.sans-rarete .tbl-scroll tbody td.sp,
  #matrix:not(.sans-rarete) .tbl-scroll thead th:nth-child(2),
  #matrix:not(.sans-rarete) .tbl-scroll tbody td:nth-child(2) { border-right:2px solid var(--sep-fige); }
  /* Colonnes personnes : min 88 px. Dans « Qui a vu quoi », la regle #matrix plus haut les bloque a 104 px. */
  table th.pcol:not(:last-child), table td.pcol { min-width:88px; box-sizing:border-box; }
  /* Chips personne (filtre multi-sélection dans la matrice). */
  .person-chips { display:inline-flex; gap:4px; flex-wrap:wrap; align-items:center; }
  .person-chip { padding:5px 10px; border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink-3); border-radius:20px; font:600 14px/1 var(--sans); cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
  .person-chip .dot { width:8px; height:8px; border-radius:50%; background:var(--series,var(--ink-3)); }
  /* Chips rareté (filtre) : bordure gauche colorée + pastille bien visible pour servir de légende. */
  .rar-chip-m { border-left:4px solid var(--series, var(--line-2)); padding-left:8px; }
  .rar-chip-m .dot { width:12px; height:12px; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.25); margin-right:2px; }
  /* Chips pays : drapeau seul, sans texte. */
  .flag-chip { padding:3px 5px; min-width:26px; justify-content:center; }
  .flag-chip img.flag { display:block; }
  .flag-chip .flag-fallback { font:600 11px/1 var(--sans); color:var(--ink-3); }
  .flag-emoji { display:inline-block; font-size:14px; line-height:1; vertical-align:middle; }
  .flag-chip .flag-emoji { font-size:16px; }
  .abroad-mark-inline .flag-emoji { font-size:12px; }
  /* Chips famille : plus petites, compactes (il y en a beaucoup). */
  .fam-chip { padding:4px 9px; font-size:11.5px; }
  .fam-toggle { margin-left:8px; padding:2px 8px; font:600 11px/1 var(--sans); color:var(--ink-3); background:transparent; border:1px solid var(--line-2); border-radius:9px; cursor:pointer; text-transform:none; letter-spacing:0; }
  .fam-toggle:hover { color:var(--ink); background:var(--surface); }
  .person-chip:hover { filter:brightness(0.97); }
  .person-chip.on { color:var(--ink); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); }
  .person-chip.main { border-color:var(--gold); background:color-mix(in srgb,var(--gold) 18%,var(--surface)); color:var(--ink); font-weight:700; }
  /* Chips rareté quand cochée : réaffirme la couleur de rareté sur la bordure gauche.
     DOIT venir APRÈS .person-chip.on (même spécificité, la déclaration la plus tardive gagne) -
     sinon le border-color:var(--accent) de .person-chip.on écrase la bordure gauche colorée. */
  .rar-chip-m.on { border-left-color:var(--series) !important; }
  .person-filter-group { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; padding:4px 8px 4px 4px; border:1px dashed var(--line-2); border-radius:12px; }
  .person-filter-group .pf-label { font-size:11px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.4px; padding:0 4px; }
  .board-sheet .pcol.is-main { background:color-mix(in srgb,var(--gold) 10%,var(--surface)); }
  th.pcol.is-main { background:color-mix(in srgb,var(--gold) 15%,var(--surface)) !important; }
  .board-sheet .muted { color:var(--ink-3); }
  .board-sheet th.on-metric, .board-sheet td.on-metric { background:color-mix(in srgb,var(--accent) 12%,var(--surface)) !important; }
  .board-sheet td.on-metric { color:var(--accent-ink); }
  #boardModes { width:fit-content; max-width:100%; }
  /* Le cadre est porte par chaque bouton et non par .seg. Avec le trait sur .seg, en haut de
     page, le navigateur arrondissait le trait et le haut des boutons a deux pixels differents et
     laissait entre eux une rangee de fond, vue comme une ligne blanche sur le bouton vert (lu dans
     les captures de Mathis, 2026-10-23 : trait 206, fond 240, puis le bouton). Porte par le
     bouton, le trait colle a son fond quoi qu'il arrive. Il reste gris sur le bouton choisi :
     vert, il donnait un cadre interrompu. Pas de trait entre deux boutons, comme avant. */
  /* overflow visible : le decoupage arrondi de .seg, cale un pixel trop bas en haut de page,
     effacait le trait du haut des trois boutons (capture de Mathis, 2026-10-23 : bas, gauche et
     droite presents, haut absent). Les coins viennent des boutons eux-memes. */
  #boardModes { border:0; overflow:visible; }
  /* background-clip : le trait est semi-transparent ; sans lui, peint sur le vert, il devenait
     vert fonce et le cadre semblait coupe au-dessus du bouton choisi. */
  #boardModes button { border:1px solid var(--line-2); border-left-width:0; border-right-width:0; background-clip:padding-box; }
  #boardModes button:first-child { border-left-width:1px; border-radius:9px 0 0 9px; }
  #boardModes button:last-child { border-right-width:1px; border-radius:0 9px 9px 0; }
  /* Le rang passe dans la police du texte : Cascadia est reservee aux codes (charte). */
  .c-rank { text-align:center !important; width:46px; font-variant-numeric:tabular-nums; color:var(--ink-3); }
  td.c-rank { font-weight:600; }
  td.strong { font-weight:700; color:var(--accent-ink); }
  /* Podium : seule la case du rang des trois premiers prend l'or, l'argent ou le bronze ; le
     reste de la ligne garde les couleurs normales (Mathis, 2026-10-05 - la ligne entiere du
     premier etait doree). Le metal est pose a 45 % sur le fond du panneau, rang en --ink. */
  .board-sheet { --argent:#9aa6ae; --bronze:#b8763f; }
  .board-sheet tbody tr.podium-1 td.c-rank { background:color-mix(in srgb,var(--gold) 45%,var(--surface)) !important; }
  .board-sheet tbody tr.podium-2 td.c-rank { background:color-mix(in srgb,var(--argent) 45%,var(--surface)) !important; }
  .board-sheet tbody tr.podium-3 td.c-rank { background:color-mix(in srgb,var(--bronze) 45%,var(--surface)) !important; }
  .board-sheet tbody tr[class*="podium-"] td.c-rank { color:var(--ink); font-weight:700; }

  /* rarest finds */
  .empty-note { color:var(--ink-3); font-size:13px; margin-top:12px; }

  /* matrix */
  #matrix { padding:20px; }
  .controls { display:flex; flex-direction:column; gap:10px; margin:14px 0 6px; }
  .ctrl-main { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  /* Filtres de « Qui a vu quoi » : les boutons du Birdydex (.cp-btn, qui disent leur valeur et
     ouvrent une fenetre au milieu de l'ecran) et sa rangee de rarete (2026-10-22). Deux d'entre
     eux, « Colonnes » et « Affichage », ouvrent un petit menu sous eux. */
  .fm-barre { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .fm-barre .cp-btn[hidden] { display:none; }
  .fm { position:relative; }
  .fm-barre .cp-btn.actif { border-color:var(--accent); color:var(--accent-ink);
    background:color-mix(in srgb,var(--accent) 12%,var(--surface)); }
  /* La rangee de rarete : la meme boite que celle du Birdydex (#pkdxTierChips). */
  .rar-rangee { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px 10px;
    background:var(--surface-2); border-radius:8px; }
  /* La phrase qui dit de quel pays vient la rarete terrain : texte discret, comme une
     phrase d'introduction (14 px, --ink-3), le pays en --ink-2. */
  .rar-pays-note { display:flex; align-items:center; gap:8px; margin:0; font-size:14px; color:var(--ink-3); }
  .rar-pays-note[hidden] { display:none; }
  .rar-pays-note b { color:var(--ink-2); font-weight:600; }
  .rar-rangee-titre { font-size:13px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.4px;
    font-weight:700; margin-right:6px; }
  .fm-pop { position:absolute; top:calc(100% + 6px); left:0; z-index:30; width:max-content; max-width:min(440px, 92vw);
    box-sizing:border-box; display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:14px;
    background:var(--surface); border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--shadow); }
  .fm-pop.vers-gauche { left:auto; right:0; }
  /* Sur telephone, un menu ancre a son bouton sortait de l'ecran d'un cote ou de l'autre
     (Rarete : 89 px a gauche, mesure en 375 px de large) : il s'ouvre sous toute la barre. */
  @media (max-width:640px){
    .fm-barre { position:relative; }
    .fm { position:static; }
    .fm-pop, .fm-pop.vers-gauche { left:0; right:0; width:auto; max-width:none; }
  }
  /* display:flex empeche l'attribut [hidden] de fonctionner : il faut le forcer. */
  .fm-pop[hidden] { display:none; }
  /* Fenetre « Personnes » : deux parties, chacune avec sa question et une phrase d'aide. */
  .pers-modal .pers-corps { overflow-y:auto; padding:4px 18px 8px; display:flex; flex-direction:column; gap:18px; }
  .pers-partie h3 { margin:0 0 4px; font-size:16px; font-weight:700; color:var(--ink); }
  .pers-aide { margin:0 0 10px; font-size:14px; color:var(--ink-3); line-height:1.4; }
  .pers-liste { display:flex; flex-wrap:wrap; gap:8px; }
  .pers-bas { display:flex; justify-content:flex-end; padding:12px 18px 16px; border-top:1px solid var(--line); }
  .fm-titre { font-size:13px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.4px; }
  .fm-pop .fm-titre ~ .fm-titre { margin-top:4px; }
  .fm-tout { border:0; background:none; padding:0 6px; min-height:30px; color:var(--accent-ink); font:600 14px/1 var(--sans);
    cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
  .fp-section { display:flex; flex-direction:column; gap:6px; }
  .fp-section.fp-row { flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px; }
  .fp-title { font-size:13px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.4px; }
  .fp-hint { text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink-3); font-size:11px; margin-left:4px; }
  .fp-title-inline { font-size:13px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.4px; margin-right:6px; }
  .fp-inline { display:inline-flex; align-items:center; gap:4px; }
  .fp-reset { margin-left:auto; padding:5px 12px; background:transparent; border:1px solid var(--line-2); border-radius:9px; font:600 14px/1 var(--sans); color:var(--ink-3); cursor:pointer; }
  .fp-reset:hover { background:var(--surface); color:var(--ink); }
  .search { flex:1; min-width:180px; display:flex; align-items:center; gap:8px; background:var(--surface-2);
    border:1px solid var(--line-2); border-radius:9px; padding:7px 11px; }
  .search input { border:none; background:transparent; color:var(--ink); font:inherit; font-size:14px;
    width:100%; }
  /* Le champ est sans bordure a l'interieur d'une boite qui en a une : l'anneau se
     dessine donc AUTOUR de la boite, sinon il flotte au milieu. L'outline:none du
     champ n'est plus une suppression seche, il deplace l'anneau d'un cran. */
  .search input:focus { outline:none; }
  .search:focus-within { outline:3px solid var(--accent); outline-offset:2px; }
  .seg { display:flex; border:1px solid var(--line-2); border-radius:9px; overflow:hidden; }
  .seg button { border:none; background:var(--surface); color:var(--ink-2); font:inherit; font-size:14px; font-weight:600;
    padding:7px 11px; cursor:pointer; }
  .seg button.on { background:var(--accent); color:#fff; }
  .filt-sel { border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:inherit; font-weight:600;
    font-size:14px; padding:5px 10px; border-radius:9px; cursor:pointer; max-width:220px; }
  .filt-sel:hover { border-color:var(--accent); }
  .filt-sel:focus { outline:3px solid var(--accent); }
  /* Custom region picker (fiches especes) : dropdown riche avec bars d'abondance. */
  .reg-picker { position:relative; display:inline-block; }
  .reg-picker-trigger { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font:inherit; font-size:14px; padding:5px 10px; border-radius:9px; cursor:pointer; font-weight:600; min-height:34px; box-sizing:border-box; }
  .reg-picker-trigger:hover { border-color:var(--accent); }
  /* overscroll-behavior:contain : arrivé en butée de la liste, la molette ne doit pas
     enchaîner sur le défilement de la fiche derrière.
     max-height bornée à la hauteur dispo : le déclencheur vit dans l'en-tête de la fiche,
     un panneau de 400px pourrait dépasser le bas du modal sur un écran court. */
  /* Colonne des valeurs à largeur FIXE : en auto, « 0.62% » était plus large que « 3.4% »,
     ce qui décalait la barre d'une ligne à l'autre. Les barres sont ainsi toutes alignées. */
  /* Meme ordre que les lignes du selecteur de pays : le nom d'abord, la pastille de palier
     tout a droite. La valeur chiffree vient se poser juste avant sa barre, qu'elle decrit. */
  /* 14px comme .cp-item : les deux listes sont les deux onglets du meme selecteur, une zone
     ne se lit pas plus petit qu'un pays. */
  /* minmax(0,1fr) et non 1fr : une piste 1fr ne descend pas sous la largeur minimale de son
     contenu, si bien qu'un nom long - « Pyrénées-Atlantiques » - poussait toute la ligne vers
     la droite. La barre gardait ses 60 px mais commencait 15 px plus loin qu'a la ligne
     d'au-dessus, ce qui se lit comme des barres de longueurs differentes. Le nom se coupe
     maintenant en points de suspension et les trois colonnes de droite ne bougent plus. */
  /* Hauteur figee plutot que deduite du contenu : une ligne ne peut plus grandir parce que
     son nom, sa valeur ou sa pastille auraient change de taille. */
  /* min-height et non height : les deux onglets du selecteur doivent garder le meme pas
     d'une ligne a l'autre, or ils l'obtenaient par deux chemins differents - hauteur figee
     ici, contenu plus 7 px de rembourrage pour .cp-item. Ils coincidaient tant que la
     pastille faisait 22 px ; passee a 26, les lignes Pays sont montees a 40 px quand les
     lignes Regions restaient a 36. Avec min-height les deux suivent leur contenu et ne
     peuvent plus diverger. */
  .reg-picker-item { display:grid; grid-template-columns:minmax(0,1fr) var(--cp-exo,16px) 44px 60px 30px; gap:8px; align-items:center; min-height:36px; padding:7px 10px; cursor:pointer; border-radius:6px; font-size:14px; color:var(--ink); }
  .reg-picker-item > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* La case de la lettre, vide ou non : elle existe sur toutes les lignes pour que les
     pourcentages restent en colonne. Une zone n'a qu'un statut, il n'y a donc jamais plus
     d'une lettre a loger - contrairement aux lignes de pays, qui en cumulent jusqu'a trois. */
  .reg-picker-exo { display:flex; align-items:center; justify-content:flex-end; }
  /* Les lignes du selecteur du birdydex n'ont pas de pastille de palier : sans elle, la
     cinquieme colonne ne servait qu'a tenir la barre a 30 px du bord. Quatre colonnes, et
     la barre finit la ligne. */
  .reg-picker-item.sans-palier { grid-template-columns:minmax(0,1fr) var(--cp-exo,16px) 44px 60px; }
  .reg-picker-item:hover { background:var(--surface-2); }
  /* Selection courante : la meme que celle d'un pays (voir .cp-item.on, plus bas, dont
     cette regle partage la declaration). Les deux listes vivent dans le meme modal, une
     ligne choisie doit s'y voir pareil. */
  .reg-picker-item.on { background:var(--surface-2); font-weight:700; }
  .reg-picker-item.absent { opacity:.5; }
  .reg-picker-item.national { grid-template-columns:1fr; height:auto; padding:8px 10px; border-bottom:1px solid var(--line-2); margin-bottom:4px; font-weight:600; }
  /* Une région française en tête de ses départements, sur la Carte (2026-10-28) : elle se choisit aussi. */
  .reg-picker-item.ct-zone-tete { font-weight:700; margin-top:10px; }
  /* Le palier, ecrit, plutot qu'une pastille de couleur a decoder : c'est le meme
     rectangle que partout ailleurs dans l'appli. La couleur reste, elle devient le fond. */
  .reg-picker-item.absent .tier-chip { color:var(--ink-3); }
  /* justify-self : sans lui, la pastille est etiree a la largeur de sa colonne de grille et
     ne fait plus la meme taille que dans la liste des pays, ou elle est un element flex
     libre. La colonne reste fixe pour que les barres restent alignees d une ligne a l autre. */
  .reg-picker-item .tier-chip, .cp-item .tier-chip { justify-self:end; }
  /* Memes colonnes de mesure dans les lignes de pays, qui sont en flex : la valeur et sa
     barre doivent tomber au meme endroit dans les deux onglets du selecteur. */
  /* Une case de largeur fixe pour le rond du statut, occupee ou non : sans elle, les
     pourcentages se decalaient d'une ligne a l'autre selon qu'un oiseau porte un statut
     exotique ou pas, et la colonne des chiffres ne se lisait plus d'un coup d'oeil. */
  /* Les lettres sont collees a droite de leur case, contre le pourcentage : c'est la
     colonne des chiffres qui doit rester droite, pas celle des lettres. La largeur vient
     de la ligne la plus chargee de la liste (--cp-exo, posee au rendu). */
  .cp-item .cp-item-exo { display:flex; align-items:center; justify-content:flex-end; gap:3px; }

  /* La barre est PEINTE, elle n'est plus un bloc.
     Un bloc de 5 px de haut est cale sur la grille de pixels de l'ecran : quand l'echelle
     d'affichage n'est pas entiere, son bord haut tombe a une position fractionnaire qui
     change d'une ligne a l'autre, et le bloc ressort tantot a 5 pixels tantot a 6. Mesure
     sur la capture du 25/09, quatorze lignes : 5,6,5,5,5,5,5,6,6,6,5,5,5,5. Epaissir la
     barre ne reglait rien, ca ne faisait que diluer l'ecart.
     La bande etait peinte en degrade, ce qui reglait l'epaisseur mais coutait les bouts
     arrondis. Ici on retrouve les deux : une pastille de 10 px, avec son vrai border-radius,
     ecrasee de moitie par scaleY(.5) - soit 5 px a l'ecran. Le pli : un element transforme
     est rasterise dans sa propre couche, avec une precision sous-pixel, au lieu d'etre cale
     sur la grille. La mise en page, elle, reserve toujours 10 px : la transformation ne la
     touche pas, et la ligne ne bouge donc pas d'un pays a l'autre. */
  .reg-picker-bar { height:10px; background:var(--line-2); border-radius:5px; overflow:hidden; transform:scaleY(.5); }
  .reg-picker-bar > div { height:100%; background:currentColor; border-radius:5px; }
  /* Chiffres a chasse fixe : sans ca le « 1 » est bien plus etroit que le « 2 », si bien
     qu'en alignant a droite le bord GAUCHE de « 19% » tombait 4 px plus loin que celui de
     « 42% ». La colonne etait rigide, c'est le texte dedans qui dansait d'une ligne a l'autre. */
  .reg-picker-val { font-size:10.5px; color:var(--ink-3); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
  /* Country picker modal (reutilise dans fiches, Birdydex, Cette semaine).
     Future-proof pour 15-100 pays : search + grouped by continent. */
  .cp-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:inherit; font-size:14px; padding:5px 10px; border-radius:9px; cursor:pointer; font-weight:600; }
  /* Native HTML5 hidden attribute : force display:none pour override tout autre display: */
  [hidden] { display: none !important; }
  .cp-btn:hover { border-color:var(--accent); }
  .cp-btn .cp-btn-arrow { opacity:.6; margin-left:2px; }
  /* overflow:hidden + overscroll-behavior:contain : le fond devient un conteneur de
     defilement qui ne chaine pas. Sans ca, la molette arrivee en butee de la liste - ou
     simplement passee a cote du panneau - faisait defiler la page derriere le modal. */
  .cp-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:2147483000; display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden; overscroll-behavior:contain; }
  .cp-modal-inner { background:var(--surface); border-radius:14px; padding:14px; max-width:520px; width:100%; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,.28); }
  .cp-modal-title { font:700 15px var(--sans); color:var(--ink); margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
  .cp-modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--ink-3); padding:0 4px; }
  .cp-modal-close:hover { color:var(--ink); }
  .cp-search { width:100%; padding:9px 12px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface-2); color:var(--ink); font:14px var(--sans); margin-bottom:8px; box-sizing:border-box; }
  /* Deux onglets dans le meme modal : le pays et sa zone. Ils etaient deux selecteurs
     separes, dont un panneau deroulant qu il fallait fermer pour changer de pays. */
  .cp-tabs { display:flex; gap:6px; margin-bottom:8px; }
  .cp-tab { flex:1; padding:7px 10px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-3); border-radius:8px; font:600 12.5px/1 var(--sans); cursor:pointer; }
  .cp-tab:hover { border-color:var(--accent); }
  .cp-tab.on { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
  .cp-list { overflow-y:auto; overscroll-behavior:contain; flex:1; }
  .cp-group-title { font:700 13px var(--sans); text-transform:uppercase; letter-spacing:.4px; color:var(--ink-3); padding:8px 10px 4px; }
  /* Meme plancher que .reg-picker-item : les deux onglets du selecteur partagent le pas
     de leurs lignes, au-dessus comme au-dessous de la hauteur de reference. */
  .cp-item { display:grid; grid-template-columns:28px minmax(0,1fr) var(--cp-exo,16px) 44px 60px 30px;
    gap:8px; align-items:center; min-height:36px; padding:7px 10px; cursor:pointer;
    border-radius:8px; color:var(--ink); font-size:14px; }
  /* Sans espece courante, pas de pastille de palier : la colonne disparait et la barre
     finit la ligne, exactement comme du cote des zones. */
  .cp-item.sans-palier { grid-template-columns:28px minmax(0,1fr) var(--cp-exo,16px) 44px 60px; }
  /* Le selecteur generique - trier la grille, choisir un milieu, une famille - reutilise
     .cp-item mais ne pose que le nom, parfois une pastille de couleur et un compte. La
     grille a six colonnes du selecteur de pays lui mettait le nom dans la colonne du
     drapeau : il rendait « P… » pour « Par famille ». Ici, une simple rangee. */
  .cp-item.cp-item-simple { display:flex; align-items:center; gap:10px; }
  .cp-item.cp-item-simple .cp-item-name { flex:1 1 auto; }
  /* La pastille TOI suit le prenom en voisine de rangee, centree par la flexbox comme dans le
     classement : glissee dans le texte, elle tombait 1,7 px sous le milieu des majuscules
     (mesure du 2026-10-15). Le prenom ne prend plus toute la place, et le gap de 10 px moins
     2 redonne les 8 px d'air du classement. */
  .cp-item.cp-item-simple .cp-item-name-moi { flex:0 1 auto; }
  .cp-item.cp-item-simple .cp-item-name-moi + .youtag { margin-left:-2px; flex:none; }
  .cp-item.cp-item-simple .cp-item-meta { flex:none; }
  /* Choix d'une famille : chaque ordre (« Passeriformes »), cliquable, en tete de ses
     familles, en italique comme au Birdydex ; les familles en retrait dessous. */
  .cp-item.cp-item-ordre { margin-top:8px; font:italic 600 15px var(--sans); }
  .cp-item.cp-item-fam { padding-left:26px; }
  .cp-item:hover { background:var(--surface-2); }
  .cp-item.on { background:var(--surface-2); font-weight:700; }
  .cp-item-flag { display:inline-flex; align-items:center; justify-content:center; }
  .cp-btn-flag { display:inline-flex; align-items:center; }
  /* min-width:0 pour la meme raison que la premiere colonne des lignes de zone : sans lui un
     nom long refuse de retrecir et decale la valeur, la barre et la pastille. */
  .cp-item-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* margin-left:auto : sans espece courante, la ligne ne porte que le nom, le compte et
     la barre. Le compte est pousse a droite avec la barre a sa suite, pour que celle-ci
     finisse la ligne comme dans la liste des zones. */
  /* Exactement la meme chose que .reg-picker-val, l'equivalent dans l'onglet des zones :
     meme corps, meme chasse fixe, meme alignement. Les deux onglets du meme selecteur
     disaient le nombre d'especes dans deux tailles differentes, et « 610 especes » etait
     trop long pour sa colonne de 60 px - il passait sous la barre. */
  .cp-item-meta { font-size:10.5px; color:var(--ink-3); text-align:right; white-space:nowrap;
    font-variant-numeric:tabular-nums; }
  .cp-item.disabled { opacity:.5; cursor:not-allowed; }
  .cp-item.disabled:hover { background:transparent; }
  .cp-item.absent { opacity:.55; }
  .cp-item-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  /* Pastille de niveau dans le choix de rarete du fil : la meme que sur ses lignes. */
  .cp-item-chip { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; color:#fff; font:700 13px/1 var(--sans); padding-bottom:1px; }
  /* Hauteur bornée (Mathis, 2026-10-12 : « quand on défile, on ne voit plus les noms ») :
     un conteneur qui défile en largeur défile aussi en hauteur, donc l'en-tête collant
     (top:0) restait collé à un conteneur aussi haut que le tableau, et sortait de l'écran
     avec lui. Borné, c'est le tableau qui défile et les noms des joueurs restent visibles. */
  .tbl-scroll { overflow:auto; max-height:75vh; margin-top:10px; border:1px solid var(--line-2); border-radius:10px; }
  table { border-collapse:collapse; width:100%; font-size:13.5px; }
  thead th { position:sticky; top:0; background:var(--surface-2); z-index:2; text-align:left;
    padding:9px 12px; border:1px solid var(--line-2); font-size:11.5px; text-transform:uppercase;
    letter-spacing:.05em; color:var(--ink-3); font-weight:700; white-space:nowrap; }
  thead th.pcol { text-align:center; }
  thead th.pcol .cap { display:inline-flex; align-items:center; gap:6px; }
  thead th.pcol .dot { width:9px; height:9px; border-radius:50%; background:var(--series); }
  tbody td { padding:8px 12px; border:1px solid var(--line-2); vertical-align:middle; }
  tbody tr:nth-child(even) td { background:color-mix(in srgb,var(--surface-2) 45%,var(--surface)); }
  tbody tr:hover td { background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
  td.sp { font-weight:600; }
  td.sp .sci { display:block; font-family:var(--sans); font-style:italic; font-weight:400;
    color:var(--ink-3); font-size:12px; }
  td.pcol { text-align:center; padding:0; position:relative; }
  .abroad-mark-inline { margin-left:3px; font-size:9px; }
  .abroad-mark-inline .flag { vertical-align:-2px; }
  td.pcol.is-seen { background:color-mix(in srgb,var(--accent) 18%,var(--surface)) !important;
    color:var(--accent-ink); font-weight:700; }
  td.pcol.is-foreign { background:color-mix(in srgb,#8a7fb3 16%,var(--surface)) !important; }
  td.pcol.is-foreign .chk { font-size:11px; }
  .mc-person.is-foreign { opacity:.7; }
  td.pcol .chk { font-style:normal; font-size:13px; }
  /* Le drapeau a la place de la coche : 17 px, a 70 % pour se fondre dans la couleur de la
     case (Mathis, 2026-10-22, d'apres les maquettes ; essaye a 65 puis 75 %). */
  td.pcol .case-drap { display:inline-flex; vertical-align:middle; line-height:0; }
  td.pcol .case-drap .flag { width:17px; height:auto; opacity:.7; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.10); }
  /* Tous les drapeaux ont un aspect-ratio uniforme (4/3) + object-fit cover : plus de
     variation de largeur entre pays (le Nepal ou la Suisse ne rompent plus l'alignement). */
  /* Taille UNIFORME des drapeaux partout dans l'app (fiches, chips, popups, modaux) */
  .flag { display:inline-block; height:14px; width:calc(14px * 4 / 3); vertical-align:-2px; border-radius:2px; box-shadow:0 0 0 .5px rgba(0,0,0,.18); object-fit:cover; object-position:center; }
  .country-badge { display:inline-flex; align-items:center; gap:8px; padding:5px 12px; border-radius:20px; background:var(--surface-2); border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; }
  .country-badge .flag { vertical-align:0; }
  /* Le mot est fondu a moitie vers l'encre du theme, le fond et la bordure gardent la
     couleur pure du palier. Ecrire le mot dans sa couleur pure le posait sur une dilution
     a 16 % de cette meme couleur : mesure le 2026-09-29, 1,63:1 sur le jaune, l'endroit
     le moins lisible de l'appli. Fondu a 50 %, 4,59:1 au pire des 11 paliers et des deux
     themes - c'est la valeur la plus COLOREE qui passe, 60 % retombe a 3,70:1.
     Le melange se fait vers --ink, donc il fonce en theme clair et eclaircit en sombre :
     une valeur fixe aurait casse l'un des deux. */
  .chip { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:4px;
    white-space:nowrap; background:color-mix(in srgb,var(--tc) 16%,transparent);
    color:color-mix(in srgb,var(--tc) 50%,var(--ink));
    border:1px solid color-mix(in srgb,var(--tc) 30%,transparent); }
  .cnt { font-variant-numeric:tabular-nums; color:var(--ink-2); text-align:center; }

  /* matrix - mobile card variant (shown < 640px) */
  .matrix-cards { display:none; }
  .mcard { border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:11px;
    padding:12px 13px; background:var(--surface-2); }
  .mc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .mc-sp { font-weight:600; font-size:14.5px; min-width:0; }
  .mc-sci { display:block; font-family:var(--sans); font-style:italic; font-weight:400;
    color:var(--ink-3); font-size:12px; margin-top:1px; }
  .mc-count { flex:none; font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums;
    color:var(--ink-2); background:var(--surface-3); border-radius:7px; padding:2px 8px; }
  .mc-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin-top:10px; }
  .mc-people { display:flex; flex-wrap:wrap; gap:6px; }
  .mc-person { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-2);
    background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:3px 9px 3px 7px; }
  .mc-person .dot { width:9px; height:9px; border-radius:50%; background:var(--series); flex:none; }

  footer { margin-top:30px; color:var(--ink-3); font-size:12px; text-align:center; line-height:1.6; }
  footer a { color:var(--accent-ink); }
  .legend-tiers { display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; font-size:12px; color:var(--ink-2); }
  .legend-tiers span { display:inline-flex; align-items:center; gap:6px; }
  .legend-tiers i { width:10px; height:10px; border-radius:3px; background:var(--tc); }

  @media (max-width:640px){
    #matrix .tbl-scroll { display:none; }
    .matrix-cards { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
    #matrix .controls { gap:8px; }
    #matrix .search { flex:1 1 100%; }
    #matrix .seg { flex:1 1 auto; }
    #matrix .seg button { flex:1; }
  }
  @media (max-width:560px){
    h1{font-size:24px;}
    .who .meta{display:block;}
  }
  /* couleurs de joueurs retirées : on masque toutes les pastilles */
  .dot { display:none !important; }
  .who-in, .whochip, .mc-person { gap:0 !important; }

  @media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important;} }

  /* onglets */
  /* 12 px sous le logo depuis le 2026-10-15 (22, puis 16 ; 10 juge trop remonte) : Mathis.
     Logo 24 px + 12 = onglets a la meme hauteur qu'avec 20 + 16 : seul l'ecart a change.
     Le haut de .wrap : 28 px avant, 18 puis 24 juges trop hauts, 26 garde le meme jour. */
  .tabs { display:flex; gap:4px; margin-top:12px; border-bottom:1px solid var(--line);
    overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  /* Onglets au repos en graisse normale, l'actif seul en gras : repris de la maquette
     « guide de terrain » le 2026-10-02, avec le retrait des emojis. */
  /* 17 px depuis le 2026-10-05 (15 avant) : « agrandir les titres legerement », Mathis, ticket qg#41 */
  .tab { border:none; background:transparent; color:var(--ink-2); font:inherit; font-weight:500;
    font-size:17px; padding:10px 16px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
    flex:0 0 auto; white-space:nowrap; }
  .tab.on { color:var(--accent-ink); border-bottom-color:var(--accent); font-weight:600; }
  .tab:hover { color:var(--accent-ink); }
  .auth-fields { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
  .auth-fields input { flex:1; min-width:180px; padding:10px 12px; border:1px solid var(--line-2); border-radius:10px; font:inherit; background:var(--surface); color:var(--ink); }
  .auth-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .auth-msg { font-size:13px; margin-top:10px; min-height:0; }
  .auth-msg.ok { color:var(--accent-ink); }
  .auth-msg.err { color:#c0392b; }
  .auth-info-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px; font-size:14px; color:var(--ink-2); }
  .chat-box { display:flex; flex-direction:column; gap:8px; height:min(70vh,650px); overflow-y:auto;
    padding:14px; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; margin-top:10px; }
  .chat-empty { margin:auto; color:var(--ink-3); font-size:14px; }
  .msg { max-width:78%; align-self:flex-start; position:relative; }
  .msg.mine { align-self:flex-end; }
  .msg-name { font-size:14px; font-weight:600; color:var(--ink-2); margin:0 0 2px 10px; }
  .msg.mine .msg-name { text-align:right; margin:0 10px 2px 0; }
  /* Bulles plus rondes et plus douces (asymetrique cote emetteur pour effet "queue"). */
  .msg-bubble { padding:9px 13px; border-radius:18px 18px 18px 4px; background:var(--surface); border:1px solid var(--line);
    color:var(--ink); font-size:14px; line-height:1.4; word-wrap:break-word; white-space:pre-wrap;
    box-shadow:0 1px 2px rgba(0,0,0,.04); }
  .msg.mine .msg-bubble { background:color-mix(in srgb,var(--accent) 16%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 30%,var(--line));
    border-radius:18px 18px 4px 18px; }
  .msg-bubble.emoji-only { background:transparent; border:none; padding:2px 10px; font-size:40px; line-height:1.1; box-shadow:none; }
  .msg.mine .msg-bubble.emoji-only { background:transparent; border:none; text-align:right; }
  /* L'heure loge a cote du nom depuis le 2026-10-14 : en ligne a part, invisible hors survol,
     elle reservait quand meme sa hauteur sous chaque message, et le tchat paraissait troue. */
  .msg-time { font-size:14px; color:var(--ink-3); white-space:nowrap; }
  .msg-edited { color:var(--ink-3); font-style:italic; }
  /* Actions (reagir, repondre, editer, supprimer) : au survol, A COTE de la bulle et hors du
     flux, pour la meme raison que l'heure. Au doigt elles reprennent leur ligne (fin du fichier). */
  .msg-actions { display:flex; align-items:center; gap:4px; position:absolute; top:32px; left:calc(100% + 6px); opacity:0; transition:opacity .15s; }
  .msg.mine .msg-actions { left:auto; right:calc(100% + 6px); flex-direction:row-reverse; }
  .msg .react-bar:empty { display:none; }
  .msg:hover .msg-actions { opacity:1; }
  .msg-act { background:var(--surface-2); border:1px solid var(--line-2); border-radius:8px; padding:2px 7px; cursor:pointer; font-size:13px; line-height:1.2; }
  .msg-act:hover { background:var(--surface); border-color:var(--accent); }
  .msg-del:hover { border-color:#c0392b; color:#c0392b; }
  /* Flash quand on clique une citation pour aller au message d'origine */
  .msg.msg-flash .msg-bubble { animation:msg-flash-anim 1.2s ease; }
  @keyframes msg-flash-anim {
    0%, 100% { background:var(--surface); }
    30%, 60% { background:color-mix(in srgb, var(--accent) 35%, var(--surface)); }
  }
  .msg.mine.msg-flash .msg-bubble { animation:msg-flash-mine-anim 1.2s ease; }
  @keyframes msg-flash-mine-anim {
    0%, 100% { background:color-mix(in srgb,var(--accent) 16%,var(--surface)); }
    30%, 60% { background:color-mix(in srgb, var(--accent) 45%, var(--surface)); }
  }
  /* Citation d'un message auquel on repond, integree dans la bulle */
  .msg-reply-quote { background:color-mix(in srgb, var(--ink) 8%, transparent); border-left:3px solid var(--accent);
    padding:4px 8px; border-radius:6px; margin:-3px 0 6px; cursor:pointer; font-size:12px; }
  .msg-reply-quote:hover { background:color-mix(in srgb, var(--ink) 14%, transparent); }
  .msg-reply-name { font-weight:700; color:var(--accent-ink); font-size:11px; }
  .msg-reply-text { color:var(--ink-2); font-size:12px; line-height:1.3; max-height:2.6em; overflow:hidden; }
  /* Liens autoformates dans les messages : lien basique + chips enrichis Wiki/YT/eBird/XC */
  .msg-link { color:var(--accent-ink); text-decoration:underline; word-break:break-all; }
  .msg-link:hover { text-decoration:none; }
  .msg-link-wp, .msg-link-yt, .msg-link-eb, .msg-link-xc {
    display:inline-flex; align-items:center; gap:6px; padding:4px 10px; margin:2px 0;
    background:var(--surface-2); border:1px solid var(--line-2); border-radius:10px;
    color:var(--ink); text-decoration:none; font-size:13px; word-break:normal;
    max-width:100%;
  }
  .msg-link-wp:hover, .msg-link-yt:hover, .msg-link-eb:hover, .msg-link-xc:hover {
    border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface));
    text-decoration:none;
  }
  .msg-link-icon { font-size:14px; flex:0 0 auto; }
  .msg-link-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .msg-link-src { font-size:10.5px; color:var(--ink-3); font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-left:auto; flex:0 0 auto; }
  /* Chip enrichi avec miniature (YouTube) : image a gauche + body texte a droite */
  .msg-link-media { display:flex; padding:0; overflow:hidden; align-items:stretch; }
  .msg-link-thumb { width:96px; height:54px; object-fit:cover; flex:0 0 auto; display:block; background:var(--surface-2); }
  .msg-link-body { display:flex; flex-direction:column; gap:2px; padding:8px 12px; min-width:0; flex:1; justify-content:center; }
  .msg-link-body .msg-link-title { font-weight:600; }
  .msg-link-body .msg-link-src { margin-left:0; text-align:left; text-transform:none; letter-spacing:0; font-size:11px; }
  /* Barres au-dessus du form d'envoi : reply / edit */
  .chat-reply-bar { background:var(--surface-2); border:1px solid var(--line-2); border-left:3px solid var(--accent);
    border-radius:8px; margin:10px 0 0; padding:6px 8px 6px 10px; }
  .chat-reply-inner { display:flex; align-items:center; gap:8px; }
  .chat-reply-body { flex:1; min-width:0; }
  .chat-reply-name { font-size:11px; font-weight:700; color:var(--accent-ink); }
  .chat-reply-text { font-size:12.5px; color:var(--ink-2); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .chat-reply-cancel, .chat-edit-cancel { background:none; border:none; cursor:pointer; font-size:14px; color:var(--ink-3); padding:2px 6px; border-radius:6px; flex:0 0 auto; }
  .chat-reply-cancel:hover, .chat-edit-cancel:hover { background:var(--surface); color:#c0392b; }
  /* Voice notes : bar d'enregistrement + preview + audio inline */
  .chat-voice-bar { display:flex; align-items:center; gap:10px; padding:10px 14px; margin-top:10px;
    background:color-mix(in srgb, #e74c3c 12%, var(--surface)); border:1px solid color-mix(in srgb, #e74c3c 25%, var(--line));
    border-radius:12px; font-size:13px; }
  .voice-rec-dot { width:10px; height:10px; border-radius:50%; background:#e74c3c; animation:voice-pulse 1s ease-in-out infinite; flex:none; }
  @keyframes voice-pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
  .voice-cancel, .voice-stop { border:none; padding:5px 12px; border-radius:8px; font:inherit; font-size:13px; cursor:pointer; font-weight:600; }
  .voice-cancel { background:transparent; border:1px solid var(--line-2); color:var(--ink-2); }
  .voice-cancel:hover { background:var(--surface); border-color:#c0392b; color:#c0392b; }
  .voice-stop { background:#2ecc71; color:#fff; margin-left:auto; }
  .voice-stop:hover { filter:brightness(.95); }
  .chat-voice-preview { margin-top:10px; }
  .voice-preview { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px; }
  .voice-duration { font-size:11.5px; color:var(--ink-3); font-weight:600; flex:0 0 auto; }
  .voice-remove { background:none; border:none; cursor:pointer; font-size:14px; color:var(--ink-3); padding:2px 6px; border-radius:6px; flex:0 0 auto; }
  .voice-remove:hover { color:#c0392b; }
  /* Vocal : le bouton du quiz et la duree (2026-10-18), a la place du lecteur du navigateur. */
  .msg-voice { display:flex; align-items:center; gap:8px; width:max-content; margin:2px 0; }
  .msg-voix-t { font-size:14px; color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:2.5em; }
  .msg.mine .msg-voice { margin-left:auto; }
  /* GIF Giphy dans une bulle */
  .msg-gif { display:block; max-width:260px; max-height:320px; border-radius:12px; margin:2px 0; }
  /* GIF picker : panneau flottant plein ecran (comme emojiPop) */
  .gif-pop { display:none; position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.4); }
  .gif-pop.open { display:block; }
  .gif-pop-inner { position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
    background:var(--surface); border:1px solid var(--line-2); border-radius:16px; padding:12px;
    width:min(420px, 92vw); max-height:70vh; display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,.3); }
  body:has(#viewChat.fab-open) .gif-pop .gif-pop-inner,
  body:has(#viewPhotos.fab-open) .gif-pop .gif-pop-inner,
  body:has(#viewFeed.fab-open) .gif-pop .gif-pop-inner {
    left:auto; right:20px; bottom:170px; transform:none;
  }
  @media (max-width:600px){
    body:has(#viewChat.fab-open) .gif-pop .gif-pop-inner,
    body:has(#viewPhotos.fab-open) .gif-pop .gif-pop-inner,
    body:has(#viewFeed.fab-open) .gif-pop .gif-pop-inner {
      right:10px; left:10px; bottom:150px; width:auto;
    }
  }
  .gif-pop-header { display:flex; gap:8px; margin-bottom:10px; }
  .gif-pop-header input { flex:1; padding:8px 12px; border:1px solid var(--line-2); border-radius:10px; font:inherit; background:var(--surface-2); color:var(--ink); }
  #gifPopClose { background:none; border:1px solid var(--line-2); border-radius:10px; padding:0 12px; font-size:16px; cursor:pointer; color:var(--ink-2); }
  #gifPopClose:hover { border-color:#c0392b; color:#c0392b; }
  .gif-pop-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; overflow-y:auto; flex:1; padding-right:2px; }
  .gif-pop-empty { grid-column:1/-1; text-align:center; color:var(--ink-3); padding:24px; font-size:13px; }
  .gif-item { padding:0; border:none; border-radius:8px; overflow:hidden; cursor:pointer; background:var(--surface-2); aspect-ratio:1/1; }
  .gif-item:hover { outline:3px solid var(--accent); }
  .gif-item img { width:100%; height:100%; object-fit:cover; display:block; }
  .gif-pop-footer { font-size:10px; color:var(--ink-3); text-align:center; margin-top:8px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
  /* Preview du GIF selectionne dans le compose */
  .gif-preview { display:inline-block; position:relative; margin-top:10px; }
  .gif-preview img { max-width:140px; max-height:140px; border-radius:10px; border:1px solid var(--line); display:block; }
  .gif-remove { position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; border:none;
    background:rgba(0,0,0,.7); color:#fff; font-size:12px; cursor:pointer; display:grid; place-items:center; }
  .gif-remove:hover { background:#c0392b; }
  .mention { color:var(--accent-ink); font-weight:600; }
  .mention.self { background:color-mix(in srgb, #ffd54f 55%, transparent); padding:0 3px; border-radius:4px; }
  /* Sans le champ du nom (masque le 2026-10-14), boutons, message et « Envoyer » tiennent sur
     une ligne a 520 px ; au telephone, le message passe dessous avec « Envoyer ». */
  .chat-input-wrap { position:relative; flex:1; display:flex; min-width:140px; }
  .chat-input-wrap .chat-input { flex:1; min-width:0; }
  .mention-pop { position:absolute; left:0; right:0; bottom:100%; margin-bottom:4px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.14); display:none; max-height:220px; overflow-y:auto; z-index:20; }
  .mention-pop.open { display:block; }
  .mention-pop-item { padding:8px 12px; cursor:pointer; font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:8px; }
  .mention-pop-item.active, .mention-pop-item:hover { background:color-mix(in srgb, var(--accent) 14%, var(--surface)); color:var(--accent-ink); }
  .mention-pop-item .dot { width:8px; height:8px; border-radius:50%; background:var(--series, var(--accent)); flex:none; }
  .mention-pop-item .self { margin-left:auto; font-size:10px; color:var(--ink-3); font-weight:600; text-transform:uppercase; }
  .msg.mine .msg-time { text-align:right; }
  .msg.mine .msg-edited { text-align:right; }
  .chat-compose { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
  .chat-name { flex:0 0 130px; min-width:100px; padding:10px 12px; border:1px solid var(--line-2); border-radius:10px; font:inherit; background:var(--surface); color:var(--ink); }
  .chat-input { flex:1; min-width:150px; padding:10px 12px; border:1px solid var(--line-2); border-radius:10px; font:inherit; background:var(--surface); color:var(--ink); }
  .chat-send { flex:0 0 auto; }
  .msg-guest { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#fff;
    background:var(--ink-3); padding:1px 5px; border-radius:6px; vertical-align:middle; margin-left:4px; }
  .msg-status { font-size:14px; font-weight:400; color:var(--ink-3); font-style:italic; margin-left:6px; }
  /* Avatar : bulle ronde emoji, initiale, ou image. line-height:1 pour eviter le decalage
     baseline qui decentre le glyphe verticalement. */
  .user-avatar { display:inline-grid; place-items:center; border-radius:50%; background:var(--surface-2); border:1px solid var(--line-2); overflow:hidden; vertical-align:middle; flex:0 0 auto; line-height:1; text-align:center; }
  img.user-avatar { object-fit:cover; }
  .user-avatar-emoji { line-height:1; background:var(--surface); }
  .user-avatar-initial { line-height:1; font-weight:700; color:var(--ink-2); background:color-mix(in srgb, var(--accent) 18%, var(--surface-2)); }
  /* Ligne entete du message : avatar + nom+status */
  .msg-header { display:flex; align-items:center; gap:8px; margin:0 0 6px 4px; }
  .msg.mine .msg-header { flex-direction:row-reverse; margin:0 4px 6px 0; }
  .msg-header .msg-name { margin:0; }
  .msg-header .user-avatar { width:24px !important; height:24px !important; font-size:12px !important; border-width:1px; }
  /* Message soft-deleted : contenu original masque et opacite reduite (visible admin only) */
  .msg-is-deleted .msg-bubble { background:color-mix(in srgb, var(--ink-3) 8%, var(--surface)); border-style:dashed; border-color:var(--line-2); }
  .msg-deleted-note { font-size:11.5px; color:var(--ink-3); font-style:italic; margin:0 0 4px; padding:2px 6px; background:color-mix(in srgb, #c0392b 12%, transparent); border-radius:6px; }
  .msg-deleted-admin { color:var(--accent-ink); font-weight:600; font-style:normal; }
  .msg-deleted-content { opacity:.6; filter:grayscale(60%); }
  /* Profil : avatar picker */
  .prof-avatar-row { display:flex; align-items:center; gap:14px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); flex-wrap:wrap; }
  .prof-avatar-preview { width:72px; height:72px; border-radius:50%; background:var(--surface-2); border:2px solid var(--line-2); box-sizing:border-box; overflow:hidden; display:grid; place-items:center; flex:0 0 auto; }
  .prof-avatar-preview .user-avatar, .prof-avatar-preview img.user-avatar { width:100% !important; height:100% !important; border:none !important; font-size:38px !important; line-height:1; border-radius:0 !important; }
  .prof-avatar-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .prof-avatar-label { font-size:13px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.4px; width:100%; margin:0 0 4px; }
  /* Highlight quand @moi mentionne */
  .msg.mentions-me .msg-bubble { background:color-mix(in srgb, #ffd54f 24%, var(--surface)); border-color:color-mix(in srgb, #ffd54f 60%, var(--line)); box-shadow:0 0 0 2px color-mix(in srgb, #ffd54f 30%, transparent); }
  .msg.mine.mentions-me .msg-bubble { background:color-mix(in srgb, #ffd54f 30%, color-mix(in srgb, var(--accent) 16%, var(--surface))); }
  /* Bouton "charger 100 plus anciens" en haut du chat */
  .chat-load-more { display:block; margin:0 auto 12px; padding:6px 14px; border:1px dashed var(--line-2); background:var(--surface-2); border-radius:20px; color:var(--ink-2); cursor:pointer; font:inherit; font-size:12px; }
  .chat-load-more:hover { border-style:solid; border-color:var(--accent); color:var(--accent-ink); }
  /* Indicateur "X écrit…" sous la boite de messages */
  .chat-typing-hint { font-size:12px; color:var(--ink-3); font-style:italic; padding:4px 12px; min-height:1.4em; }
  .chat-name.locked { background:var(--surface-2); color:var(--ink-2); cursor:not-allowed; }
  .chat-online { font-size:14px; color:var(--ink-2); margin:2px 0 2px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .online-dot { width:9px; height:9px; border-radius:50%; background:#2ecc71; box-shadow:0 0 0 2px color-mix(in srgb,#2ecc71 30%,transparent); flex:none; }
  .online-dot.off { background:var(--ink-3); box-shadow:none; }
  .pname-dot { width:8px; height:8px; border-radius:50%; background:#2ecc71; display:inline-block; margin-right:5px; vertical-align:middle; flex:none; }
  .chat-imgbtn { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; font-size:20px;
    border:1px solid var(--line-2); border-radius:10px; cursor:pointer; background:var(--surface); flex:0 0 auto; }
  .chat-imgbtn:hover { border-color:var(--accent); }
  /* Icones au trait du formulaire du tchat, chacune remplie de sa teinte (Mathis, 2026-10-14). */
  .chat-imgbtn svg { width:24px; height:24px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
    fill:color-mix(in srgb, currentColor 22%, transparent); }
  .ci-img { color:var(--accent); }
  .ci-emoji { color:#d9a21b; }
  .ci-micro { color:#d0503f; }
  .ci-gif { color:#8a63c9; }
  .chat-preview { position:relative; display:inline-block; margin:8px 0 0; }
  .chat-preview img { max-width:120px; max-height:120px; border-radius:10px; border:1px solid var(--line); display:block; }
  #chatPreviewRemove { position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; border:none;
    background:var(--ink); color:#fff; cursor:pointer; font-size:12px; line-height:1; }
  .msg-img { max-width:min(240px,60vw); max-height:300px; border-radius:12px; display:block; margin-top:2px; cursor:pointer; }
  .img-modal { display:none; position:fixed; inset:0; z-index:2500; background:rgba(0,0,0,.92); align-items:center; justify-content:center; padding:20px; cursor:zoom-out; }
  .img-modal.open { display:flex; }
  .img-modal img { max-width:96vw; max-height:92vh; border-radius:10px; cursor:default; }
  .img-modal-close { position:fixed; top:16px; right:16px; z-index:2501; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.15); color:#fff; font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background .15s; }
  .img-modal-close:hover { background:rgba(255,255,255,.28); }
  /* Zoom de l'image (_zoomImg dans app.js) : le navigateur ne doit ni zoomer la page ni
     faire glisser l'image comme un fichier. */
  .img-modal { touch-action:none; overscroll-behavior:contain; }
  .img-modal img { transform-origin:center; user-select:none; -webkit-user-drag:none; will-change:transform; }
  body.img-modal-open { overflow:hidden; }
  /* Modal fiche espèce (ouvert au clic sur un nom d'oiseau) */
  /* ========== Drawer fiche espece : style "Cards colorees Merlin/eBird" ========== */
  .species-modal { position:fixed !important; inset:0; z-index:2147483000 !important; display:block; padding:0; pointer-events:none; }
  .species-modal[hidden] { display:none !important; }
  /* Curseur normal sur le fond : « zoom-out » dessine une loupe, qui promet de degrossir
     une image agrandie. Ici le clic ferme la fiche - c'est le geste des fenetres modales,
     il n'a pas besoin d'etre annonce, et surtout pas par une loupe. La loupe reste sur
     .img-modal, ou elle dit vrai. */
  .species-modal .sm-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); cursor:default; pointer-events:auto; animation:sm-fade-in .18s ease both; }
  .species-modal .sm-box { position:absolute !important; top:0 !important; right:0 !important; bottom:0 !important; left:auto !important; background:var(--surface-2); border-radius:20px 0 0 20px; padding:0; width:min(792px, 100vw); height:auto !important; max-height:none !important; min-height:100vh !important; overflow:hidden; box-shadow:-8px 0 32px rgba(0,0,0,.28); display:flex; flex-direction:column; pointer-events:auto; animation:sm-slide-in .22s cubic-bezier(.2,.9,.3,1) both; }
  @keyframes sm-slide-in { from { transform:translateX(100%); } to { transform:translateX(0); } }
  @keyframes sm-fade-in { from { opacity:0; } to { opacity:1; } }
  /* Header compact : degrade accent solide + titre blanc. La photo va dans une card dedidee
     au top de l'onglet Carte (voir HTML). Plus simple et plus lisible que le hero image
     qui ne marchait pas bien avec la variete de formats photo Wikipedia. */
  .species-modal .sm-header { position:relative; flex:none; padding:18px 22px 16px; background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); border-radius:20px 0 0 0; color:#fff; }
  .species-modal .sm-hero-img, .species-modal .sm-hero-bg, .species-modal .sm-hero-fade, .species-modal .sm-hero-body { display:none !important; }
  .species-modal .sm-title { margin:0; font-family:var(--serif); font-weight:700; font-size:24px; color:#fff; letter-spacing:.2px; padding-right:40px; text-shadow:0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25); }
  .species-modal .sm-sci { display:inline-block; font-size:13px; color:#fff; font-style:italic; margin-top:6px; padding:2px 10px; background:rgba(0,0,0,.28); backdrop-filter:blur(4px); border-radius:12px; }
  /* Contraste : fond clair (steppe, littoral, bocage...) -> texte fonce */
  .species-modal .sm-header.sm-header-dark-text .sm-title { color:#1a1a1a; text-shadow:0 1px 1px rgba(255,255,255,.3), 0 0 6px rgba(255,255,255,.4); }
  .species-modal .sm-header.sm-header-dark-text .sm-sci { color:#1a1a1a; background:rgba(255,255,255,.4); }
  .species-modal .sm-header.sm-header-dark-text .sm-info-chips .chip { background:rgba(0,0,0,.15); color:#1a1a1a; }
  /* Sélecteurs pays / région dans l'en-tête de la fiche. Uniquement du positionnement :
     les boutons gardent l'apparence qu'ils avaient dans la carte Rareté (fond de surface
     opaque et bordure visible), qui reste lisible sur le dégradé de l'en-tête.
     Sur écran large ils se placent à gauche des flèches de navigation ; sous 720px la
     place manque et ils repassent dans le flux, sous les chips. */
  .species-modal .sm-geo { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:10px; }
  .species-modal .sm-geo:empty { display:none; }
  @media (min-width: 720px) {
    .species-modal .sm-geo { position:absolute; top:13px; right:142px; margin-top:0; z-index:5; justify-content:flex-end; }
  }
  .species-modal .sm-info-chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
  .species-modal .sm-info-chips .chip { font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:14px; background:rgba(255,255,255,.95); color:var(--ink-sur-blanc); border:none; display:inline-flex; align-items:center; gap:5px; box-shadow:0 1px 3px rgba(0,0,0,.15); }
  .species-modal .sm-info-chips .chip .dot { width:9px; height:9px; border-radius:50%; }
  .species-modal .sm-info-chips .chip.rar-chip-fill { color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35); font-weight:800; }
  /* Card photo : ratio 16/9, cover, arrondie */
  .species-modal .sm-photo-card { padding:0 !important; overflow:hidden; }
  .species-modal .sm-photo-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center; }
  .species-modal .sm-photo-card .photo-caption { padding:8px 12px; font-size:11.5px; color:var(--ink-3); background:var(--surface); border-top:1px solid var(--line); }
  /* Bouton fermer : rond blanc glassy en haut a droite */
  .species-modal .sm-close { position:absolute; top:14px; right:16px; background:rgba(255,255,255,.95); border:none; font-size:18px; color:var(--ink-sur-blanc); cursor:pointer; width:34px; height:34px; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.3); z-index:6; display:grid; place-items:center; transition:transform .12s; }
  .species-modal .sm-close:hover { transform:scale(1.08); }
  /* Mobile : bouton fermer plus grand + zone tactile agrandie pour eviter les mistap */
  @media (max-width: 640px) {
    .species-modal .sm-close { width:44px; height:44px; font-size:22px; top:10px; right:10px; }
    .species-modal .sm-nav { top:16px !important; right:64px !important; }
    /* Flèches dessinées en SVG, plus en caractère « ‹ » : en Segoe UI il était minuscule et posé trop
       bas (refusé deux fois le 2026-10-06) ; un dessin se centre exactement, quelle que soit la police. */
    .species-modal .sm-nav-btn { width:40px !important; height:40px !important; }
    .species-modal .sm-nav-btn svg { width:22px; height:22px; }
  }
  /* Nav tabs : pills colorees arrondies */
  .species-modal .sm-tabs { display:flex; gap:6px; padding:12px 16px; background:var(--surface-2); flex:none; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
  .species-modal .sm-tabs::-webkit-scrollbar { display:none; }
  .species-modal .sm-tab { flex:1; min-width:auto; padding:9px 14px; font:600 13px/1 var(--sans); color:var(--ink-3); background:var(--surface); border:1.5px solid transparent; border-radius:22px; cursor:pointer; transition:all .15s ease; white-space:nowrap; }
  .species-modal .sm-tab:hover { color:var(--ink); background:var(--surface); border-color:var(--line-2); }
  .species-modal .sm-tab.on { color:#fff; background:var(--accent); border-color:var(--accent); box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent); }
  /* Zone scroll principale : cards separees avec ombres */
  .species-modal .sm-scroll { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:14px 16px 20px; background:var(--surface-2); }
  .species-modal .sm-panel[hidden] { display:none; }
  .species-modal .sm-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:12px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
  .species-modal .sm-card:last-child { margin-bottom:0; }
  .species-modal .sm-card-title { font:700 13px/1.2 var(--sans); text-transform:uppercase; letter-spacing:.4px; color:var(--ink-3); margin:0 0 10px; }
  .species-modal #smRarityCard > div:last-child { border-bottom:none !important; padding-bottom:0 !important; }
  /* ==== Custom audio player (fiche espece, onglet Sons) ==== */
  .xa-block { margin-bottom:14px; }
  .xa-block:last-child { margin-bottom:0; }
  .xa-hdr { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .xa-hdr-lbl { font:700 13px/1 var(--sans); text-transform:uppercase; letter-spacing:.4px; padding:5px 10px; border-radius:12px; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); }
  .xa-hdr-meta { font-size:11.5px; color:var(--ink-3); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .xa-hdr-link { font-size:11px; color:var(--accent-ink); text-decoration:none; flex:none; }
  .xa-hdr-link:hover { text-decoration:underline; }
  /* Container principal : play + spectrogramme + temps */
  .xa-player { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; }
  /* Le bouton est celui du quiz (.pc-lecture, anneau qui avance) depuis le 2026-10-18. Pendant
     le chargement, l'anneau de fond respire : un clic annule. */
  .xa-player .pc-lecture.loading .pc-anneau-fond { animation:xa-charge 1s ease-in-out infinite alternate; }
  @keyframes xa-charge { from { opacity:1; } to { opacity:.35; } }
  .xa-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .xa-bar { position:relative; height:114px; border-radius:6px; overflow:hidden; background:var(--surface-3); cursor:pointer; }
  /* Sono : image entiere de xeno-canto etiree pour remplir toute la bar (pleine hauteur
     114px, pleine largeur). object-fit:fill stretch pour ne rien couper. */
  .xa-bar-sono { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; opacity:1; pointer-events:none; }
  .xa-bar-progress { position:absolute; top:0; bottom:0; left:0; width:0; background:linear-gradient(90deg, rgba(255,255,255,0), color-mix(in srgb, var(--accent) 20%, transparent)); pointer-events:none; z-index:1; }
  .xa-bar-fallback { position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-3); font-size:11px; font-style:italic; }
  /* Curseur rouge qui avance de gauche a droite pendant la lecture, sur le spectrogramme. */
  .xa-bar-cursor { position:absolute; top:0; bottom:0; left:0; margin-left:-1.5px; width:3px; background:#e63535; box-shadow:0 0 6px rgba(230,53,53,.8), 0 0 2px #fff; pointer-events:none; z-index:3; opacity:0; transition:opacity .2s; }
  .xa-player.has-progress .xa-bar-cursor { opacity:1; }
  /* Playhead classique retire pour n'avoir qu'un seul indicateur */
  .xa-bar-playhead { display:none; }
  .xa-time { font:600 10.5px/1 var(--mono, ui-monospace); color:var(--ink-3); display:flex; justify-content:space-between; padding:0 2px; }
  /* Section "autres enregistrements" : plus compact + separateur clair pour eviter la
     confusion avec le block suivant (chant vs cri). Le details a un border-bottom pour
     terminer proprement la section Chant avant que la section Cri commence. */
  .xa-more { margin-top:8px; padding:4px 10px 10px; border-top:1px dashed var(--line-2); border-bottom:2px solid var(--line-2); margin-bottom:14px; background:color-mix(in srgb, var(--surface-2) 40%, transparent); border-radius:0 0 8px 8px; }
  .xa-more summary { cursor:pointer; padding:8px 4px 6px; font-size:12px; color:var(--ink-3); user-select:none; }
  .xa-more summary:hover { color:var(--ink-2); }
  .xa-more[open] summary { color:var(--accent-ink); }
  .xa-more-list { margin-top:6px; display:flex; flex-direction:column; gap:8px; }
  .xa-more .xa-player { padding:6px 8px; }
  .xa-more .xa-bar { height:96px; }
  /* Espace visuel entre les blocs Chant et Cri (par-dessus la marge existante) */
  .xa-block { padding-bottom:14px; border-bottom:2px solid var(--line-2); }
  .xa-block:last-child { border-bottom:none; padding-bottom:0; }
  .xa-more .xa-block { border-bottom:1px dashed var(--line); padding-bottom:8px; }
  .xa-more .xa-block:last-child { border-bottom:none; padding-bottom:0; }
  /* ============ QUIZ (nouveau design) ============ */
  .qz-panel { padding:20px 22px 22px; margin-top:22px; }
  /* Le panneau prend la hauteur de l'ecran (min-height pose par _pcHauteur dans app.js) et le
     parcours se centre en hauteur dedans (2026-10-16). */
  #viewQuiz .qz-panel { display:flex; flex-direction:column; box-sizing:border-box; }
  #viewQuiz #pcParcours { flex:1; display:flex; flex-direction:column; justify-content:center; }
  /* Dans une colonne flexible, margin:auto empeche l'etirement : sans ceci, .pc-jeu se
     reduisait a la largeur de son contenu (238 px vus a 1680 px de large). */
  #viewQuiz #pcParcours > * { width:100%; zoom:var(--pc-k, 1); }
  /* Place du verdict reservee : il apparait sous les reponses avec son sonagramme, et sans
     cette reserve le bloc centre remontait d'un coup a chaque reponse. */
  .pc-jeu #pcVerdict { min-height:140px; }
  .qz-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
  .qz-mode-switch { display:inline-flex; background:var(--surface-2); border-radius:22px; padding:3px; gap:2px; }
  .qz-mode { background:transparent; border:none; padding:7px 16px; font:600 14px/1 var(--sans); color:var(--ink-3); cursor:pointer; border-radius:20px; transition:all .18s; }
  .qz-mode.on { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
  .qz-mode:hover:not(.on) { color:var(--ink); }
  .qz-topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
  .qz-stats-line { display:inline-flex; gap:6px; flex-wrap:wrap; }
  .qz-pill { display:inline-flex; align-items:baseline; gap:5px; padding:6px 12px; background:var(--surface-2); border-radius:14px; font:600 14px/1.2 var(--sans); color:var(--ink); }
  /* Les enfants ne captent pas les evenements souris : le title du parent s'affiche
     de maniere fiable sur toute la surface (sinon flicker/retard sur changement de child). */
  .qz-pill > * { pointer-events:none; line-height:1.2; }
  .qz-pill b { color:var(--accent-ink); font-weight:700; }
  .qz-pill-lbl { font-size:13px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.4px; font-weight:700; margin-left:2px; }
  .qz-pill-sub { font-size:13px; color:var(--ink-3); font-weight:700; margin-left:4px; text-transform:uppercase; letter-spacing:.4px; }
  /* Petit label qui indique de quel bucket (type de son) proviennent les stats affichees */
  .qz-stats-scope { display:inline-flex; align-items:center; padding:3px 10px; border-radius:12px; background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent-ink); font:700 14px/1 var(--sans); letter-spacing:.2px; margin-right:2px; }
  /* Chips dans le panneau reglages du quiz : hint entre parentheses en petit */
  .qz-settings .person-chip .fp-hint { font-size:10.5px; font-weight:600; margin-left:4px; opacity:.75; }
  .qz-settings .fp-section { margin-bottom:10px; }
  .qz-settings .fp-section:last-child { margin-bottom:0; }
  .qz-settings-btn { background:var(--surface-2); border:none; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:15px; color:var(--ink-2); transition:all .15s; }
  .qz-settings-btn:hover { background:var(--surface); color:var(--ink); }
  .qz-settings { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; padding:16px; margin-bottom:14px; background:var(--surface-2); border-radius:12px; border:1px solid var(--line-2); }
  .qz-settings .explorer-lbl { display:flex; flex-direction:column; gap:5px; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-3); }
  .qz-settings .filt-sel { width:100%; padding:8px 12px; font-size:14px; font-weight:600; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:8px; cursor:pointer; transition:border-color .15s, box-shadow .15s; text-transform:none; letter-spacing:0; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c8783' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:32px; }
  .qz-settings .filt-sel:hover { border-color:var(--accent); }
  .qz-settings .filt-sel:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
  .qz-stage { position:relative; min-height:280px; border-radius:16px; padding:32px 24px; background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); border:1px solid var(--line-2); }
  .qz-empty { text-align:center; padding:32px 0; }
  .qz-empty-icon { font-size:52px; opacity:.85; margin-bottom:8px; }
  .qz-empty p { margin:0 0 20px; color:var(--ink-2); font-size:15px; }
  .qz-cta { background:var(--accent); color:#fff; border:none; padding:12px 28px; font:700 15px/1 var(--sans); border-radius:24px; cursor:pointer; box-shadow:0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent); transition:transform .15s, box-shadow .15s; }
  .qz-cta:hover { transform:translateY(-1px); box-shadow:0 5px 14px color-mix(in srgb, var(--accent) 55%, transparent); }
  .qz-cta:active { transform:translateY(0); }
  /* Player audio custom quiz : gros bouton play central + progress */
  .qz-player { display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:22px; }
  .qz-play-btn { width:80px; height:80px; border-radius:50%; border:none; background:var(--accent); color:#fff; font-size:0; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent); transition:transform .12s; padding:0; line-height:1; }
  .qz-play-btn:hover { transform:scale(1.05); }
  .qz-play-btn:active { transform:scale(.98); }
  /* Icones play/pause en SVG inline via pseudos pour centrage geometrique parfait */
  .qz-play-btn::before { content:''; display:block; width:0; height:0; border-style:solid; border-width:14px 0 14px 22px; border-color:transparent transparent transparent #fff; margin-left:5px; }
  .qz-play-btn.playing::before { display:none; }
  .qz-play-btn::after { content:''; display:none; width:22px; height:26px; border-left:7px solid #fff; border-right:7px solid #fff; }
  .qz-play-btn.playing::after { display:block; }
  .qz-progress { width:100%; max-width:340px; height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden; }
  .qz-progress-fill { height:100%; background:var(--accent); border-radius:3px; width:0; transition:width .1s linear; }
  .qz-prompt { text-align:center; font-size:15px; color:var(--ink-2); margin:0 0 16px; font-weight:600; }
  /* Cartes de choix : 4 empilees verticalement */
  .qz-choices { display:flex; flex-direction:column; gap:8px; max-width:480px; margin:0 auto; }
  .qz-choice { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:14px 18px; background:var(--surface); border:2px solid var(--line-2); border-radius:12px; cursor:pointer; text-align:left; transition:all .15s; font:inherit; color:var(--ink); }
  .qz-choice:hover:not(:disabled) { border-color:var(--accent); background:var(--surface-2); transform:translateY(-1px); }
  .qz-choice:disabled { cursor:default; opacity:.7; }
  .qz-choice-fr { font-size:15px; font-weight:600; }
  .qz-choice-sci { font-size:11.5px; color:var(--ink-3); font-style:italic; }
  .qz-choice.correct { border-color:#22c55e; background:rgb(34 197 94 / .1); }
  .qz-choice.correct .qz-choice-fr { color:#166534; }
  .qz-choice.wrong { border-color:#ef4444; background:rgb(239 68 68 / .1); }
  .qz-choice.wrong .qz-choice-fr { color:#991b1b; }
  /* Feedback reveal */
  .qz-verdict { text-align:center; padding:14px 12px; margin-top:16px; border-radius:12px; background:var(--surface-2); }
  .qz-verdict-badge { font-size:44px; line-height:1; margin-bottom:6px; }
  .qz-verdict.correct .qz-verdict-badge { color:#22c55e; }
  .qz-verdict.wrong .qz-verdict-badge { color:#ef4444; }
  .qz-verdict-species { font-size:18px; font-weight:700; color:var(--ink); }
  .qz-verdict-sci { font-size:12px; color:var(--ink-3); font-style:italic; margin-bottom:8px; }
  .qz-verdict-photo { max-width:220px; max-height:150px; border-radius:8px; margin:8px auto 0; display:block; object-fit:cover; }
  .qz-verdict-sono { max-width:100%; margin:8px 0 0; border-radius:6px; opacity:.85; }
  .qz-verdict-replay { margin-top:12px; padding:8px 16px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); border-radius:999px; font:600 13px/1 var(--sans); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
  .qz-verdict-replay:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
  /* Progress badge en haut du player pendant une session Classe */
  .qz-session-progress { display:block; width:fit-content; margin:0 auto 12px; padding:6px 14px; background:color-mix(in srgb,var(--accent) 12%,var(--surface-2)); color:var(--accent-ink); border-radius:999px; font:700 13px/1 var(--sans); letter-spacing:.2px; text-align:center; }
  .qz-session-progress b { font-weight:700; font-size:14px; }
  .qz-empty-sub { color:var(--ink-3); font-size:12.5px; margin:-4px 0 12px; }
  /* Recap card affichee apres la 10eme question */
  .qz-recap { text-align:center; padding:24px 18px; border-radius:16px; background:var(--surface-2); }
  .qz-recap.good { background:color-mix(in srgb,#22c55e 12%,var(--surface-2)); }
  .qz-recap.ok { background:color-mix(in srgb,#f59e0b 10%,var(--surface-2)); }
  .qz-recap.bad { background:color-mix(in srgb,#ef4444 10%,var(--surface-2)); }
  .qz-recap-emoji { font-size:54px; line-height:1; margin-bottom:6px; }
  .qz-recap-title { font-size:15px; font-weight:700; color:var(--ink-2); letter-spacing:.4px; text-transform:uppercase; margin-bottom:8px; }
  .qz-recap-score { font-size:52px; line-height:1; color:var(--ink); font-weight:700; margin-bottom:8px; }
  .qz-recap-score b { font-weight:700; }
  .qz-recap-total { font-size:26px; color:var(--ink-3); font-weight:600; }
  .qz-recap-diff-wrap { margin-bottom:12px; }
  .qz-recap-diff { display:inline-block; padding:4px 12px; border-radius:999px; font:700 12px/1 var(--sans); }
  .qz-recap-diff.up { background:color-mix(in srgb,#22c55e 20%,transparent); color:#15803d; }
  .qz-recap-diff.down { background:color-mix(in srgb,#ef4444 20%,transparent); color:#b91c1c; }
  .qz-recap-diff.eq { background:var(--surface); color:var(--ink-3); }
  .qz-recap-meta { display:flex; justify-content:center; gap:12px; font-size:13px; color:var(--ink-2); margin-bottom:16px; flex-wrap:wrap; }
  .qz-recap-meta b { color:var(--ink); }
  .qz-recap-lvl { color:var(--ink-3); }
  /* Banner 'especes a reviser' entre topbar et stage */
  #quizProblemBanner { margin:8px 0 0; }
  .qz-problem-badge { padding:8px 14px; border:1px solid color-mix(in srgb,#ef4444 40%,var(--line-2)); background:color-mix(in srgb,#ef4444 8%,var(--surface)); color:var(--ink); border-radius:12px; font:600 13px/1.2 var(--sans); cursor:pointer; display:inline-flex; align-items:center; gap:6px; width:100%; justify-content:center; }
  .qz-problem-badge:hover { background:color-mix(in srgb,#ef4444 14%,var(--surface)); }
  .qz-problem-badge b { color:#b91c1c; font-weight:700; }
  /* Carte 'especes a reviser' rendue dans le stage */
  .qz-problem { padding:16px; background:var(--surface-2); border-radius:12px; }
  .qz-problem-head { text-align:center; margin-bottom:12px; }
  .qz-problem-title { font-size:18px; font-weight:700; color:var(--ink); margin-bottom:4px; }
  .qz-problem-sub { font-size:12px; color:var(--ink-3); }
  .qz-problem-list { list-style:decimal; padding-left:24px; margin:0 0 16px; display:flex; flex-direction:column; gap:6px; }
  .qz-problem-list li { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:14px; padding:6px 8px; background:var(--surface); border-radius:6px; }
  .qz-prob-nm { font-weight:600; color:var(--ink); }
  .qz-prob-stat { font-size:12px; color:var(--ink-2); white-space:nowrap; }
  .qz-prob-stat b { color:#b91c1c; font-weight:700; }
  .qz-prob-pct { color:var(--ink-3); font-weight:500; margin-left:2px; }
  .qz-problem-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
  /* Chip mode Expert : orange/rouge distinctif */
  .qz-chip-expert { border-color:color-mix(in srgb,#ef4444 40%,var(--line-2)); }
  .qz-chip-expert.on { border-color:#ef4444 !important; background:color-mix(in srgb,#ef4444 14%,var(--surface)) !important; color:#b91c1c !important; }
  .qz-chip-expert:hover { background:color-mix(in srgb,#ef4444 6%,var(--surface)); }
  /* Defi du jour : carte prominente au-dessus des tabs */
  .qz-daily-card { display:flex; align-items:center; gap:14px; padding:12px 16px; background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 18%,var(--surface-2)) 0%, color-mix(in srgb,var(--accent) 8%,var(--surface-2)) 100%); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line-2)); border-radius:14px; margin-bottom:14px; }
  .qz-daily-main { flex:1; min-width:0; }
  .qz-daily-titleline { font-size:15px; color:var(--ink); margin-bottom:2px; }
  .qz-daily-titleline b { font-weight:700; }
  .qz-daily-sub { font-size:14px; color:var(--ink-3); font-weight:500; margin-left:6px; }
  .qz-daily-status { font-size:14px; color:var(--ink-2); }
  .qz-daily-right { display:flex; align-items:center; gap:10px; flex:none; }
  .qz-daily-streak { padding:6px 12px; background:color-mix(in srgb,#f97316 12%,var(--surface)); color:#c2410c; border-radius:999px; font:600 14px/1 var(--sans); }
  .qz-daily-streak b { font-weight:700; }
  .qz-daily-btn { padding:10px 18px; border:none; background:var(--accent); color:#fff; border-radius:10px; font:700 14px/1 var(--sans); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.15); }
  .qz-daily-btn:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-1px); }
  .qz-daily-btn:disabled { background:var(--line-2); color:var(--ink-3); cursor:default; box-shadow:none; }
  .qz-daily-btn.done { background:#22c55e; color:#fff; opacity:.9; }
  .qz-daily-progress { background:color-mix(in srgb,var(--accent) 15%,var(--surface-2)) !important; color:var(--accent-ink) !important; }
  .qz-challenges { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
  .qz-challenges .qz-daily-card { margin-bottom:0; }
  @media (max-width: 720px){ .qz-challenges { grid-template-columns:1fr; } }
  /* Weekly card : accent doré/gold pour distinguer du daily */
  .qz-weekly-card { background:linear-gradient(135deg, color-mix(in srgb,#eab308 18%,var(--surface-2)) 0%, color-mix(in srgb,#eab308 8%,var(--surface-2)) 100%); border-color:color-mix(in srgb,#eab308 30%,var(--line-2)); }
  .qz-weekly-badge { background:color-mix(in srgb,#eab308 15%,var(--surface)) !important; color:#a16207 !important; }
  .qz-weekly-progress { background:color-mix(in srgb,#eab308 15%,var(--surface-2)) !important; color:#a16207 !important; }
  .qz-lb-inline { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
  .qz-challenge-exit-btn { margin-left:10px; padding:4px 10px; border:1px solid rgba(0,0,0,.15); background:rgba(255,255,255,.6); color:inherit; border-radius:8px; font:600 11px/1 var(--sans); cursor:pointer; opacity:.85; }
  .qz-challenge-exit-btn:hover { opacity:1; background:rgba(0,0,0,.08); }
  .qz-recap-back { padding:10px 20px; border:none; background:var(--surface); color:var(--ink); border-radius:10px; font:600 13px/1 var(--sans); cursor:pointer; border:1px solid var(--line-2); }
  .qz-recap-back:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
  .qz-recap-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
  /* Classement entre amis (Firestore) */
  #quizLeaderboard { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
  .qz-lb-title { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:10px; }
  .qz-lb-empty { padding:16px; background:var(--surface-2); border-radius:10px; text-align:center; font-size:14px; color:var(--ink-3); }
  .qz-lb-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
  .qz-lb-list li { display:grid; grid-template-columns:32px 1fr auto auto auto; gap:10px; align-items:center; padding:8px 12px; background:var(--surface-2); border-radius:8px; font-size:13px; }
  .qz-lb-list li.me { background:color-mix(in srgb,var(--accent) 14%,var(--surface-2)); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line-2)); }
  .qz-lb-rank { font-weight:700; color:var(--ink-3); text-align:center; }
  .qz-lb-list li:nth-child(1) .qz-lb-rank { color:#eab308; }
  .qz-lb-list li:nth-child(2) .qz-lb-rank { color:#94a3b8; }
  .qz-lb-list li:nth-child(3) .qz-lb-rank { color:#a16207; }
  .qz-lb-name { font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .qz-lb-you { color:var(--accent-ink); font-size:11px; font-weight:600; }
  .qz-lb-metric { font-size:12px; color:var(--ink-2); text-align:right; white-space:nowrap; }
  .qz-lb-metric b { color:var(--ink); font-weight:700; }
  .qz-lb-sub { font-size:10.5px; color:var(--ink-3); font-weight:500; margin-left:2px; }
  @media (max-width: 520px){
    .qz-lb-list li { grid-template-columns:28px 1fr auto; gap:8px; row-gap:2px; }
    .qz-lb-list li .qz-lb-metric:nth-of-type(2) { display:none; }
  }
  @media (max-width: 520px){
    .qz-daily-card { flex-direction:column; align-items:stretch; text-align:center; }
    .qz-daily-right { justify-content:center; }
  }
  /* Mode inverse : photo grand + 4 cartes audio */
  .qz-inverse { display:flex; flex-direction:column; gap:16px; }
  .qz-inv-photo-wrap { text-align:center; }
  .qz-inv-photo { max-width:100%; max-height:280px; border-radius:12px; object-fit:cover; box-shadow:0 2px 12px rgba(0,0,0,.15); }
  .qz-inv-choices { display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:520px; margin:0 auto; }
  .qz-inv-card { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--surface); border:2px solid var(--line-2); border-radius:12px; transition:all .15s; }
  .qz-inv-card.correct { border-color:#22c55e; background:color-mix(in srgb,#22c55e 12%,var(--surface)); }
  .qz-inv-card.wrong { border-color:#ef4444; background:color-mix(in srgb,#ef4444 12%,var(--surface)); }
  .qz-inv-play { width:36px; height:36px; border-radius:50%; border:none; background:var(--accent); color:#fff; font-size:14px; cursor:pointer; display:grid; place-items:center; flex:none; }
  .qz-inv-play:hover { filter:brightness(1.05); }
  .qz-inv-lbl { flex:1; font:600 14px/1 var(--sans); color:var(--ink); }
  .qz-inv-pick { padding:6px 12px; border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink); border-radius:8px; font:600 12px/1 var(--sans); cursor:pointer; }
  .qz-inv-pick:hover:not(:disabled) { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
  .qz-inv-pick:disabled { cursor:default; opacity:.6; }
  .qz-inv-audio { display:none; }
  @media (max-width: 520px){ .qz-inv-choices { grid-template-columns:1fr; } }
  .qz-actions { display:flex; gap:10px; justify-content:center; margin-top:16px; }
  .qz-btn-primary { background:var(--accent); color:#fff; border:none; padding:10px 22px; font:600 14px/1 var(--sans); border-radius:20px; cursor:pointer; }
  .qz-btn-primary:hover { background:var(--accent-ink); }
  .qz-btn-secondary { background:var(--surface-2); color:var(--ink-2); border:none; padding:10px 20px; font:600 13px/1 var(--sans); border-radius:20px; cursor:pointer; }
  .qz-btn-secondary:hover { background:var(--surface); color:var(--ink); }
  /* Parcours du quiz. Page refaite le 2026-10-16 d'apres la maquette A « Sentier »
     (notes-privees/maquettes/quiz-visuel/) : une frise de 7 ronds, une grande carte pour l'etape
     choisie avec ses oiseaux en photos rondes, les autres en liste. Les reponses en grandes
     cartes photo viennent de la maquette B, a la demande de Mathis. */
  .pc { margin-top:12px; --pc-ok:#1f9a55; --pc-ko:#d04545; }
  .pc-ico { width:16px; height:16px; flex:none; display:block; }
  .pc-meta { font-size:14px; color:var(--ink-3); margin:4px 0 0; }
  .pc-etiq { font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-3); }
  /* Accueil du quiz (2026-10-16, maquettes L1 et C3 de notes-privees/maquettes/quiz-accueil/).
     L'orange marque l'etape en cours et l'or les etoiles : exceptions a la charte voulues par
     Mathis, notees dans docs/charte-graphique.md. */
  .pc-etoiles { display:inline-flex; gap:2px; color:var(--gold); }
  .pc-etoiles svg { width:16px; height:16px; display:block; }
  /* Une etoile vide en --surface-3 disparaissait sur le fond sombre. */
  .pc-etoiles .vide { color:color-mix(in srgb, var(--ink) 18%, transparent); }
  .pc-compte { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--ink-2); }
  .pc-compte b { font-size:16px; color:var(--ink); }
  .pc-compte svg { width:18px; height:18px; color:var(--gold); }
  /* Accueil (2026-10-17, maquette C de notes-privees/maquettes/quiz-accueil-2/) : comme les autres
     pages, colle en haut, pleine largeur, sans l'agrandissement --pc-k du chemin et des parties. */
  #viewQuiz #pcParcours.pc-haut { justify-content:flex-start; }
  #viewQuiz #pcParcours.pc-haut > * { zoom:1; }
  .pc-bloc + .pc-bloc { margin-top:22px; }
  .pc-boites { margin-top:12px; }
  .pc-boite-txt { display:flex; flex-direction:column; min-width:0; }
  .pc-boite-desc { font-size:14px; font-weight:400; color:var(--ink-3); }
  .pc-boite-ferme { cursor:default; color:var(--ink-3); }
  .pc-boite-ferme:hover { background:var(--surface); }
  .pc-boite-ferme .ml-ic { filter:grayscale(1); opacity:.6; }
  /* Les parcours en lignes, comme le tableau des especes de Ma liste */
  .pc-tableau { margin-top:12px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .pc-ligne { display:grid; grid-template-columns:150px minmax(0,1fr) 200px 80px; gap:12px; align-items:center; width:100%; box-sizing:border-box;
    padding:8px 14px; border:0; border-top:1px solid var(--line); background:var(--surface); font:inherit; font-size:14px; color:var(--ink); text-align:left; }
  .pc-ligne:first-child { border-top:0; }
  .pc-tableau-th { background:var(--surface-2); font-size:13px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.4px; padding-top:7px; padding-bottom:7px; }
  button.pc-ligne { cursor:pointer; background:color-mix(in srgb, var(--accent) 6%, var(--surface)); }
  button.pc-ligne:hover { background:color-mix(in srgb, var(--accent) 11%, var(--surface)); }
  .pc-ligne-nom { font-weight:600; }
  .pc-ligne.ferme .pc-ligne-nom { font-weight:400; color:var(--ink-3); }
  .pc-ligne .pc-ronds > span { width:30px; height:30px; box-shadow:0 0 0 2px var(--surface); }
  .pc-ligne .pc-ronds > span + span { margin-left:-8px; }
  .pc-ligne.ferme .pc-ronds { filter:grayscale(1); opacity:.5; }
  .pc-ligne-avance { display:flex; align-items:center; gap:8px; color:var(--ink-3); }
  .pc-ligne-avance .pc-barre { flex:1; }
  .pc-ligne-vide { color:var(--ink-3); }
  @media (max-width:560px){
    .pc-ligne { grid-template-columns:auto minmax(0,1fr) auto; gap:10px; }
    .pc-ligne-avance, .pc-tableau-th, .pc-boite-desc { display:none; }
    .pc-tableau-th + .pc-ligne { border-top:0; }
  }
  .pc-ronds { display:flex; }
  .pc-ronds > span { width:54px; height:54px; border-radius:50%; overflow:hidden; background:var(--surface-3); box-shadow:0 0 0 3px var(--surface); }
  .pc-ronds > span + span { margin-left:-14px; }
  .pc-ronds img, .pc-bulle-oiseau img { width:100%; height:100%; object-fit:cover; display:block; }
  .pc-barre { display:block; height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
  .pc-barre i { display:block; height:100%; background:var(--accent); }
  /* Un parcours ouvert : le chemin */
  .pc-parcours { max-width:1200px; margin:0 auto; }
  .pc-retour { display:inline-flex; align-items:center; gap:4px; padding:4px 0; border:0; background:none; font:600 14px var(--sans); color:var(--accent-ink); cursor:pointer; }
  .pc-retour:hover { text-decoration:underline; }
  .pc-tete { display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; margin-top:8px; }
  .pc-titre { font:600 21px/1.25 var(--titre); margin:0; }
  .pc-tete .pc-compte { font-size:15px; }
  .pc-tete .pc-compte b { font-size:20px; }
  .pc-tete .pc-compte svg { width:22px; height:22px; }
  .pc-chemin { position:relative; margin-top:18px; }
  .pc-trace { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
  .pc-trace path { fill:none; stroke-width:6; stroke-linecap:round; }
  .pc-trace .reste { stroke:var(--line-2); stroke-dasharray:2 12; }
  .pc-trace .fait { stroke:var(--accent); }
  .pc-noeud { position:absolute; transform:translate(-50%, -50%); padding:0; border:0; border-radius:50%; background:none; font:inherit; cursor:pointer; }
  .pc-rond { position:relative; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-3); transition:transform .12s; }
  .pc-noeud:hover .pc-rond { transform:scale(1.06); }
  .pc-rond > svg { width:28px; height:28px; }
  /* Icone en --surface sur l'accent : blanc en clair, sapin en sombre. Le blanc sur l'accent
     sombre #2bbcb0 ne faisait que 2,35:1, sous le seuil de 3:1 d'une icone. */
  .pc-noeud.ok .pc-rond { background:var(--accent); color:var(--surface); box-shadow:0 4px 0 color-mix(in srgb, var(--accent) 55%, #000); }
  .pc-noeud.ici .pc-rond { width:82px; height:82px; background:var(--surface); color:var(--accent-2); box-shadow:inset 0 0 0 4px var(--accent-2), 0 0 0 8px color-mix(in srgb, var(--accent-2) 16%, transparent); }
  .pc-noeud.ici .pc-rond > svg { width:34px; height:34px; }
  /* L'anneau descend de 2 px : il se centre sur le rond ET son relief de 4 px. Centre sur le rond
     seul, il paraissait remonte (remarque de Mathis le 2026-10-16). */
  .pc-noeud.ok.sel .pc-rond { box-shadow:0 4px 0 color-mix(in srgb, var(--accent) 55%, #000), 0 2px 0 6px var(--surface), 0 2px 0 9px color-mix(in srgb, var(--accent) 40%, transparent); }
  .pc-noeud.ferme.sel .pc-rond { box-shadow:0 0 0 5px var(--surface), 0 0 0 8px color-mix(in srgb, var(--ink-3) 35%, transparent); }
  .pc-cad { position:absolute; right:-3px; bottom:-3px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--surface); color:var(--ink-3); box-shadow:0 0 0 1px var(--line-2); }
  .pc-cad .pc-ico { width:13px; height:13px; }
  .pc-noeud .pc-etoiles { position:absolute; left:50%; top:calc(100% + 10px); transform:translateX(-50%); }
  /* 292 px : six oiseaux de 36 px tiennent sur une ligne (parcours « Phrases qui degringolent ») */
  .pc-bulle { position:absolute; z-index:2; width:292px; max-width:100%; box-sizing:border-box; display:flex; flex-direction:column; gap:10px; padding:14px 16px 16px; background:var(--surface); border:1px solid var(--line-2); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.16); }
  .pc-bulle::before { content:''; position:absolute; top:-8px; left:var(--fx, 50%); width:14px; height:14px; background:var(--surface); border-left:1px solid var(--line-2); border-top:1px solid var(--line-2); transform:translateX(-50%) rotate(45deg); }
  .pc-bulle-titre { font:600 19px/1.25 var(--titre); margin:0; }
  .pc-bulle-meta { font-size:14px; color:var(--ink-3); }
  .pc-bulle-oiseaux { display:flex; flex-wrap:wrap; gap:8px; }
  .pc-bulle-oiseau { width:36px; height:36px; border-radius:50%; overflow:hidden; background:var(--surface-3); }
  .pc-bulle-oiseau.neuf { box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
  .pc-bulle-bas { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; color:var(--ink-3); }
  .pc-bulle .btn { justify-content:center; width:100%; font-size:15px; padding:10px 15px; }
  .pc-bulle-note { display:flex; align-items:center; gap:8px; margin:0; font-size:14px; color:var(--ink-3); }
  .pc-attente { margin:16px 0; }
  /* Une partie : la largeur suit le nombre de cartes, 5 cartes de 4/3 ne tenaient pas en 560 px. */
  .pc-jeu { max-width:680px; margin:0 auto; }
  .pc-jeu-tete { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px; color:var(--ink-3); }
  .pc-jeu-tete b { color:var(--ink); }
  .pc-jeu-droite { display:flex; align-items:center; gap:12px; }
  .pc-quitter { padding:6px 12px; }
  .pc-segments { display:flex; gap:4px; margin:12px 0 18px; }
  .pc-segments i { flex:1; height:6px; border-radius:3px; background:var(--surface-2); }
  /* Question en cours en gris, pas en accent : le bleu-vert se confondait avec le vert d'une
     bonne réponse (Mathis le 2026-10-17). Plus foncé que les questions à venir pour s'en
     distinguer, et toujours sans teinte. */
  .pc-segments i.ici { background:color-mix(in srgb, var(--ink) 30%, var(--surface)); }
  .pc-segments i.ok { background:var(--pc-ok); }
  .pc-segments i.ko { background:var(--pc-ko); }
  .pc-son { display:flex; align-items:center; gap:16px; background:var(--surface-2); border-radius:14px; padding:14px 18px; }
  /* Bouton de lecture « anneau qui avance » (variante D, 2026-10-16) : rond clair, anneau orange
     qui se remplit avec le chant, icone orange au centre. */
  .pc-lecture { flex:none; position:relative; width:60px; height:60px; border-radius:50%; border:0; padding:0; background:var(--surface); color:var(--accent-2); cursor:pointer; display:grid; place-items:center; box-shadow:0 2px 8px color-mix(in srgb, var(--ink) 10%, transparent); }
  .pc-lecture:hover { color:color-mix(in srgb, var(--accent-2) 80%, var(--ink)); }
  .pc-anneau { position:absolute; inset:0; width:100%; height:100%; }
  .pc-anneau circle { fill:none; stroke-width:4; }
  .pc-anneau-fond { stroke:var(--surface-3); }
  .pc-anneau-plein { stroke:var(--accent-2); stroke-linecap:round; }
  .pc-ico-lecture { width:26px; height:26px; }
  .pc-ico-pause { width:22px; height:22px; display:none; }
  .pc-lecture.playing .pc-ico-lecture { display:none; }
  .pc-lecture.playing .pc-ico-pause { display:block; }
  /* Version des trois chants proposes (« Nom vers chant », etape 5), depuis le 2026-10-17 */
  .pc-lecture-petit { width:48px; height:48px; }
  .pc-lecture-petit .pc-ico-lecture { width:21px; height:21px; }
  .pc-lecture-petit .pc-ico-pause { width:18px; height:18px; }
  .pc-son-barre { flex:1; height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden; }
  /* La barre de lecture est mise a jour a chaque image : une transition la ferait trainer. */
  .pc-son-plein { height:100%; width:0; background:var(--accent-2); }
  .pc-son-t { min-width:72px; text-align:right; font-size:14px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
  .pc-demande { margin:20px 0 12px; }
  /* Reponses en barres, petite photo a gauche du nom (les grandes cartes photo, essayees le
     2026-10-16, ont ete refusees le jour meme). */
  .pc-reponses { display:flex; flex-direction:column; gap:8px; }
  .pc-reponse { display:flex; align-items:center; gap:14px; width:100%; min-height:68px; padding:8px 16px 8px 8px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface); cursor:pointer; font:inherit; color:var(--ink); text-align:left; transition:border-color .12s, background .12s, opacity .15s; }
  .pc-reponse:hover:not(:disabled) { border-color:var(--accent); background:var(--surface-2); }
  .pc-reponse:disabled { cursor:default; }
  .pc-vign { flex:none; width:52px; height:52px; border-radius:10px; overflow:hidden; background:var(--surface-2); }
  .pc-vign img { width:100%; height:100%; object-fit:cover; display:block; }
  .pc-reponse-nom { flex:1; font-size:15px; font-weight:600; }
  .pc-reponse.correct { border-color:var(--pc-ok); box-shadow:0 0 0 1px var(--pc-ok); background:color-mix(in srgb, var(--pc-ok) 10%, var(--surface)); }
  .pc-reponse.wrong { border-color:var(--pc-ko); background:color-mix(in srgb, var(--pc-ko) 10%, var(--surface)); }
  .pc-reponse.eteint { opacity:.5; }
  .pc-marque { flex:none; display:grid; place-items:center; }
  .pc-reponse.correct .pc-marque { color:var(--pc-ok); }
  .pc-reponse.wrong .pc-marque { color:var(--pc-ko); }
  /* Cercles d'indices (2026-10-17, maquette notes-privees/maquettes/criteres/cercles.html) :
     couleurs « sous-bois » choisies par Mathis, sans rouge ni vert vif pour ne pas se confondre
     avec --pc-ok et --pc-ko. Dessin blanc sur le cercle : 5,8 a 7,5:1 en clair, 4,0 a 5,3:1 en
     sombre. Le texte vient de data-tip, l'infobulle commune. */
  .pc, .pc-indices { --pc-c-strophe:#2f5d50; --pc-c-motif:#5e6b2f; --pc-c-ono:#6e4e37; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.pc, .pc-indices) { --pc-c-strophe:#3f7868; --pc-c-motif:#76863d; --pc-c-ono:#8a6447; } }
  :root[data-theme="dark"] :is(.pc, .pc-indices) { --pc-c-strophe:#3f7868; --pc-c-motif:#76863d; --pc-c-ono:#8a6447; }
  .pc-cercles { flex:none; display:flex; gap:6px; }
  .pc-cercle { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; cursor:help; }
  .pc-cercle svg { width:22px; height:22px; display:block; overflow:visible; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
  .pc-cercle svg .p { fill:currentColor; stroke:none; }
  .pc-cercle.vide { visibility:hidden; }
  .pc-c-strophe { background:var(--pc-c-strophe); } .pc-c-motif { background:var(--pc-c-motif); } .pc-c-ono { background:var(--pc-c-ono); }
  .pc-reponses.sans-cercles .pc-cercles { display:none; }
  /* Fiche espece : les memes cercles, a cote de l'etiquette « Chant » (2026-10-18), un peu plus
     petits pour tenir dans la ligne d'en-tete du lecteur. */
  .sm-indices .pc-cercles { gap:5px; }
  .sm-indices .pc-cercle { width:30px; height:30px; }
  .sm-indices .pc-cercle svg { width:18px; height:18px; }
  .pc-demande-ligne { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  /* Identifiant du chant (numero xeno-canto et enregistreur), pour pouvoir signaler un son */
  /* Plus discret que le reste, mais lisible (Mathis le 2026-10-17) : --ink-3 mele a 65 % au fond */
  .pc { --pc-discret:color-mix(in srgb, var(--ink-3) 65%, var(--surface)); }
  .pc-id { margin:6px 2px 0; font-size:14px; color:var(--pc-discret); }
  .pc-chant-id { display:block; font-size:14px; font-weight:400; color:var(--pc-discret); }
  /* Reecouter les questions precedentes : un repli sous la question */
  .pc-hist { margin-top:18px; border-top:1px solid var(--line); padding-top:10px; text-align:left; }
  .pc-hist summary { cursor:pointer; font-size:14px; font-weight:600; color:var(--accent-ink); padding:4px 0; }
  .pc-hist ul { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
  .pc-hist-l { display:flex; align-items:center; gap:10px; padding:4px 0; }
  .pc-lecture-mini { width:38px; height:38px; }
  .pc-lecture-mini .pc-ico-lecture { width:17px; height:17px; }
  .pc-lecture-mini .pc-ico-pause { width:15px; height:15px; }
  .pc-hist-q { flex:none; min-width:30px; font-size:14px; font-weight:600; color:var(--ink-3); }
  .pc-hist-res { flex:none; width:18px; display:grid; place-items:center; }
  .pc-hist-res svg { width:16px; height:16px; }
  .pc-hist-res.ok { color:var(--pc-ok); } .pc-hist-res.ko { color:var(--pc-ko); }
  .pc-hist-txt { min-width:0; display:flex; flex-direction:column; }
  .pc-hist-nom { font-size:14px; font-weight:600; color:var(--ink); }
  .pc-hist-id { font-size:14px; color:var(--pc-discret); }
  /* Version de l'entete : un petit lien a cote du score, la liste se deroule par-dessus la question
     au lieu de la pousser vers le bas */
  .pc-hist-menu { position:relative; margin:0; border:0; padding:0; }
  .pc-hist-menu summary { list-style:none; display:inline-flex; align-items:center; gap:5px; padding:4px 2px; font-weight:600; color:var(--ink-3); }
  .pc-hist-menu summary::-webkit-details-marker { display:none; }
  .pc-hist-menu summary:hover, .pc-hist-menu[open] summary { color:var(--accent-ink); }
  .pc-hist-menu ul { position:absolute; z-index:20; top:calc(100% + 6px); right:0; width:min(380px, 82vw); max-height:min(420px, 60vh); overflow-y:auto;
    margin:0; padding:8px 12px; background:var(--surface); border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--shadow); }
  .pc-cercles-bascule { border:0; background:none; padding:0; font:600 14px var(--sans); color:var(--accent-ink); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
  .pc-verdict { margin-top:14px; }
  .pc-verdict-ligne { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-2); }
  .pc-verdict-ligne .sp-link { font-weight:700; color:var(--ink); }
  .pc-verdict.correct .pc-verdict-ico { color:var(--pc-ok); }
  .pc-verdict.wrong .pc-verdict-ico { color:var(--pc-ko); }
  /* Hauteur fixe (2026-10-18) : avec max-height, elle suivait la longueur de l'enregistrement,
     l'image de xeno-canto faisant 475 px de haut quelle que soit sa largeur. */
  .pc-verdict-sono { display:block; width:100%; height:90px; object-fit:cover; object-position:left center; margin-top:10px; border-radius:8px; opacity:.85; }
  /* Classe à part (2026-10-23) : sous le nom .pc-oiseau, elle prenait le flex des cases de la
     liste des oiseaux, écrites plus bas, et le nom partait à droite de la photo. */
  .pc-q-oiseau { text-align:center; margin-bottom:14px; }
  .pc-photo { width:100%; max-width:320px; height:200px; margin:0 auto 10px; border-radius:12px; background:var(--surface-2); overflow:hidden; }
  .pc-photo img { width:100%; height:100%; object-fit:cover; display:block; }
  .pc-q-oiseau-nom { font-size:18px; font-weight:700; }
  .pc-question .qz-prompt { text-align:center; font-size:15px; color:var(--ink-2); margin:0 0 16px; font-weight:600; }
  .pc-chants { display:grid; gap:8px; max-width:560px; margin:0 auto; }
  .pc-chant { display:flex; align-items:center; gap:12px; padding:10px 12px; border:2px solid var(--line-2); border-radius:12px; background:var(--surface); }
  .pc-chant.correct { border-color:var(--pc-ok); background:color-mix(in srgb, var(--pc-ok) 12%, var(--surface)); }
  .pc-chant.wrong { border-color:var(--pc-ko); background:color-mix(in srgb, var(--pc-ko) 12%, var(--surface)); }
  .pc-chant-nom { flex:1; font-size:15px; font-weight:600; }
  .pc-chant-qui { font-weight:400; color:var(--ink-2); }
  .pc-choisir { padding:7px 14px; }
  .pc-fin { text-align:center; padding:12px 0; }
  .pc-fin-score { font:700 44px/1.1 var(--titre); margin:8px 0 4px; }
  /* Etoiles de fin d'etape : les pleines arrivent l'une apres l'autre. Sans animation
     (prefers-reduced-motion), elles s'affichent posees. */
  .pc-fin-etoiles { margin:14px 0 0; }
  .pc-fin-etoiles .pc-etoiles { gap:8px; }
  .pc-fin-etoiles svg { width:44px; height:44px; }
  .pc-fin-etoiles .pleine { animation:pc-etoile-pop .45s cubic-bezier(.3,1.6,.5,1) both; }
  .pc-fin-etoiles .pleine:nth-child(1) { animation-delay:.15s; }
  .pc-fin-etoiles .pleine:nth-child(2) { animation-delay:.4s; }
  .pc-fin-etoiles .pleine:nth-child(3) { animation-delay:.65s; }
  @keyframes pc-etoile-pop { from { transform:scale(0) rotate(-35deg); opacity:0; } to { transform:none; opacity:1; } }
  .pc-confusions { list-style:none; padding:0; margin:6px 0 0; font-size:14px; color:var(--ink-2); }
  .pc-confusions li { margin:3px 0; }
  .pc-fin-btns { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; }
  /* Entrainement (qg#56, maquette de notes-privees/maquettes/quiz-entrainement/) : les boites
     de l'accueil ouvrent chacune une page pour cocher les oiseaux. */
  .pc-mode-ico { flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 12%, var(--surface)); color:var(--accent-ink); }
  .pc-mode-ico svg { width:24px; height:24px; }
  .pc-entr-page { max-width:760px; margin:0 auto; display:flex; flex-direction:column; align-items:stretch; gap:18px; }
  .pc-entr-page > .pc-retour { align-self:flex-start; }
  .pc-entr-tete { display:flex; align-items:center; gap:14px; }
  .pc-entr-tete .pc-meta { display:block; margin:2px 0 0; }
  .pc-entr-bas { display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; }
  .pc-entr-oiseaux { margin-bottom:10px; }
  .pc-entr-bientot { margin:10px 0 0; }
  .pc-lien { border:0; background:none; padding:4px 0; font:600 14px var(--sans); color:var(--accent-ink); cursor:pointer; }
  .pc-lien:hover { text-decoration:underline; }
  .pc-jetons { display:flex; flex-wrap:wrap; gap:10px; }
  .pc-jeton { display:flex; align-items:center; gap:10px; height:52px; padding:0 14px 0 6px; border:1px solid var(--line-2); border-radius:26px; background:var(--surface); font:600 15px var(--sans); color:var(--ink-2); }
  button.pc-jeton { cursor:pointer; }
  button.pc-jeton:hover { border-color:var(--accent); }
  .pc-jeton.on { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); color:var(--ink); background:color-mix(in srgb, var(--accent) 7%, var(--surface)); }
  .pc-jeton-ph, .pc-lacune-ph, .pc-bilan-ph { flex:none; border-radius:50%; overflow:hidden; background:var(--surface-3); }
  .pc-jeton-ph { width:40px; height:40px; }
  .pc-jeton-ph img, .pc-lacune-ph img, .pc-bilan-ph img { width:100%; height:100%; object-fit:cover; display:block; }
  .pc-jeton-coche { flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); color:transparent; }
  .pc-jeton-coche .pc-ico { width:12px; height:12px; }
  /* Coche en --surface sur l'accent, comme les etapes faites du chemin (contraste en sombre). */
  .pc-jeton.on .pc-jeton-coche { background:var(--accent); color:var(--surface); }
  .pc-lacune { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
  .pc-lacune-ph { width:40px; height:40px; }
  .pc-lacune-txt { flex:1; min-width:0; display:flex; flex-direction:column; }
  .pc-lacune-txt .pc-meta { margin:0; }
  .pc-lacune-nom { font-size:15px; font-weight:600; }
  .pc-lacune-taux { font-size:14px; font-weight:600; color:var(--pc-ko); white-space:nowrap; }
  .pc-bilan { max-width:520px; margin:12px auto 4px; text-align:left; }
  .pc-bilan-l { display:flex; align-items:center; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); font-size:15px; }
  .pc-bilan-ph { width:36px; height:36px; }
  .pc-bilan-nom { flex:1; min-width:0; }
  .pc-bilan-n { font-weight:600; font-variant-numeric:tabular-nums; }
  .pc-bilan .pc-barre { flex:none; width:90px; }
  /* Paliers par oiseau (qg#58, maquette notes-privees/maquettes/quiz-paliers/) : un anneau de la
     couleur du palier autour du rond, separe de la photo par un filet du fond. L'anneau est pris
     dans la taille du rond : rien ne bouge autour quand un palier tombe. */
  #pcParcours [data-palier] { box-sizing:border-box; border:3px solid transparent; padding:2px;
    background:linear-gradient(var(--surface), var(--surface)) padding-box, var(--pc-palier) border-box; }
  #pcParcours [data-palier] img { border-radius:50%; }
  #pcParcours .pc-ligne .pc-ronds > [data-palier], #pcParcours .pc-bulle-oiseau[data-palier],
  #pcParcours .pc-bilan-ph[data-palier], #pcParcours .pc-echelon-ph[data-palier] { border-width:2px; padding:1.5px; }
  #pcParcours .pc-fiche-ph[data-palier] { border-width:5px; padding:3px; }
  .pc-ico.pc-ico-serie { display:inline-block; width:14px; height:14px; color:var(--accent-2); vertical-align:-2px; margin-right:3px; }
  .pc-oiseaux { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px; margin-top:12px; }
  .pc-oiseau { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line-2); border-radius:14px;
    background:var(--surface); font:inherit; color:var(--ink); text-align:left; cursor:pointer; }
  .pc-oiseau:hover { border-color:var(--accent); }
  .pc-oiseau-ph, .pc-fiche-ph, .pc-echelon-ph, .pc-gain-ph { flex:none; border-radius:50%; overflow:hidden; background:var(--surface-3); }
  .pc-oiseau-ph img, .pc-fiche-ph img, .pc-echelon-ph img, .pc-gain-ph img { width:100%; height:100%; object-fit:cover; display:block; }
  .pc-oiseau-ph { width:52px; height:52px; }
  .pc-oiseau.jamais .pc-oiseau-ph { filter:grayscale(1); opacity:.6; }
  .pc-oiseau-txt { min-width:0; display:flex; flex-direction:column; gap:2px; }
  .pc-oiseau-nom { font-size:15px; font-weight:600; line-height:1.25; }
  .pc-oiseau-serie, .pc-bilan-serie { font-size:14px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
  .pc-bilan-serie { display:block; margin-top:1px; }
  button.pc-bilan-l { width:100%; border:0; border-bottom:1px solid var(--line); background:none; font:inherit; font-size:15px; color:var(--ink); text-align:left; cursor:pointer; }
  button.pc-bilan-l:hover .pc-bilan-nom { color:var(--accent-ink); }
  /* La fiche d'un oiseau */
  .pc-fiche-tete { display:flex; align-items:center; gap:16px; }
  .pc-fiche-ph { width:96px; height:96px; }
  .pc-fiche-palier { display:flex; align-items:center; flex-wrap:wrap; gap:0 7px; margin:4px 0 0; font-size:15px; font-weight:600; }
  .pc-fiche-palier .pc-meta { margin:0; font-weight:400; }
  .pc-pastille { width:14px; height:14px; border-radius:50%; background:var(--pc-palier); flex:none; }
  .pc-echelle { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; }
  .pc-echelon { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:14px; color:var(--ink-3); text-align:center; }
  .pc-echelon b { color:var(--ink); font-weight:600; }
  .pc-echelon-ph { width:36px; height:36px; margin-bottom:2px; }
  .pc-echelon.non .pc-echelon-ph { opacity:.35; filter:grayscale(.7); }
  .pc-echelon.non b { color:var(--ink-3); font-weight:400; }
  .pc-fiche-prog { display:flex; flex-direction:column; gap:8px; font-size:15px; }
  .pc-fiche-prog .pc-barre { height:8px; border-radius:4px; }
  .pc-chiffres { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
  .pc-chiffre { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px; background:var(--surface-2); }
  .pc-chiffre b { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
  .pc-chiffre span { font-size:14px; color:var(--ink-2); }
  /* Fin de partie : un encadre par palier gagne */
  .pc-gains { display:flex; flex-direction:column; gap:8px; max-width:520px; margin:14px auto 0; text-align:left; }
  .pc-gain { display:flex; align-items:center; gap:14px; padding:10px 14px; border-radius:14px;
    background:color-mix(in srgb, var(--pc-teinte) 16%, var(--surface)); border:1px solid color-mix(in srgb, var(--pc-teinte) 45%, transparent); }
  .pc-gain-ph { width:52px; height:52px; }
  .pc-gain-txt { display:flex; flex-direction:column; gap:2px; font-size:14px; color:var(--ink-2); }
  .pc-gain-txt b { font-size:16px; color:var(--ink); }
  @media (max-width:560px){
    .pc-oiseaux { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
    .pc-oiseau { gap:10px; padding:8px 10px; }
    .pc-oiseau-ph { width:44px; height:44px; }
    .pc-oiseau-nom { font-size:14px; }
    .pc-fiche-ph { width:76px; height:76px; }
    .pc-chiffres { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }
  /* Nom a ecrire (variante N2) : les noms proposes flottent sous le champ. */
  .pc-ecrire { display:flex; gap:10px; }
  .pc-ecrire-champ { position:relative; flex:1; min-width:0; }
  .pc-ecrit { width:100%; box-sizing:border-box; height:52px; padding:0 16px; border:2px solid var(--line-2); border-radius:10px; background:var(--surface); color:var(--ink); font:17px var(--sans); }
  .pc-ecrit:focus { outline:none; border-color:var(--accent); }
  .pc-ecrit:disabled { opacity:.7; }
  .pc-valider { height:52px; }
  .pc-sugg { position:absolute; z-index:3; left:0; right:0; top:calc(100% + 4px); display:flex; flex-direction:column; border:1px solid var(--line-2); border-radius:10px; background:var(--surface); box-shadow:0 10px 30px rgba(0,0,0,.16); overflow:hidden; }
  .pc-sugg[hidden] { display:none; }
  .pc-sugg-l { padding:11px 16px; border:0; border-bottom:1px solid var(--line); background:none; font:16px var(--sans); color:var(--ink); text-align:left; cursor:pointer; }
  .pc-sugg-l:last-child { border-bottom:0; }
  .pc-sugg-l b { color:var(--accent-ink); }
  .pc-sugg-l:hover, .pc-sugg-l[aria-selected="true"] { background:color-mix(in srgb, var(--accent) 9%, var(--surface)); }
  .pc-aide { margin:8px 0 0; font-size:14px; color:var(--ink-3); text-align:center; }
  .pc-ecrit-note { color:var(--ink-3); }
  @media (max-width:560px){
    .pc-son { padding:12px 14px; gap:12px; }
    .pc-jetons { flex-direction:column; align-items:stretch; gap:8px; }
    .pc-entr-bas .btn { width:100%; justify-content:center; }
  }
  @media (max-width:640px) {
    .qz-head { flex-direction:column; align-items:flex-start; }
    .qz-play-btn { width:68px; height:68px; font-size:28px; }
    .qz-stage { padding:24px 16px; }
  }

  .species-modal .sm-desc { font-size:13px; color:var(--ink-2); line-height:1.5; margin-top:12px; padding:12px 14px; background:var(--surface-2); border-left:3px solid var(--line-2); border-radius:0 8px 8px 0; min-height:80px; }
  .species-modal .sm-desc:empty { display:none; }
  .sm-desc-title { font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-3); margin-bottom:2px; }
  /* Portrait synthetique en tete : bloc distinct des sections Wikipedia */
  .sm-desc-portrait { padding:10px 12px; margin-bottom:12px; background:var(--surface); border-radius:8px; border:1px solid var(--line-2); }
  .sm-desc-portrait-title { font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--accent-ink); margin-bottom:6px; }
  .sm-desc-portrait p { margin:0; color:var(--ink); font-size:13.5px; line-height:1.55; }
  /* Accordeon sections Wikipedia (native <details>) */
  .sm-desc-section { margin:6px 0; border-bottom:1px solid var(--line-2); }
  .sm-desc-section:last-of-type { border-bottom:none; }
  .sm-desc-section > summary { cursor:pointer; padding:8px 0; font-weight:700; font-size:13px; color:var(--ink); list-style:none; display:flex; align-items:center; gap:6px; user-select:none; }
  .sm-desc-section > summary::-webkit-details-marker { display:none; }
  .sm-desc-section > summary::after { content:'▾'; margin-left:auto; color:var(--ink-3); font-size:11px; transition:transform .15s; }
  .sm-desc-section[open] > summary::after { transform:rotate(180deg); }
  .sm-desc-section > summary:hover { color:var(--accent-ink); }
  .sm-desc-section .sm-desc-icon { font-size:15px; }
  .sm-desc-section > p { margin:2px 0 10px; padding:0 4px 0 22px; color:var(--ink-2); font-size:13px; line-height:1.55; }
  .sm-desc-more { display:inline-block; margin-top:8px; font-size:11.5px; color:var(--accent-ink); text-decoration:none; font-weight:600; }
  .sm-desc-more:hover { text-decoration:underline; }
  .species-modal .sm-freq { margin-top:14px; }
  .species-modal .sm-freq-title { font-size:13px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.4px; margin:0 0 6px; font-weight:700; }
  .species-modal .sm-freq-src { text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink-3); font-size:11.5px; margin-left:6px; }
  .species-modal .sm-freq-chart-wrap { background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
  /* aspect-ratio = le viewBox que pose _renderFreqChart (W=520, H=130). Il disait 360/130 :
     la boite etait donc plus HAUTE que son dessin, et « meet » centrait les barres en
     laissant 48 px de vide - 24 au-dessus, 24 en dessous. C'est ce vide qui eloignait le
     graphique de la carte. */
  .species-modal .sm-freq-chart { width:100%; aspect-ratio:520/130; height:auto; display:block;
    overflow:visible; user-select:none; -webkit-user-select:none; }
  .species-modal .sm-freq-chart .bar { transition:opacity .15s; }
  .species-modal .sm-freq-chart .bar:hover { opacity:1 !important; }
  /* Les deux vues du panneau « Ou et quand la trouver » - la carte par zone et le
     calendrier - partagent le meme cadre gris : ce sont deux lectures d une seule mesure,
     pas deux encadres voisins. */
  .species-modal .sm-oq-bloc { background:var(--surface-2); border:1px solid var(--line);
    border-radius:10px; padding:8px 10px; }
  /* L'entete du bloc : le nom de la zone lue a gauche, les onglets a droite. Le nom etait
     dans la colonne des mois, large de 62 px, ou un « Provence-Alpes-Cote d'Azur » se
     coupait des la deuxieme syllabe ; ici il a toute la largeur. */
  /* Hauteur fixe : l'entete prenait QUATRE hauteurs selon ce qu'elle portait - 19,5 px avec
     les onglets, 13,6 px avec un jeton de statut seul, 10,5 px avec le nom nu. La pastille
     ANNEE de la colonne des mois, juste en dessous, tombait donc a trois endroits selon
     l'espece. 23 px, c'est la hauteur du cas le plus haut, les onglets : les quatre
     configurations tombent alors au meme pixel. */
  .species-modal .sm-oq-entete { display:flex; align-items:center; gap:8px; margin-bottom:8px;
    min-height:23px; }
  /* Le chiffre de l'entete : meme graisse que le nom de zone mais en encre normale, pour
     qu'il se lise comme sa valeur et non comme un second titre. */
  .species-modal .sm-oq-score { font:400 11.5px/1.3 var(--sans); color:var(--ink-3); white-space:nowrap; }
  /* Le nom de zone et le pourcentage ont le MEME corps : leurs boites de ligne sont donc
     identiques, et un simple centrage aligne d'un coup leurs milieux, leurs lignes
     d'ecriture et le centre du jeton de statut. C'est ce que l'alignement sur la ligne
     d'ecriture ne savait pas faire tant que les deux tailles differaient - et il avait en
     prime l'inconvenient de faire remonter le nom quand le pourcentage disparaissait. */
  .species-modal .sm-oq-zone { display:flex; align-items:center; gap:8px; min-width:0; }
  /* Meme corps que .sm-oq-score, a la graisse pres : les deux textes de l'entete se lisent
     sur une seule ligne d'ecriture et ne bougent plus l'un sans l'autre. */
  .species-modal .sm-oq-nom { font:700 11.5px/1.3 var(--sans); letter-spacing:.5px;
    text-transform:uppercase; color:var(--ink-3);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* La note de l'entete : en minuscules et en gris, elle se lit comme une precision du nom
     de zone et non comme un second titre. Elle s'efface si la place manque, le nom de zone
     passe avant. */
  .species-modal .sm-oq-note-zone { font:400 10.5px var(--sans); color:var(--ink-3);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  .species-modal .sm-oq-onglets { margin-left:auto; display:flex; gap:3px; flex:none; }
  /* Deux onglets, pas deux boutons : celui qui est actif est ENFONCE, l'autre se contente
     d'exister. Le gris plein dirait « cliquez-moi » des deux cotes. */
  .species-modal .sm-oq-onglet { border:1px solid transparent; background:none; cursor:pointer;
    font:600 11px var(--sans); color:var(--ink-3); padding:3px 9px; border-radius:7px; }
  .species-modal .sm-oq-onglet:hover { color:var(--ink); background:var(--surface); }
  .species-modal .sm-oq-onglet.on { background:var(--surface); border-color:var(--line);
    color:var(--ink); font-weight:700; box-shadow:0 1px 2px rgba(0,0,0,.06); }
  /* Quand les deux vues sont la, elles ne font qu'un seul cadre, sans rien entre elles :
     la carte perd ses arrondis du bas et sa bordure basse, le graphique perd ceux du
     haut et sa bordure haute. Une bande blanche entre deux encadres les faisait lire
     comme deux panneaux voisins, ce qu'ils ne sont plus ; le filet qui l'a d'abord
     remplacee disait encore la meme separation, en plus discret. */
  .species-modal .oq-deux .sm-oq-bloc {
    border-radius:10px 10px 0 0; border-bottom:0; }
  .species-modal .oq-deux .sm-freq-chart-wrap {
    border-radius:0 0 10px 10px; border-top:0; }
  /* Et une seule legende pour les deux, en bas du panneau : la cle des couleurs sur une
     ligne, la phrase qui dit la mesure en dessous. Elle remplace les trois qui
     coexistaient, dont deux portaient la meme palette. */
  .species-modal .sm-freq-legend { display:flex; flex-direction:column; gap:6px; margin-top:10px;
    font-size:11px; color:var(--ink-3); }
  .species-modal .sm-oq-cles { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
  .species-modal .sm-oq-note { font-size:10.5px; line-height:1.45; text-align:center; opacity:.9; }
  .species-modal .sm-freq-lg { display:inline-flex; align-items:center; gap:5px; }
  .species-modal .sm-freq-sw { width:10px; height:10px; border-radius:50%; display:inline-block; }
  .species-modal .sm-media { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
  .species-modal .sm-photo-wrap { width:100%; max-width:340px; margin:0 auto; background:var(--surface-2); border-radius:10px; overflow:hidden; }
  .species-modal .sm-photo { display:block; width:100%; height:auto; }
  .species-modal .sm-audio-wrap { display:flex; flex-direction:column; gap:6px; }
  .species-modal .sm-audio-row { display:flex; flex-direction:column; gap:3px; }
  .species-modal .sm-audio-lbl { font-size:11.5px; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.03em; }
  .species-modal .sm-audio { width:100%; }
  .species-modal .sm-audio-hint { font-size:12px; color:var(--ink-3); }
  .species-modal .sm-obs h3 { font-size:13px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.4px; margin:14px 0 6px; }
  .species-modal .sm-map-wrap { margin-top:14px; }
  /* Range map : filtre grayscale sur les tuiles OSM pour ne pas voler la vedette a la heatmap */
  .sm-range-map .leaflet-tile-pane { filter: grayscale(1) contrast(0.85) brightness(1.05); }
  .species-modal .sm-map-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 6px; flex-wrap:wrap; }
  .species-modal .sm-map-title { font-size:13px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.4px; font-weight:700; }
  .species-modal .sm-map-seg { font-size:12px; }
  .species-modal .sm-map-seg button { padding:4px 10px; font-size:12px; }
  .species-modal .sm-map { width:100%; height:340px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2); }
  .species-modal .sm-map-hint { font-size:11.5px; color:var(--ink-3); margin-top:4px; }
  .species-modal .sm-map-gbif-ctrl { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin:0 0 6px; }
  .species-modal .sm-map-gbif-ctrl[hidden] { display:none; }
  .species-modal .sm-map-gbif-ctrl label { display:inline-flex; align-items:center; gap:4px; }
  .species-modal .sm-map-gbif-ctrl label[hidden] { display:none; }
  .species-modal .sm-map-gbif-ctrl select, .species-modal .sm-map-gbif-ctrl input { font-size:12px; padding:2px 6px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink-2); }
  .species-modal .sm-map-gbif-ctrl input[type=number] { width:64px; }
  .species-modal .sm-obs ul { margin:0; padding-left:18px; font-size:13.5px; color:var(--ink-2); line-height:1.55; }
  .species-modal .sm-obs .help { margin:6px 0; font-size:13px; color:var(--ink-3); }
  .species-modal .sm-links { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
  .species-modal .sm-links a { padding:6px 12px; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; color:var(--ink); font-size:13px; text-decoration:none; }
  .species-modal .sm-links a:hover { background:color-mix(in srgb,var(--accent) 12%,var(--surface-2)); border-color:var(--accent); }
  .species-modal .sm-photo-credit { font-size:11px; color:var(--ink-3); margin-top:8px; text-align:right; }
  /* Nom d'oiseau cliquable : soulignement discret au hover */
  .sp-link { cursor:pointer; text-decoration:none; color:inherit; border-bottom:1px dashed transparent; }
  .sp-link:hover { border-bottom-color:currentColor; }
  /* Pas dans le classement : le pointille soulignait toute la case (photo comprise) et dessinait
     un arc sous les ronds des especes preferees (Mathis, 2026-10-22). La bordure reste
     transparente plutot que retiree, pour que la hauteur des lignes ne bouge pas. */
  .board-sheet .sp-link:hover { border-bottom-color:transparent; }
  .tab { position:relative; }
  /* Compteur "N nouveaux" positionne en haut a droite de l'onglet. Pour >99, affiche "99+". */
  .tab-count { position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#e74c3c; color:#fff; font:700 11px/18px var(--sans); text-align:center; box-sizing:border-box; font-variant-numeric:tabular-nums; }
  .import-guide { margin:12px 0 2px; font-size:14px; }
  .import-guide summary { cursor:pointer; font-weight:600; color:var(--accent-ink); }
  .import-guide ol { margin:9px 0 0; padding-left:20px; color:var(--ink-2); line-height:1.65; }
  .import-guide li { margin:3px 0; }
  /* Page Profil, la meme pour soi et pour les autres. Refaite DEUX fois le 2026-10-19 : la
     premiere version (tuiles, emojis devant chaque titre) ne ressemblait pas au reste du site.
     Celle-ci reprend ce qui existe deja : choix colles du Classement pour les onglets, parties
     a titre + note + filet des Trophees, tableau de Ma liste, cartes du Birdydex. Sans emoji.
     Tout ce qui se lit fait 14 px au moins. */
  .prof-tete { margin-top:12px; }
  /* L'en-tete est une carte : identite a gauche, bouton a droite (3e version, 2026-10-19 ; chiffres retires ensuite). */
  .prof-id { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px 22px; align-items:start;
    border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
  .prof-id-av .user-avatar { border:2px solid var(--line-2); }
  .prof-id-txt { min-width:0; }
  /* Nom, « toi » et « en ligne » en rangee : 3 px les separaient (Mathis : « trop colle »). */
  .prof-nom { display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; font:700 21px var(--titre); color:var(--ink); line-height:1.2; }
  .prof-nom .youtag { font-family:var(--sans); font-size:12px; margin:0; vertical-align:0; }
  .prof-enligne { font:600 13px var(--sans); color:var(--accent-ink); }
  .prof-enligne::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:#2ecc71; margin-right:5px; vertical-align:0; }
  .prof-statut { font-size:15px; color:var(--ink-2); margin-top:3px; }
  /* Champs libres : une ligne chacun, l'intitule en gris devant la valeur. */
  .prof-infos { margin:10px 0 0; display:grid; gap:3px; }
  .prof-infos > div { display:flex; gap:8px; min-width:0; font-size:15px; }
  .prof-infos dt { color:var(--ink-3); flex:0 0 auto; }
  .prof-infos dt::after { content:' :'; }
  .prof-infos dd { margin:0; color:var(--ink); font-weight:600; min-width:0; overflow-wrap:anywhere; }
  .prof-meta { font-size:14px; color:var(--ink-3); margin-top:10px; }
  .prof-id-droite { display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
  .prof-id-act { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  .prof-retirer { background:var(--surface); color:#b91c1c; border:1px solid #b91c1c; }
  @media (max-width:640px){
    .prof-id { grid-template-columns:auto minmax(0,1fr); padding:14px; }
    .prof-id-droite { grid-column:1 / -1; align-items:flex-start; }
    .prof-id-act { justify-content:flex-start; }
  }
  #profilTete + #profilEmpty + .profile { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
  .prof-favs-edit { margin-bottom:14px; }
  .prof-favs-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
  .prof-fav-chip { display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:600; color:var(--accent-ink);
    background:color-mix(in srgb,var(--accent) 12%,var(--surface)); border-radius:999px; padding:4px 6px 4px 12px; }
  .prof-fav-chip button { background:none; border:0; color:inherit; font-size:17px; line-height:1; padding:0 4px; cursor:pointer; border-radius:50%; }
  .prof-fav-chip button:hover { background:color-mix(in srgb,var(--accent) 22%,var(--surface)); }
  /* Onglets : les choix colles du Classement, a leur taille de controle (34 px). */
  .prof-onglets { display:inline-flex; margin-top:20px; max-width:100%; }
  .prof-onglets[hidden] { display:none; }
  /* Une partie d'onglet : titre, note, filet - le dessin des parties des Trophees. */
  .prof-partie { margin-top:22px; }
  .prof-partie-tete { padding:0 0 6px; margin-bottom:12px; border-bottom:1px solid var(--line); }
  .prof-partie-note { font-size:14px; color:var(--ink-3); margin:3px 0 0; }
  /* Especes preferees : les cases du Birdydex, en grand. */
  /* Cinq colonnes fixes : la vitrine occupe toute la largeur (« plus grandes », Mathis). */
  .prof-favs { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; }
  @media (max-width:900px){ .prof-favs { grid-template-columns:repeat(3, minmax(0,1fr)); } }
  .prof-fav-carte { position:relative; border:2px solid var(--line-2); background:var(--surface); border-radius:14px; padding:10px 10px 12px;
    cursor:pointer; text-decoration:none; color:inherit; transition:transform .1s, box-shadow .1s; }
  .prof-fav-carte:hover { transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.12); border-color:var(--accent); text-decoration:none; }
  .prof-fav-img { aspect-ratio:1/1; background:var(--surface-2); border-radius:10px; overflow:hidden; margin-bottom:10px; }
  .prof-fav-img img { width:100%; height:100%; object-fit:cover; display:block; }
  .prof-fav-tier { position:absolute; top:16px; right:16px; width:28px; height:28px; border-radius:50%; color:#fff; font:800 14px var(--sans);
    display:grid; place-items:center; z-index:1; padding-bottom:2px; }
  .prof-fav-nom { font:600 15px var(--sans); color:var(--ink); text-align:center; line-height:1.25; }
  .prof-fav-sci { font-size:14px; font-style:italic; color:var(--ink-3); text-align:center; margin-top:2px; }
  @media (max-width:560px){ .prof-favs { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; } }
  /* Dernieres coches : le tableau de Ma liste, sans sa hauteur maximale. */
  .prof-table { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .prof-table .mylist-loc img { width:20px; height:auto; vertical-align:-3px; margin-right:6px; border-radius:2px; }
  /* Pays et familles : une barre par ligne. */
  .prof-barres { display:flex; flex-direction:column; gap:10px; max-width:720px; }
  .prof-barre-ligne { display:grid; grid-template-columns:minmax(140px,240px) 1fr 64px; gap:12px; align-items:center; font-size:14px; }
  .prof-barre-nom { font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .prof-barre-nom img { width:20px; height:auto; vertical-align:-3px; margin-right:6px; border-radius:2px; }
  .prof-barre { height:9px; border-radius:5px; background:var(--line); overflow:hidden; }
  .prof-barre span { display:block; height:100%; background:var(--accent); border-radius:5px; }
  .prof-barre-n { text-align:right; color:var(--ink-2); font-variant-numeric:tabular-nums; }
  @media (max-width:560px){ .prof-barre-ligne { grid-template-columns:minmax(0,1fr) 70px 56px; } }
  /* Onglet Especes (2026-10-19) : sous-titres, regions, familles repliees au-dela de 12. */
  .prof-sous-titre { font:600 15px var(--sans); color:var(--ink-2); margin:22px 0 10px; }
  .prof-regions { display:flex; flex-wrap:wrap; gap:6px; }
  .prof-region { font-size:14px; padding:5px 12px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-3); }
  .prof-region.vue { background:color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color:transparent; color:var(--accent-ink); font-weight:600; }
  .prof-plus { margin-top:12px; max-width:720px; }
  .prof-plus summary { cursor:pointer; font-size:14px; font-weight:600; color:var(--accent-ink); padding:6px 0; }
  .prof-plus .prof-barres { margin-top:10px; }
  .st-barre-col > .st-barre[style*="background"]:hover { filter:brightness(.88); }
  #profilBlocs .st-barres { max-width:640px; }
  .prof-photos { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:12px; }
  .prof-photo-fig { margin:0; min-width:0; }
  .prof-photo { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; background:var(--surface-2); cursor:zoom-in; display:block; }
  .prof-photo-fig figcaption { font-size:14px; color:var(--ink-2); margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  @media (max-width:560px){ .prof-photos { grid-template-columns:repeat(2, minmax(0,1fr)); } }
  /* Onglet Statistiques du profil, en tableau de bord (2026-10-19) :
     la courbe a gauche, annees et mois a droite. Le texte des graphiques est en HTML (14 px
     ecrits au moins pour ce qui se lit), le SVG ne trace que les lignes. */
  #statsBox { margin:0; }
  .st-grille { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:0 32px; align-items:start; }
  @media (max-width:760px){ .st-grille { grid-template-columns:minmax(0,1fr); } }
  .st-courbe { padding-left:40px; }
  .st-plot { position:relative; height:300px; touch-action:pan-y; cursor:crosshair; }
  @media (max-width:560px){ .st-plot { height:220px; } }
  .st-plot svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
  .st-plot svg * { vector-effect:non-scaling-stroke; }
  .st-grille line { stroke:var(--line); stroke-width:1; }
  .st-grille .st-grille-an { stroke-dasharray:2 4; }
  .st-autre { fill:none; stroke:var(--ink-3); stroke-opacity:.35; stroke-width:1.5; }
  .st-autre.on { stroke:var(--ink); stroke-opacity:.9; stroke-width:2.5; }
  .st-aire { fill:color-mix(in srgb, var(--accent) 12%, transparent); stroke:none; }
  .st-lui { fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round; }
  .st-objectif { stroke:var(--accent-ink); stroke-width:1.5; stroke-dasharray:6 5; }
  .st-curseur { stroke:var(--ink-2); stroke-width:1; }
  .st-y { position:absolute; right:calc(100% + 8px); transform:translateY(50%); font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .st-objectif-lbl { position:absolute; left:6px; transform:translateY(-4px); font-size:13px; font-weight:600; color:var(--accent-ink);
    background:var(--surface); padding:0 4px; border-radius:4px; }
  .st-xaxe { position:relative; height:24px; margin-top:4px; }
  .st-x { position:absolute; top:0; transform:translateX(-50%); font-size:13px; color:var(--ink-3); }
  .st-bulle { position:absolute; top:6px; transform:translateX(12px); z-index:3; pointer-events:none; display:flex; flex-direction:column; gap:2px;
    background:var(--surface); border:1px solid var(--line-2); border-radius:9px; box-shadow:var(--shadow); padding:7px 10px; font-size:14px; color:var(--ink-2); white-space:nowrap; }
  .st-bulle[hidden] { display:none; }
  .st-bulle.a-gauche { transform:translateX(calc(-100% - 12px)); }
  .st-bulle b { color:var(--ink); }
  .st-bulle-date { font-size:13px; color:var(--ink-3); }
  .st-pastille { display:inline-block; width:10px; height:3px; border-radius:2px; background:var(--ink-3); vertical-align:4px; margin-right:6px; }
  .st-pastille.lui { background:var(--accent); }
  /* Barres verticales (annees, mois) : la plus haute en accent plein, les autres en accent pale. */
  .st-barres { position:relative; display:grid; grid-template-columns:repeat(var(--nb), minmax(0,1fr)); gap:4px; height:150px; align-items:end; }
  .st-barre-col { display:grid; grid-template-rows:20px 1fr 22px; height:100%; min-width:0; text-align:center; }
  .st-barre-val { font-size:13px; font-weight:700; color:var(--accent-ink); align-self:end; }
  .st-barre-col > .st-barre { align-self:end; display:block; width:100%; max-width:34px; margin:0 auto; border-radius:4px 4px 0 0;
    background:color-mix(in srgb, var(--accent) 38%, var(--surface)); }
  .st-barre-col > .st-barre.record { background:var(--accent); }
  .st-barre-col > .st-barre:hover { background:var(--accent-ink); }
  .st-barre-lbl { font-size:13px; color:var(--ink-3); padding-top:4px; overflow:hidden; white-space:nowrap; }
  .st-bulle-barre { top:-6px; transform:translate(-50%, -100%); }
  .st-bulle-barre.a-gauche { transform:translate(-50%, -100%); }
  /* Un nom de membre, cliquable partout ou il s'affiche : il garde l'apparence du texte
     qu'il remplace et ne se souligne qu'au survol. */
  .nom-profil { background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; text-align:inherit; }
  .nom-profil:hover { text-decoration:underline; }
  .nom-profil:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:3px; }
  .feed-l2 .nom-profil, .photo-meta .nom-profil { color:var(--ink); font-weight:600; }
  .photo-meta .nom-profil { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  .req-meta .nom-profil, .cp-modal-title .nom-profil { font-weight:700; }
  /* Onboarding vide (viewLoad quand pas encore de liste) */
  .onboarding { background:color-mix(in srgb,var(--accent) 8%,var(--surface-2)); border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line)); border-radius:14px; padding:16px 18px; margin:14px 0 6px; }
  .onboarding h3 { margin:0 0 8px; font-size:15px; color:var(--ink); }
  .onboarding ol { margin:0; padding-left:22px; color:var(--ink-2); font-size:13.5px; line-height:1.6; }
  .onboarding li { margin:5px 0; }
  .onboarding a { color:var(--accent-ink); text-decoration:underline; }
  .onboarding .obd-hint { font-size:12px; color:var(--ink-3); margin-top:10px; }
  /* Le fil, refait le 2026-10-14 sur la maquette A (notes-privees/maquettes/fil/) : rangé par
     jour, rareté en pastille numérotée, prénoms sans couleur (Mathis), réagir et commenter
     en deux icônes au bout de la ligne. */
  .feed-barre { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:6px 0 14px; }
  .feed-barre .seg { margin:0; }
  .feed-list { display:flex; flex-direction:column; }
  .feed-jour { font:600 14px var(--sans); color:var(--ink-3); margin:14px 0 0; padding-bottom:5px; border-bottom:1px solid var(--line); }
  .feed-list > .feed-jour:first-child { margin-top:0; }
  .feed-depuis { display:flex; align-items:center; gap:10px; font:600 14px var(--sans); color:var(--accent-ink); margin:4px 0 2px; }
  .feed-depuis::before, .feed-depuis::after { content:''; flex:1; height:1px; background:var(--accent); opacity:.6; }
  .feed-depuis-fin { color:var(--ink-3); margin-top:14px; }
  .feed-depuis-fin::before, .feed-depuis-fin::after { background:var(--line-2); opacity:1; }
  .feed-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:12px; padding:9px 2px; border-bottom:1px solid var(--line); }
  /* Chiffre blanc sur toutes les pastilles, comme partout ailleurs (Mathis, 2026-10-14). */
  .feed-pas { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:700 13px/1 var(--sans); color:#fff; padding-bottom:1px; }
  .feed-body { min-width:0; font-size:15px; color:var(--ink-2); }
  .feed-l1 { color:var(--ink); }
  .feed-sp { font-weight:600; }
  /* Un cran plus discret que --ink-3, demande par Mathis : 90 % garde 4,52:1 en clair et 5,05:1
     en sombre (85 % tombait a 4,04:1 en clair, sous le seuil de 4,5). */
  .feed-l1 .latin { font-size:14px; color:color-mix(in srgb, var(--ink-3) 90%, var(--surface)); }
  /* Prenom, drapeau, niveau, date : sans « · » entre eux mais plus espaces (Mathis, 2026-10-14). */
  .feed-l2 { margin-top:2px; font-size:14px; display:flex; flex-wrap:wrap; align-items:center; column-gap:14px; row-gap:2px; }
  .feed-l2 b { color:var(--ink); font-weight:600; }
  /* Le niveau dans sa couleur, comme avant la refonte (Mathis, 2026-10-14). */
  .feed-rar { font-weight:600; }
  /* Le pays de l'observation, en drapeau (Mathis, 2026-10-14). */
  .feed-pays .flag { vertical-align:-2px; }
  .feed-acts { display:flex; gap:2px; }
  .feed-act { position:relative; width:34px; height:34px; padding:0; border:none; border-radius:8px; background:transparent; color:var(--ink-3); display:grid; place-items:center; cursor:pointer; font:inherit; }
  .feed-act:hover { background:var(--surface-2); color:var(--accent-ink); }
  .feed-act svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .feed-n { position:absolute; right:0; bottom:1px; font:700 11px/1 var(--sans); color:var(--accent-ink); }
  /* Réactions posées et commentaires : sous le texte, et rien du tout quand il n'y en a pas. */
  .feed-suite { grid-column:2 / -1; }
  .feed-suite .react-bar:empty { display:none; }
  .feed-suite .react-bar { margin:6px 0 0; }
  .feed-suite .cmt-wrap { margin:0; }
  .feed-suite .cmt-summary { display:none; }
  .feed-suite .cmt-wrap[open] { margin-top:6px; }
  /* L'icone « réagir » garde la classe react-add (son clic ouvre les emojis) mais pas sa forme. */
  .feed-act.react-add { width:34px; height:34px; border:none; border-radius:8px; font-size:inherit; }
  .req-form { display:flex; gap:10px; margin:6px 0 16px; }
  .req-form textarea { flex:1; padding:10px 12px; border:1px solid var(--line-2); border-radius:10px; font:inherit; background:var(--surface); color:var(--ink); resize:vertical; min-height:44px; line-height:1.4; }
  .req-form textarea:focus { outline:3px solid var(--accent); outline-offset:1px; }
  .req-form .btn { align-self:flex-end; }
  .req-list { display:flex; flex-direction:column; gap:10px; }
  .req-item { display:flex; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); align-items:flex-start; }
  .req-item.done { opacity:.55; }
  .req-vote { display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:5px 10px; font:inherit; color:var(--ink-2); min-width:52px; flex:none; }
  .req-vote:hover { border-color:var(--accent); color:var(--accent-ink); }
  .req-vote.on { background:color-mix(in srgb, var(--accent) 20%, var(--surface)); border-color:var(--accent); color:var(--accent-ink); }
  .req-vote .n { font-size:15px; font-weight:700; }
  .req-vote .u { font-size:14px; }
  .req-body { flex:1; min-width:0; }
  .req-text { font-size:14px; color:var(--ink); line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
  .req-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; font-size:14px; color:var(--ink-3); }
  .req-status { font-size:13px; font-weight:700; padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.4px; }
  .req-status.todo { background:#e8eaee; color:#556; }
  .req-status.doing { background:#fff2cc; color:#7a5a00; }
  .req-status.done { background:#d4edda; color:#155724; }
  .req-status.select { cursor:pointer; border:1px solid transparent; }
  .req-status.select:hover { border-color:currentColor; }
  .req-del { background:none; border:none; color:var(--ink-3); cursor:pointer; font-size:11.5px; padding:0; }
  .req-del:hover { color:#c33; text-decoration:underline; }
  .map-controls { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; align-items:center; }
  /* Pastille de palier : UN seul format dans toute l'appli. Il en existait cinq (rond du
     birdydex, trois tailles de rectangle sur les fiches, pastille de la liste des zones),
     si bien que le meme chiffre changeait d'allure selon l'ecran ou on le lisait. La
     couleur reste porteuse du palier ; seule la taille varie, et elle garde les memes
     proportions. */
  /* Depliant des cartes de la fiche : l en-tete et le contenu ne faisaient que se suivre,
     chacun avec ses quatre coins arrondis et 6 px de vide entre eux - deux blocs poses cote
     a cote plutot qu un seul. Ouvert, l en-tete perd ses arrondis du bas et le corps ceux du
     haut, le corps colle a l en-tete et abandonne sa bordure haute : la bordure basse de
     l en-tete sert de separation. Ferme, l en-tete redevient une pastille autonome. */
  .sm-fold > summary { cursor:pointer; padding:6px 10px; border:1px solid var(--line-2);
    border-radius:8px; background:var(--surface-2, #fafafa); font-size:12px; color:var(--ink-2);
    user-select:none; }
  .sm-fold[open] > summary { border-radius:8px 8px 0 0; }
  .sm-fold-corps { padding:10px 12px; border:1px solid var(--line-2); border-top:0;
    border-radius:0 0 8px 8px; background:var(--surface-2, #fafafa); }
  /* Infobulle maison, en remplacement de celle du navigateur : arrondie, ombree, lisible,
     et qui apparait tout de suite au lieu d attendre une seconde. pointer-events:none pour
     qu elle ne vole jamais le survol a l element qui l a declenchee. */
  #tipbox { position:fixed; z-index:2147483647; pointer-events:none; opacity:0;
    transform:translateY(3px); transition:opacity .11s ease, transform .11s ease;
    max-width:280px; padding:7px 10px; border-radius:9px; background:rgba(62,76,72,.97);
    color:#fff; font:12px/1.45 var(--sans); box-shadow:0 6px 20px rgba(0,0,0,.28); }
  #tipbox.on { opacity:1; transform:translateY(0); }
  .rar-chips { display:inline-flex; gap:3px; flex-wrap:wrap; }
  /* Une seule declaration pour les deux : le chip de filtre du birdydex et la pastille de
     palier posee partout ailleurs. Elles etaient ecrites separement et avaient deja diverge
     - 800 12px contre 600 11px, et pas de bordure, donc une boite interieure de 24 px au
     lieu de 22. Partagees, elles ne peuvent plus. */
  /* Le padding-bas de 1px centre le CHIFFRE, pas sa boite de ligne. align-items ne sait
     centrer que la seconde, et avec line-height:1 sur une police dont l ascendante vaut
     12/11 em, l encre du chiffre tombait 1,5 px sous le centre de la pastille. La boite de
     ligne se deplace de (padding-haut - padding-bas)/2, il faut donc 1 px d ecart entre les
     deux. Mesure faite sur l encre reelle (canvas actualBoundingBox) : une mesure de la
     boite de ligne avait conclu l inverse et fait corriger dans le mauvais sens. */
  /* Le rond du birdydex a ete essaye ici (v492-v493) puis abandonne : garder le carre. */
  /* Plus aucun filet : la pastille est une surface pleine, comme le rond de la fiche. Le
     contour ne revient que sur un filtre DECOCHE, ou il sert a montrer qu'il y a un bouton. */
  .rar-chip, .tier-chip { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 5px 1px; border:0; background:var(--surface-2); color:var(--ink-3); border-radius:6px; font:600 12px/1 var(--sans); }
  /* Un carre reste un carre, meme a deux chiffres : « 10 » poussait sur son padding et
     sortait de la rangee. Largeur fixe pour tout ce qui porte un palier ; les libelles
     (« Tout », « Vide ») gardent leur padding, eux ne sont pas des carres. */
  /* Un carre de 22 px se cale sur la grille de pixels de l'ecran, et pas forcement pareil en
     largeur et en hauteur : mesure a zoom 1,07, on obtenait 24x24, 24x23, 24x24, 24x23... Des
     pastilles ni carrees ni egales entre elles.
     Meme remede que pour les barres : on peint une boite de taille double, ramenee de moitie
     par une transformation. Un element transforme est rasterise en sous-pixel au lieu d'etre
     cale sur la grille. Les marges negatives rendent a la mise en page les 22 px qu'elle
     attend, et l'alignement a droite de la colonne ne bouge pas. */
  .tier-chip, .rar-chip[data-tier], .rar-chip[data-rar], .rar-chip[data-cat] {
    width:44px; height:44px; min-width:0; margin:-11px; transform:scale(.5);
    border-radius:12px; font-size:24px; padding:0 0 2px; }
  /* Les filtres de statut exotique prennent le jeton rond du birdydex : ils ne designent
     pas un palier de l'echelle mais d'ou sort l'oiseau, et la forme le dit avant la
     lecture. Exactement la taille de .pkdx-exo, la pastille posee sur les vignettes -
     16 px et 9,5 px de corps : le filtre et ce qu'il filtre se ressemblent, ce qui n'etait
     pas le cas a 22 px, ou les ronds ecrasaient la rangee. Pas de boite doublee ici : le
     truc des marges negatives suppose une largeur fixe, et sur un disque le pixel
     d'arrondi ne se voit pas. */
  /* Le rembourrage de TOUS les ronds chiffres ou lettres vient du banc pastilles, qui mesure
     les PIXELS a 100, 125, 150 % et au doigt (2026-10-22). Les reglages d'avant venaient des
     metriques de la fonte lues dans un canvas : 0,145 em en bas laissait les chiffres 0,5 a
     2,2 px d'appareil trop haut. Le texte se cale sur la grille de pixels : un reglage ne
     bouge rien sous un certain seuil, puis saute d'un pixel. D'ou des px et non des em, et
     un pixel EN BAS pour les ronds de palier dessines au double puis reduits de moitie ; rien
     pour les jetons de statut a la souris, un pixel au doigt (regle pointer:coarse). Ecart restant :
     0,5 px a 100 %, ou aucun reglage ne fait mieux qu'un demi-pixel. */
  .rar-chip[data-cat], .pkdx-exo { width:32px; min-width:32px; height:32px; margin:-8px;
    transform:scale(.5); padding:0; border-radius:50%; font:700 19px/1 var(--sans); }
  /* Les paliers 0 a 10 prennent eux aussi le jeton rond des vignettes - .pkdx-tier, 20 px
     et corps 10 - au lieu du carre arrondi. La barre de filtres et la grille qu'elle
     filtre montrent desormais la meme piece. « Tout » et « Vide », qui sont des mots et
     non des paliers, gardent leur bouton rectangulaire. */
  .rar-chip[data-tier], .rar-chip[data-rar], .tier-chip.tier-rond {
    width:40px; min-width:40px; height:40px; margin:-10px;
    transform:scale(.5); padding:0 0 1px; border-radius:50%; font:800 20px/1 var(--sans); }
  /* Coche : l'ombre portee de la vignette remplace le filet du repos, comme pour X/P/N. */
  .rar-chip[data-tier].on, .rar-chip[data-rar].on { box-shadow:none; }
  /* Ils suivent « Tout » et « Vide » plutot que d'etre rejetes au bout de la rangee : le
     filet vertical suffit a dire qu'ils ne prolongent pas l'echelle des paliers, et ils
     restent pres des pastilles qu'ils filtrent. */
  .rar-cats { display:inline-flex; align-items:center; gap:6px; margin-left:2px; }
  .rar-sep { width:1px; align-self:stretch; min-height:16px; margin:0 6px 0 2px;
    background:var(--line-2); border-radius:1px; }
  /* Coche : meme ombre portee que la pastille du birdydex, au lieu du filet du repos. */
  .rar-chip[data-cat].on { box-shadow:none; }
  .rar-chip { cursor:pointer; box-shadow:inset 0 0 0 1px var(--line-2); }
  .rar-chip:hover { filter:brightness(0.97); }
  .rar-chip.on, .tier-chip { color:#fff; box-shadow:none; }
  .tier-chip { vertical-align:middle; font-variant-numeric:tabular-nums; }
  /* Variante ronde. Elle servait la seule ligne RARETE de la fiche espece ; le selecteur de
     rarete l a rejointe le 2026-09-26, pays et zones. 22 px et corps 12 - la largeur
     qu occupait le carre, pour que la colonne des paliers garde son rythme - avec l ombre
     portee du jeton de vignette mais sans son filet. Le carre reste partout ou les
     pastilles s alignent en colonnes, la ou le rond ferait des trous entre les lignes. */
  /* margin et transform remis a zero : la regle du carre au-dessus les pose, et le rond,
     seul sur sa ligne, n'a pas de voisin avec qui se comparer. */
  /* Taille et corps viennent de la declaration partagee avec .rar-chip[data-tier], plus
     haut. Ne reste ici que ce qui lui est propre. */
  .tier-chip.tier-rond { border:0; box-shadow:none; }
  /* Les filtres de rarete de « Qui a vu quoi » portent un MOT (« Tres commun », « Unique »),
     pas un chiffre : le jeton rond de 20 px ci-dessus les ecrasait en 17 px de large, texte
     deborde par-dessus les voisins (vu par Mathis le 2026-10-05). Ils redeviennent des
     etiquettes, a 14 px comme le reste du Classement. */
  #tierChips .rar-chip:not([data-rar]):not([data-cat]) { width:auto; min-width:0; height:auto; margin:0;
    transform:none; padding:6px 10px; border-radius:6px; font:600 14px/1.2 var(--sans); }
  /* Les ronds chiffres et X / P / N du Classement : « #viewRanking .rar-chip » (14 px, plus
     specifique) ecrasait le corps de la boite doublee, ramenee de moitie : 7 px ecrits, a
     peine lisibles (Mathis, 2026-10-22). On leur rend le corps du Birdydex, dont il veut la
     meme taille : rond de 20 px et corps 10 pour les paliers, 16 px et 9,5 pour X / P / N. */
  #tierChips .rar-chip[data-rar] { font-size:20px; }
  #tierChips .rar-chip[data-cat] { font-size:19px; }
  /* La colonne Rarete : le rond et les lettres cote a cote. Ils ne se touchent pas au doigt,
     ils gardent donc leur taille de souris sur ecran tactile, comme la vignette du Birdydex. */
  .rar-cell { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; }
  /* Dessines a leur taille, SANS la boite doublee ramenee de moitie (transform:scale) : dans une
     case figee, cette reduction faisait repeindre la case par morceaux pendant le defilement de
     cote - traits a moitie dessines, cases qui « se cassent et se reconstruisent » (Mathis,
     2026-10-22). Le gain de rondeur au sous-pixel ne se voit pas a cette taille. */
  /* Sans la boite doublee, le rembourrage BAS de 0,145 em regle pour elle remontait le texte :
     chiffres 1,3 a 1,5 px d'appareil trop haut en moyenne (jusqu'a 2,9), lettres 0,3 a 0,6,
     mesure au pixel sur la demo le 2026-10-22 (Mathis : « pas vraiment au centre »). Rembourrage
     HAUT de 0,1 em pour les chiffres et aucun pour les lettres : moyenne ramenee a 0,1 px (ecran
     a 125 %) et 0,4 px (100 %). Reste un pixel de jeu d'une ligne a l'autre, la ligne de base
     se calant sur la grille de pixels : will-change, qui le supprimait, dessinait chaque rond
     a part et bloquait l'affichage des centaines de lignes. */
  #matrix .rar-cell .tier-chip.tier-rond { width:20px; min-width:20px; height:20px; margin:0; transform:none; font-size:10px; min-height:0; padding:0.1em 0 0; }
  #matrix .rar-cell .pkdx-exo { width:16px; min-width:16px; height:16px; margin:0; transform:none; font-size:9.5px; padding:0 0 0.5px; }
  /* Retire les flèches spinner natives sur #mapEbMinTodo (on a nos propres boutons +/-) */
  #mapEbMinTodo::-webkit-outer-spin-button, #mapEbMinTodo::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
  .map-count { margin-left:auto; font-size:12.5px; color:var(--ink-3); font-weight:600; }
  .map-el { height:min(760px, 78vh); min-height:520px; width:100%; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2); }
  .map-el .leaflet-popup-content { font:inherit; font-size:13px; line-height:1.45; color:var(--ink); margin:8px 12px; }
  .map-el .leaflet-popup-content b { color:var(--ink); }
  .map-el .leaflet-popup-content .p-sci { font-style:italic; color:var(--ink-3); font-size:11.5px; }
  .map-el .leaflet-popup-content .p-meta { display:block; margin-top:3px; font-size:11.5px; color:var(--ink-3); }
  .map-el .leaflet-popup-content .p-meta-first { display:block; margin-top:3px; }
  .map-el .leaflet-popup-content .p-nl { display:block; margin-top:3px; }
  .map-el .leaflet-popup-content .p-head { margin-bottom:6px; }
  .map-el .leaflet-popup-content .p-list { list-style:none; padding:0; margin:0; max-height:220px; overflow-y:auto; }
  .map-el .leaflet-popup-content .p-list li { display:flex; align-items:baseline; gap:6px; padding:3px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
  .map-el .leaflet-popup-content .p-list li:last-child { border-bottom:none; }
  .map-el .leaflet-popup-content .p-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; align-self:center; box-shadow:0 0 0 1.5px #fff, 0 0 0 2px rgba(0,0,0,.15); }
  .map-el .map-count-lbl { display:flex; align-items:center; justify-content:center; font:700 11px/1 var(--sans), sans-serif; color:#fff; text-shadow:0 0 3px rgba(0,0,0,.5); pointer-events:none; background:transparent; border:none; }
  .map-el .leaflet-popup-content .p-link { display:inline-block; margin-top:6px; font-size:12px; color:var(--accent-ink); text-decoration:none; font-weight:600; }
  .map-el .leaflet-popup-content .p-link:hover { text-decoration:underline; }
  .map-el .leaflet-popup-content .p-btn { display:inline-flex; align-items:center; gap:4px; margin:6px 6px 0 0; padding:3px 8px; font-size:11.5px; font-weight:600; text-decoration:none; border-radius:6px; border:1px solid transparent; white-space:nowrap; }
  .map-el .leaflet-popup-content .p-btn:hover { filter:brightness(1.05); text-decoration:none; }
  .map-el .leaflet-popup-content .p-btn.pl-gmaps { background:#e9f2e2; border-color:#b6d3a3; color:#2e5b1a; }
  .map-el .leaflet-popup-content .p-btn.pl-transit { background:#fdecc8; border-color:#f0c977; color:#7a4d0f; }
  .map-el .leaflet-popup-content .p-btn.pl-ebird { background:#dfe9ee; border-color:#a3bdc9; color:#0b3d55; }
  .map-el .leaflet-popup-content .hs-cnt { font-size:11px; font-weight:600; color:#5a6b6a; margin-left:4px; white-space:nowrap; }
  .map-el .leaflet-popup-content .hs-cnt.loading { color:#8fa19f; font-style:italic; }
  .map-el .leaflet-popup-content .hs-cnt.hot { color:#0b7c77; }
  .map-el .leaflet-popup-content .p-sci { font-size:11px; color:var(--ink-3); font-style:italic; margin-left:auto; }
  .map-el .leaflet-popup-content details.hs-miss { margin-top:6px; font-size:12px; }
  .map-el .leaflet-popup-content details.hs-miss summary { cursor:pointer; font-weight:600; color:var(--accent-ink); padding:4px 0; user-select:none; }
  .map-el .leaflet-popup-content details.hs-miss summary:hover { text-decoration:underline; }
  .map-el .leaflet-popup-content details.hs-miss[open] summary { margin-bottom:4px; }
  .map-el .leaflet-popup-content .hs-fav { border:none; background:transparent; cursor:pointer; font-size:18px; padding:0 2px; color:#c9b039; vertical-align:middle; line-height:1; }
  .map-el .leaflet-popup-content .hs-fav.on { color:#f4b400; }
  .map-el .leaflet-popup-content .hs-fav:hover { transform:scale(1.15); }
  .map-el .leaflet-popup-content .hs-hint { font-size:10.5px; color:var(--ink-3); margin:0 0 4px; font-style:italic; }
  .map-el .leaflet-popup-content .hs-pct { font-size:11.5px; font-weight:700; color:var(--accent-ink); white-space:nowrap; margin-left:auto; }
  .map-el .map-legend { background:rgba(255,255,255,.95); border-radius:9px; padding:10px 12px; box-shadow:0 1px 4px rgba(0,0,0,.15); font-size:14px; line-height:1.4; color:#15201e; max-height:calc(100% - 40px); overflow-y:auto; }
  .map-el .map-legend .ml-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-bottom:7px; color:#47534f; }
  .map-el .map-legend .ml-row { display:flex; align-items:center; gap:7px; padding:2px 0; }
  .map-el .map-legend .ml-dot { width:12px; height:12px; border-radius:50%; flex:none; border:1.5px solid #fff; box-shadow:0 0 0 .5px rgba(0,0,0,.2); }
  .map-el .map-legend .ml-row { align-items:center; }
  .map-el .map-legend .ml-txt { white-space:nowrap; }
  .map-el .leaflet-control-layers { background:rgba(255,255,255,.95); border-radius:8px; padding:4px 8px; font-size:12px; font-weight:600; }
  .map-el .leaflet-control-layers label { display:flex; align-items:center; gap:4px; margin:2px 0; }
  /* Leaflet mesure la carte à l'ouverture : encore pliée (hauteur 0), il juge Plan / Satellite trop haut,
     lui fixe une hauteur et une barre de défilement à flèches qui ne servent à rien (Mathis, 2026-10-28). */
  .map-el .leaflet-control-layers-scrollbar { overflow:visible; padding-right:0; height:auto !important; }
  .map-el .map-custom-btn a { width:30px; height:30px; line-height:30px; text-align:center; font-size:16px; text-decoration:none; color:#333; background:#fff; display:block; }
  .map-el .map-custom-btn a:hover { background:#f4f4f4; }
  .map-stats { margin-top:10px; font-size:14px; color:var(--ink-2); padding:6px 10px; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; display:inline-block; }
  .map-stats .muted { color:var(--ink-3); }
  .map-timeline { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px; padding:8px 12px; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; }
  .map-timeline .tl-sliders { display:flex; align-items:center; gap:6px; flex:1; min-width:220px; }
  .map-timeline input[type=range] { flex:1; min-width:80px; accent-color:var(--accent); }
  .map-timeline .tl-lbl { font-size:11.5px; color:var(--ink-3); font-weight:600; }
  .map-timeline .tl-label { font-size:12px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; min-width:170px; text-align:center; }
  .map-timeline select { padding:5px 8px; font-size:12px; }
  .map-mode { margin:2px 0 10px; flex-wrap:wrap; }
  .map-mode button { flex:1 1 auto; min-width:120px; }
  .map-search { display:flex; align-items:center; gap:8px; margin:0 0 10px; }
  .map-search-input-wrap { position:relative; flex:1; }
  .map-search input { width:100%; box-sizing:border-box; padding:8px 12px; border:1px solid var(--line-2); border-radius:10px; font:inherit; background:var(--surface); color:var(--ink); }
  .map-search input:focus { outline:3px solid var(--accent); outline-offset:1px; }
  .map-search-count { font-size:12px; color:var(--ink-3); font-weight:600; min-width:80px; }
  .map-search-suggest { position:absolute; top:100%; left:0; right:0; margin-top:4px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.14); display:none; max-height:min(60vh, 480px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; z-index:2000; }
  .map-search-suggest.open { display:block; }
  .map-search-suggest-item { padding:8px 12px; cursor:pointer; font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); }
  .map-search-suggest-item:last-child { border-bottom:none; }
  .map-search-suggest-item.active, .map-search-suggest-item:hover { background:color-mix(in srgb, var(--accent) 14%, var(--surface)); color:var(--accent-ink); }
  .map-search-suggest-item .ss-dot { width:10px; height:10px; border-radius:50%; flex:none; box-shadow:0 0 0 1.5px #fff, 0 0 0 2px rgba(0,0,0,.15); }
  .map-search-suggest-item .ss-sci { font-size:11.5px; color:var(--ink-3); font-style:italic; margin-left:auto; }
  .map-search-suggest-item .ss-hint { font-size:10px; color:var(--ink-3); }
  .explorer-lbl { font-size:14px; font-weight:600; color:var(--ink-3); }
  /* Dans la barre de la Carte, le mot ENVELOPPE son reglage : ils forment un seul element
     de la rangee et ne peuvent donc plus se separer au passage a la ligne. Avant, « Source »
     finissait une ligne et ses deux boutons commencaient la suivante, et les coupures
     changeaient avec la largeur de la fenetre.
     La regle est limitee a .map-controls : .explorer-lbl sert AUSSI aux reglages du quiz,
     ou .qz-settings lui donne une colonne. */
  .map-controls .explorer-lbl { display:inline-flex; align-items:center; gap:6px; }

  /* ---- Carte, refonte « direction A » (2026-10-23) ----
     Maquette choisie par Mathis : notes-privees/maquettes/carte/finale.html. Une grande carte à
     couches, un panneau de zone à onglets à droite, qui devient un tiroir posé sur la carte au
     téléphone. Les commandes d'avant sont rangées dans les onglets, sans changer leur style. */
  .ct-phrase { font-size:14px; color:var(--ink-3); margin:2px 0 0; }
  .ct-page .map-search { margin:12px 0 0; }
  .ct-page .map-search input { height:34px; padding:0 12px 0 34px; font-size:14px;
    background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238b9c97' stroke-width='1.8'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E") no-repeat 11px 50%; }
  .ct-page .map-search-count:empty { display:none; }
  .ct-couches { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .ct-couche { height:34px; display:inline-flex; align-items:center; gap:7px; padding:0 14px 0 11px; border-radius:17px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font:600 14px var(--sans); cursor:pointer; white-space:nowrap; }
  .ct-couche svg { width:16px; height:16px; flex:none; }
  .ct-couche[aria-pressed="true"] { border-color:var(--accent); color:var(--accent-ink); box-shadow:inset 0 0 0 1px var(--accent); background:color-mix(in srgb, var(--accent) 7%, var(--surface)); }
  .ct-couche[aria-pressed="false"] svg, .ct-couche[aria-pressed="false"] .ct-pt { opacity:.45; }
  .ct-couche .ct-pt svg { opacity:1; }
  .ct-corps { display:grid; grid-template-columns:minmax(0,1fr) 410px; gap:14px; margin-top:12px; align-items:start; }
  .ct-carte-bloc { min-width:0; }
  /* isolation : Leaflet empile ses calques de 400 à 1 000 ; sans ce cadre, la carte passait par-dessus
     l'entête collant de l'appli (.entete-fixe, 60) en faisant défiler. */
  .ct-carte { position:relative; isolation:isolate; height:640px; border-radius:12px; overflow:hidden; border:1px solid var(--line-2); background:var(--surface-2); }
  .ct-carte .map-el { position:absolute; inset:0; height:auto; min-height:0; border:0; border-radius:0; }
  /* Le navigateur entourait d'un cadre noir la forme qu'on venait de cliquer (son anneau de focus) :
     sur un département, un grand rectangle (remarque de Mathis, 2026-10-23). Ces formes ne se
     choisissent qu'à la souris ou au doigt ; au clavier, la zone se choisit par les menus du Récent. */
  .ct-carte path.leaflet-interactive { outline:none; }
  /* Les points de la ligue et du récent (planche symboles.html, choix de Mathis, 2026-10-23) : une
     pastille à la couleur de la rareté, l'initiale de l'ami ou un œil dedans ; et les grappes,
     cerclées de l'anneau des raretés de leurs points. Les chiffres et lettres des pastilles rondes
     gardent le 800 de la charte. */
  .ct-pt { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
    color:#fff; font:800 12px/1 var(--sans); border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.35); }
  .ct-pt svg { width:13px; height:13px; }
  .ct-pt-ico, .ct-gr-ico { background:none; border:0; }
  /* La liste d'une grappe cliquée (direction 4 de la maquette spirale, 2026-10-24) : une ligne par
     espèce, la plus rare en haut, qui ouvre la fiche. */
  .ct-gl .leaflet-popup-content-wrapper { background:var(--surface); color:var(--ink); border-radius:10px; padding:0; }
  .ct-gl .leaflet-popup-tip { background:var(--surface); }
  /* Un rembourrage, pas une marge : sans rembourrage au cadre, la marge du haut le traversait, le cadre
     commençait 10 px plus bas, le titre touchait son bord et la croix en sortait (2026-10-26). */
  .ct-gl .leaflet-popup-content { margin:0; padding:10px 0 8px; font:14px/1.35 var(--sans); }
  /* « .leaflet-container a.leaflet-popup-close-button » de Leaflet passait devant : la croix
     dépassait du cadre de 8 px (Mathis, 2026-10-26). */
  .leaflet-container .ct-gl a.leaflet-popup-close-button { top:4px; right:4px; }
  /* .ct-gl devant : la règle « .leaflet-popup-content p » de Leaflet l'emportait sur la marge. */
  .ct-gl .ct-gl-t { margin:0 28px 6px 12px; color:var(--ink-3); font-size:14px; }
  .ct-gl-liste { max-height:270px; overflow:auto; overscroll-behavior:contain; }
  .ct-gl-l { display:flex; align-items:center; gap:8px; width:100%; padding:5px 12px; border:0; background:none;
    font:inherit; color:var(--ink); text-align:left; cursor:pointer; }
  .ct-gl-l:hover, .ct-gl-l:focus-visible { background:var(--surface-2); }
  .ct-gl-l .tier-chip, .ct-gl-l .pkdx-exo { flex:none; }
  .ct-gl-l .pkdx-exo { width:16px; min-width:16px; height:16px; margin:0; transform:none; font-size:9.5px; padding:0 0 0.5px; }
  .ct-gl-nom { min-width:0; }
  /* Qui l'a vue, pour la ligue (2026-10-26) : à droite du nom, en gris comme « ×N ». */
  /* Un nom trop long finit en « … » plutôt que de serrer le nom de l'oiseau (2026-10-28). */
  .ct-gl-qui { margin-left:auto; padding-left:8px; color:var(--ink-3); white-space:nowrap;
    flex:none; max-width:9em; overflow:hidden; text-overflow:ellipsis; }
  /* Une ligne : le nom (ouvre la fiche) et, à droite, « ×N ▾ » qui déplie les observations. */
  .ct-gl-e { display:flex; align-items:stretch; }
  /* Qui l'a vue colle à la flèche : 20 px les séparaient, le nom flottait au milieu (Mathis, 2026-10-28). */
  .ct-gl-e .ct-gl-l { flex:1; min-width:0; padding-right:2px; }
  .ct-gl-n { flex:none; border:0; background:none; font:inherit; color:var(--ink-3); padding:5px 12px 5px 4px; cursor:pointer; white-space:nowrap; }
  .ct-gl-n:hover, .ct-gl-n:focus-visible { background:var(--surface-2); color:var(--ink); }
  .ct-gl-n[aria-expanded="true"] span { display:inline-block; transform:rotate(180deg); }
  .ct-gl-obs { list-style:none; margin:0 0 4px; padding:0 12px 0 38px; color:var(--ink-2); font-size:14px; }
  .ct-gl-obs li { padding:3px 0; border-top:1px solid var(--line); }
  /* La bulle d'un hotspot, dans le cadre de la liste d'une grappe (variante A, 2026-10-29) : le nom du lieu
     et son étoile en tête, deux lignes grises, puis une ligne par espèce avec sa dernière date à droite. */
  .ct-gl.ct-hb .ct-hb-t { margin:0 28px 2px 12px; font-weight:600; }
  .ct-gl.ct-hb .ct-hb-s { margin-bottom:2px; }
  .ct-gl.ct-hb .ct-hb-s:last-of-type { margin-bottom:6px; }
  .ct-gl.ct-hb .hs-fav { font-size:16px; padding:0 2px; vertical-align:-1px; }
  .ct-hb-vu { margin-left:auto; padding-left:8px; color:var(--ink-3); white-space:nowrap; }
  .ct-hb-vu.hot { color:var(--accent); }
  .ct-hb-vu:empty { display:none; }
  /* « Non observées » éteint : une espèce déjà vue par toi, nom gris et pastille pâlie, à sa place
     (variante A de notes-privees/maquettes/hotspot-bulle/deja-vues.html, Mathis, 2026-10-29). */
  .ct-gl.ct-hb .ct-hb-deja .ct-gl-nom { color:var(--ink-3); }
  .ct-gl.ct-hb .ct-hb-deja .tier-rond { opacity:.4; }
  /* Vues ici ces 30 jours, puis les autres repliées (variante B, 2026-10-29). */
  .ct-gl.ct-hb .ct-hb-it { margin:2px 12px 2px; font-weight:600; color:var(--ink-2); }
  .ct-hb-it span { font-weight:400; color:var(--ink-3); }
  .ct-hb-pli { display:flex; align-items:center; gap:6px; width:100%; margin-top:4px; padding:7px 12px; border:0; border-top:1px solid var(--line);
    background:none; font:inherit; color:var(--ink-2); text-align:left; cursor:pointer; }
  .ct-hb-pli:hover, .ct-hb-pli:focus-visible { background:var(--surface-2); color:var(--ink); }
  .ct-hb-pli span { color:var(--ink-3); }
  .ct-hb-pli[aria-expanded="true"] span { display:inline-block; transform:rotate(180deg); }
  .ct-hb-autres[hidden] { display:none; }
  .ct-gl-obs .ct-gl-lieu { color:var(--ink-3); border-top:0; }
  .ct-gl-obs[hidden] { display:none; }
  /* Plusieurs observations de l'espèce au même endroit : leur nombre en bas à droite du point (2026-10-24). */
  .ct-pt-ico .ct-pt { position:relative; }
  /* Accroché par la gauche : il s'allonge vers la droite. Par la droite, « 21 » glissait sous le point
     (Mathis, 2026-10-28). À un chiffre (14 px), même place qu'avant. */
  .ct-pt-nb { position:absolute; left:calc(100% - 7px); bottom:-6px; min-width:14px; height:14px; padding:0 3px; box-sizing:border-box;
    border-radius:7px; background:var(--ink); color:var(--surface); font:700 10px/14px var(--sans); text-align:center; pointer-events:none; }
  .ct-pt-ico:focus:not(:focus-visible), .ct-gr-ico:focus:not(:focus-visible) { outline:none; }
  /* Les hotspots (étape 3 de la refonte, maquette proto.html) : un carré arrondi bordé de l'accent,
     qui porte le nombre d'espèces à cocher. Un favori prend un bord doré, comme le rond doré d'avant. */
  .ct-hs-ico { background:none; border:0; }
  .ct-hs-ico:focus:not(:focus-visible) { outline:none; }
  .ct-hs { display:flex; align-items:center; justify-content:center; width:100%; height:100%; box-sizing:border-box;
    background:var(--surface); border:2px solid var(--accent); border-radius:7px; color:var(--accent-ink);
    font:800 14px/1 var(--sans); padding-bottom:1px; box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:pointer; }
  /* Les cinq crans du fond, du moins au plus à cocher (direction 2 de la maquette hotspots-taille,
     2026-10-27). Contraste du chiffre mesuré sur les couleurs de la charte : en clair, l'encre sur
     les pâles, le blanc sur l'accent (5:1) et l'accent foncé (7,8:1) ; en sombre, l'accent est clair,
     donc le chiffre prend le fond sombre (var(--surface) vaut le blanc en clair). */
  .ct-hs.ct-hs-c1 { background:color-mix(in srgb, var(--accent) 18%, var(--surface)); color:var(--ink); }
  .ct-hs.ct-hs-c2 { background:color-mix(in srgb, var(--accent) 40%, var(--surface)); color:var(--ink); }
  .ct-hs.ct-hs-c3 { background:var(--accent); color:var(--surface); }
  .ct-hs.ct-hs-c4 { background:var(--accent-ink); border-color:var(--accent-ink); color:var(--surface); }
  .ct-leg-crans { display:inline-flex; gap:3px; }
  .ct-leg-crans .ct-hs.ct-hs-sym { width:20px; height:18px; }
  .ct-hs.ct-hs-fav { border-color:#f4b400; box-shadow:0 0 0 1.5px #f4b400, 0 1px 4px rgba(0,0,0,.25); }
  .ct-hs.ct-hs-sym { display:inline-flex; width:28px; height:22px; flex:none; cursor:default; }
  /* Les réserves (2026-10-29) : une couleur par type, choisie par Mathis sur notes-privees/maquettes/reserves/
     (nationale vert foncé, régionale vert clair, Conservatoire bleu), éclaircies en sombre sur le plan inversé.
     La couleur passe par CSS, pas par le style Leaflet : elle suit le thème sans redessiner. */
  :root { --res-RNN:#2f6a2b; --res-RNR:#6f9a2e; --res-CDL:#2f7f9a; }
  :root[data-theme="dark"] { --res-RNN:#6fbf5f; --res-RNR:#b5d35a; --res-CDL:#5fb6d4; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --res-RNN:#6fbf5f; --res-RNR:#b5d35a; --res-CDL:#5fb6d4; } }
  .ct-res { fill-opacity:.28; stroke-opacity:.95; stroke-width:1.5px; }
  .ct-res-RNN { fill:var(--res-RNN); stroke:var(--res-RNN); }
  .ct-res-RNR { fill:var(--res-RNR); stroke:var(--res-RNR); }
  .ct-res-CDL { fill:var(--res-CDL); stroke:var(--res-CDL); }
  .ct-res.ct-res-p { fill-opacity:0; stroke-dasharray:5 4; }
  .ct-couche[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
  .ct-res-sym { fill:color-mix(in srgb, var(--res-RNN) 35%, var(--surface)); stroke:var(--res-RNN); stroke-width:2; }
  .ct-gl.ct-rb .ct-hb-it { margin-top:8px; }
  .ct-rb-liste { max-height:270px; overflow:auto; overscroll-behavior:contain; }
  .ct-rb-h { display:flex; align-items:center; gap:8px; width:100%; padding:5px 12px; text-align:left; color:var(--ink); white-space:normal; }
  .ct-rb-h .ct-gl-nom { flex:1; }
  /* La règle des .ct-gl-n retourne tous leurs span une fois dépliés : seule la flèche ici. */
  .ct-rb-h[aria-expanded="true"] span { transform:none; }
  .ct-rb-h[aria-expanded="true"] .ct-rb-fl { transform:rotate(180deg); }
  .ct-rb-fl { color:var(--ink-3); }
  .ct-rb-h .ct-hs.ct-hs-sym { width:auto; min-width:28px; padding:0 4px; cursor:inherit; }
  .ct-rb-esp { max-height:none; padding-left:20px; border-bottom:1px solid var(--line); }
  .ct-rb-esp[hidden] { display:none; }
  .ct-gl.ct-rb .ct-rb-lien { margin:8px 12px 0; }
  .ct-gl.ct-rb .ct-rb-lien a { color:var(--accent-ink); }
  .ct-rang .ct-hs-etoile { color:#f4b400; }
  .ct-rang-hs .droite b { color:var(--ink); font-size:15px; }
  .ct-gr { display:flex; align-items:center; justify-content:center; border-radius:50%; padding:5px; box-sizing:border-box; box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer; }
  /* Le nombre se recentre sur son encre : sans rembourrage il tombait 0,6 à 2 px d'appareil trop bas
     (banc pastilles, 2026-10-23). Le rembourrage déplace le centre de sa moitié. */
  .ct-gr span { width:100%; height:100%; border-radius:50%; background:var(--surface); color:var(--ink); display:flex; align-items:center; justify-content:center; font:800 13px/1 var(--sans); box-sizing:border-box; padding-bottom:1.5px; }
  .ct-pt.ct-pt-sym { width:18px; height:18px; font-size:10px; border-width:1.5px; flex:none; }
  .ct-pt.ct-pt-sym svg { width:11px; height:11px; }
  /* L'initiale se recentre sur son encre, mesurée au pixel par le banc pastilles (2026-10-23) :
     sur la carte elle tombait 0,3 px CSS trop bas, dans le symbole 0,5 px trop haut. Un rembourrage
     déplace le centre de sa moitié. */
  .ct-pt.ct-pt-lettre { padding-bottom:.6px; }
  .ct-pt.ct-pt-lettre.ct-pt-sym { padding-bottom:0; padding-top:1px; }
  /* L'initiale dessinée en SVG (app.js, _ctLettreDessinee) : placée au calcul, sans rembourrage. */
  .ct-pt.ct-pt-dessine { padding:0; }
  .ct-pt svg.ct-pt-dessin { width:18px; height:18px; flex:none; }
  .ct-pt-dessin text { font:800 12px var(--sans); fill:#fff; }
  /* Le symbole œil, dessiné d'un bloc (app.js, _ctSymbole) : l'ombre de la pastille en filtre. */
  .ct-sym-oeil { flex:none; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3)); }
  .ct-gr.ct-gr-sym { width:20px; height:20px; padding:3px; flex:none; cursor:default; }
  .ct-gr.ct-gr-sym span { font-size:9px; padding-bottom:0; }   /* le symbole de légende garde son réglage d'avant */
  /* Le survol d'un point ou d'une grappe : ce qu'il y a, sans cliquer (2026-10-23). 14 px au moins,
     ce qui se lit ne descend pas en dessous. */
  .leaflet-tooltip.ct-sv { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:8px;
    box-shadow:var(--shadow); padding:7px 10px; font:400 14px/1.35 var(--sans); white-space:normal; width:max-content; max-width:280px; }
  .leaflet-tooltip-top.ct-sv::before { border-top-color:var(--surface); }
  .leaflet-tooltip-bottom.ct-sv::before { border-bottom-color:var(--surface); }
  .ct-sv .ct-sv-t { display:block; color:var(--ink-3); margin-bottom:4px; }
  /* Le mois d'un hotspot, après son nom : un gris plus pâle que le nom, déjà gris, pour s'en détacher. */
  .ct-sv .ct-sv-mois { margin-left:4px; color:color-mix(in srgb, var(--ink-3) 85%, var(--surface)); }
  .ct-sv .ct-sv-l { display:flex; align-items:center; gap:7px; }
  .ct-sv .ct-sv-l + .ct-sv-l { margin-top:3px; }
  .ct-sv .ct-sv-l b { font-weight:600; color:var(--ink); }
  .ct-sv .tier-chip { flex:none; }
  /* Le statut exotique (X, P, N) dans le survol et la liste du Récent : la variante 16 px non réduite
     de la colonne Rareté (#matrix .rar-cell, centrage mesuré par le banc pastilles). Le jeton réduit
     de moitié des vignettes, posé dans une ligne de texte, débordait sur ses voisins. */
  .ct-sv .pkdx-exo, .ct-rang .pkdx-exo { width:16px; min-width:16px; height:16px; margin:0; transform:none; font-size:9.5px; padding:0 0 0.5px; flex:none; }
  /* Centré sur la ligne du nom, comme le rond de palier de la ligne (mesuré sur la vraie liste, 2026-10-23).
     À -3px, il tombait 4,8 px d'écran trop bas : « pas aligné ». 2,5 et non 2 : au doigt, l'encre de la
     lettre restait mieux centrée dans son rond (banc pastilles). */
  .ct-rang .pkdx-exo { display:inline-grid; vertical-align:2.5px; margin-left:4px; }
  .ct-sv .ct-sv-n { color:var(--ink-3); margin-left:auto; padding-left:8px; }
  .ct-sv .ct-sv-d { display:block; color:var(--ink-3); margin-top:2px; }
  .ct-carte .ct-legende .ct-leg-formes { display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
  .ct-carte .ct-legende .ct-leg-formes .ml-row { display:flex; align-items:center; gap:7px; }
  /* Les animations des grappes (réécrites d'après MarkerCluster.css, sans charger la feuille). */
  .leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow { transition:transform .3s ease-out, opacity .3s ease-in; }
  .leaflet-cluster-spider-leg { transition:stroke-dashoffset .3s ease-out, stroke-opacity .3s ease-in; }
  @media (prefers-reduced-motion: reduce) {
    .leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow, .leaflet-cluster-spider-leg { transition:none; } }
  /* En sombre, le plan OpenStreetMap est inversé, sinon il éblouit au milieu de la page (choix de
     Mathis sur la maquette). La vue satellite, elle, garde ses couleurs. */
  :root[data-theme="dark"] .ct-carte .ct-fond-plan { filter:invert(1) hue-rotate(180deg) grayscale(.55) brightness(.82) contrast(.9); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ct-carte .ct-fond-plan { filter:invert(1) hue-rotate(180deg) grayscale(.55) brightness(.82) contrast(.9); } }
  /* Les contours des pays et des zones portent un liseré de la couleur de la page : il les détache du
     plan, quelle que soit la couleur dessous (variante E de notes-privees/maquettes/zones-carte, choix
     de Mathis le 2026-10-28 : on voyait mal les zones sur le fond). */
  .ct-carte .leaflet-ctPays-pane svg, .ct-carte .leaflet-ctDeps-pane svg { filter:drop-shadow(0 0 1px var(--surface)) drop-shadow(0 0 1px var(--surface)); }
  .ct-rond { width:34px; height:34px; border-radius:9px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:0; }
  .ct-rond:hover, .ct-puce:hover { color:var(--accent-ink); border-color:var(--accent); }
  /* Le crayon sans pays ouvert (2026-10-29) : grisé, la bulle dit pourquoi. */
  .ct-rond[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
  .ct-rond[aria-disabled="true"]:hover { color:var(--ink-2); border-color:var(--line-2); }
  .ct-rond.on { background:var(--accent); border-color:var(--accent); color:#fff; }
  .ct-puce { height:34px; display:inline-flex; align-items:center; gap:7px; padding:0 13px; border-radius:17px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font:600 14px var(--sans); box-shadow:0 1px 3px rgba(0,0,0,.08); cursor:pointer; white-space:nowrap; }
  .ct-outils { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
  .ct-bas { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
  .ct-carte .ct-legende { background:var(--surface); color:var(--ink-2); border:1px solid var(--line-2); border-radius:12px; padding:10px 14px 12px; box-shadow:var(--shadow); min-width:200px; max-height:none; }
  .ct-carte .ct-legende .ml-title { color:var(--ink-3); }
  .ct-carte .ct-legende .ct-leg-paliers { display:grid; grid-template-columns:auto auto; grid-auto-flow:column; grid-template-rows:repeat(5, auto); column-gap:14px; }
  .ct-carte .ct-legende > .ml-row { display:inline-flex; margin-right:12px; }
  .ct-carte .ct-legende .ml-title:not(:first-child) { margin-top:10px; }
  .ct-carte .ct-legende[hidden] { display:none; }
  .ct-bulle { position:absolute; z-index:500; top:10px; left:54px; right:130px; display:flex; justify-content:center; pointer-events:none; }
  .ct-bulle span { background:var(--surface); border:1px solid var(--line-2); border-radius:17px; padding:6px 14px; font-size:14px; color:var(--ink-2); box-shadow:0 2px 8px rgba(0,0,0,.08); }
  .ct-bulle[hidden] { display:none; }
  /* Le panneau de zone */
  .ct-zone { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px 16px; height:640px; display:flex; flex-direction:column; min-height:0; }
  .ct-poignee { display:none; }
  .ct-ariane { font-size:14px; color:var(--ink-3); display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .ct-ariane:empty { display:none; }
  .ct-ariane button { background:none; border:0; padding:0; font:inherit; color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
  .ct-zone-nom { font-family:var(--titre); font-size:21px; font-weight:600; margin:2px 0 0; line-height:1.25; color:var(--ink); }
  .ct-zone-meta { font-size:14px; color:var(--ink-3); margin:2px 0 0; }
  .ct-zone-meta:empty { display:none; }
  .ct-onglets { display:flex; gap:20px; border-bottom:1px solid var(--line); margin:10px 0 0; }
  .ct-onglets button { background:none; border:0; padding:7px 0 9px; font:400 15px var(--sans); color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
  .ct-onglets button[aria-selected="true"] { color:var(--accent-ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent); }
  .ct-nb { font-size:12px; font-weight:700; background:var(--surface-2); color:var(--ink-2); border-radius:9px; padding:0 6px; line-height:18px; }
  .ct-nb:empty { display:none; }
  .ct-onglets button[aria-selected="true"] .ct-nb { background:color-mix(in srgb, var(--accent) 14%, var(--surface)); color:var(--accent-ink); }
  .ct-contenu { flex:1; overflow:auto; min-height:0; margin:0 -16px; padding:0 16px; overscroll-behavior:contain; }
  .ct-volet[hidden] { display:none; }
  .ct-volet .map-controls { margin:12px 0 8px; }
  .ct-volet .map-count { margin-left:0; flex-basis:100%; font-size:14px; }
  .ct-volet .map-stats { display:block; margin-top:4px; }
  /* Réglages comme au Birdydex (2026-10-24) : les <select> d'origine restent pour le code, cachés. */
  .ct-cache { display:none !important; }
  .ct-choix { display:inline-flex; }
  /* Les réglages du Récent repliés sous « Filtres » (Mathis, 2026-10-26 : « très chargé, on s'y perd ») :
     le bouton de filtre de la charte (34 px, 14 px en 600, coins de 9 px), le résumé à côté en ligne
     de méta (14 px, --ink-3). */
  .ct-pli { margin:12px 0 8px; }
  .ct-pli-tete { list-style:none; display:flex; align-items:center; gap:10px; cursor:pointer; min-width:0; }
  .ct-pli-tete::-webkit-details-marker { display:none; }
  .ct-pli-btn { display:inline-flex; align-items:center; gap:6px; flex:none; min-height:34px; padding:0 12px; box-sizing:border-box;
    border:1px solid var(--line-2); border-radius:9px; background:var(--surface); color:var(--ink); font:600 14px/1 var(--sans); }
  .ct-pli-btn::before { content:'▸'; color:var(--ink-3); font-weight:400; transition:transform .15s; }
  .ct-pli[open] .ct-pli-btn::before { transform:rotate(90deg); }
  .ct-pli-tete:hover .ct-pli-btn { background:var(--surface-2); }
  .ct-pli-corps { padding:0 0 4px; }
  /* Les filtres des trois onglets (maquette A3, notes-privees/maquettes/filtres-carte/v3.html, 2026-10-28) :
     un bloc gris qui se détache de la liste blanche, une ligne par réglage, son nom à gauche. */
  .ct-bloc { margin-top:10px; padding:0; background:var(--surface-2); border-radius:12px; }
  .ct-ligne { display:grid; grid-template-columns:74px minmax(0, 1fr); align-items:center; gap:10px; padding:10px 12px; border-top:1px solid var(--line); }
  .ct-ligne:first-child { border-top:0; }
  .ct-ligne[style*="display: none"] + .ct-ligne { border-top:0; }
  .ct-ligne.ct-haut { align-items:start; }
  .ct-ligne.ct-haut > .ct-k { padding-top:2px; }
  .ct-k { font-size:14px; font-weight:600; color:var(--ink-3); line-height:1.15; }
  .ct-v { min-width:0; }
  .ct-ici-zone.ct-v { display:block; }
  .ct-bloc .ct-choix { display:flex; }
  .ct-bloc .ct-choix .cp-btn { width:100%; justify-content:space-between; background:var(--surface); }
  /* Le nom collé à gauche dans les trois menus (Où, Qui, Quand) : celui du lieu se centrait. */
  .ct-bloc .ct-choix .cp-btn-label { flex:1; min-width:0; text-align:left; }
  .ct-bloc .seg { background:var(--surface); }
  .ct-seg-plein { display:flex; width:100%; }
  .ct-bloc .ct-seg-plein button { flex:1 1 0; min-width:0; padding-left:6px; padding-right:6px; white-space:nowrap; }
  /* « Espèces manquantes » (Mathis, 2026-10-29) ne tient pas dans une moitié : chaque bouton du tri prend la
     largeur de son texte, le reste se partage. */
  #mapEbSortLbl .ct-bloc .ct-seg-plein button, .ct-bloc #mapEbSortLbl .ct-seg-plein button { flex:1 1 auto; }
  .ct-bloc .ct-bascule { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; min-height:34px; }
  /* L'interrupteur : une case à cocher redessinée, qui garde son clavier et son lecteur d'écran. */
  .ct-bascule input { appearance:none; -webkit-appearance:none; flex:none; width:38px; height:22px; margin:0; border-radius:11px; background:var(--surface-3); position:relative; cursor:pointer; transition:background .15s; box-shadow:inset 0 0 0 1px var(--line-2); }
  .ct-bascule input::after { content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .15s; }
  .ct-bascule input:checked { background:var(--accent); box-shadow:none; }
  .ct-bascule input:checked::after { left:19px; }
  .ct-annees { display:flex; gap:10px; flex-wrap:wrap; }
  .ct-annees:has(.ct-annee[style*="display: none"]) { display:none; }
  .ct-annee { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--ink-2); }
  .ct-annee input { width:72px; height:34px; font:14px var(--sans); padding:0 8px; border:1px solid var(--line-2); border-radius:9px; background:var(--surface); color:var(--ink); }
  /* À la ligne plutôt que hors du cadre : dans un panneau étroit, le N dépassait (Mathis, 2026-10-29). */
  .ct-bloc .rar-chips { flex-wrap:wrap; row-gap:6px; }
  /* Mais le N tenait à 5 px près sur la ligne des paliers (223 px pour 228, mesuré le 2026-10-29) : un zoom
     ou un arrondi le faisait passer dessous, seul (Mathis). Écarts resserrés d'un pixel, filet plus près :
     environ 15 px de marge à la souris. Au doigt, les pastilles de 44 px passent à la ligne de toute façon. */
  @media (pointer: fine){
    .ct-bloc .rar-chips { column-gap:2px; }
    /* Pile au milieu (Mathis) : 2 px d'écart + 4 de marge à gauche, les 6 px d'écart de .rar-cats à droite. */
    .ct-bloc .rar-sep { margin:0 0 0 4px; }
    .ct-bloc .rar-cats { margin-left:0; }
  }
  /* Tout · Aucun à gauche, la mesure (« France / Grand Est ») à droite, 12 px sous les pastilles (Mathis). */
  .ct-rar-sous { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .ct-rar-liens { display:inline-flex; align-items:center; gap:6px; color:var(--ink-3); }
  .ct-lien { border:0; background:none; padding:0; font:600 14px var(--sans); color:var(--accent-ink); cursor:pointer; }
  .ct-lien:hover { text-decoration:underline; }
  .ct-bloc .ct-portee { flex:0 1 auto; margin:0; min-width:0; }
  /* Plus petit que les autres choix (Mathis : « un peu gros dans leurs cases ») : moins de marge, mais
     14 px, le plancher de ce qui se lit. */
  .ct-bloc .ct-portee .seg button { font-size:14px; padding:2px 8px; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ct-bloc .ct-portee-note { display:block; margin-top:6px; }
  .ct-cacher { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--ink-2); }
  .ct-pas { display:inline-flex; align-items:stretch; height:34px; box-sizing:border-box; border:1px solid var(--line-2); border-radius:9px; overflow:hidden; background:var(--surface); }
  .ct-pas button { width:32px; border:0; background:none; font:700 16px var(--sans); color:var(--ink-2); cursor:pointer; }
  .ct-pas button:hover { background:var(--surface-3); }
  .ct-pas input { width:44px; border:0; border-left:1px solid var(--line-2); border-right:1px solid var(--line-2); text-align:center; font:600 14px var(--sans); color:var(--ink); background:none; -moz-appearance:textfield; }
  .ct-pas input::-webkit-inner-spin-button, .ct-pas input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
  /* Le Birdydex reprend ce bloc (version B, 2026-10-29) : la recherche toujours visible à côté de
     « Filtres », et sur ordinateur les réglages par deux (Où | Afficher, Famille | Milieu), le tri et
     la rareté sur toute la largeur. */
  .pkdx-barre { display:flex; align-items:center; gap:10px; margin:10px 0 0; }
  .pkdx-barre input[type=search] { flex:1; min-width:0; height:36px; padding:0 12px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface-2); color:var(--ink); font:14px var(--sans); }
  .pkdx-pli-btn { cursor:pointer; }
  .pkdx-pli-btn[aria-expanded="true"]::before { transform:rotate(90deg); }
  .pkdx-pli-btn:hover { background:var(--surface-2); }
  .pkdx-bloc { margin:12px 0 14px; }
  .pkdx-bloc[hidden] { display:none; }
  .pkdx-barre:has(+ .pkdx-bloc[hidden]) { margin-bottom:14px; }
  .pkdx-bloc .pkdx-tri { max-width:420px; }
  .pkdx-bloc .rar-chips { flex-wrap:wrap; row-gap:6px; }
  .pkdx-rar-liens { margin-left:14px; }
  /* Écran étroit, au doigt ou non : les pastilles passent à la ligne et les choix collés écrivent leur
     libellé sur deux lignes plutôt que de sortir du bloc (« Manquantes » coupé à 375 px, 2026-10-29). */
  @media (max-width:560px){
    .ct-bloc .rar-chips { flex-wrap:wrap; }
    .ct-bloc .ct-seg-plein button { white-space:normal; line-height:1.15; padding-left:3px; padding-right:3px; }
    .pkdx-bloc .ct-ligne { grid-template-columns:60px minmax(0, 1fr); gap:8px; padding:10px; }
    /* X, P, N passaient seuls à la ligne : la rareté prend toute la largeur, son nom au-dessus. */
    .pkdx-bloc .ct-ligne.ct-haut { grid-template-columns:minmax(0, 1fr); gap:6px; }
  }
  @media (min-width:761px){
    .pkdx-bloc { display:grid; grid-template-columns:1fr 1fr; }
    .pkdx-bloc > .ct-ligne:nth-child(2) { border-top:0; }
    .pkdx-bloc > .ct-ligne:nth-child(odd):not(.pkdx-pleine) { border-right:1px solid var(--line); }
    .pkdx-bloc > .pkdx-pleine { grid-column:1 / -1; }
  }
  /* Sous le bloc gris, le compte ouvre la liste. */
  .ct-pli[open] + * { margin-top:14px; }
  /* D'où viennent les points : « (138 listes) » derrière la première phrase, le détail dans la bulle (2026-10-26). */
  .ct-note { color:var(--ink-3); white-space:nowrap; }
  .ct-portee { display:flex; align-items:center; }
  .ct-portee .seg button[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
  .ct-portee-note { flex:1 0 100%; font-size:14px; color:var(--ink-3); }
  .ct-portee-note:empty { display:none; }
  .ct-menus-zone { display:contents; }
  .ct-etat:empty { display:none; }
  .ct-rang.ct-rang-rec { grid-template-columns:auto 1fr auto; }
  .ct-rang .col { min-width:0; }
  .ct-tag { display:inline-block; font-size:14px; font-weight:700; padding:0 7px; border-radius:6px; margin-left:6px; background:var(--surface-2); color:var(--ink-2); }
  .ct-tag.nv { background:color-mix(in srgb, var(--accent-2) 16%, var(--surface)); color:color-mix(in srgb, var(--accent-2) 75%, var(--ink)); }
  .ct-plus { display:block; width:100%; margin:10px 0 0; padding:7px 12px; min-height:34px; border:1px solid var(--line-2); border-radius:9px; background:var(--surface); color:var(--accent-ink); font:600 14px var(--sans); cursor:pointer; }
  .ct-plus:hover { border-color:var(--accent); }
  .ct-mention { font-size:14px; color:var(--ink-3); border-top:1px solid var(--line); padding-top:9px; margin:14px 0 0; line-height:1.45; }
  .ct-mention a { color:var(--accent-ink); }
  .ct-vide { border:1px dashed var(--line-2); border-radius:12px; padding:18px 16px; text-align:center; font-size:14px; color:var(--ink-3); margin-top:14px; }
  .ct-vide b { display:block; color:var(--ink); font-size:15px; margin-bottom:4px; }
  /* Couche éteinte : le volet ne montre que l'invitation à l'afficher (2026-10-28). */
  .ct-volet-eteint > :not(.ct-eteinte) { display:none !important; }
  .ct-volet:not(.ct-volet-eteint) > .ct-eteinte { display:none; }
  .ct-eteinte-btn { margin:12px auto 0; }
  .ct-petit { font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-3); margin:14px 0 2px; }
  .ct-compte { font-size:14px; color:var(--ink-3); margin:8px 0 2px; }
  .ct-compte b { color:var(--ink); }
  .ct-rang { display:grid; grid-template-columns:1fr auto; gap:1px 10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; align-items:start; cursor:pointer; background:none; border-left:0; border-right:0; border-top:0; width:100%; text-align:left; font-family:inherit; color:inherit; }
  .ct-rang:last-child { border-bottom:0; }
  .ct-rang:hover .nom { text-decoration:underline; }
  .ct-rang .nom { font-weight:600; color:var(--ink); }
  /* Le lieu et la date dans le gris pâle du Classement (.board-sp-sous) : on les voit moins
     directement que l'espèce (Mathis, 2026-10-26). */
  .ct-rang .sous { color:color-mix(in srgb, var(--ink-3) 75%, var(--surface)); }
  .ct-rang .droite { color:color-mix(in srgb, var(--ink-3) 75%, var(--surface)); text-align:right; white-space:nowrap; }
  /* La ligne d'espèce des deux listes (_ctRangHtml, 2026-10-26) : le nom ouvre la fiche, la flèche à
     droite déplie les observations. Le filet passe de la ligne à son cadre, qui porte les deux. */
  .ct-rang-e { display:flex; align-items:stretch; border-bottom:1px solid var(--line); }
  .ct-rang-e:last-child { border-bottom:0; }
  .ct-rang-e > .ct-rang { flex:1; min-width:0; border-bottom:0; }
  .ct-rang-n { flex:none; width:34px; border:0; border-radius:8px; background:none; color:var(--ink-2); font:18px/1 var(--sans); cursor:pointer; padding:9px 0 0; align-self:stretch; }
  .ct-rang-n:hover, .ct-rang-n:focus-visible { background:var(--surface-2); color:var(--ink); }
  .ct-rang-n .fl { display:inline-block; transition:transform .15s; }
  .ct-rang-n[aria-expanded="true"] .fl { transform:rotate(180deg); }
  /* Le nombre de listes sur la flèche du Récent (variante B de notes-privees/maquettes/recent-listes, 2026-10-28). */
  /* En flex : en ligne, la pastille suivait la ligne de base du bouton (18 px) et tombait 11 px sous la date.
     9 px en haut la centrent sur la ligne du nom et de la date (écart mesuré 0,3 px) ; 6 px la décollent de
     la date (Mathis, 2026-10-28). */
  .ct-rang-n.avec-nb { display:flex; align-items:flex-start; justify-content:center; width:auto; min-width:34px; padding:9px 4px 0; margin-left:6px; -webkit-tap-highlight-color:transparent; }
  /* La pastille ne bouge pas au survol ni au clic (Mathis, 2026-10-28 : le fond de toute la hauteur du
     bouton faisait une grosse zone bleue). Le contour du clavier (:focus-visible) reste. */
  .ct-rang-n.avec-nb:hover, .ct-rang-n.avec-nb:focus-visible { background:none; }
  .ct-rang-nb { display:inline-flex; align-items:center; gap:3px; font-size:14px; font-weight:600; color:var(--ink); background:var(--surface-2); border-radius:8px; padding:3px 7px; }
  .ct-rang-nb .fl { font-size:13px; color:var(--ink-2); }
  /* L'aide de la Ligue en petit lien gris, en bas de la liste (2026-10-26). */
  .import-guide.ct-aide { margin:12px 0; }
  .import-guide.ct-aide summary { font-weight:400; color:var(--ink-3); }
  .import-guide.ct-aide summary:hover { text-decoration:underline; }
  /* Les observations d'une espèce dépliée, sous sa ligne (2026-10-26) : le lieu, puis date et nombre
     dans le gris pâle ; un clic mène au point. Alignées sur le nom, après la pastille. */
  .ct-rang-obs { list-style:none; margin:0 0 6px; padding:0 0 0 38px; }
  .ct-obs { display:flex; flex-direction:column; width:100%; padding:5px 8px; border:0; border-top:1px solid var(--line); background:none;
    font:14px/1.35 var(--sans); color:var(--ink-2); text-align:left; cursor:pointer; }
  .ct-obs:hover, .ct-obs:focus-visible { background:var(--surface-2); }
  .ct-obs-d { color:color-mix(in srgb, var(--ink-3) 75%, var(--surface)); }
  .ct-volet .import-guide { margin:14px 0 0; font-size:14px; color:var(--ink-2); background:var(--surface-2); border-radius:10px; padding:9px 12px; }
  .ct-volet .import-guide summary { cursor:pointer; font-weight:600; }
  /* Téléphone et petite tablette : la carte prend la largeur, le panneau devient un tiroir */
  @media (max-width:900px) {
    .ct-corps { display:block; margin-top:8px; }
    .ct-place-panneau { display:none; }
    /* À la ligne depuis la quatrième pastille (Réserves, 2026-10-29) : en rangée qui défile, elle restait
       entière hors de l'écran (76 à 130 px de trop de 414 à 360 px de large), et Hotspots coupé. */
    .ct-couches { padding-top:8px; }
    .ct-couche { flex:none; }
    /* La carte prend presque tout l'écran : 100dvh se lit avant le zoom 0,85 du corps, d'où la
       division ; il reste la rangée des couches au-dessus quand on fait défiler jusqu'à elle. */
    .ct-carte { height:calc(100dvh / 0.85 - 130px); min-height:420px; }
    .ct-bulle { display:none; }
    .ct-zone { position:absolute; left:0; right:0; bottom:0; z-index:800; height:118px; max-height:100%; border-radius:16px 16px 0 0; border:0; border-top:1px solid var(--line-2); box-shadow:0 -8px 24px rgba(0,0,0,.14); padding:6px 14px 10px; }
    .ct-zone[data-tiroir="mi"] { height:58%; }
    .ct-zone[data-tiroir="haut"] { height:calc(100% - 8px); }
    .ct-zone[data-tiroir="bas"] .ct-onglets, .ct-zone[data-tiroir="bas"] .ct-contenu { display:none; }
    /* Replié, le tiroir ne garde que la poignée et le nom : le fil d'Ariane et la ligne du dessous
       reviennent en le tirant. */
    .ct-zone[data-tiroir="bas"] .ct-ariane, .ct-zone[data-tiroir="bas"] .ct-zone-meta { display:none; }
    .ct-poignee { display:block; width:100%; height:22px; border:0; background:none; cursor:pointer; padding:0; flex:none; }
    .ct-poignee::before { content:""; display:block; width:46px; height:5px; border-radius:3px; background:var(--surface-3); margin:6px auto 0; }
    .ct-zone-nom { font-size:19px; }
    .ct-carte .ct-legende { min-width:0; }
    /* Les coins bas de Leaflet (légende, crédits) montent au-dessus du tiroir replié, et
       disparaissent quand il s'ouvre : il les couvrirait à moitié. */
    .ct-carte .leaflet-bottom { bottom:118px; }
    .ct-carte:has(.ct-zone[data-tiroir="mi"]) .leaflet-bottom,
    .ct-carte:has(.ct-zone[data-tiroir="haut"]) .leaflet-bottom { display:none; }
  }
  @media (max-width:560px) { .ct-phrase { display:none; } }
  .ex-empty { padding:12px; color:var(--ink-3); font-size:13px; text-align:center; }
  .ex-error { padding:12px; color:#c33; font-size:13px; }
  .map-el .leaflet-container { font:inherit; }
  @media (max-width: 700px){ .map-el { height:420px; } }
  .react-bar { display:flex; gap:5px; flex-wrap:wrap; margin:3px 10px 0; align-items:center; }
  .msg.mine .react-bar { justify-content:flex-end; }
  .react-chip { font:inherit; font-size:14px; padding:1px 7px; border-radius:11px; border:1px solid var(--line);
    background:var(--surface); color:var(--ink-2); cursor:pointer; line-height:1.6; }
  .react-chip.mine { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--surface)); color:var(--accent-ink); }
  .react-add { font:inherit; font-size:13px; width:22px; height:22px; border-radius:50%; border:1px dashed var(--line-2);
    background:none; color:var(--ink-3); cursor:pointer; padding:0; line-height:1; }
  .react-add:hover { color:var(--accent-ink); border-color:var(--accent); }
  /* Commentaires (photos + fil). Repliable via details. */
  .cmt-wrap { margin-top:6px; }
  .cmt-summary { cursor:pointer; font-size:14px; color:var(--ink-3); padding:2px 0; list-style:none; user-select:none; }
  .cmt-summary::-webkit-details-marker { display:none; }
  .cmt-summary:hover { color:var(--ink-2); }
  .cmt-wrap[open] .cmt-summary { color:var(--ink-2); }
  .cmt-list { display:flex; flex-direction:column; gap:4px; margin:5px 0; }
  .cmt-item { font-size:12.5px; color:var(--ink-2); line-height:1.4; padding:5px 8px; background:var(--surface-2); border-radius:8px; position:relative; }
  .cmt-item .cmt-who { font-weight:700; color:var(--ink); }
  .cmt-item .cmt-txt { color:var(--ink-2); }
  .cmt-item .cmt-time { font-size:10.5px; color:var(--ink-3); margin-left:4px; }
  .cmt-item .cmt-del { position:absolute; top:2px; right:4px; background:transparent; border:none; color:var(--ink-3); cursor:pointer; font-size:11px; padding:2px 4px; border-radius:4px; opacity:0; transition:opacity .1s; }
  .cmt-item:hover .cmt-del { opacity:1; }
  .cmt-item .cmt-del:hover { color:#c33; }
  .cmt-form { display:flex; gap:5px; align-items:center; }
  .cmt-input { flex:1; font:inherit; font-size:12.5px; padding:6px 10px; border:1px solid var(--line-2); border-radius:14px; background:var(--surface); color:var(--ink); }
  .cmt-input:focus { outline:3px solid var(--accent); outline-offset:1px; }
  .cmt-send { font-size:13px; padding:5px 11px; border-radius:14px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
  .cmt-send:hover { filter:brightness(.95); }
  .cmt-send:disabled { opacity:.6; cursor:not-allowed; }
  /* Envoyer, supprimer : dessins au trait depuis le 2026-10-14 (Mathis), a la place de ➤ et ✕. */
  .cmt-send { display:inline-grid; place-items:center; padding:5px 10px; }
  .cmt-send svg, .cmt-del svg, .photo-del svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; }
  /* z-index au-dessus des FAB panneaux (chat/photos/feed a 1500) pour que les emojis
     soient cliquables au lieu d'apparaitre en arriere-plan. */
  .emoji-pop { display:none; position:fixed; inset:0; z-index:2000; }
  .emoji-pop.open { display:block; }
  /* Grille de 8 colonnes qui se partagent toute la largeur : en flex-wrap, la derniere colonne
     ne tenait pas et laissait un vide a droite (Mathis, 2026-10-15). Gouttiere de defilement
     reservee pour que la largeur ne change pas selon qu'il y a une barre ou non. */
  .emoji-pop-inner { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); background:var(--surface);
    border:1px solid var(--line); border-radius:16px; padding:0 6px 10px 12px; display:grid; grid-template-columns:repeat(8, 1fr);
    gap:2px; align-content:start; width:min(400px,92vw); max-height:min(400px,60vh); overflow-y:auto;
    scrollbar-width:thin; scrollbar-gutter:stable; box-shadow:0 12px 40px rgba(0,0,0,.22); }
  .emoji-groupe { grid-column:1 / -1; position:sticky; top:0; z-index:1; background:var(--surface);
    font:600 14px var(--sans); color:var(--ink-3); padding:12px 2px 6px; }
  /* Quand le chat/photos/feed FAB est ouvert, positionner le picker emoji aligne avec
     le panneau flottant (au-dessus du compose form), pas centre au milieu de l'ecran. */
  body:has(#viewChat.fab-open) .emoji-pop .emoji-pop-inner,
  body:has(#viewPhotos.fab-open) .emoji-pop .emoji-pop-inner,
  body:has(#viewFeed.fab-open) .emoji-pop .emoji-pop-inner {
    left:auto; right:20px; bottom:170px; transform:none;
  }
  @media (max-width:600px){
    body:has(#viewChat.fab-open) .emoji-pop .emoji-pop-inner,
    body:has(#viewPhotos.fab-open) .emoji-pop .emoji-pop-inner,
    body:has(#viewFeed.fab-open) .emoji-pop .emoji-pop-inner {
      right:10px; left:10px; bottom:150px;
    }
  }
  .emoji-opt { font-size:26px; background:none; border:none; cursor:pointer; padding:0; aspect-ratio:1; border-radius:10px; line-height:1;
    display:grid; place-items:center; }
  .emoji-opt:hover { background:var(--surface-2); }
  /* Vide tant qu'aucun depot n'est en cours : sans marge a lui, sinon un trou de 20 px sous l'entete. */
  .photo-upload { margin:0; }
  .photo-upload .photo-draft { margin:0 0 8px; }
  .photo-draft { margin-top:12px; display:flex; flex-direction:column; gap:8px; max-width:460px; }
  .photo-draft-thumbs { display:flex; flex-wrap:wrap; gap:8px; }
  .photo-draft-thumb { position:relative; width:88px; height:88px; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
  .photo-draft-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .photo-draft-thumb button { position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%; border:none; cursor:pointer;
    background:rgba(0,0,0,.6); color:#fff; font-size:13px; line-height:20px; padding:0; display:flex; align-items:center; justify-content:center; }
  .photo-draft-thumb button:hover { background:rgba(200,0,0,.85); }
  .photo-draft input { padding:9px 12px; border:1px solid var(--line-2); border-radius:10px; font:inherit; background:var(--surface); color:var(--ink); }
  .photo-draft-actions { display:flex; gap:8px; }
  /* Photos, refaites le 2026-10-14 sur la maquette B (notes-privees/maquettes/photos/) : deux
     colonnes, photos presque deux fois plus grandes qu'avant (200 px), et pas de photo coupee
     en haut du fil. Dans le panneau, la grille defile seule et sert de conteneur (container-type) :
     chaque carte fait la moitie de sa hauteur visible, moins l'ecart. Deux rangees remplissent
     donc pile la hauteur, 12 px d'air en bas, et la troisieme commence juste sous le bord. */
  /* Le bouton sous le titre, voulu par Mathis (2026-10-14). */
  .photo-tete { flex-direction:column; align-items:flex-start; gap:10px; }
  .photo-ajout { display:inline-flex; align-items:center; gap:8px; flex:none; }
  .photo-ajout svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
  /* Ecart vertical double de l'ecart interne : la legende appartient a la photo du dessus, elle
     etait plus pres de celle du dessous (Mathis, 2026-10-14). */
  .photo-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px 12px; align-content:start; }
  .photo-card { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .photo-card .photo-img { margin-bottom:4px; }
  .photo-img { width:100%; aspect-ratio:1/1; object-fit:cover; cursor:pointer; display:block; border-radius:12px; background:var(--surface-2); }
  #viewPhotos.fab-open > section { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding-bottom:0 !important; }
  #viewPhotos.fab-open .photo-grid { flex:1; min-height:0; overflow-y:auto; container-type:size; margin:0 -20px; padding:12px 20px; }
  #viewPhotos.fab-open .photo-card { height:calc((100cqh - 24px) / 2); }
  #viewPhotos.fab-open .photo-img { flex:1; min-height:0; aspect-ratio:auto; }
  @media (max-width:600px){ .photo-grid { grid-template-columns:1fr; } }
  .photo-meta { display:flex; align-items:center; gap:8px; min-width:0; font-size:14px; color:var(--ink-2); }
  .photo-meta b { color:var(--ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .photo-date { color:var(--ink-3); white-space:nowrap; }
  .photo-acts { display:flex; gap:2px; margin-left:auto; flex:none; }
  /* La ligne existe meme vide : sans elle, une photo sans legende etait plus haute que sa voisine
     et les rangees ne s'alignaient plus. */
  .photo-cap { font-size:14px; line-height:1.4; min-height:1.4em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .photo-act, .heart-btn { display:inline-flex; align-items:center; gap:4px; height:32px; min-width:32px; padding:0 6px; border:none; border-radius:8px;
    background:transparent; color:var(--ink-3); font:600 14px var(--sans); cursor:pointer; }
  .photo-act:hover, .heart-btn:hover:not(:disabled) { background:var(--surface-2); color:var(--accent-ink); }
  .photo-act svg, .heart-btn svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .heart-btn.liked, .heart-btn.liked:hover { color:#d1436b; }
  .heart-btn.liked svg { fill:currentColor; }
  .heart-btn[disabled] { opacity:.6; cursor:not-allowed; }
  .heart-btn .heart-count { font-variant-numeric:tabular-nums; }
  /* La fiche d'une photo (_ouvrirFichePhoto). Les emojis s'ouvrent par-dessus. */
  .photo-fiche { max-width:480px; }
  .photo-fiche-cap { margin:0 0 10px; font-size:15px; color:var(--ink); line-height:1.4; }
  .photo-fiche-reac { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
  .photo-fiche-reac .react-bar { margin:0; }
  .photo-fiche .cmt-summary { display:none; }
  .photo-del { margin-top:12px; width:34px; height:34px; display:grid; place-items:center; color:var(--ink-3); background:none; border:1px solid var(--line-2); border-radius:8px; padding:0; cursor:pointer; }
  .photo-del svg { width:19px; height:19px; }
  .photo-del:hover { color:#c0392b; }
  body:has(#photoFiche) .emoji-pop { z-index:2147483001; }

  /* trophées */
  .who-select { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .whochip { display:inline-flex; align-items:center; gap:7px; background:var(--surface-2);
    border:1px solid var(--line-2); color:var(--ink-2); border-radius:20px; padding:5px 12px;
    font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
  .whochip .dot { width:10px; height:10px; border-radius:50%; background:var(--series); flex:none; }
  .whochip:hover { border-color:var(--accent); }
  .whochip.on { background:var(--accent); color:#fff; border-color:var(--accent); }
  .whochip.on .dot { box-shadow:0 0 0 2px rgba(255,255,255,.6); }
  .trophy-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px; margin-top:10px;
    /* Force toutes les rangees a la meme hauteur (celle du plus grand contenu de la section). */
    grid-auto-rows:1fr; }
  /* Onglet trophées organisé par thèmes : chaque section a un en-tête distinctif + une grille interne. */
  .trophy-sections { display:flex; flex-direction:column; gap:22px; margin-top:16px; }
  .trophy-theme-section { border:1px solid var(--line); background:var(--surface-2); border-radius:14px; padding:12px 14px 14px; }
  .tts-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px solid var(--line); }
  .tts-title { font:700 15px/1.2 var(--sans); color:var(--ink); }
  .tts-count { font:700 12px/1 var(--sans); padding:4px 10px; border-radius:12px; background:var(--surface); color:var(--ink-2); border:1px solid var(--line-2); font-variant-numeric:tabular-nums; }
  .trophy-theme-section .trophy-grid { margin-top:12px; }
  .trophy { text-align:center; border:1px solid var(--line); border-radius:14px; padding:18px 12px;
    background:var(--surface-2); transition:transform .1s;
    /* Cases toutes de meme taille : flex column + hauteur uniforme via la grille (grid-auto-rows:1fr sur .trophy-grid) */
    display:flex; flex-direction:column; align-items:center; min-height:220px; }
  .trophy .tname { flex:0 0 auto; }
  .trophy .tstate { margin-top:auto; }
  .trophy.on { border-color:color-mix(in srgb,var(--gold) 55%,var(--line));
    background:color-mix(in srgb,var(--gold) 9%,var(--surface-2)); }
  .trophy.off { opacity:.6; }
  /* Trophees a paliers : border/background prend la couleur du tier au lieu de var(--gold),
     et petite pastille en haut a droite avec l'emoji du palier. */
  .trophy.on[class*="tier-"]:not(.tier-badge) { border-color:color-mix(in srgb,var(--tier-color, var(--gold)) 60%,var(--line));
    background:color-mix(in srgb,var(--tier-color, var(--gold)) 10%,var(--surface-2)); }
  .trophy.tier-bronze   { --tier-color:#d18855; }
  .trophy.tier-argent   { --tier-color:#9ab8d0; }
  .trophy.tier-or       { --tier-color:#e6c235; }
  .trophy.tier-diamant  { --tier-color:#7fd3ff; }
  .trophy.tier-violet   { --tier-color:#a06cff; }
  .trophy.tier-emeraude { --tier-color:#0fbf85; }
  .trophy .tier-badge { position:absolute; top:8px; right:8px; width:26px; height:26px;
    display:grid; place-items:center; font-size:14px; border-radius:50%;
    background:var(--tier-color); box-shadow:0 1px 3px rgba(0,0,0,.15); z-index:1; }
  .trophy.off .tier-badge { filter:grayscale(.7); opacity:.7; }
  .trophy { position:relative; }
  .trophy.on[class*="tier-"] .tstate { color:var(--tier-color); }
  .tico { line-height:0; display:flex; justify-content:center; }
  .tico svg { width:54px; height:54px; }
  .trophy.off .tico { filter:grayscale(1); opacity:.5; }
  .tname { font-weight:700; font-size:14px; margin-top:9px; text-wrap:balance; }
  .tdesc { color:var(--ink-2); font-size:12px; margin-top:4px; line-height:1.4; }
  .tstate { margin-top:9px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-3); font-variant-numeric:tabular-nums; }
  .trophy.on .tstate { color:var(--gold); }
  .tinfo { margin-top:6px; font-size:12.5px; font-weight:700; color:var(--ink); background:var(--surface-2);
    border:1px solid var(--line); border-radius:8px; padding:4px 9px; display:inline-block; }
  .vote-btn { margin-top:10px; font:inherit; font-size:12px; font-weight:700; padding:6px 14px; border-radius:9px;
    border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
  .vote-btn:hover { filter:brightness(1.06); }
  .vote-btn.voted { background:var(--surface); color:var(--accent-ink); }
  .vote-btn:disabled { opacity:.5; cursor:default; }
  .vote-note { margin-top:10px; font-size:11px; color:var(--ink-3); line-height:1.4; }
  .trophy.clic { cursor:pointer; }
  .trophy.clic:hover { border-color:color-mix(in srgb,var(--gold) 55%,var(--line)); }

  /* ==== Nouveau layout trophees (v97+) ============================ */
  .tro-showcase { display:flex; flex-direction:column; gap:28px; margin-top:16px; }
  .tro-cat-section { display:flex; flex-direction:column; gap:10px; }
  .tro-cat-head { display:flex; flex-direction:column; gap:2px; padding:2px 4px 4px; border-bottom:1px solid var(--line); }
  .tro-cat-title { font-family:var(--serif); font-weight:600; font-size:17px; color:var(--ink); }
  .tro-cat-sub { font-size:11.5px; color:var(--ink-3); }
  .tro-families { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
  @media (max-width: 1100px){ .tro-families { grid-template-columns:repeat(4, 1fr); } }
  @media (max-width: 900px){ .tro-families { grid-template-columns:repeat(3, 1fr); } }
  @media (max-width: 640px){ .tro-families { grid-template-columns:repeat(2, 1fr); gap:8px; } }
  .tro-family { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 10px;
    border:1px solid var(--line); border-radius:14px; background:var(--surface-2);
    cursor:pointer; transition:transform .12s, border-color .12s, box-shadow .12s; text-align:center;
    position:relative; overflow:hidden; }
  .tro-family:hover { transform:translateY(-1px); box-shadow:var(--shadow);
    border-color:color-mix(in srgb, var(--tier-color, var(--gold)) 45%, var(--line)); }
  .tro-family.unlocked { background:var(--surface-2);
    border-color:color-mix(in srgb, var(--tier-color) 55%, var(--line)); }
  .tro-family.locked { opacity:.85; }
  .tro-fam-cup { flex:0 0 auto; width:245px; height:245px; display:grid; place-items:center; }
  .tro-fam-cup .tro-cup { width:245px; height:245px; object-fit:contain;
    filter:drop-shadow(0 0 1px rgba(0,0,0,.45)) drop-shadow(0 2px 6px rgba(0,0,0,.16)); }
  .tro-fam-cup .tro-cup.grayed { filter:grayscale(.7) brightness(.9) opacity(.85) drop-shadow(0 1px 1px rgba(0,0,0,.14)) drop-shadow(0 4px 7px rgba(0,0,0,.09)); }
  /* Cartes exotiques (badges Colibri, Ratite, ...) : fond de carte neutre (surface-2).
     Quand debloque : legere teinte doree sur bordure + petite lueur pour valoriser la reussite,
     sans etre bling-bling. */
  .tro-family.tro-exotic { background:var(--surface-2); }
  .tro-family.tro-exotic.unlocked {
    background:color-mix(in srgb, var(--gold) 5%, var(--surface-2));
    border-color:color-mix(in srgb, var(--gold) 37%, var(--line));
    box-shadow:0 3px 14px color-mix(in srgb, var(--gold) 18%, transparent);
  }
  .tro-family.tro-exotic .tro-fam-cup .tro-cup { filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)) drop-shadow(0 4px 8px rgba(0,0,0,.11)); }
  .tro-family.tro-exotic.unlocked .tro-fam-cup .tro-cup { filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)) drop-shadow(0 4px 8px rgba(0,0,0,.11)); }
  .tro-family.tro-exotic .tro-fam-cup .tro-cup.grayed { filter:grayscale(1) brightness(.85) opacity(.35) drop-shadow(0 1px 1px rgba(0,0,0,.14)) drop-shadow(0 4px 7px rgba(0,0,0,.09)); }
  /* Tier Prismatique : rendu iridescent (fond degrade multicolore subtil, halo arc-en-ciel
     sur le trophee, barre de progression rainbow). Le PNG lui-meme est deja multicolore ;
     on habille sa carte pour que le mot 'prismatique' se lise dans l'UI aussi. */
  .tro-family.unlocked.tier-violet {
    background:var(--surface-2);
    border-color:color-mix(in srgb, #a06cff 55%, var(--line));
  }
  .tro-family.unlocked.tier-violet .tro-fam-cup .tro-cup {
    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.18))
      drop-shadow(0 4px 8px rgba(0,0,0,.11));
  }
  .tro-family.tier-violet .tro-fam-bar-fill {
    background:linear-gradient(90deg, #ff5cdc, #a06cff, #7fb5ff, #5cd3ff);
    box-shadow:0 0 8px color-mix(in srgb, #a06cff 55%, transparent);
  }
  .tro-fam-body { flex:1 1 auto; min-width:0; width:100%; display:flex; flex-direction:column; gap:3px; align-items:center; }
  .tro-fam-title { font-size:14px; font-weight:700; color:var(--ink); display:flex; align-items:baseline; justify-content:center; gap:5px; flex-wrap:wrap; line-height:1.2; }
  .tro-fam-family { font-size:11.5px; font-weight:500; color:var(--ink-3); text-align:center; margin-top:3px; font-style:italic; line-height:1.25; }
  .tro-fam-tier { font-size:12px; font-weight:600; color:var(--tier-color); }
  .tro-fam-tier-locked { color:var(--ink-3); font-style:italic; font-weight:500; }
  /* Etoiles de tier a la place du label 'Bronze/Argent/Or/Diamant/Prismatique'.
     N pleines dans la couleur du tier, (5-N) vides en ink-3 leger. */
  .tro-fam-stars { display:inline-flex; align-items:center; gap:1px; font-size:13.5px;
    line-height:1; color:var(--tier-color); letter-spacing:-.5px; }
  .tro-fam-stars-empty { color:color-mix(in srgb, var(--ink-3) 45%, transparent); }
  .tro-fam-next { font-size:11px; color:var(--ink-3); }
  .tro-fam-bar-outer { height:6px; border-radius:99px; background:color-mix(in srgb, var(--ink-3) 20%, var(--surface));
    overflow:hidden; margin-top:2px; width:100%; }
  .tro-fam-bar-fill { height:100%; background:var(--tier-color); border-radius:99px;
    transition:width .3s ease; box-shadow:0 0 8px color-mix(in srgb, var(--tier-color) 60%, transparent); }
  .tro-fam-prog { font-size:11px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums; letter-spacing:.02em; }

  .tro-oneshots-section { border-top:1px dashed var(--line); padding-top:16px; }
  .tro-oneshots-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-3); margin-bottom:4px; }
  .tro-oneshots-sub { font-size:12px; color:var(--ink-3); font-style:italic; margin-bottom:10px; }
  .tro-oneshots-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
  .tro-oneshot { display:flex; gap:12px; padding:11px 12px; border:1px solid var(--line);
    border-radius:12px; background:var(--surface-2); align-items:flex-start; }
  .tro-oneshot.on { border-color:color-mix(in srgb, var(--gold) 45%, var(--line));
    background:color-mix(in srgb, var(--gold) 7%, var(--surface-2)); }
  .tro-oneshot.off { opacity:.6; }
  .tro-oneshot.clic { cursor:pointer; }
  .tro-oneshot.clic:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
  .tro-os-ico { flex:0 0 auto; }
  .tro-os-ico img, .tro-os-ico svg { width:40px; height:40px; border-radius:50%; object-fit:cover; }
  .tro-oneshot.off .tro-os-ico { filter:grayscale(1); opacity:.55; }
  .tro-os-body { flex:1 1 auto; min-width:0; }
  .tro-os-name { font-size:13.5px; font-weight:700; color:var(--ink); }
  .tro-os-desc { font-size:11.5px; color:var(--ink-3); margin-top:2px; line-height:1.4; }
  .tro-os-state { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-3); margin-top:4px; font-variant-numeric:tabular-nums; }
  .tro-oneshot.on .tro-os-state { color:var(--gold); }
  .tro-os-info { font-size:11.5px; font-weight:600; margin-top:4px; color:var(--ink); }
  .vote-btn { margin-top:5px; padding:5px 10px; font-size:11.5px; font-weight:700; border-radius:8px;
    border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
  .vote-btn.voted { background:var(--surface-2); color:var(--accent); }
  .vote-note { margin-top:5px; font-size:11px; color:var(--ink-3); font-style:italic; }
  .vote-voters { margin-top:4px; font-size:10.5px; color:var(--ink-3); }

  /* Modal : gallerie des 6 paliers pour une famille */
  /* Toujours 3 colonnes x 2 lignes pour les 6 paliers, quelle que soit la largeur.
     Sur mobile les cellules deviennent plus etroites mais gardent la grille 3x2. */
  .tmodal-objective { font-size:14px; color:var(--ink); margin:0 0 14px; line-height:1.4; text-align:center; font-weight:500; }
  .tmodal-tier-gallery { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:8px; }
  /* Un seul tier (badges exotiques) : image centree et agrandie. */
  .tmodal-tier-gallery.single { grid-template-columns:1fr; place-items:center; }
  .tmodal-tier-gallery.single .tmodal-tier { max-width:440px; padding:14px; }
  .tmodal-tier-gallery.single .tmodal-tier-img { width:340px; height:340px; }
  /* 5 tiers : grille sur 6 colonnes (chaque tier = 2 col), 3 items en haut, 2 items centres en bas. */
  .tmodal-tier-gallery.count-5 { grid-template-columns:repeat(6, 1fr); }
  .tmodal-tier-gallery.count-5 .tmodal-tier { grid-column:span 2; }
  .tmodal-tier-gallery.count-5 .tmodal-tier:nth-child(4) { grid-column:2 / span 2; }
  .tmodal-tier-gallery.count-5 .tmodal-tier:nth-child(5) { grid-column:4 / span 2; }
  @media (max-width: 520px){
    .tmodal-tier-gallery { gap:6px; }
    .tmodal-tier { padding:8px 4px; }
    .tmodal-tier-img { width:120px; height:120px; }
    .tmodal-tier-label { font-size:11px; }
    .tmodal-tier-thresh { font-size:9.5px; line-height:1.25; }
    .tmodal-tier-prog { font-size:9px; }
  }
  .tmodal-tier { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 4px;
    border:1px solid var(--line); border-radius:12px; background:var(--surface-2);
    text-align:center; position:relative; overflow:hidden; }
  .tmodal-tier.unlocked { border-color:color-mix(in srgb, var(--tier-color) 40%, var(--line));
    background:color-mix(in srgb, var(--tier-color) 8%, var(--surface-2)); }
  .tmodal-tier.unlocked::before {
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(115deg,
      transparent 30%,
      rgba(255,255,255,.08) 45%,
      rgba(255,255,255,.14) 50%,
      rgba(255,255,255,.08) 55%,
      transparent 70%);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tmodal-tier.unlocked::before {
      background:linear-gradient(115deg,
        transparent 30%,
        rgba(255,255,255,.05) 45%,
        rgba(255,255,255,.09) 50%,
        rgba(255,255,255,.05) 55%,
        transparent 70%);
    }
  }
  :root[data-theme="dark"] .tmodal-tier.unlocked::before {
    background:linear-gradient(115deg,
      transparent 30%,
      rgba(255,255,255,.05) 45%,
      rgba(255,255,255,.09) 50%,
      rgba(255,255,255,.05) 55%,
      transparent 70%);
  }
  /* Trophees uniques (badges exotiques) debloques dans le modal : meme aura doree que sur le showcase. */
  .tmodal-tier.unlocked.cat-exotic {
    background:color-mix(in srgb, var(--gold) 5%, var(--surface-2));
    border-color:color-mix(in srgb, var(--gold) 37%, var(--line));
    box-shadow:0 3px 14px color-mix(in srgb, var(--gold) 18%, transparent);
  }
  .tmodal-tier.unlocked.cat-exotic .tmodal-tier-img { filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)) drop-shadow(0 4px 7px rgba(0,0,0,.11)); }
  /* Prismatique dans le modal : meme habillage iridescent que sur les cartes. */
  .tmodal-tier.unlocked.tier-violet {
    background:
      linear-gradient(135deg,
        color-mix(in srgb, #ff5cdc 10%, transparent),
        color-mix(in srgb, #a06cff 10%, transparent) 50%,
        color-mix(in srgb, #5cd3ff 10%, transparent)),
      var(--surface-2);
    border-color:color-mix(in srgb, #a06cff 40%, var(--line));
  }
  .tmodal-tier.unlocked.tier-violet .tmodal-tier-img {
    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.16))
      drop-shadow(0 4px 7px rgba(0,0,0,.10));
  }
  .tmodal-tier.locked { opacity:.7; }
  .tmodal-tier-img { width:150px; height:150px; object-fit:contain;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.16)) drop-shadow(0 4px 7px rgba(0,0,0,.1)); }
  .tmodal-tier-img.grayed { filter:grayscale(1) opacity(.55) drop-shadow(0 1px 1px rgba(0,0,0,.13)) drop-shadow(0 3px 6px rgba(0,0,0,.08)); }
  .tmodal-tier-label { font-size:12px; font-weight:700; color:var(--tier-color); line-height:1.2; }
  .tmodal-tier-sublabel { font-size:10px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; opacity:.75; margin-top:1px; }
  .tmodal-tier-ref { font-size:10.5px; color:var(--ink-3); font-style:italic; line-height:1.35; margin-top:2px; padding:0 4px; }
  .tmodal-tier.locked .tmodal-tier-label { color:var(--ink-3); }
  .tmodal-tier-thresh { font-size:10.5px; color:var(--ink-2); line-height:1.35; }
  .tmodal-tier-prog { font-size:10px; font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums; }
  .tmodal-sep { border:none; border-top:1px dashed var(--line); margin:12px 0; }

  /* Selecteur pays dans le modal habitat */
  .tmodal-country-select { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
  .tro-cc-chip { padding:6px 12px; font-size:12.5px; font-weight:600; border-radius:99px;
    border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); cursor:pointer;
    transition:background .12s, border-color .12s, color .12s; }
  .tro-cc-chip:hover { border-color:var(--accent); }
  .tro-cc-chip.on { background:color-mix(in srgb, var(--accent) 15%, var(--surface)); color:var(--accent);
    border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
  .tmodal-country-body ul.tmodal-list.mega li { break-inside:avoid; }
  .tmodal-country-body ul.tmodal-list.mega li.own { color:var(--ink); font-weight:600; }
  .tmodal-country-body ul.tmodal-list.mega li:not(.own) { color:var(--ink-3); }
  @media (max-width: 520px){
    .tmodal-country-body ul.tmodal-list.mega { columns:1 !important; }
  }

  /* Accordeon des sections dans le modal (Bear Grylls, Ma France, etc.) */
  .tmodal-acc { display:flex; flex-direction:column; gap:6px; }
  .tmodal-acc-item { border:1px solid var(--line); border-radius:10px; background:var(--surface-2); overflow:hidden; }
  .tmodal-acc-item.is-valid { border-color:color-mix(in srgb, var(--accent) 30%, var(--line));
    background:color-mix(in srgb, var(--accent) 5%, var(--surface-2)); }
  .tmodal-acc-item.is-todo { border-color:var(--line); }
  .tmodal-acc-item.empty { opacity:.5; padding:8px 12px; }
  .acc-summary { list-style:none; cursor:pointer; padding:10px 12px 10px 14px;
    display:grid; grid-template-columns:1fr auto 60px; align-items:center; gap:10px;
    font-size:13.5px; font-weight:600; color:var(--ink); user-select:none; }
  .acc-summary::-webkit-details-marker { display:none; }
  .acc-summary::before { content:'▸'; color:var(--ink-3); font-weight:400; margin-right:4px;
    transition:transform .15s; grid-column:1; align-self:center; margin-left:-4px; }
  details[open] > .acc-summary::before { transform:rotate(90deg); }
  .acc-title { color:var(--ink); font-size:13.5px; }
  .acc-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px;
    text-transform:uppercase; letter-spacing:.03em; }
  .acc-badge.ok { background:color-mix(in srgb, var(--accent) 20%, var(--surface));
    color:var(--accent); }
  .acc-badge.todo { background:var(--surface); color:var(--ink-3); border:1px solid var(--line); }
  .acc-bar-mini { height:6px; border-radius:99px; background:color-mix(in srgb, var(--ink-3) 20%, var(--surface));
    overflow:hidden; }
  .acc-bar-mini > span { display:block; height:100%; background:var(--accent);
    transition:width .3s ease; border-radius:99px; }
  .tmodal-acc-item.is-todo .acc-bar-mini > span { background:var(--gold); }
  .tmodal-acc details > ul { margin:0; padding:8px 14px 12px 32px; list-style:disc;
    columns:2; column-gap:24px; font-size:12.5px; color:var(--ink-2); }
  .tmodal-acc details > ul > li { margin:3px 0; break-inside:avoid; }
  .tmodal-acc details > ul > li.own { color:var(--ink); font-weight:600; }
  .tmodal-acc details > ul > li.own::marker { color:var(--accent); }
  @media (max-width: 520px){
    .tmodal-acc details > ul { columns:1; padding-left:26px; }
    .acc-summary { grid-template-columns:1fr auto 44px; padding:9px 10px; font-size:12.5px; }
  }

  .tmodal { display:none; position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.5); overflow:hidden; overscroll-behavior:contain;
    align-items:center; justify-content:center; padding:20px; }
  body.trophy-modal-open { overflow:hidden; }
  .tmodal.open { display:flex; }
  .tmodal-box { background:var(--surface); border:1px solid var(--line-2); border-radius:16px;
    max-width:640px; width:100%; max-height:90vh; overflow:auto; overscroll-behavior:contain; padding:22px 24px; position:relative;
    box-shadow:var(--shadow); }
  .tmodal-x { position:absolute; top:12px; right:12px; border:none; background:var(--surface-2);
    color:var(--ink-2); border-radius:8px; width:28px; height:28px; cursor:pointer; font-size:13px; }
  .tmodal-box h3 { font-family:var(--serif); font-weight:600; margin:0 0 12px; }
  .tmodal-list { margin:0; padding-left:20px; color:var(--ink); }
  .tmodal-list li { margin:5px 0; }
  /* Classement : les trois tris ; l'explication de chacun vit dans une bulle au survol
     (#triBulle, remplie par _bulleTri). Le « ? » et le bareme pose sur la page sont retires
     le 2026-10-05 : Mathis les trouvait hors du style du site. */
  .board-modes-row { position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
  /* Collee sous l'entete du site tant qu'on est dans le Classement (2026-10-22). Sa hauteur,
     --haut-entete, est mesuree par app.js ; le fond de la page cache ce qui passe dessous. */
  /* La rangee collee se lit comme le bas de l'entete : le meme espace au-dessus et en dessous des
     boutons, puis le meme trait fin que sous les onglets (Mathis, 2026-10-23). En defilant, le
     tableau passe sous ce trait. Essais du 22/10 ecartes : 10 px en haut seulement (« espace
     blanc »), rien en haut (« colle aux onglets »), bande de 32 px en bas (grise, trop haute).
     Le fond deborde sur les gouttieres de .wrap (24 px), comme .entete-fixe : sinon l'ombre du
     tableau depassait de chaque cote de la bande. Le trait, lui, garde la largeur du contenu,
     comme celui des onglets : c'est un degrade d'un pixel plutot qu'une bordure. */
  #results > .board-modes-row { position:sticky; top:var(--haut-entete, 0px); z-index:50;
    background:linear-gradient(var(--line), var(--line)) 24px 100% / calc(100% - 48px) 1px no-repeat, var(--bg);
    margin:0 -24px; padding:12px 24px 13px; }
  /* La bulle reste a 18 px sous les boutons, comme avant le trait. */
  #results > .board-modes-row .tri-bulle { top:calc(100% + 5px); }
  .tri-bulle { position:absolute; top:calc(100% + 8px); z-index:20; width:max-content; max-width:min(440px, calc(100vw - 48px));
    padding:12px 14px; background:var(--surface); border:1px solid var(--line-2); border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.18); font-size:14px; line-height:1.5; color:var(--ink-2); }
  .tri-bulle[hidden] { display:none; }
  .tri-bulle p { margin:0; }
  .tri-bulle b { color:var(--ink); }
  .tb-titre { margin:12px 0 8px; font-size:14px; font-weight:600; color:var(--ink); }
  .tb-grille { display:grid; grid-template-columns:auto 1fr auto; gap:5px 10px; align-items:center; }
  /* Pastilles rondes chiffrees : les memes que sur les vignettes du Birdydex (.pkdx-tier) */
  .tb-n { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; color:#fff;
    font:800 10px var(--sans); padding-bottom:1px; }
  /* Rarete ligue : un palier qui regroupe plusieurs nombres de membres ecrit ses bornes
     (« 5–7 ») dans une etiquette arrondie, comme sa pastille de « Qui a vu quoi ». */
  .tb-n.tb-plage { width:auto; min-width:20px; padding:0 6px 1px; border-radius:10px; }
  /* Les lettres X et P, a la place de l'ancien palier 0. */
  .tb-lettres { display:inline-flex; gap:3px; }
  .tb-nom { color:var(--ink); }
  .tb-part { color:var(--ink-3); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
  /* Rarete terrain : les points en quatrieme colonne, apres la part des listes (2026-10-23). */
  .tb-grille.tb-avec-pts { grid-template-columns:auto 1fr auto auto; }
  /* Sans part des listes (exotiques, especes absentes de France), le nom prend aussi sa colonne :
     sinon « Espèce absente de France » passait sur deux lignes. */
  .tb-nom.tb-nom-large { grid-column:span 2; }
  .tb-pts { color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .tmodal-note { margin:0 0 4px; font-size:13px; color:var(--ink-2); }
  .tmodal-h { margin:14px 0 6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2); }
  .tmodal-h span { color:var(--ink-3); font-weight:400; }
  .tmodal-list.mega { columns:160px 2; column-gap:22px; padding:0; margin:0; list-style:none; }
  .tmodal-list.mega li { font-size:13px; break-inside:avoid; color:var(--ink-3); margin:3px 0; }
  .tmodal-list.mega li.own { color:var(--gold); font-weight:600; }
  .miss-toggle { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); cursor:pointer; user-select:none; }
  .miss-toggle input { cursor:pointer; margin:0; }
  tr.missing { opacity:.5; }
  .mcard.missing { opacity:.55; }
  /* ============ POKEDEX GRID ============ */
  /* En-tete de groupe, en tri par famille et par milieu ; la grille reste plate en tri par
     rarete. Les familles ont recu le leur le 2026-10-02, a la demande de Mathis (maquette
     « guide de terrain ») : « Canards, oies et cygnes · 18 sur 20 ». */
  .pkdx-groupe { grid-column:1/-1; margin:18px 0 2px; padding:6px 2px 6px;
    border-bottom:1px solid var(--line); font:600 14px var(--sans); color:var(--ink-2); }
  .pkdx-groupe:first-child { margin-top:0; }
  .pkdx-groupe-n { font-weight:400; color:var(--ink-3); }
  /* Le nom savant de la famille (« Calcariidés »), a droite du titre, ajoute le 2026-10-12 :
     meme taille que le titre (14 px, rien de plus petit ne se lit), plus discret par la
     couleur. Sur un ecran etroit, il passe a la ligne sous le titre. */
  .pkdx-groupe-fam { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:0 12px; }
  /* En italique, la police des noms scientifiques partout ailleurs (td.sp .sci) ; un point le
     separe du nom francais (Mathis, 2026-10-22). */
  .pkdx-groupe-sci { font-family:var(--sans); font-style:italic; font-weight:400; color:var(--ink-3); }
  /* Grand titre d'ordre (« Accipitriformes »), au-dessus de ses familles : la taille d'un
     petit titre de bloc (17 px, 600). En italique de la police du texte, comme tout nom latin
     de l'appli : version C de notes-privees/maquettes/ordres/, choisie par Mathis le
     2026-10-23 parmi cinq (la police des titres ne lui plaisait pas). */
  .pkdx-ordre { grid-column:1/-1; margin:30px 0 0; padding:0 2px;
    font:italic 600 17px var(--sans); color:var(--ink); }
  .pkdx-ordre:first-child { margin-top:0; }
  .pkdx-ordre + .pkdx-groupe { margin-top:4px; }
  /* Compteur du Birdydex : le nombre d'especes vues en grand, dans la police des titres.
     Interligne serre : .section-head aligne ses deux cotes sur la ligne de base, et le 26 px en
     interligne normal montait plus haut que le titre, qu'il poussait de 4,8 px vers le bas ; le
     titre du Birdydex tombait plus bas que celui des autres pages. Mesure le 2026-10-05 : encore
     1 px de trop a 1, aligne a 0,95 et en dessous ; 0,9 garde une marge. */
  .pkdx-compte { font:600 15px/1 var(--sans); color:var(--ink-2); }
  .pkdx-compte strong { font:700 26px/.9 var(--titre); color:var(--accent-ink); }
  /* Sur telephone le titre passe de 24 a 21 px : le compteur suit (26 -> 23), sinon il repousse
     le titre de 1 px. Mesure le meme jour a 375 px : aligne a 24 px et en dessous. */
  @media (max-width:560px){ .pkdx-compte strong { font-size:23px; } }
  /* 150 px et non 130 : sur une grille de 1474 px, 130 laissait tenir dix oiseaux par rangee
     et la photo tombait a 117 px - trop petite pour reconnaitre l'espece, alors que c'est
     tout ce qu'on demande a cette grille. A 150 on en a neuf, photo 135 px.
     La fenetre utile est etroite : sous 139 px on retombe a dix, au-dessus de 155 on tombe
     a huit. 150 se tient au milieu, donc une fenetre un peu plus large ou plus etroite ne
     fait pas sauter la rangee d'un cran. */
  .pkdx-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-top:6px; }
  .pkdx-card {
    /* Virtualisation native : le navigateur skip completement le rendu (layout, paint,
       style) des cards hors ecran. 597 cards mais seules ~30 sont reellement rendues.
       contain-intrinsic-size reserve la place (aspect ratio ~1x1 + labels) pour que
       la scrollbar reste stable. Fallback silencieux sur Safari <18 : rendu normal. */
    content-visibility: auto;
    contain-intrinsic-size: 140px 200px;
    position:relative; border:2px solid var(--line-2); background:var(--surface); border-radius:12px; padding:8px 8px 10px; cursor:pointer; transition:transform .1s, box-shadow .1s; overflow:hidden;
    /* Virtualisation cote navigateur : ne paint/layout que les cartes visibles,
       reserve 220px pour eviter les sauts au scroll. Enorme gain sur 720 cartes. */
    content-visibility:auto; contain-intrinsic-size:220px; }
  .pkdx-card:hover { transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.12); border-color:var(--accent); }
  .pkdx-card .pkdx-num { position:absolute; top:6px; left:8px; font:700 10px ui-monospace, monospace; color:var(--ink-3-sur-blanc); background:rgba(255,255,255,.85); padding:1px 6px; border-radius:8px; z-index:2; }
  /* Seule exception au carre commun : dans la grille, le rond se pose sur la photo sans
     entrer en concurrence avec le numero d espece, qui est deja un rectangle de texte. */
  /* right:6px et non 8px : la photo commence a 8px (padding de la carte), donc a 8px la
     pastille affleurait le bord droit de l image alors qu elle la depassait de 2px en haut.
     Le debord est maintenant le meme des deux cotes, et le coin se lit comme un coin. */
  /* Dessinee au double (40 px, corps 20) puis reduite de moitie, comme les ronds des filtres :
     a sa taille, le chiffre sautait d'un pixel entier quel que soit le reglage, 1,6 px trop bas
     et 1,5 px a droite au telephone. top et right -4px : le centre reste celui d'un rond de 20 px
     pose a 6px. Mesure par le banc pastilles (2026-10-22). */
  .pkdx-card .pkdx-tier { position:absolute; top:-4px; right:-4px; width:40px; height:40px; transform:scale(.5); border-radius:50%; color:#fff; font:800 20px var(--sans); display:grid; place-items:center; box-shadow:none; z-index:2; padding:0 0 2px; }
  /* Repere des especes nettement saisonnieres : pic mensuel >= 3x la moyenne annuelle. Le
     tier repose sur l annuel et ne le dit pas, alors qu il suffit souvent de viser le bon
     mois. Pose sous le numero, a gauche, pour ne pas concurrencer la pastille de tier. */
  .pkdx-card .pkdx-saison { position:absolute; top:24px; left:11px; font-size:11px; line-height:1;
    color:var(--ink-3); background:var(--surface); border-radius:50%; width:16px; height:16px;
    display:grid; place-items:center; }
  /* Statut exotique, sous la pastille de palier et du meme cote. Le palier dit la difficulte
     a rencontrer l oiseau, cette lettre dit d ou il sort : les deux sont utiles et ne se
     remplacent pas. Gris neutre, pour ne pas concurrencer la couleur du palier. */
  /* Gris plein, encre blanche : sur une carte manquante, dont la vignette est deja grise
     claire, un fond clair rendait la lettre illisible. Le gris tient sur les deux fonds.
     Bords entierement arrondis comme le repere saisonnier d en face.
     Posee a GAUCHE de la pastille de palier et non dessous : sous elle, elle mordait sur la
     photo - le cou du Cygne tubercule disparaissait derriere un « N/P/X ». En haut, elle
     reste dans la bande deja occupee par le numero et la pastille. right:30px = les 6px de
     la pastille + ses 20px + 4px de filet ; top:8px la centre sur elle. */
  /* Une espece peut porter jusqu a TROIS statuts dans un meme pays - le Colvert est N, X
     et P selon la region, et 24 couples pays/espece sont dans ce cas. Chacun a son rond ;
     la rangee les aligne de droite a gauche depuis la pastille de palier. */
  .pkdx-card .pkdx-exos { position:absolute; top:8px; right:30px; z-index:2;
    display:flex; flex-wrap:wrap; justify-content:flex-end; gap:3px; }
  /* Le jeton de statut exotique n'est pas scope aux vignettes : la fiche espece le pose
     aussi, sur sa ligne de rarete, et la meme espece doit porter le meme rond aux deux
     endroits. Seul le POSITIONNEMENT reste l'affaire de la vignette, ci-dessus. */
  /* Taille, corps et forme viennent de la declaration partagee avec .rar-chip[data-cat],
     plus haut : le filtre et ce qu'il filtre sont le meme jeton. Ne reste ici que la
     couleur, et de quoi centrer son contenu. */
  .pkdx-exo { color:#fff; background:#7e8a99; display:grid; place-items:center; }
  .pkdx-card .pkdx-img { width:100%; aspect-ratio:1/1; background:var(--surface-2); border-radius:8px; overflow:hidden; margin-bottom:6px; display:grid; place-items:center; color:var(--ink-3); font-size:28px; }
  .pkdx-card .pkdx-img img { width:100%; height:100%; object-fit:cover; display:block; }
  .pkdx-card .pkdx-name { font:600 12.5px var(--sans); color:var(--ink); text-align:center; line-height:1.25; word-wrap:break-word; }
  .pkdx-card .pkdx-sci { font:400 10px var(--sans); font-style:italic; color:var(--ink-3); text-align:center; margin-top:1px; }
  /* Manquantes : silhouette noire (comme Pokedex classique) */
  .pkdx-card.missing { opacity:.9; background:var(--surface-2); }
  .pkdx-card.missing .pkdx-img img { filter:brightness(0) contrast(2) opacity(.65); }
  .pkdx-card.missing .pkdx-img { background:var(--line-2); }
  .pkdx-card.missing .pkdx-name { color:var(--ink-3); font-style:italic; }
  .pkdx-card.missing .pkdx-sci { visibility:hidden; }
  /* La puce exotique s efface comme la pastille de palier : sur une espece pas encore
     cochee, les deux decrivent un oiseau qu on n a pas, elles doivent reculer ensemble. */
  .pkdx-card.missing .pkdx-tier,
  .pkdx-card.missing .pkdx-exo { opacity:.4; filter:grayscale(.5); }
  @media (max-width:600px){ .pkdx-grid { grid-template-columns:repeat(auto-fill, minmax(105px, 1fr)); gap:8px; } .pkdx-card { padding:6px 6px 8px; }
    /* Sur une carte de 105 px, les ronds en taille bureau mordent sur le numero d espece.
       Reduits juste assez pour que les deux respirent ; top:9 les recentre sur la pastille
       de palier, qui ne change pas de taille, elle. Et la rangee est bornee a deux ronds :
       au troisieme - le cas du Colvert - elle passe a la ligne plutot que d aller couvrir
       le numero. */
    .pkdx-card .pkdx-exos { top:9px; gap:2px; max-width:30px; }
    /* Et les filtres suivent la pastille qu ils filtrent, ici comme sur le bureau. */
    .rar-chip[data-cat], .pkdx-exo { width:28px; min-width:28px; height:28px; margin:-7px; font-size:16px; }
    /* Et le numero rend 4 px de son rembourrage : sans ca les deux se touchaient encore,
       a 0,3 px pres, sur la plus etroite des cartes. */
    .pkdx-card .pkdx-num { padding:1px 4px; } }

  /* ================= cibles tactiles =================
     Au doigt, une cible doit faire 44 px d'ECRAN (Apple HIG, Material, WCAG 2.5.5). Comme
     body porte zoom:0.85, il faut l'ecrire 52 px : 52 x 0,85 = 44,2.
     Mesure avant correction (rapport Impeccable du 2026-09-29) : pastilles de rarete a
     17 px d'ecran, actions d'un message a 18, onglets de la fiche a 36.
     Tout est enferme dans pointer:coarse - l'affichage a la souris ne bouge pas d'un pixel,
     et toutes les mesures de la barre de la Carte restent valables la ou elles ont ete faites.
     Bloc en fin de fichier : a specificite egale, la derniere regle ecrite gagne. */
  /* ---------- Ma liste : le tableau de ses especes, sous le bloc de chargement ---------- */
  .mylist { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
  .mylist-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .mylist-search { flex:0 1 300px; min-width:0; padding:8px 12px; font-size:14px; border:1px solid var(--line-2);
    border-radius:9px; background:var(--surface); color:var(--ink); }
  /* Texte d'introduction sous un titre de page : un seul style pour toutes les pages (modele :
     « Date et lieu de la premiere observation » de Ma liste, demande de Mathis le 2026-10-05). */
  .mylist-note, .section-head h2.page-title + p, #viewRanking .section-head p { margin:6px 0 10px; font-size:14px; line-height:normal; font-weight:400; color:var(--ink-3); }
  .section-head h2.page-title + p b { font-weight:700; color:var(--ink-2); }
  /* Defilement interne : une liste de 1 000 especes ne doit pas repousser la page a l'infini */
  .mylist-body { max-height:560px; overflow-y:auto; border:1px solid var(--line); border-radius:12px; }
  .mylist-row { display:grid; grid-template-columns:minmax(0,1.4fr) 92px minmax(0,1.6fr); gap:12px; align-items:baseline;
    padding:8px 14px; border-top:1px solid var(--line); font-size:14px; }
  .mylist-row:first-child { border-top:none; }
  .mylist-row.mylist-th { position:sticky; top:0; z-index:1; background:var(--surface-2); font-size:13px; font-weight:700;
    color:var(--ink-3); text-transform:uppercase; letter-spacing:.4px; padding-top:7px; padding-bottom:7px; }
  .mylist-sp { min-width:0; }
  .mylist-sp .sp-link { font-weight:600; color:var(--ink); }
  .mylist-sp .mylist-lat { display:block; font-family:var(--sans); font-style:italic; font-size:14px; color:var(--ink-3); }
  .mylist-date { font-variant-numeric:tabular-nums; color:var(--ink-2); }
  .mylist-loc { min-width:0; color:var(--ink-2); font-size:14px; overflow-wrap:anywhere; }
  .mylist-loc img { vertical-align:-2px; margin-right:6px; }
  .mylist-empty { padding:16px 14px; font-size:14px; color:var(--ink-3); }
  @media (max-width:560px){
    /* Au telephone, le lieu passe sous le nom : trois colonnes ne tiennent pas en 375 px */
    .mylist-row { grid-template-columns:minmax(0,1fr) auto; row-gap:2px; }
    .mylist-loc { grid-column:1 / -1; }
    .mylist-th .mylist-loc { display:none; }
    .mylist-search { flex-basis:100%; }
  }

  /* ===== Espèce débloquée (2026-10-11) =====
     « Ajouter à ma liste » dans l'en-tête de la fiche. Fond blanc et encre fixe, comme les pastilles
     de l'en-tête : le dégradé change de couleur selon le milieu, et --accent-ink, clair en
     sombre, n'y tiendrait pas sur du blanc. #075a56 est l'--accent-ink du thème clair. */
  .species-modal .sm-vu { display:inline-flex; align-items:center; gap:6px; margin-top:12px; height:34px; padding:0 14px;
    border:none; border-radius:9px; background:#fff; color:#075a56; font:600 14px var(--sans); cursor:pointer;
    box-shadow:0 1px 3px rgba(0,0,0,.18); }
  .species-modal .sm-vu:hover { background:#eef7f6; }
  .species-modal .sm-vu:focus-visible { outline:3px solid #fff; outline-offset:2px; }
  .species-modal .sm-vu[hidden] { display:none; }

  /* La scène « espèce débloquée », façon walkout de jeu de foot (refaite le 2026-10-11 : la
     première carte, sobre, n'était « pas ouf »). Plein écran, sombre exprès : c'est un moment
     de jeu, pas un écran de l'appli. Chronologie, toute en délais d'animation :
       0,3 s  le titre ; les faisceaux tournent à la couleur du palier
       0,8 s  trois indices, 1,3 s chacun : pays, famille, palier (0,75 s : trop rapide)
       4,7 s  la carte arrive en tournant ; 4,85 s flash et étincelles
       6,3 s  les autres espèces du dépôt, puis « Continuer »
     L'état de repos de chaque élément est son état FINAL : quand le système demande moins
     d'animation (règle globale prefers-reduced-motion), tout s'affiche posé, sans rien
     d'invisible. .fut-fini (clic, Entrée, Échap) saute au même état. */
  .debloque { position:fixed; inset:0; width:auto; height:auto; max-width:none; max-height:none; margin:0;
    padding:0; border:none; background:#04070a; color:#fff; overflow:hidden; }
  .debloque::backdrop { background:#04070a; }
  .debloque[open] { animation:fut-fondu .35s ease both; }
  @keyframes fut-fondu { from { opacity:0; } }
  .fut-scene { position:relative; min-height:100%; height:100%; box-sizing:border-box; padding:24px 16px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    overflow:hidden; outline:none; cursor:pointer;
    background:radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--fut-couleur) 30%, #04070a) 0%, #04070a 62%); }
  .fut-scene > * { position:relative; z-index:1; }
  .fut-rayons, .fut-halo, .fut-flash { position:absolute !important; pointer-events:none; }
  .fut-rayons { z-index:0; left:50%; top:46%; width:220vmax; height:220vmax; margin:-110vmax 0 0 -110vmax;
    background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--fut-couleur) 50%, transparent) 0deg 5deg, transparent 5deg 15deg);
    -webkit-mask-image:radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 18%, transparent 42%);
    mask-image:radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 18%, transparent 42%);
    animation:fut-tourne 14s linear infinite, fut-fondu 1s ease both; }
  @keyframes fut-tourne { to { transform:rotate(360deg); } }
  .fut-halo { z-index:0; left:50%; top:46%; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%;
    background:radial-gradient(circle, color-mix(in srgb, var(--fut-couleur) 70%, #fff) 0%, transparent 62%);
    opacity:.45; animation:fut-halo 1.2s ease-out 4.6s both; }
  @keyframes fut-halo { 0% { opacity:0; transform:scale(.2); } 35% { opacity:1; transform:scale(1.15); } 100% { opacity:.45; transform:scale(1); } }
  .fut-flash { z-index:5; inset:0; background:#fff; opacity:0; animation:fut-flash .6s ease-out 4.85s both; }
  @keyframes fut-flash { 0% { opacity:0; } 12% { opacity:.85; } 100% { opacity:0; } }
  .fut-titre { margin:0; font:700 15px var(--sans); letter-spacing:3px; text-transform:uppercase;
    color:color-mix(in srgb, var(--fut-couleur) 45%, #fff); text-shadow:0 0 18px var(--fut-couleur);
    animation:fut-titre .8s ease-out .3s both; }
  @keyframes fut-titre { from { opacity:0; letter-spacing:14px; } }

  /* Le centre : les indices et la carte se partagent la même place. */
  .fut-centre { display:grid; place-items:center; }
  .fut-centre > * { grid-area:1 / 1; }
  .fut-indice { display:flex; flex-direction:column; align-items:center; gap:12px; opacity:0;
    font:700 30px var(--sans); letter-spacing:3px; text-transform:uppercase; text-align:center; max-width:80vw;
    text-shadow:0 0 24px var(--fut-couleur);
    animation:fut-indice 1.3s cubic-bezier(.2,.8,.3,1) calc(.8s + var(--i) * 1.3s) both; }
  @keyframes fut-indice {
    0%   { opacity:0; transform:scale(1.8); filter:blur(8px); }
    18%  { opacity:1; transform:scale(1); filter:none; }
    84%  { opacity:1; transform:scale(.97); }
    100% { opacity:0; transform:scale(.92); filter:none; }
  }
  .fut-indice-drapeau { width:170px; height:auto; border-radius:6px; box-shadow:0 0 30px var(--fut-couleur); }
  .fut-indice-grand { font:700 48px var(--titre); letter-spacing:.5px; text-transform:none; }
  .fut-indice-note { display:grid; place-items:center; width:150px; height:150px; border-radius:50%;
    background:var(--fut-couleur); font:800 88px/1 var(--sans); letter-spacing:0;
    box-shadow:0 0 0 6px rgba(255,255,255,.15), 0 0 50px var(--fut-couleur); }

  /* position:relative : sans elle, les étincelles partaient du coin haut gauche du centre. */
  .fut-etincelles { position:relative; width:0; height:0; }
  .fut-etincelles i { position:absolute; left:0; top:0; width:7px; height:7px; margin:-3.5px; border-radius:50%;
    background:color-mix(in srgb, var(--fut-couleur) 40%, #fff); box-shadow:0 0 10px var(--fut-couleur);
    opacity:0; animation:fut-etincelle 1.1s cubic-bezier(.1,.7,.3,1) calc(4.85s + var(--t)) both; }
  @keyframes fut-etincelle {
    0%   { opacity:0; transform:rotate(var(--a)) translateX(0) scale(1.4); }
    8%   { opacity:1; }
    100% { opacity:0; transform:rotate(var(--a)) translateX(var(--d)) scale(.3); }
  }

  /* La carte, dans le style du site (Mathis, 2026-10-11 : « pas vraiment une carte FIFA ») :
     une grande case du Birdydex. Fond de panneau, coins de 18 px, bord et halo à la couleur
     du palier, numéro en haut à gauche, palier en rond en haut à droite, nom en Source Serif. */
  .fut-pose { perspective:1000px; }
  .fut-carte { position:relative; width:300px; box-sizing:border-box; padding:12px 12px 16px; border-radius:18px;
    background:var(--surface); color:var(--ink); border:3px solid var(--fut-couleur); overflow:hidden;
    box-shadow:0 0 0 6px color-mix(in srgb, var(--fut-couleur) 25%, transparent), 0 20px 60px rgba(0,0,0,.55),
      0 0 80px color-mix(in srgb, var(--fut-couleur) 50%, transparent);
    animation:fut-arrivee 1.4s cubic-bezier(.15,.85,.3,1.1) 4.7s both; }
  @keyframes fut-arrivee {
    0%   { opacity:0; transform:rotateY(720deg) scale(.15); }
    15%  { opacity:1; }
    70%  { transform:rotateY(-12deg) scale(1.1); }
    100% { opacity:1; transform:none; }
  }
  .fut-photo { position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:var(--surface-2);
    display:grid; place-items:center; font-size:46px; }
  .fut-photo img { width:100%; height:100%; object-fit:cover; display:block; }
  /* Mêmes pastilles que les cases du Birdydex, en plus grand : numéro sur fond blanc fixe
     (--ink-3-sur-blanc, qui ne change pas avec le thème), palier en rond plein. */
  .fut-num { position:absolute; top:20px; left:20px; z-index:2; font:700 14px var(--sans);
    color:var(--ink-3-sur-blanc); background:rgba(255,255,255,.9); padding:2px 9px; border-radius:9px; }
  .fut-note { position:absolute; top:17px; right:17px; z-index:2; width:44px; height:44px; border-radius:50%;
    display:grid; place-items:center; background:var(--fut-couleur); color:#fff; font:800 22px/1 var(--sans);
    box-shadow:0 2px 8px rgba(0,0,0,.3); }
  .fut-nom { margin:12px 0 0; font:700 24px/1.15 var(--titre); color:var(--ink); text-align:center; }
  .fut-sci { font-size:14px; font-style:italic; color:var(--ink-3); text-align:center; margin-top:3px; }
  .fut-puces { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:12px; }
  .fut-puce { display:inline-flex; align-items:center; gap:6px; font:600 14px var(--sans); padding:4px 10px;
    border-radius:14px; background:var(--surface-2); color:var(--ink-2); }
  .fut-puce-palier { background:color-mix(in srgb, var(--fut-couleur) 20%, var(--surface)); color:var(--ink); }
  .fut-puce img { width:18px; height:auto; border-radius:2px; }
  /* Un reflet traverse la carte une fois posée, puis repasse toutes les quatre secondes. */
  .fut-reflet { position:absolute; inset:0; z-index:3; pointer-events:none;
    background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.08) 55%, transparent 65%);
    transform:translateX(-120%); animation:fut-reflet 4s ease-in-out 6.2s infinite; }
  @keyframes fut-reflet { 0% { transform:translateX(-120%); } 30%, 100% { transform:translateX(120%); } }

  /* Les autres espèces d'un même dépôt : petites cases, retournées l'une après l'autre. */
  .fut-autres { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:10px; max-width:560px; }
  .fut-mini-bloc { display:flex; flex-direction:column; align-items:center; gap:6px; width:84px;
    animation:fut-mini .5s cubic-bezier(.2,.8,.3,1.2) calc(6.3s + var(--i) * .15s) both; }
  @keyframes fut-mini { from { opacity:0; transform:rotateY(90deg) scale(.6); } }
  .fut-mini { width:72px; padding:4px; border-width:2px; border-radius:10px;
    box-shadow:0 6px 16px rgba(0,0,0,.4); animation:none; }
  .fut-mini .fut-photo { aspect-ratio:1/1; border-radius:7px; font-size:20px; }
  .fut-mini .fut-note { top:3px; right:3px; width:22px; height:22px; font-size:12px; }
  .fut-mini-nom { font-size:14px; font-weight:600; line-height:1.2; text-align:center; color:#fff; }
  .fut-reste { align-self:center; font:800 20px var(--sans); color:#fff; opacity:.85; animation:fut-mini .5s ease 6.9s both; }
  .fut-bas { animation:fut-bas-entre .5s ease 6.6s both; }
  @keyframes fut-bas-entre { from { opacity:0; transform:translateY(12px); } }
  .debloque-ok { min-width:160px; justify-content:center; text-align:center; }

  /* Passer : tout se pose d'un coup, les faisceaux et le reflet continuent. */
  .fut-fini { cursor:default; }
  .fut-fini .fut-indice, .fut-fini .fut-etincelles, .fut-fini .fut-flash { display:none; }
  .fut-fini .fut-carte, .fut-fini .fut-mini-bloc, .fut-fini .fut-bas, .fut-fini .fut-titre,
  .fut-fini .fut-halo, .fut-fini .fut-reste { animation:none; }

  /* Après un dépôt eBird : le message qui envoie au Birdydex, et les cases qui y attendent
     d'être touchées, sur un fond teinté d'accent et un bord d'accent - légèrement à part. */
  .decouvrir-texte { margin:12px 0 0; font-size:15px; line-height:1.45; color:var(--ink-2); }
  .decouvrir-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:16px; }
  /* Pas de photo tant qu'on ne l'a pas touchee : le fond de base de la vignette et une aura
     doree. Le « ? » dore au milieu a ete retire, il ne lui plaisait pas (Mathis, 2026-10-15). Montree, la photo gachait la surprise ; l'aplat vert d'accent, l'aplat
     noir puis l'aura du palier ne lui plaisaient pas : version 8f (vignette legerement
     doree) choisie sur deux planches, aura un peu reduite (Mathis, 2026-10-11,
     notes-privees/variantes-a-decouvrir/). */
  .pkdx-card.a-decouvrir { box-shadow:0 0 14px 3px color-mix(in srgb, var(--gold) 50%, transparent); border-color:color-mix(in srgb, var(--gold) 60%, var(--line)); }
  .pkdx-card.a-decouvrir .pkdx-img { font-size:0; position:relative; background:color-mix(in srgb, var(--gold) 12%, var(--surface-2)); }
  .pkdx-card.a-decouvrir .pkdx-img img { visibility:hidden; }

  /* La case du Birdydex qui se révèle : elle grossit, rebondit, s'entoure d'un halo
     d'accent, et sa photo passe de la silhouette à la couleur. */
  .pkdx-card.pkdx-revele { animation:pkdx-revele 1.2s cubic-bezier(.2,.8,.25,1) both; border-color:var(--accent); z-index:3; }
  .pkdx-card.pkdx-revele .pkdx-img img { animation:pkdx-revele-img 1.2s ease-out both; }
  @keyframes pkdx-revele {
    0%   { transform:scale(.9); box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
    40%  { transform:scale(1.08); box-shadow:0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); }
    65%  { transform:scale(.98); }
    100% { transform:scale(1); box-shadow:0 0 0 0 transparent; }
  }
  @keyframes pkdx-revele-img { 0%, 25% { filter:brightness(0) contrast(2) opacity(.65); } 100% { filter:none; } }
  /* Centré par les marges et non par left:50% : avec left:50%, le texte n'avait que la
     moitié de l'écran et passait sur deux lignes au téléphone (187 px de large mesurés).
     60 px du bas : au-dessus de la barre de la démo, qui le couvrait à 24 px. */
  .debloque-bandeau { position:fixed; left:0; right:0; bottom:60px; margin:0 auto; width:fit-content; z-index:3000;
    max-width:calc(100vw - 32px); box-sizing:border-box; text-align:center;
    padding:12px 18px; border-radius:12px; background:var(--ink); color:var(--surface); font-size:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.3); pointer-events:none;
    opacity:0; transform:translateY(16px); transition:opacity .3s, transform .3s; }
  .debloque-bandeau.visible { opacity:1; transform:none; }

  /* ===== Schémas communs (2026-10-06) - voir docs/charte-graphique.md, « Schémas récurrents » =====
     Une seule police : sans cette règle, les boutons et champs sans police écrite prenaient
     celle du navigateur (Arial), et la légende de la carte celle de Leaflet (Helvetica). */
  button, input, select, textarea { font-family:inherit; }
  .leaflet-container { font-family:var(--sans); }
  code, kbd { font-family:var(--mono); }
  .seg button { padding:5px 11px; }
  /* Les contrôles de filtre ont tous la même hauteur : 34 px écrits (de 27 à 34 avant). */
  .seg, .filt-sel, .cp-btn, .whochip, .person-chip, .qz-mode {
    min-height:34px; box-sizing:border-box; }
  /* Un bloc qui ouvre une page tombe à 12 px sous le titre, comme partout. */
  .section-head + .profile, #profilEmpty[style*="none"] + .profile { margin-top:12px; padding-top:0; border-top:0; }
  /* Titres de section de l'À propos : le petit titre de bloc de la charte. */
  .about-body h3 { font:600 17px var(--titre); color:var(--ink); margin:20px 0 8px; }
  .about-body h3:first-child { margin-top:0; }
  /* Schéma « D'où viennent les cartes » : cinq cases en ligne, qui s'empilent sur téléphone.
     L'accent ne marque que la dernière case, ce que voit le visiteur. */
  .carto-chemin { list-style:none; margin:4px 0 0; padding:0; display:flex; align-items:stretch; }
  .carto-case { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:2px; padding:12px 8px;
    background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px;
    font-size:14px; line-height:1.4; color:var(--ink-2); text-align:center; }
  .carto-case code { font:14px var(--mono); color:var(--ink); }
  .carto-nom { font:600 17px var(--titre); color:var(--ink); margin-bottom:4px; }
  .carto-script { background:var(--surface); border-color:var(--ink-3); }
  .carto-vue { background:color-mix(in srgb, var(--accent) 10%, var(--surface)); border:1.5px solid var(--accent); }
  .carto-vue .carto-nom { color:var(--accent-ink); font-weight:700; }
  .carto-fleche { flex:0 0 54px; position:relative; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:4px; font-size:14px; color:var(--ink-3); }
  .carto-fleche::after { content:""; width:100%; height:14px; background:
    linear-gradient(var(--ink-3), var(--ink-3)) left center / calc(100% - 9px) 1.5px no-repeat,
    conic-gradient(from 225deg at 100% 50%, var(--ink-3) 0 90deg, transparent 0) right center / 9px 14px no-repeat; }
  .carto-sous-titre { margin:16px 0 8px; font-size:13px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.4px; color:var(--ink-3); }
  .carto-gestes { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
  .carto-geste { display:flex; flex-direction:column; gap:4px; padding:12px 14px; background:var(--surface);
    border:1px solid var(--line-2); border-radius:12px; font-size:14px; line-height:1.5; color:var(--ink-2); }
  .carto-geste b { font-size:15px; color:var(--ink); }
  .carto-pourquoi { margin:12px 0 10px; color:var(--ink-2); }
  @media (max-width:760px) {
    .carto-chemin { flex-direction:column; }
    .carto-case { flex:none; }
    .carto-fleche { flex:0 0 auto; flex-direction:row; height:40px; gap:10px; }
    .carto-fleche::after { width:14px; height:100%; order:-1; background:
      linear-gradient(var(--ink-3), var(--ink-3)) center top / 1.5px calc(100% - 9px) no-repeat,
      conic-gradient(from -45deg at 50% 100%, var(--ink-3) 0 90deg, transparent 0) center bottom / 14px 9px no-repeat; }
    .carto-fleche span { position:absolute; left:calc(50% + 14px); }
    .carto-gestes { grid-template-columns:1fr; }
  }
  /* Schéma « D'où vient la rareté » : trois temps numérotés, des barres eBird au niveau.
     Barres et échelle en HTML, comme le schéma des cartes : le texte garde sa taille sur téléphone. */
  .rar-titre { margin:14px 0 10px; font-size:13px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.4px; color:var(--ink-3); }
  .rar-temps { display:grid; grid-template-columns:30px 1fr; column-gap:12px; margin-bottom:6px; }
  .rar-n { width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff;
    font:700 15px/28px var(--sans); text-align:center; }
  .rar-corps { min-width:0; padding-bottom:16px; }
  .rar-corps p { margin:2px 0 10px; color:var(--ink-2); }
  .rar-corps p b { color:var(--ink); }
  .rar-histo { position:relative; height:150px; border-bottom:1px solid var(--line-2); }
  .rar-barres { display:flex; align-items:flex-end; gap:2px; height:100%; }
  .rar-barres i { flex:1 1 0; min-width:0; border-radius:2px 2px 0 0; background:hsl(94 65% 45.22%); }
  .rar-ligne { position:absolute; left:0; right:0; border-top:2px dashed var(--accent); }
  .rar-ligne span { position:absolute; right:0; bottom:4px; padding:0 4px; background:var(--surface);
    font-size:14px; font-weight:600; line-height:1.2; color:var(--accent-ink); }
  .rar-mois { display:grid; grid-template-columns:repeat(12, 1fr); margin-top:4px; font-size:14px;
    color:var(--ink-3); text-align:center; }
  .rar-court { display:none; }
  .rar-echelle { position:relative; padding:26px 0 28px; }
  .rar-seg { display:grid; grid-template-columns:repeat(10, 1fr); gap:2px; }
  .rar-seg div { height:32px; color:#fff; font-size:14px; font-weight:600; line-height:32px; text-align:center; }
  .rar-seg div:first-child { border-radius:6px 0 0 6px; }
  .rar-seg div:last-child { border-radius:0 6px 6px 0; }
  .rar-seuil { position:absolute; transform:translateX(-50%); font-size:14px; color:var(--ink-3); white-space:nowrap; }
  .rar-seuil.haut { top:0; }
  .rar-seuil.bas { bottom:0; }
  .rar-ici { position:absolute; top:21px; height:38px; margin-left:-4px; padding:0 1px; border:3px solid var(--ink);
    border-radius:8px; box-sizing:content-box; }
  @media (max-width:600px) {
    .rar-barres { gap:1px; }
    .rar-long { display:none; }
    .rar-court { display:inline; }
  }

  @media (pointer: coarse) {
    /* Filtres de « Qui a vu quoi » : boutons des menus, ce qu'ils contiennent, « Tout effacer ». */
    .fm-barre .cp-btn, .fm-pop .person-chip, #tierChips .rar-chip:not([data-rar]):not([data-cat]), .fm-pop .miss-toggle,
    .fm-tout { min-height:52px; }
    .fm-pop .miss-toggle { display:flex; align-items:center; }

    /* Classement : au doigt, chaque espece est une cible de doigt. */
    .board-pile .board-rond { width:52px; height:52px; }
    .board-sp { min-height:52px; }

    /* Espèce débloquée : le bouton de la fiche et « Continuer » */
    .species-modal .sm-vu, .debloque-ok { min-height:52px; }
    .species-modal .sm-vu { height:auto; }

    /* Parcours du quiz. Les etapes du chemin font deja 64 px. */
    .pc-retour, .pc-bulle .btn, .pc-choisir, .pc-quitter, .pc-fin-btns .btn { min-height:52px; }
    .pc-lien, .pc-sugg-l, .pc-entr-bas .btn, button.pc-ligne, .pc-cercles-bascule, .pc-hist summary { min-height:52px; }
    .pc-lecture-mini { width:52px; height:52px; }
    /* Noms proposes au-dessus du champ, le plus proche contre lui : en dessous, le clavier du
       telephone les couvrirait. */
    .pc-sugg { top:auto; bottom:calc(100% + 4px); flex-direction:column-reverse; }
    .pc-sugg-l:last-child { border-bottom:1px solid var(--line); }
    .pc-sugg-l:first-child { border-bottom:0; }
    .pc-lecture-petit { width:52px; height:52px; }

    /* Les pastilles de palier sont peintes dans une boite de taille double ramenee de
       moitie (voir le bloc .rar-chip plus haut). Pour 52 px rendus : boite 104, marge
       negative 26 pour rendre 52 a la mise en page, corps a l'avenant. Elles passent alors
       sur deux rangees au telephone - inevitable : 13 cibles de 44 px demandent 572 px de
       large, un telephone en fait 375. */
    .rar-chip[data-tier], .rar-chip[data-rar], .tier-chip.tier-rond {
      width:104px; min-width:104px; height:104px; margin:-26px; font-size:52px; padding:0 0 7px; }
    /* Meme calcul pour les jetons ronds de statut exotique. */
    /* Rembourrages et corps 64 (et non 62) : au doigt, le texte tombait 4 px d'appareil trop bas,
       et la lettre ne se centrait qu'a ce corps, le calage sautant d'un cran entier entre deux
       rembourrages. Mesure par le banc pastilles (2026-10-22). */
    .rar-chip[data-cat], .pkdx-exo { width:104px; min-width:104px; height:104px; margin:-26px; font-size:64px; padding:0 1.5px 7px 0; }
    #tierChips .rar-chip[data-rar] { font-size:52px; }
    #tierChips .rar-chip[data-cat] { font-size:64px; }
    /* Sauf sur les vignettes du Birdydex : on n'y touche pas le jeton, on touche la carte. A
       104 px, il faisait 52 px d'ecran et couvrait la photo (Mathis, 2026-10-22). Il garde la
       taille souris, et celle des cartes etroites sous 600 px. */
    .pkdx-card .pkdx-exo { width:32px; min-width:32px; height:32px; margin:-8px; font-size:19px; padding:0; }
    @media (max-width:600px){
      .pkdx-card .pkdx-exo { width:28px; min-width:28px; height:28px; margin:-7px; font-size:16px; } }
    /* Ni dans la bulle des tris du Classement : on n'y touche rien, la legende se lit. A 52 px les
       jetons X, P, N elargissaient sa premiere colonne et la bulle debordait a droite au
       telephone (2026-10-23). Ils y gardent la taille souris, celle des ronds de palier voisins. */
    .tri-bulle .pkdx-exo { width:32px; min-width:32px; height:32px; margin:-8px; font-size:19px; padding:0; }
    /* « Tout » et « Vide » sont des mots, pas des jetons : ils grandissent par leur hauteur. */
    .rar-chip, .tier-chip { min-height:52px; }
    .rar-chips { gap:6px; }

    /* Les actions d'un message etaient en opacity:0 jusqu'au survol. Au doigt il n'y a pas
       de survol : repondre, editer, supprimer et meme lire l'heure etaient inatteignables.
       Elles restent donc affichees. Le cout visuel est faible : editer et supprimer ne
       paraissent que sur ses propres messages et moins de cinq minutes, donc la plupart des
       messages ne portent qu'un seul bouton, « Repondre ». */
    .msg-actions, .msg .msg-actions { opacity:1; }
    .msg-time, .msg .msg-time { opacity:1; }
    .msg-act { min-width:52px; min-height:52px; font-size:22px; border-radius:50%; }
    .msg-actions { gap:8px; position:static; margin:4px 10px 0; }
    .msg.mine .msg-actions { justify-content:flex-start; }
    /* Le « + » des reactions et les pastilles deja posees vivent dans la meme rangee et
       avaient le meme defaut : 22 px ecrits, 18,7 a l'ecran. Les laisser a 22 a cote d'une
       action de 52 aurait donne une rangee bancale autant qu'inatteignable. */
    .react-add { width:52px; height:52px; font-size:22px; }
    .react-chip { min-height:52px; padding:1px 14px; font-size:15px; border-radius:26px; }
    .react-bar { gap:8px; }

    /* Onglets de la fiche espece : 36 px d'ecran mesures, 52 ecrits les portent a 44. */
    .species-modal .sm-tab { min-height:52px; }

    /* Ma liste : les box, les choix du tuto, ses boutons et les croix des fenetres. */
    .ml-box, .tuto-ch, .tuto-nav .btn, .tuto-lien { min-height:52px; }
    .ml-dialog-close { width:52px; height:52px; }
    /* Les boutons de la bulle du guide. */
    .guide-nav .btn { min-height:52px; }
    /* Fil, Photos, Tchat dans la barre d'onglets : 42 px ecrits a la souris. */
    .nav-ico { width:52px; height:52px; }
    /* L'interrupteur de theme garde son dessin (34 px) ; seule sa zone de doigt grandit a 54. */
    .theme-sw::before { content:""; position:absolute; inset:-10px -4px; }
    /* Réagir et commenter au bout d'une ligne du fil. */
    .feed-act, .feed-act.react-add { width:52px; height:52px; }
    /* Profil : la croix qui retire une espèce préférée (20 px à la souris) et le bouton
       « Modifier mon profil ». */
    .prof-fav-chip { padding:0 0 0 14px; }
    .prof-fav-chip button { width:52px; height:52px; font-size:22px; }
    .prof-id-act .btn { min-height:52px; }
    /* Carte (refonte du 2026-10-23) : couches, boutons posés sur la carte, onglets du panneau. */
    .ct-couche, .ct-puce { height:52px; border-radius:26px; padding:0 16px 0 13px; }
    .ct-rond { width:52px; height:52px; border-radius:12px; }
    .ct-onglets button { min-height:52px; padding:0; font-size:16px; }
    .ct-ariane button { min-height:52px; }
    .ct-poignee { height:52px; margin:-6px 0 -10px; }
    .ct-page .map-search input { height:52px; }
    /* Les menus du Récent et de la Ligue, sa case et « Voir les autres ». */
    .ct-bloc .cp-btn, .ct-bloc .seg button, .ct-bloc .ct-bascule, .ct-annee input, .ct-pas, .ct-plus, .ct-pli-btn, .ct-obs { min-height:52px; }
    .ct-pas button { width:52px; }
    .ct-lien { min-height:52px; padding:0 4px; }
    /* Au doigt, les pastilles font 44 px d'écran : elles passent à la ligne au lieu de sortir du bloc,
       et les choix collés écrivent leur libellé sur deux lignes plutôt que de le couper (375 px, 2026-10-28). */
    .ct-bloc .rar-chips { flex-wrap:wrap; }
    .ct-bloc .ct-seg-plein button { white-space:normal; line-height:1.15; }
    .ct-rang-n { width:52px; }
    .ct-rang-n.avec-nb { width:auto; min-width:52px; }
    .ct-gl-l, .ct-gl-n { min-height:52px; }
    /* Dans la liste d'une grappe, on touche la ligne, pas la pastille : elle garde la taille souris
       (à 52 px, six lignes ne tenaient plus dans la bulle, vu le 2026-10-24). */
    .ct-gl-l .tier-chip.tier-rond { width:40px; min-width:40px; height:40px; margin:-10px; font-size:20px; padding:0 0 1px; min-height:0; }
  }

  /* Une seule police pour TOUS les noms latins, partout : celle du texte, en italique (--sans).
     Chaque écran avait sa règle, et la moitié oubliait la police : « Pandion haliaetus » sortait
     en Palatino dans Ma liste, en Segoe UI dans la fiche, la carte, le quiz et le Birdydex.
     Palatino essayé partout le 2026-10-06 et refusé par Mathis : on garde la police du texte.
     Écrite en dernier pour passer devant ces règles à spécificité égale ; les tailles restent les leurs. */
  .sci, .mc-sci, .sm-sci, .p-sci, .ss-sci, .qz-choice-sci, .qz-verdict-sci, .mylist-lat, .latin,
  .pkdx-card .pkdx-sci { font-family:var(--sans); font-style:italic; }