/* L'Herbier — « Jardin pop » : contours encrés, ombres décalées, formes organiques, une palette par saison.
   Sommaire : 1. Couleurs · 2. Bases · 3. Briques · 4. Barre du bas · 5. Panneaux et messages · 6. Découvrir
   · 7. Choix de rubrique · 8. Chercher, Herbier, Bilan · 9. Fiches · 10. Coups de cœur · 11. Connexion · 12. Mouvement */

/* ===================== 1. Couleurs ===================== */
/* Une palette par saison (html[data-season]), posée avant l'affichage par le petit script de index.html.
   --leaf / --wash / --solid : luminosité des trois tons de chaque famille (trait, fond pâle, fond plein). */
:root{
  --font:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --tabs-h:62px; --shadow:rgba(20,20,40,.16);
  --ease-out:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1); --zen:cubic-bezier(.22,1,.36,1);
  /* Printemps « Nymphéas » (par défaut) */
  --paper:#F7F4D5; --sheet:#FFFDF0; --ink:#0A3323; --muted:#3F5A4B; --line:#D6D8B6; --soft:#ECE9C6;
  --accent:#28713A; --accent-ink:#F7F4D5; --vu:#0A3323; --vu-ink:#F7F4D5;
  --want:#9A4C42; --want-bg:#E0A69C; --want-ink:#0A3323; --nope:#8C3B3B;
  --pop:#D3968C; --pop-ink:#0A3323; --bar:#0A3323; --bar-ink:#C3D3B8; --bar-on:#F7F4D5; --stack:#D3968C;
  --leaf-s:48%; --leaf-l:30%; --wash-s:48%; --wash-l:87%; --solid-s:36%; --solid-l:50%;
}
html[data-season="ete"]{ /* « Soleil couchant » : sable, mer, corail, abricot */
  --paper:#F8E8D4; --sheet:#FFF6EC; --ink:#213943; --muted:#6B5A55; --line:#EBD6BC; --soft:#F1DCC2;
  --accent:#276E6C; --accent-ink:#FFFFFF; --vu:#26807C; --vu-ink:#FFFFFF;
  --want:#A54E2A; --want-bg:#F3A86B; --want-ink:#213943; --nope:#A33B3B;
  --pop:#E8735A; --pop-ink:#213943; --bar:#213943; --bar-ink:#F1D9BD; --bar-on:#F8E8D4; --stack:#F2B9A0;
  --leaf-s:52%; --leaf-l:32%; --wash-s:62%; --wash-l:87%; --solid-s:55%; --solid-l:58%;
}
html[data-season="automne"]{ /* « Terre cuite » */
  --paper:#F6ECDF; --sheet:#FFF8EE; --ink:#3B1219; --muted:#6E4A4E; --line:#E5D4C0; --soft:#EFE0CC;
  --accent:#5F6B1F; --accent-ink:#FFFFFF; --vu:#5F6B1F; --vu-ink:#FFFFFF;
  --want:#A0501A; --want-bg:#E59A3C; --want-ink:#3B1219; --nope:#8C3B3B;
  --pop:#E59A3C; --pop-ink:#3B1219; --bar:#3B1219; --bar-ink:#E8CFC9; --bar-on:#FFF8EE; --stack:#D9D59A;
  --leaf-s:48%; --leaf-l:30%; --wash-s:52%; --wash-l:86%; --solid-s:50%; --solid-l:40%;
}
html[data-season="hiver"]{ /* « Cerise & ciel » */
  --paper:#EAF1F8; --sheet:#FFFFFF; --ink:#2E0B12; --muted:#5C4A52; --line:#CCD9E6; --soft:#DCE7F2;
  --accent:#2C6D3C; --accent-ink:#FFFFFF; --vu:#5C7A1C; --vu-ink:#FFFFFF;
  --want:#6E6410; --want-bg:#D6D26C; --want-ink:#2E0B12; --nope:#8C2B3B;
  --pop:#A3CCF5; --pop-ink:#2E0B12; --bar:#3D0A12; --bar-ink:#E6C9CF; --bar-on:#FFFFFF; --stack:#A3CCF5;
  --leaf-s:42%; --leaf-l:30%; --wash-s:40%; --wash-l:88%; --solid-s:42%; --solid-l:40%;
}
/* Mode sombre : seulement si choisi dans Bilan → Apparence (data-dark posé sur <html>). */
html[data-dark]{color-scheme:dark; --shadow:rgba(0,0,0,.45); --dmul:.5;
    --paper:#0B231A; --sheet:#12301F; --ink:#F2EFD0; --muted:#A9BBA9; --line:#2A4536; --soft:#1A3A29;
    --accent:#8FD3A0; --accent-ink:#0B231A; --vu:#8FD3A0; --vu-ink:#0B231A;
    --want:#E8B3A9; --want-bg:#E0A69C; --want-ink:#0B231A; --nope:#E39A9A;
    --pop:#D3968C; --pop-ink:#0B231A; --bar:#F2EFD0; --bar-ink:#4A5E50; --bar-on:#0B231A; --stack:#6B4A45;
    --leaf-s:50%; --leaf-l:72%; --wash-s:30%; --wash-l:22%; --solid-s:45%; --solid-l:60%}
html[data-dark][data-season="ete"]{
    --paper:#13262D; --sheet:#1B333B; --ink:#F8E8D4; --muted:#B9C2BE; --line:#2E4A52; --soft:#22404A;
    --accent:#8FD8D2; --accent-ink:#13262D; --vu:#5CC0B8; --vu-ink:#13262D;
    --want:#F6C08F; --want-bg:#F3A86B; --want-ink:#13262D; --nope:#F0A0A0;
    --pop:#E8735A; --pop-ink:#13262D; --bar:#F8E8D4; --bar-ink:#6B7C80; --bar-on:#13262D; --stack:#7A4E45;
    --leaf-s:50%; --leaf-l:72%; --wash-s:30%; --wash-l:22%; --solid-s:45%; --solid-l:60%}
html[data-dark][data-season="automne"]{
    --paper:#1F0F12; --sheet:#2C161A; --ink:#F6E6D2; --muted:#C4A7A4; --line:#4A2A2E; --soft:#3A1E22;
    --accent:#C9CF6A; --accent-ink:#1F0F12; --vu:#B5BF45; --vu-ink:#1F0F12;
    --want:#F2B26A; --want-bg:#E59A3C; --want-ink:#1F0F12; --nope:#E39A9A;
    --pop:#E59A3C; --pop-ink:#1F0F12; --bar:#F6E6D2; --bar-ink:#8A6A66; --bar-on:#1F0F12; --stack:#6B5E2A;
    --leaf-s:50%; --leaf-l:70%; --wash-s:30%; --wash-l:22%; --solid-s:50%; --solid-l:58%}
html[data-dark][data-season="hiver"]{
    --paper:#170A0F; --sheet:#241218; --ink:#E6EFF8; --muted:#B8A6AE; --line:#3E2630; --soft:#301A22;
    --accent:#9FD3A8; --accent-ink:#170A0F; --vu:#A5C84F; --vu-ink:#170A0F;
    --want:#E2DD84; --want-bg:#D6D26C; --want-ink:#170A0F; --nope:#E79AA5;
    --pop:#A3CCF5; --pop-ink:#170A0F; --bar:#E6EFF8; --bar-ink:#7C6A72; --bar-on:#170A0F; --stack:#3B5A7A;
    --leaf-s:45%; --leaf-l:72%; --wash-s:28%; --wash-l:22%; --solid-s:45%; --solid-l:60%}

/* Teintes des familles, accordées à chaque saison (générées et vérifiées : contrastes ≥ 3:1).
   --h teinte · --k saturation relative · --d décalage de luminosité du ton plein. */
:root,html[data-season="printemps"]{--h-film:92;--k-film:1.0;--d-film:0;--h-serie:190;--k-serie:1.0;--d-serie:-6;--h-livre:10;--k-livre:1.0;--d-livre:4;--h-bd:42;--k-bd:1.05;--d-bd:6;--h-musique:345;--k-musique:0.95;--d-musique:8;--h-art:255;--k-art:0.7;--d-art:0;--h-lieu:30;--k-lieu:0.45;--d-lieu:0;--h-jeu:160;--k-jeu:0.75;--d-jeu:0;--h-spectacle:318;--k-spectacle:0.6;--d-spectacle:4;--h-expo:280;--k-expo:0.55;--d-expo:6;--h-autre:45;--k-autre:0.3;--d-autre:0;}
html[data-season="ete"]{--h-film:182;--k-film:0.8;--d-film:-8;--h-serie:8;--k-serie:1.0;--d-serie:0;--h-livre:24;--k-livre:0.8;--d-livre:-10;--h-bd:42;--k-bd:1.05;--d-bd:8;--h-musique:285;--k-musique:0.6;--d-musique:4;--h-art:240;--k-art:0.5;--d-art:0;--h-lieu:18;--k-lieu:0.5;--d-lieu:0;--h-jeu:155;--k-jeu:0.6;--d-jeu:-4;--h-spectacle:340;--k-spectacle:0.7;--d-spectacle:4;--h-expo:300;--k-expo:0.45;--d-expo:8;--h-autre:35;--k-autre:0.25;--d-autre:6;}
html[data-season="automne"]{--h-film:58;--k-film:1.05;--d-film:4;--h-serie:350;--k-serie:0.95;--d-serie:-4;--h-livre:18;--k-livre:1.05;--d-livre:2;--h-bd:36;--k-bd:1.1;--d-bd:14;--h-musique:150;--k-musique:0.55;--d-musique:-2;--h-art:310;--k-art:0.45;--d-art:2;--h-lieu:28;--k-lieu:0.4;--d-lieu:6;--h-jeu:178;--k-jeu:0.45;--d-jeu:0;--h-spectacle:340;--k-spectacle:0.55;--d-spectacle:12;--h-expo:270;--k-expo:0.4;--d-expo:10;--h-autre:40;--k-autre:0.25;--d-autre:8;}
html[data-season="hiver"]{--h-film:82;--k-film:1.0;--d-film:2;--h-serie:205;--k-serie:1.0;--d-serie:0;--h-livre:22;--k-livre:0.9;--d-livre:0;--h-bd:58;--k-bd:1.05;--d-bd:12;--h-musique:350;--k-musique:1.05;--d-musique:-2;--h-art:262;--k-art:0.75;--d-art:4;--h-lieu:28;--k-lieu:0.4;--d-lieu:6;--h-jeu:172;--k-jeu:0.65;--d-jeu:2;--h-spectacle:325;--k-spectacle:0.6;--d-spectacle:8;--h-expo:280;--k-expo:0.5;--d-expo:10;--h-autre:210;--k-autre:0.25;--d-autre:8;}
/* Texte posé sur le ton plein : encre pour les familles claires, blanc sinon (papier en mode sombre). */
:root{--o-film:#FFF;--o-serie:#FFF;--o-livre:#FFF;--o-bd:#FFF;--o-musique:#FFF;--o-art:#FFF;--o-lieu:#FFF;--o-jeu:#FFF;--o-spectacle:#FFF;--o-expo:#FFF;--o-autre:#FFF}
html[data-season="printemps"]{--o-film:var(--ink);--o-bd:var(--ink);--o-musique:var(--ink);--o-jeu:var(--ink);--o-autre:var(--ink)}
html[data-season="ete"]{--o-film:var(--ink);--o-bd:var(--ink);--o-musique:var(--ink);--o-lieu:var(--ink);--o-jeu:var(--ink);--o-spectacle:var(--ink);--o-expo:var(--ink);--o-autre:var(--ink)}
html[data-season="automne"]{--o-film:var(--ink);--o-bd:var(--ink);--o-autre:var(--ink)}
html[data-season="hiver"]{--o-film:var(--ink);--o-bd:var(--ink);--o-jeu:var(--ink)}
html[data-dark][data-season]{--o-film:var(--paper);--o-serie:var(--paper);--o-livre:var(--paper);--o-bd:var(--paper);--o-musique:var(--paper);--o-art:var(--paper);--o-lieu:var(--paper);--o-jeu:var(--paper);--o-spectacle:var(--paper);--o-expo:var(--paper);--o-autre:var(--paper)}

/* Une famille se porte avec style="--h:…;--k:…;--d:…;--o:…" (voir famStyle dans js/util.js). */
.fam{--h:var(--h-film);--k:1;--d:0;--o:#FFF}
.sym{color:hsl(var(--h) calc(var(--leaf-s) * var(--k,1)) var(--leaf-l))}
.wash{background:hsl(var(--h) calc(var(--wash-s) * var(--k,1)) var(--wash-l))}
.solid{background:hsl(var(--h) calc(var(--solid-s) * var(--k,1)) calc(var(--solid-l) + var(--d,0) * var(--dmul,1) * 1%));color:var(--o)}

/* ===================== 2. Bases ===================== */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;padding-top:env(safe-area-inset-top,0px);background:var(--paper);color:var(--ink);font:16px/1.45 var(--font);
  -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;transition:background-color .8s ease,color .8s ease}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--paper)}
body.gated{overflow:hidden}
button{font:inherit;color:inherit}
input,textarea,select{font:inherit;color:var(--ink)}
img{max-width:100%}
a{color:var(--accent)}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h2{font:400 28px/1.1 var(--serif);letter-spacing:-.01em;margin:0;text-wrap:balance}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.thinking{font-size:14px;color:var(--muted)}
.center{align-self:center}
.hiddenfile{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}

.app{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;
  padding:0 max(16px,env(safe-area-inset-right,0px)) calc(var(--tabs-h) + env(safe-area-inset-bottom,0px) + 40px) max(16px,env(safe-area-inset-left,0px))}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:16px 8px}
.brand{margin:0;font:italic 400 36px/1 var(--serif);letter-spacing:-.01em}
.dot-pop{color:var(--pop)}
.top-r{display:flex;align-items:center;gap:10px}
/* Pastille du Bilan : initiale + anneau de l'année. */
.me{position:relative;flex:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;transition:transform .3s var(--spring)}
.me:active{transform:scale(.92)}
.me-ring{position:absolute;inset:0;transform:rotate(-90deg)}
.me-track,.me-fill{fill:none;stroke-width:3.5}
.me-track{stroke:var(--line)}
.me-fill{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 1.2s var(--zen)}
.me-i{position:absolute;inset:7px;border-radius:50%;background:var(--ink);color:var(--sheet);display:flex;align-items:center;justify-content:center;font:600 15px/1 var(--font);transition:background-color .5s ease,color .5s ease}
.me[aria-current="page"] .me-i{background:var(--pop);color:var(--pop-ink)}
.sync{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;color:var(--muted)}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.sync.on i{background:var(--accent)}
.sync span:empty{display:none}
.view{display:flex;flex-direction:column;gap:16px;padding-top:16px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px}

/* ===================== 3. Briques ===================== */
/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--ink);border-radius:999px;padding:11px 16px;
  background:var(--vu);color:var(--vu-ink);font-weight:700;line-height:1.25;text-align:center;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.btn.line{background:var(--sheet);color:var(--ink);font-weight:700}
.btn.danger{background:var(--sheet);color:var(--nope);border-color:var(--nope);box-shadow:none}
.btn.small{padding:6px 10px;font-size:13px;box-shadow:2px 2px 0 var(--ink)}
.btn:disabled{opacity:.5}
.btn:active,.press:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
label.btn{cursor:pointer}
.subtle{background:none;border:0;padding:4px;color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.round{flex:none;width:46px;height:46px;border-radius:50%;border:2px solid var(--ink);background:var(--sheet);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.round svg{width:20px;height:20px}
.round:disabled{opacity:.35;box-shadow:none;cursor:default}
.round:not(:disabled):active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.quick{border:2px solid var(--ink);border-radius:999px;padding:5px 10px;background:var(--vu);color:var(--vu-ink);font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}
.why{display:inline-flex;align-items:center;gap:6px;align-self:center;background:none;border:0;padding:4px 8px;border-radius:999px;color:var(--muted);font-size:14px;cursor:pointer}
.why .tile{width:24px;height:24px}.why .tile svg{width:16px;height:16px}

/* Champs */
.field{display:flex;gap:8px}
.input,.select{border:2px solid var(--ink);background:var(--sheet);border-radius:14px}
.input{flex:1;min-width:0;padding:11px 13px}
.select{padding:7px 10px}
textarea.input{display:block;min-height:0;line-height:1.4;padding:12px 14px;resize:none;overflow:hidden}
.lab{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:13px;color:var(--muted)}
.lab .input{width:100%;max-width:100%;min-width:0;color:var(--ink);font-size:16px}
input[type="date"].input{-webkit-appearance:none;appearance:none;display:flex;align-items:center;justify-content:space-between;min-height:46px;line-height:1.2;text-align:left}
input[type="date"].input::-webkit-date-and-time-value{text-align:left;margin:0}
input[type="date"].input::-webkit-calendar-picker-indicator{margin:0 0 0 8px;padding:0;opacity:.7;cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toggle{display:flex;align-items:center;gap:10px;font-size:15px}
.toggle input{width:20px;height:20px;accent-color:var(--ink)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:2px solid var(--ink);border-radius:14px;overflow:hidden}
.seg button{background:none;border:0;padding:10px 4px;font-size:14px;cursor:pointer}
.seg button+button{border-left:2px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper);font-weight:700}

/* Pastilles */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding:2px 4px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);font-weight:700}

/* Bourgeons : les familles d'œuvres en ronds organiques */
.buds{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin-inline:-8px;padding:8px 8px 6px}
.buds::-webkit-scrollbar{display:none}
.bud{flex:none;width:70px;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;color:var(--muted);font-weight:600;cursor:pointer}
.bud-dot{position:relative;width:62px;height:62px;display:flex;align-items:center;justify-content:center;border:2px solid transparent;
  border-radius:44% 56% 40% 60% / 58% 42% 58% 42%;transform:rotate(3deg);transition:transform .6s var(--zen),box-shadow .5s ease,background-color .5s ease,color .5s ease,border-color .5s ease}
.bud:nth-child(2n) .bud-dot{border-radius:56% 44% 62% 38% / 40% 60% 40% 60%;transform:rotate(-3deg)}
.bud:nth-child(3n) .bud-dot{border-radius:60% 40% 46% 54% / 52% 62% 38% 48%;transform:rotate(5deg)}
.bud:nth-child(5n) .bud-dot{border-radius:40% 60% 54% 46% / 62% 40% 60% 38%;transform:rotate(-5deg)}
.bud-dot svg{width:30px;height:30px}
.bud-l{font-size:13px;line-height:1.15;text-align:center;white-space:nowrap;transition:color .4s ease}
.bud[aria-pressed="true"]{color:var(--ink)}
.bud[aria-pressed="true"] .bud-l{font-weight:700}
.bud[aria-pressed="true"] .bud-dot{background:hsl(var(--h) calc(var(--solid-s) * var(--k,1)) calc(var(--solid-l) + var(--d,0) * var(--dmul,1) * 1%));color:var(--o);
  border-color:var(--ink);box-shadow:3px 4px 0 var(--ink);border-radius:62% 38% 54% 46% / 44% 58% 42% 56%;transform:rotate(-6deg) scale(1.04)}
.bud:active .bud-dot{transform:scale(.92)}
.bud-n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;padding:0 5px;background:var(--ink);color:var(--paper);border:2px solid var(--paper);font:700 11px/16px var(--font);font-style:normal;text-align:center}

/* Vignettes : symbole de la famille, ou photo/affiche marquée du symbole */
.tile{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:44% 56% 52% 48% / 54% 46% 54% 46%}
.tile svg{width:24px;height:24px}
.vis{position:relative;display:block;flex:none;width:40px;height:40px}
.thumb{display:block;width:40px;height:40px;border-radius:12px;object-fit:cover;background:var(--soft)}
.vbadge{position:absolute;right:-5px;bottom:-5px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:40% 60% 50% 50% / 55% 45% 55% 45%;box-shadow:0 0 0 2px var(--ink)}
.vbadge svg{width:14px;height:14px}

/* Listes */
.list{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.item{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;width:100%;padding:10px 2px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer}
.item .t{font-weight:700;overflow-wrap:anywhere}
.item .s{font-size:14px;color:var(--muted)}
.item .r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;color:var(--muted);text-align:right}
.badge{border:2px solid currentColor;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:700;white-space:nowrap}
.badge.vu{color:var(--accent)}.badge.envie{color:var(--want)}
.stars{color:var(--want);letter-spacing:1px;font-size:13px}
.stars .half,.rate button{position:relative}
.stars .half::before{content:"★";position:absolute;left:0;top:0;width:50%;overflow:hidden}
.who{display:inline-flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.dot{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:#fff;font-size:11px;font-weight:700}
.note{padding:14px;border:2px dashed var(--ink);border-radius:16px;font-size:14px;color:var(--muted)}
.panel{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--sheet);border:2px solid var(--ink);border-radius:22px;box-shadow:4px 5px 0 var(--ink)}
.count{font:400 44px/1 var(--serif);letter-spacing:-.01em}
.count{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.count small{font:400 13px var(--font);letter-spacing:0;color:var(--muted)}
.count .num{position:relative;display:inline-grid;min-width:1ch;font-variant-numeric:tabular-nums}
.count .num>span{grid-area:1/1;display:block}

/* Notes IMDb / TMDB */
.rnote{display:inline-block;padding:2px 7px;border-radius:8px;background:var(--soft);color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.02em}
.rnote.imdb{background:#F5C518;color:#121212;border:2px solid var(--ink)}

/* ===================== 4. Barre du bas : pilule flottante ===================== */
.tabs{position:fixed;z-index:25;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));pointer-events:none}
.tabs .in{pointer-events:auto;width:236px;max-width:100%;height:var(--tabs-h);margin:0 auto;padding:0 10px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border-radius:31px;background:var(--bar);box-shadow:0 10px 26px var(--shadow)}
.tab{display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--bar-ink);cursor:pointer}
.tab svg{width:44px;height:44px;padding:11px;border-radius:50%;transition:background-color .5s ease,color .5s ease,transform .5s var(--zen)}
.tab[aria-current="page"] svg{background:var(--bar-on);color:var(--bar)}
.tab:active svg{transform:scale(.92)}
/* Découvrir, au centre : même comportement que les autres onglets (pastille claire seulement quand on y est). */
.tab-main{padding:0 8px}
.addbtn{flex:none;width:48px;border-radius:16px;border:2px solid var(--ink);background:var(--pop);color:var(--pop-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transform:rotate(-4deg);transition:transform .3s var(--spring)}
.addbtn svg{width:24px;height:24px}
.addbtn:active{transform:rotate(-4deg) scale(.9)}

/* ===================== 5. Panneaux du bas et messages ===================== */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(10,14,18,.38)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:92%;overflow-y:auto;overscroll-behavior:contain;will-change:transform;contain:layout paint;-webkit-overflow-scrolling:touch;
  padding:8px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:var(--sheet);border:2px solid var(--ink);border-bottom:0;border-radius:28px 28px 0 0;box-shadow:0 -6px 0 var(--ink)}
.sheet .in{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.sheet.tall{height:92%;display:flex;flex-direction:column}
.sheet.tall .in{flex:1;width:100%}
.grip{width:40px;height:4px;margin:4px auto;border-radius:2px;background:var(--ink);opacity:.35;position:relative;cursor:grab;touch-action:none}
.grip::before{content:"";position:absolute;inset:-14px -60px}
.menu{display:flex;flex-direction:column;gap:10px}
.menu .btn{flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;text-align:left}
.menu .btn small{font-weight:400;opacity:.8;font-size:13px}
.sh-actions{display:flex;gap:10px;flex-wrap:wrap}
.sh-actions .btn{flex:1}

.toast{position:fixed;z-index:35;left:50%;bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom,0px) + 30px);transform:translateX(-50%);
  width:max-content;max-width:min(calc(100% - 32px),380px);display:flex;align-items:center;gap:10px;padding:7px 7px 7px 14px;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);border-radius:999px;font-size:14px;box-shadow:0 6px 20px var(--shadow)}
.toast .tmsg{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast button{flex:none;border:0;border-radius:999px;padding:6px 12px;background:color-mix(in srgb,var(--paper) 18%,transparent);color:var(--paper);font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}
.bubble{position:fixed;z-index:36;pointer-events:none;padding:4px 10px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:700;white-space:nowrap}
.bubble.envie{background:var(--want)}
.drift{position:fixed;z-index:36;pointer-events:none;width:22px;height:22px}
.drift svg{width:100%;height:100%}

/* ===================== 6. Découvrir : une grande carte ===================== */
body.tab-discover{overflow:hidden;overscroll-behavior:none}
/* Découvrir : barre du bas et pilule plus fines pour laisser toute la place à la carte */
body.tab-discover{--tabs-h:52px}
body.tab-discover .tabs{bottom:calc(8px + env(safe-area-inset-bottom,0px))}
body.tab-discover .tab svg{width:40px;height:40px;padding:10px}
body.tab-discover .app{height:calc(100dvh - env(safe-area-inset-top,0px));min-height:0;padding-bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom,0px) + 16px)}
body.tab-discover .top{display:none}
#v-discover{flex:1;min-height:0;gap:8px;padding-top:8px}
.disc-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* Pilule de rubrique : « Films · Pour vous ▾ » */
.pill{min-width:0;height:38px;display:flex;align-items:center;gap:7px;padding:0 12px 0 4px;border:2px solid var(--ink);border-radius:999px;background:var(--sheet);color:var(--ink);
  font-size:15px;font-weight:700;cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:transform .3s var(--spring),box-shadow .3s ease}
.pill:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.pill-bud{flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:58% 42% 54% 46% / 46% 56% 44% 54%;transform:rotate(-6deg);
  background:hsl(var(--h) calc(var(--solid-s) * var(--k,1)) calc(var(--solid-l) + var(--d,0) * var(--dmul,1) * 1%));color:var(--o)}
.pill-bud svg{width:19px;height:19px}
.pill-t{flex:none;white-space:nowrap}
.pill-g{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--muted)}
.pill-g::before{content:"· "}
.pill-chev{flex:none;width:16px;height:16px}

/* Paquet de cartes */
.deck{position:relative;flex:1 1 auto;min-height:260px;margin:0 6px 4px 2px;container-type:size}
.disc-bar .round{width:38px;height:38px}.disc-bar .round svg{width:18px;height:18px}
.card{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;border-radius:28px;background:var(--sheet);border:2px solid var(--ink);box-shadow:6px 7px 0 var(--ink);
  touch-action:none;user-select:none;-webkit-user-select:none;will-change:transform;transition:box-shadow .5s ease}
.card.dragging{box-shadow:9px 11px 0 var(--ink)}
.card.behind{transform:rotate(3.5deg) scale(.97);background:var(--stack);box-shadow:none}
.card.behind>*{opacity:0}

/* L'œuvre en entier : l'image tient dans le cadre, posée sur un fond tiré d'elle-même */
.cover{position:relative;flex:1 1 auto;min-height:52%;margin:6px 6px 0;border-radius:20px;overflow:hidden;
  transition:flex-basis .6s var(--zen),flex-grow .6s var(--zen),height .45s var(--zen),margin .6s var(--zen),opacity .45s ease}
.cover img{position:absolute;pointer-events:none;-webkit-user-drag:none;user-select:none}
.cover .bg{left:-20%;top:-20%;width:140%;height:140%;object-fit:cover;filter:blur(28px) saturate(1.2) brightness(.92);opacity:.95;transform:scale(1.1)}
.cover .art{inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.28))}
.cover.fill .art{object-fit:cover;filter:none}
.cover.fill .bg{display:none}
.cover.mount .bg{display:none}
.cover.mount .art{inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);filter:drop-shadow(2px 3px 0 rgba(59,18,25,.3))}
.cover.sized{flex:0 0 auto;height:var(--ch);min-height:0}
.cover.sized+.label{flex:1 1 auto;max-height:none}
.cover.sized+.label .cacts{margin-top:auto}
.cover .specimen{position:absolute;left:50%;top:50%;width:min(46%,170px);transform:translate(-50%,-50%)}
.cover .specimen svg{width:100%;height:auto;stroke-width:1.1}
.card.has-img .specimen{display:none}
.cover .rnote{position:absolute;z-index:2;top:10px;right:10px;padding:3px 8px;font-size:13px;border:2px solid var(--ink);background:var(--sheet);color:var(--ink)}
.cover .rnote.imdb{background:#F5C518;color:#121212}
.stamp{position:absolute;z-index:3;top:18px;padding:4px 10px;border:3px solid currentColor;border-radius:12px;background:var(--sheet);
  font-size:20px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .08s linear}
.stamp.envie{left:16px;color:var(--want);transform:rotate(-10deg)}
.stamp.non{right:16px;color:var(--nope);transform:rotate(10deg)}
.stamp.vu{top:auto;bottom:18%;left:50%;color:var(--accent);transform:translateX(-50%) rotate(-4deg)}

/* L'étiquette : titre, auteur · année · genre, résumé (qui défile), et les trois choix */
.label{flex:0 1 auto;max-height:46%;min-height:0;display:flex;flex-direction:column;gap:2px;padding:10px 14px 10px}
.ltitle{margin:0;font-family:var(--serif);font-size:27px;font-weight:400;line-height:1.02;letter-spacing:-.01em;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:none}
.meta{flex:none;font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta span+span::before{content:" · "}
.meta span[hidden]+span::before{content:none}
.blurb{flex:1 1 auto;min-height:0;margin-top:6px;padding-bottom:14px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;font-size:15px;line-height:1.45;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);scrollbar-width:none}
.blurb::-webkit-scrollbar{display:none}
.blurb:empty::before{content:"Cueillette du résumé…";color:var(--muted)}
.blurb.none{color:var(--muted)}
.cacts{flex:none;display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:8px;margin-top:8px}
.cact{height:40px;display:flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--ink);border-radius:999px;background:var(--sheet);color:var(--ink);
  font-size:15px;font-weight:700;cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:transform .2s var(--spring),box-shadow .2s ease}
.cact svg{width:18px;height:18px;flex:none}
.cact.vu{background:var(--vu);color:var(--vu-ink)}
.cact.envie{background:var(--want-bg);color:var(--want-ink)}
.cact:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
/* Un toucher : le résumé prend toute la carte */
.card.reading .cover{flex:0 0 0%;min-height:0;margin-top:0;opacity:0}
.card.reading .label{flex:1 1 auto;max-height:100%}
.card.reading .ltitle{-webkit-line-clamp:4;font-size:30px}
.card.reading .label{padding-top:18px}
/* Petits écrans : on resserre l'étiquette */
@container (max-height:540px){
  .ltitle{font-size:24px}
  .blurb{font-size:14px}
  .cacts{margin-top:6px}.cact{height:40px;font-size:14px}
}
@container (max-height:430px){
  .label{max-height:50%}
  .meta{-webkit-line-clamp:1}
  .ltitle{-webkit-line-clamp:1}
}

.deck-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;
  border:2px dashed var(--ink);border-radius:28px;color:var(--muted)}
.deck-empty strong{color:var(--ink);font:400 26px/1.1 var(--serif)}
.deck-empty-plant{width:64px;height:64px}
.deck-empty-plant svg{width:100%;height:100%}

/* Sur Découvrir, les messages s'affichent tout en haut, par-dessus la rangée « rubrique / annuler » :
   ils ne cachent ni la note de la carte ni ses boutons. */
body.tab-discover .toast{top:calc(env(safe-area-inset-top,0px) + 10px);bottom:auto;max-width:calc(100% - 24px)}

/* ===================== 7. Choix de la rubrique ===================== */
.sheet.picker .in{gap:18px}
.pk-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 4px;justify-items:center;padding-top:4px}
.pk-types .bud{width:100%}
.pk-types .bud-l{white-space:normal;max-width:96px}
.pk-sub{display:flex;flex-direction:column;gap:10px}
.pk-genres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gtile{min-width:0;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"thumbs n" "name name";align-items:center;gap:6px 8px;padding:9px 12px 11px 10px;
  border:2px solid var(--ink);border-radius:18px;text-align:left;cursor:pointer;background:hsl(var(--h) calc(var(--wash-s) * var(--k,1)) var(--wash-l));color:var(--ink);
  transition:transform .45s var(--zen),box-shadow .45s ease,background-color .45s ease,color .45s ease}
.gtile:nth-child(odd){border-radius:18px 22px 16px 20px}
.gtile.pv{grid-column:1 / -1;grid-template-columns:auto 1fr;grid-template-areas:"thumbs name" "thumbs n"}
.gtile[aria-pressed="true"]{background:hsl(var(--h) calc(var(--solid-s) * var(--k,1)) calc(var(--solid-l) + var(--d,0) * var(--dmul,1) * 1%));color:var(--o);box-shadow:3px 4px 0 var(--ink);transform:rotate(-1deg)}
.gtile:active{transform:scale(.96)}
.gt-thumbs{grid-area:thumbs;position:relative;width:58px;height:46px}
.gt-thumbs img{position:absolute;top:1px;width:28px;height:42px;object-fit:cover;border-radius:6px;border:2px solid var(--ink);background:var(--soft);transition:transform .6s var(--zen)}
.gt-thumbs img:nth-child(1){left:0;transform:rotate(-9deg)}
.gt-thumbs img:nth-child(2){left:13px;z-index:1;transform:rotate(-1deg)}
.gt-thumbs img:nth-child(3){left:26px;z-index:2;transform:rotate(8deg)}
.gt-thumbs img:only-child{left:13px}
.gtile:active .gt-thumbs img{transform:none}
.gt-thumbs.empty{display:flex;align-items:center;justify-content:flex-start}
.gt-plant{width:34px;height:34px;opacity:.8}
.gt-plant svg{width:100%;height:100%}
.gtile[aria-pressed="true"] .gt-plant{color:inherit}
.gt-text{display:contents}
.gt-name{grid-area:name;min-width:0;font-size:15px;font-weight:700;line-height:1.15;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.gt-n{grid-area:n;justify-self:end;text-align:right;font-size:12px;line-height:1.2;opacity:.75}
.gtile.pv .gt-n{justify-self:start;text-align:left}

/* ===================== 8. Chercher, Herbier, Bilan ===================== */
/* Bouton « ? » de la légende : il pulse doucement tant qu'un nouveau venu ne l'a pas ouvert. */
#libLegendBtn{position:relative}
#libLegendBtn.hint::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid var(--pop);animation:hint 2.4s ease-out infinite;pointer-events:none}
@keyframes hint{0%{transform:scale(.85);opacity:.9}70%,100%{transform:scale(1.35);opacity:0}}
.lg-rep{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:10px}
.legend-body .lg-rep li{display:grid;grid-template-columns:100px 1fr;gap:12px;align-items:center;font-size:14px}
.lg-rep p{margin:0;color:var(--muted)}
.lg-ex{justify-self:start;white-space:nowrap;font-size:13px;font-weight:700}
.lg-ex.lg-tab{padding:3px 10px;border-radius:999px;background:var(--ink);color:var(--paper)}
.chip.genre-on{background:var(--ink);color:var(--paper)}
.legend{border:2px solid var(--ink);border-radius:18px;background:var(--sheet)}
.legend summary{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;list-style:none;font-size:14px;color:var(--muted);cursor:pointer}
.legend summary::-webkit-details-marker{display:none}
.legend summary::after{content:"+";font-size:16px}
.legend[open] summary::after{content:"–"}
.legend-body{display:flex;flex-direction:column;gap:12px;padding:0 14px 14px}
.legend-sheet .legend-body{padding:0}
.legend-intro{font-size:15px;max-width:60ch}
.legend-body ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.legend-body li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;min-width:0;font-size:14px}
.legend-body li .tile{width:36px;height:36px}.legend-body li .tile svg{width:22px;height:22px}
.legend-body .plant{margin-left:4px;font-size:12px;color:var(--muted)}
.legend-body li p{margin-top:2px;color:var(--muted)}

.bars{display:flex;flex-direction:column;gap:8px}
.bar{display:grid;grid-template-columns:110px 1fr 34px;gap:10px;align-items:center;font-size:14px}
.bar .track{height:14px;border:2px solid var(--ink);border-radius:7px;background:var(--soft);overflow:hidden}
.bar .fill{display:block;height:100%;border-radius:5px;transform-origin:left;
  background:hsl(var(--h) calc(var(--solid-s) * var(--k,1)) calc(var(--solid-l) + var(--d,0) * var(--dmul,1) * 1%))}
.bar .n{text-align:right;font-variant-numeric:tabular-nums}
.toplist>div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.toplist>div{align-items:center;cursor:pointer}
.toplist .tl-n{flex:none;width:22px;font:400 18px var(--serif);color:var(--muted)}
.toplist .tl-sym{flex:none;width:28px;height:28px;border-radius:9px}
.toplist .tl-sym svg{width:70%;height:70%}
.toplist .tl-t{flex:1;min-width:0;overflow-wrap:anywhere}
.toplist .tl-t small{color:var(--muted)}
.toplist .stars{flex:none}
.toplist.folded>div:nth-child(n+11){display:none}
.months{display:flex;flex-direction:column;gap:14px}
.month-t{margin:0 0 6px;font:400 20px var(--serif);display:flex;align-items:baseline;gap:8px}
.month-t small{font:600 12px var(--font);color:var(--muted)}
.month-plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:10px 8px}
.mo-plate{padding:0;border:0;background:none;cursor:pointer;transform:rotate(var(--tilt,0deg))}
.mo-cover{position:relative;display:block;aspect-ratio:2/3;border:2px solid var(--ink);border-radius:8px;overflow:hidden;box-shadow:2px 3px 0 var(--ink)}
.mo-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mo-sym{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.mo-sym svg{width:55%;height:auto}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.mosaic img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}
.seasons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.season{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.season i{width:46px;height:46px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:2px solid var(--ink);border-radius:46% 54% 52% 48% / 55% 45% 55% 45%;transition:transform .5s var(--zen),box-shadow .5s ease}
.season i b{display:block}
.season[aria-pressed="true"]{color:var(--ink);font-weight:700}
.season[aria-pressed="true"] i{box-shadow:3px 3px 0 var(--ink);transform:rotate(-6deg)}
.admin-row{cursor:default}
#appLink{font-size:13px}
.about p{font-size:14px;color:var(--muted)}
.about .tmdb-note{font-size:12px}

/* Herbier : en-tête, onglets de statut, familles, planches ou liste */
.lib-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.lib-head .count{margin-top:2px}
.lib-tools{display:flex;gap:8px}
.lib-tools .round{width:40px;height:40px}
.lib-tools .round[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.lib-search{flex:none;padding:7px 14px 7px 36px;border-width:1.5px;border-radius:999px;font-size:16px;
  background:var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E") no-repeat 12px 50%/16px}
.tabs-seg{display:flex;padding:3px;border:2px solid var(--ink);border-radius:999px;background:var(--sheet)}
.tabs-seg button{flex:1;min-width:0;height:36px;display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;background:none;
  font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background-color .45s ease,color .45s ease}
.tabs-seg button small{font-size:12px;opacity:.65;font-variant-numeric:tabular-nums}
.tabs-seg button[aria-selected="true"]{background:var(--ink);color:var(--paper);font-weight:700}
.lib-fams{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding:4px}
.lib-fams::-webkit-scrollbar{display:none}
.lib-fams .chip{height:34px;padding:0 14px}
.lib-fams .bud{width:auto}
.lib-fams .bud-dot{width:36px;height:36px}
.lib-fams .bud-dot svg{width:21px;height:21px}
.lib-fams .bud[aria-pressed="true"] .bud-dot{box-shadow:2px 3px 0 var(--ink)}
.plates.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px;padding-top:4px}
.plates.list{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.plates .pv{display:block}
.plate{contain:layout style;min-width:0;display:flex;flex-direction:column;gap:6px;cursor:pointer;transform:rotate(var(--tilt,0deg));transition:transform .5s var(--zen)}
.plate:active{transform:rotate(0) scale(.96)}
.pl-cover{position:relative;display:block;aspect-ratio:2/3;border-radius:12px;border:2px solid var(--ink);overflow:hidden;box-shadow:3px 4px 0 var(--ink)}
.pl-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl-cover.mount img{inset:12% 9%;width:82%;height:76%;object-fit:contain;filter:drop-shadow(1px 2px 0 rgba(59,18,25,.35))}
.pl-cover.mount .pl-plant{opacity:0}
.pl-plant{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pl-plant svg{width:46%;height:auto;stroke-width:1.3}
.pl-fam{position:absolute;right:5px;bottom:5px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:40% 60% 50% 50% / 55% 45% 55% 45%;box-shadow:0 0 0 2px var(--ink)}
.pl-fam svg{width:15px;height:15px}
.pl-cover .who{position:absolute;left:5px;top:5px}
.pl-cover .quick{position:absolute;left:5px;bottom:5px;padding:3px 9px;font-size:12px;box-shadow:2px 2px 0 var(--ink)}
.pl-t{font-size:14px;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pl-s{margin-top:-3px;font-size:12px;color:var(--muted)}
.pl-s .stars{font-size:12px}
.plates.soft>*{animation:fadeUp .7s var(--zen) both}
.plates.soft>*:nth-child(2){animation-delay:.03s}.plates.soft>*:nth-child(3){animation-delay:.06s}.plates.soft>*:nth-child(4){animation-delay:.09s}.plates.soft>*:nth-child(5){animation-delay:.12s}.plates.soft>*:nth-child(n+6){animation-delay:.15s}
.plate.leaving{animation:leave .32s ease-in forwards}
.view.enter .plates>*{animation:fadeUp .6s var(--zen) both}
.view.enter .plates>*:nth-child(2){animation-delay:.04s}.view.enter .plates>*:nth-child(3){animation-delay:.08s}.view.enter .plates>*:nth-child(n+4){animation-delay:.12s}

/* ===================== 9. Fiches ===================== */
.sh-head{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start}
.sh-head .tile,.sh-head .vis,.sh-head .thumb{width:56px;height:56px}
.sh-head .tile svg{width:34px;height:34px}
.sh-head .vbadge{width:24px;height:24px}.sh-head .vbadge svg{width:16px;height:16px}
.specno{font-size:12px;letter-spacing:.04em;color:var(--muted)}
.sh-title{font:400 28px/1.05 var(--serif);letter-spacing:-.01em;overflow-wrap:anywhere}
.sh-sub{font-size:14px;color:var(--muted)}
/* Résumé : place réservée pendant le chargement, 6 lignes au plus (un toucher déplie), pour que la fiche ne saute pas. */
.sh-blurb{position:relative;font-size:15px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;cursor:pointer}
.sh-blurb.open{display:block;-webkit-line-clamp:unset}
.sh-blurb.loading{min-height:calc(1.45em * 4);border-radius:10px;background:linear-gradient(90deg,var(--soft) 0%,var(--line) 50%,var(--soft) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.sh-blurb.more::after{content:"Lire la suite";position:absolute;right:0;bottom:0;padding-left:44px;background:linear-gradient(90deg,transparent,var(--sheet) 40%);color:var(--muted);font-weight:600;font-size:13px;line-height:1.45em}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.notes-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;min-height:28px}
.notes-row a{font-size:13px;color:var(--muted)}
.where{margin:2px 0;border:2px solid var(--ink);border-radius:16px;background:var(--sheet)}
.where summary{list-style:none;display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer}
.where summary::-webkit-details-marker{display:none}
.where summary .lab{flex:none;color:var(--ink);font-weight:600}
.where summary::after{content:"";flex:none;width:8px;height:8px;margin-left:auto;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .3s var(--zen)}
.where[open] summary::after{transform:rotate(-135deg)}
.where.none summary::after{display:none}
.where.none summary{cursor:default}
.where-sum{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--muted)}
.where .where-list{padding:2px 12px 12px}
.where-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:40px}
.where-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 11px 4px 4px;border:2px solid var(--ink);border-radius:999px;background:var(--sheet)}
.where-chip img{width:30px;height:30px;border-radius:9px;object-fit:cover}
.where-chip.nologo{padding-left:12px}
.where-chip span{display:flex;flex-direction:column;line-height:1.1}
.where-chip b{font-size:13.5px}
.where-chip small{font-size:11px;color:var(--muted)}
.where-chip.abonnement,.where-chip.gratuit{border-color:var(--accent)}
.where-wait{font-size:13.5px;color:var(--muted)}
.where-more{font-size:13px;color:var(--muted)}
.where-src{flex-basis:100%;font-size:10.5px;color:var(--muted);opacity:.8}
.notes-row a.trailer{padding:4px 11px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:600;text-decoration:none}
.src-link{display:inline-block;margin-top:6px;font-size:13px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.creators{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.creator-link{display:inline-flex;align-items:center;gap:2px;padding:4px 8px 4px 11px;border:2px solid var(--ink);border-radius:999px;background:var(--sheet);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;transition:transform .18s var(--spring)}
.creator-link svg{width:14px;height:14px}
.creator-link:active{transform:scale(.95)}
.creator-head{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center}
.cr-photo{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:50%;object-fit:cover}
.cr-photo svg{width:32px;height:32px}
.rate{display:flex;gap:6px}
.rate button{padding:2px;border:0;background:none;font-size:30px;line-height:1;color:var(--line);cursor:pointer;transition:color .5s ease,transform .5s var(--zen)}
.rate button.on{color:var(--want-bg);-webkit-text-stroke:1.5px var(--ink);transform:translateY(-1px)}
/* Demi-étoile : on touche la moitié gauche d'une étoile. */
.rate button.half::before{content:"★";position:absolute;left:2px;top:2px;width:calc(50% - 2px);overflow:hidden;color:var(--want-bg);-webkit-text-stroke:1.5px var(--ink)}
.rate-v{align-self:center;margin-left:6px;font-size:14px;font-weight:600;color:var(--muted);min-width:2.5em}
.rate button:nth-child(2){transition-delay:.04s}.rate button:nth-child(3){transition-delay:.08s}.rate button:nth-child(4){transition-delay:.12s}.rate button:nth-child(5){transition-delay:.16s}
.when-extra{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.when-extra.one{grid-template-columns:1fr}
.photo-box{display:flex;flex-direction:column;gap:8px}
.photo-box img{width:100%;height:240px;object-fit:cover;border-radius:10px;background:var(--soft)}
.photo-actions{display:flex;flex-wrap:wrap;gap:8px}
.photo-actions .btn{flex:1}
.other{padding:4px 0 4px 12px;border-left:3px solid var(--line);font-size:14px;color:var(--muted)}
.other b{color:var(--ink)}

/* ===================== 10. Coups de cœur ===================== */
.favgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
.fav{position:relative;display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.fav img,.fav-ph{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:14px;border:2px solid transparent;background:var(--soft);transition:transform .5s var(--zen),box-shadow .5s ease}
.fav-t{font-size:12px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fav-heart{position:absolute;top:8px;right:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:color-mix(in srgb,var(--sheet) 80%,transparent);color:var(--muted);font-size:15px;opacity:0;transform:scale(.6);transition:opacity .4s ease,transform .5s var(--zen)}
.fav.on img,.fav.on .fav-ph{border-color:var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(-2deg) scale(.96)}
.fav.on .fav-heart{opacity:1;transform:scale(1);background:var(--pop);color:var(--pop-ink);border:2px solid var(--ink)}
.fav-foot{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));margin:0 -16px;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));
  display:flex;justify-content:space-between;align-items:center;gap:12px;background:linear-gradient(transparent,var(--sheet) 30%)}
.fav-foot .btn{flex:1}

/* ===================== 11. Connexion ===================== */
.gate{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;overflow-y:auto;background:var(--paper);
  padding:calc(24px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.gate-in{width:100%;max-width:400px;display:flex;flex-direction:column;gap:28px}
.gate-brand{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.gate-brand svg{width:64px;height:64px;transform-origin:50% 100%}
.gate-brand h1{margin:0;font:italic 400 56px/1 var(--serif);letter-spacing:-.01em}
.gate-brand p{color:var(--muted)}
.gate-form{display:flex;flex-direction:column;gap:12px}
.pass-wrap{position:relative;display:block}
.pass-wrap .input{width:100%;padding-right:86px}
.pass-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);font:600 13px var(--font);padding:8px;cursor:pointer}
.gate-forgot{align-self:flex-end;margin-top:-4px;font-size:14px}
.gate-sep{display:flex;align-items:center;gap:10px;margin-top:6px;color:var(--muted);font-size:13px}
.gate-sep::before,.gate-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,8,10,.42);animation:fadeIn .25s ease both}
.auth-box{width:100%;max-width:440px;max-height:92vh;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:22px 20px calc(18px + env(safe-area-inset-bottom,0px));
  background:var(--sheet);color:var(--ink);border:2px solid var(--ink);border-bottom:0;border-radius:28px 28px 0 0;animation:sheetUp .45s var(--zen) both}
.auth-box h2{margin:0 0 4px;font:400 30px/1.05 var(--serif)}
.auth-box .eyebrow{margin:0}
.auth-box .input{padding:12px 14px;font-size:16px}
.auth-box .btn{margin-top:6px}
@media (min-width:700px){.auth-modal{align-items:center}.auth-box{border-bottom:2px solid var(--ink);border-radius:28px}}
.gate .input{padding:13px 14px;font-size:17px}
.gate .btn{padding:14px 16px;font-size:16px}

/* ===================== 12. Mouvement : lent et doux ===================== */
.chip{transition:background-color .45s ease,color .45s ease,border-color .45s ease,transform .3s var(--zen)}
.btn,.quick,.seg button,.subtle,.why{transition:transform .18s var(--spring),background-color .22s ease,color .22s ease,box-shadow .22s ease}
.chip:active,.quick:active,.seg button:active,.why:active,.rate button:active{transform:scale(.94)}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetDown{to{transform:translateY(100%)}}
.view.enter{animation:fadeUp .6s var(--zen) both}
.scrim.enter{animation:fadeIn .5s ease both}.scrim.out{animation:fadeOut .22s ease both}
.sheet.enter{animation:sheetUp .7s var(--zen) both}.sheet.out{animation:sheetDown .3s cubic-bezier(.4,0,.8,.4) both}
.sheet.enter .in>*{animation:fadeUp .7s var(--zen) both}
.sheet.enter .in>*:nth-child(2){animation-delay:.05s}.sheet.enter .in>*:nth-child(3){animation-delay:.09s}.sheet.enter .in>*:nth-child(4){animation-delay:.13s}.sheet.enter .in>*:nth-child(5){animation-delay:.17s}.sheet.enter .in>*:nth-child(n+6){animation-delay:.21s}
.list.soft>*{animation:fadeUp .7s var(--zen) both}
.list.soft>*:nth-child(2){animation-delay:.03s}.list.soft>*:nth-child(3){animation-delay:.06s}.list.soft>*:nth-child(4){animation-delay:.09s}.list.soft>*:nth-child(5){animation-delay:.12s}.list.soft>*:nth-child(n+6){animation-delay:.15s}
.item.leaving{animation:leave .32s ease-in forwards}
@keyframes leave{to{opacity:0;transform:translateX(48px)}}
.toast{animation:toastIn .6s var(--zen) both}.toast.out{animation:toastOut .22s ease-in both}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,18px) scale(.9)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,10px) scale(.96)}}
.bubble{animation:bubble 1.6s var(--zen) forwards}
@keyframes bubble{0%{opacity:0;transform:translate(-50%,8px) scale(.6)}25%{opacity:1;transform:translate(-50%,-8px) scale(1.08)}100%{opacity:0;transform:translate(-50%,-40px) scale(1)}}
.drift{animation:drift 1.8s ease-out forwards}
@keyframes drift{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}
.tab.bump svg{animation:bump .5s var(--spring)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(-8deg)}100%{transform:scale(1)}}
.bar .fill{animation:grow .8s var(--ease-out) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.count .num.roll .old{animation:numOut .9s cubic-bezier(.4,0,.2,1) forwards}
.count .num.roll .cur{animation:numIn 1s var(--zen) both}
.count .num.roll.up .old{--dy:-45%}.count .num.roll.up .cur{--from:45%}
.count .num.roll.down .old{--dy:45%}.count .num.roll.down .cur{--from:-45%}
@keyframes numOut{to{opacity:0;transform:translateY(var(--dy))}}
@keyframes numIn{from{opacity:0;transform:translateY(var(--from))}to{opacity:1;transform:none}}
.gate-in{animation:fadeUp .5s var(--ease-out) both}
.gate-brand svg{animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
/* Cartes : nouvelle donne, ou la suivante qui prend la place */
.deck.fresh .card:not(.behind){animation:deal .6s var(--zen) both}
.deck.fresh .card.behind{animation:fadeIn .6s ease both}
.deck.advance .card:not(.behind)>*{animation:fadeIn .5s ease both}
.deck.advance .card.behind{animation:restack .5s var(--zen) both}
@keyframes deal{from{opacity:0;transform:translateY(24px) scale(.96) rotate(-1.5deg)}to{opacity:1;transform:none}}
@keyframes restack{from{transform:rotate(-2deg) scale(.94);opacity:0}to{transform:rotate(3.5deg) scale(.97);opacity:1}}
.deck-empty strong{animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55}}
.deck-empty-plant{animation:sway 6s ease-in-out infinite;transform-origin:50% 100%}
/* Choix de rubrique : les tuiles arrivent l'une après l'autre, les aperçus se déploient en éventail */
.pk-genres.enter .gtile{animation:fadeUp .6s var(--zen) both;animation-delay:calc(var(--i,0) * 45ms)}
.gt-thumbs.arrive img{animation:fanIn .8s var(--zen) both}
.gt-thumbs.arrive img:nth-child(2){animation-delay:.08s}.gt-thumbs.arrive img:nth-child(3){animation-delay:.16s}
@keyframes fanIn{from{opacity:0;transform:translateY(8px) rotate(0) scale(.8)}}
.pk-types .bud[aria-pressed="true"] .bud-dot{animation:budPick .7s var(--zen)}
@keyframes budPick{0%{transform:rotate(0) scale(.9)}60%{transform:rotate(-9deg) scale(1.08)}100%{transform:rotate(-6deg) scale(1.04)}}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ===== Cueillette en cours : le petit cueilleur ===== */
.cueillette{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 0;color:var(--ink);font-size:14px;
  --cu-straw:color-mix(in srgb, var(--pop) 30%, var(--paper));--cu-hair:#6B4226;--cu-skin:var(--sheet);--cu-cloth:var(--sheet);--cu-wicker:color-mix(in srgb, var(--pop) 45%, #9A6534)}
.cueillette svg{width:200px;height:auto;overflow:hidden}
.cueillette svg *{stroke-linecap:round;stroke-linejoin:round}
.cueillette span{color:var(--muted)}
.cu-ink{fill:none;stroke:var(--ink);stroke-width:1.8}
.cu-thin{stroke-width:1.3}.cu-neck{stroke-width:3}
.cu-hatch{fill:none;stroke:var(--ink);stroke-width:.9;opacity:.5}
.cu-ground .cu-ink{stroke:var(--ink);opacity:.8}
.cu-leaf{fill:var(--accent);stroke:var(--ink);stroke-width:1.2}
.cu-leaf2{fill:color-mix(in srgb, var(--accent) 55%, var(--sheet));stroke:var(--ink);stroke-width:1.2}
.cu-sleeve-o,.cu-leg-o{fill:none;stroke:var(--ink)}.cu-sleeve-o{stroke-width:7}.cu-leg-o{stroke-width:8}
.cu-sleeve{fill:none;stroke:var(--cu-cloth);stroke-width:4}
.cu-leg{fill:none;stroke:var(--muted);stroke-width:5}.cu-leg-front{stroke:color-mix(in srgb, var(--muted) 70%, var(--sheet))}
.cu-boot{fill:var(--ink)}
.cu-smock{fill:var(--cu-cloth);stroke:var(--ink);stroke-width:1.8}
.cu-face{fill:var(--cu-skin);stroke:var(--ink);stroke-width:1.8}
html[data-dark] .cueillette{--cu-skin:#F3DEC8;--cu-cloth:color-mix(in srgb, var(--ink) 22%, var(--sheet));--cu-straw:color-mix(in srgb, var(--pop) 55%, var(--sheet))}
.cu-apron{fill:var(--pop);stroke:var(--ink);stroke-width:1.4}
.cu-hair path:first-child,.cu-hair-front{fill:var(--cu-hair);stroke:var(--ink);stroke-width:1.4}
.cu-hair .cu-hatch{stroke:#2A170C;opacity:.45}
.cu-cheek{fill:var(--pop);opacity:.45}
.cu-straw{fill:var(--cu-straw);stroke:var(--ink);stroke-width:1.8}
.cu-band{fill:none;stroke:var(--accent);stroke-width:3.2}
.cu-wicker{fill:var(--cu-wicker);stroke:var(--ink);stroke-width:1.8}
.cu-body{animation:cu-bob .55s ease-in-out infinite alternate}
.cu-leg1{transform-origin:128px 170px;animation:cu-step 1.1s ease-in-out infinite alternate}
.cu-leg2{transform-origin:128px 170px;animation:cu-step 1.1s ease-in-out infinite alternate-reverse}
.cu-arm2{transform-origin:117px 116px;animation:cu-swing 1.1s ease-in-out infinite alternate}
.cu-basket{transform-origin:141px 116px;animation:cu-sway 1.1s ease-in-out infinite alternate-reverse}
.cu-hair{transform-origin:118px 86px;animation:cu-sway 1.1s ease-in-out infinite alternate}
.cu-ground{animation:cu-scroll 1.1s linear infinite}
.cu-sprout{transform-origin:150px 250px;animation:cu-pick 4.4s linear infinite}
.cu-gather{transform-origin:149px 160px;animation:cu-gather 4.4s ease-in-out infinite}
@keyframes cu-bob{to{transform:translateY(-2.5px)}}
@keyframes cu-step{from{transform:rotate(-17deg)}to{transform:rotate(17deg)}}
@keyframes cu-swing{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
@keyframes cu-sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes cu-scroll{to{transform:translateX(-80px)}}
@keyframes cu-pick{0%{transform:translate(190px,0);opacity:0}4%{opacity:1}55%{transform:translate(12px,0);opacity:1}62%{transform:translate(16px,-50px) rotate(-15deg)}72%{transform:translate(2px,-84px) rotate(-30deg) scale(.7);opacity:1}76%,100%{transform:translate(0,-88px) rotate(-30deg) scale(.6);opacity:0}}
@keyframes cu-gather{0%,72%{transform:scale(1)}78%{transform:scale(1.18)}88%,100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.cueillette *{animation:none!important}}

/* ===== Présentation (première connexion) ===== */
.tuto{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,14,18,.5);animation:tu-in .5s var(--zen)}
.tuto.out{opacity:0;transition:opacity .4s ease}
.tu-box{position:relative;width:min(420px,100%);padding:26px 22px 20px;border:2px solid var(--ink);border-radius:28px;background:var(--sheet);box-shadow:6px 6px 0 var(--stack);text-align:center}
.tu-skip{position:absolute;top:12px;right:14px;border:0;background:none;color:var(--muted);font:600 13px var(--font);cursor:pointer}
.tu-slide{animation:tu-slide .5s var(--zen)}
.tu-slide h2{margin:14px 0 8px;font:400 30px/1.05 var(--serif)}
.tu-slide p{margin:0 auto;max-width:34ch;color:var(--muted);font-size:15px;line-height:1.5}
.tu-art{min-height:132px;display:flex;align-items:center;justify-content:center}
.tu-row{display:flex;gap:10px;justify-content:center;align-items:center}
.tu-tile{width:52px;height:52px;border-radius:18px;display:flex;align-items:center;justify-content:center}
.tu-tile svg{width:34px;height:34px}
.tu-card{position:relative;width:92px;height:124px;border:2px solid var(--ink);border-radius:16px;background:var(--paper);box-shadow:4px 4px 0 var(--stack);animation:tu-sway 3s ease-in-out infinite}
.tu-mini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted)}.tu-mini svg{width:36px}
.tu-arrow{position:absolute;white-space:nowrap;font:700 12px var(--font)}
.tu-arrow.up{top:-22px;left:50%;transform:translateX(-50%);color:var(--vu)}
.tu-arrow.left{left:-62px;top:50%;color:var(--nope)}
.tu-arrow.right{right:-70px;top:50%;color:var(--want)}
.tu-pill{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 8px;border:2px solid var(--ink);border-radius:999px;background:var(--sheet);font-size:15px}
.tu-pill .sym{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center}.tu-pill svg{width:24px}
.tu-round{width:56px;height:56px;border:2px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sheet)}
.tu-round.pop{border-radius:18px;background:var(--pop);color:var(--pop-ink);transform:rotate(-5deg)}.tu-round svg{width:26px}
.tu-plate{width:62px;height:88px;border:2px solid var(--ink);border-radius:10px;display:flex;align-items:center;justify-content:center;transform:rotate(var(--r));box-shadow:3px 3px 0 var(--stack)}
.tu-plate svg{width:38px}
.tu-me{position:relative;width:76px;height:76px}.tu-me svg{position:absolute;inset:0}
.tu-me b{position:absolute;inset:12px;border-radius:50%;background:var(--ink);color:var(--sheet);display:flex;align-items:center;justify-content:center;font:600 24px var(--font)}
.tu-dots{display:flex;gap:6px;justify-content:center;margin:18px 0 14px}
.tu-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background-color .4s ease,width .4s var(--zen)}
.tu-dots i.on{width:20px;border-radius:4px;background:var(--ink)}
.tu-nav{display:flex;gap:10px}.tu-nav .btn{flex:1}
@keyframes tu-in{from{opacity:0}to{opacity:1}}
@keyframes tu-slide{from{opacity:0;transform:translateX(calc(var(--dir,0) * 24px))}to{opacity:1;transform:none}}
@keyframes tu-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-4px)}}

/* ===== Chercher : Explorer ===== */
.explore{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.xp-title{margin:2px 0 0;font:400 26px/1.1 var(--serif)}
.xp-fams{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 6px;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.xp-fams::-webkit-scrollbar{display:none}
.xp-fams .bud{flex:none}
#xpGenres{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
#xpGenres::-webkit-scrollbar{display:none}
#xpGenres .chip{flex:none}
#xpMore{align-self:center}
.xp-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.xp-head .round{flex:none;margin-top:2px}
#xpReload:active svg{transform:rotate(-200deg);transition:transform .6s var(--zen)}
.more-note{grid-column:1 / -1}

/* ===== Écran d'ouverture : la marque, puis la phrase d'accueil ===== */
.gate.out{opacity:0;transition:opacity .5s ease;pointer-events:none}
.splash{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:6px}
.splash-hello{margin:0;font:italic 400 26px/1.2 var(--serif);text-align:center;color:var(--ink);animation:splashIn .9s var(--zen) .15s both}
.splash-dots{display:flex;gap:6px}
.splash-dots i{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.3;animation:dot 1.2s ease-in-out infinite}
.splash-dots i:nth-child(2){animation-delay:.2s}.splash-dots i:nth-child(3){animation-delay:.4s}
@keyframes splashIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes dot{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ===================== Ordinateur et tablette en paysage ===================== */
/* Même appli, mise en page large : barre de navigation verticale à gauche, contenus plus larges et en colonnes,
   carte de Découvrir centrée, fiches en fenêtre au milieu de l'écran. */
@media (min-width:960px){
  .app{max-width:1240px;padding-left:136px;padding-right:48px;padding-bottom:56px}
  .top{padding-block:22px 10px}
  .tabs{left:28px;right:auto;top:50%;bottom:auto;transform:translateY(-50%)}
  body.tab-discover .tabs{bottom:auto}
  .tabs .in{width:var(--tabs-h);height:auto;padding:10px 0;display:flex;flex-direction:column;gap:8px}
  .tab-main{padding:0}
  .tab:hover svg{background:color-mix(in srgb,var(--bar-on) 18%,transparent)}
  .tab[aria-current="page"]:hover svg{background:var(--bar-on)}
  /* Découvrir : une grande carte au centre, plus haute que large */
  body.tab-discover .app{padding-bottom:28px}
  #v-discover{width:100%;max-width:480px;margin:0 auto}
  /* Chercher, Herbier : plus de colonnes */
  .plates.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:26px 20px}
  .xp-fams{flex-wrap:wrap;overflow:visible}
  #searchForm,#v-search .chips#searchTypes{max-width:760px}
  .lib-head,.lib-search,#libStatus{max-width:760px}
  /* Bilan : une colonne de lecture confortable */
  #v-recap{width:100%;max-width:820px;margin:0 auto}
  /* Fiches et panneaux : fenêtre centrée */
  .sheet{inset:0;margin:auto;width:min(640px,calc(100vw - 64px));height:fit-content;max-height:88vh;border-bottom:2px solid var(--ink);border-radius:28px;box-shadow:8px 9px 0 var(--ink);padding-bottom:22px}
  .sheet.tall{height:88vh}
  .sheet .grip{display:none}
  .sheet.enter{animation:sheetPop .5s var(--zen) both}.sheet.out{animation:sheetFade .2s ease both}
  .toast{bottom:28px}
  body.tab-discover .toast{top:22px}
  /* Survol à la souris */
  .plate:hover{transform:rotate(var(--tilt,0deg)) translateY(-3px)}
  .btn:hover{filter:brightness(1.04)}
}
@keyframes sheetPop{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sheetFade{to{opacity:0;transform:translateY(10px) scale(.98)}}
.kbd-hint{display:none}
@media (min-width:960px) and (hover:hover){.kbd-hint{display:block;text-align:center;font-size:12.5px;color:var(--muted);margin-top:4px}}
/* Administration : jauge de places */
.places{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 2px}
.places-n{font-size:15px}
.places-n b{font-size:20px}
.places-max{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2,inherit)}
.places-max .input{width:84px;text-align:center;padding-top:8px;padding-bottom:8px}
/* Bandeau de l'ancienne adresse */
.moved{position:relative;z-index:300;display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;background:var(--ink);color:var(--sheet);font-size:14px;line-height:1.35;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.moved span{flex:1}
.moved-go{flex:none;background:var(--sheet);color:var(--ink);border-radius:999px;padding:8px 14px;font-weight:700;text-decoration:none}