/* Onglets, wishlist, étoiles et jauge de place. */

/* onglets Ma collection / Wishlist / Encyclopédie */
/* overflow-x:auto : défile au doigt si l'écran est trop étroit ; barre de défilement masquée, sinon un débordement
   d'un pixel (arrondis) la faisait apparaître sur Windows et le cadre sautillait */
.seg.views{justify-self:start;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg.views::-webkit-scrollbar{display:none}
.seg.views button{padding:9px 16px}
/* Téléphone : les onglets occupent toute la largeur, à parts égales */
@media (max-width:600px){ .seg.views{width:100%} .seg.views button{flex:1 1 auto;padding:9px 10px} }
/* barres « glide » (onglets, En collection / Archives) : au changement, une pastille foncée glisse de l'ancien
   bouton au nouveau, puis disparaît (le nouveau bouton reprend son propre fond). Voir movePill() dans accueil.js. */
.seg.glide{position:relative}
/* pas de fondu sur le fond des boutons : c'est la pastille qui bouge, sinon le noir clignote au départ et à l'arrivée */
.seg.glide button{position:relative;z-index:1;transition:none}
/* pendant le glissement : tous les boutons en texte normal ; une copie en blanc, découpée à la forme
   de la pastille, passe par-dessus (le texte blanchit au fur et à mesure que le noir avance) */
.seg.glide.pill-moving button[aria-pressed="true"]{background:transparent;color:var(--muted)}
/* overflow:hidden : la copie peut dépasser d'une fraction de pixel (arrondis à 100 % de zoom) ; sans ça, la barre
   d'onglets (qui défile sur téléphone) affichait une barre de défilement pendant l'animation et le cadre sautillait */
.view-pill-text{position:absolute;inset:0;display:flex;z-index:2;pointer-events:none;overflow:hidden;
  transition:clip-path .4s cubic-bezier(.4,0,.2,1)}
.seg.glide.pill-moving{overflow:hidden}
.seg.glide .view-pill-text button{background:transparent;color:var(--surface);flex:none}
.view-pill{position:absolute;top:0;bottom:0;left:0;background:var(--ink);transition:left .4s cubic-bezier(.4,0,.2,1),width .4s cubic-bezier(.4,0,.2,1)}

/* wishlist */
.wishlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wish{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.wish:hover{border-color:var(--moss)}
.wish-main{flex:1 1 240px;min-width:0;display:grid;gap:4px;text-align:left;background:none;border:0;padding:0}
.wish .name{font-family:var(--display);font-size:1.08rem;font-weight:700;line-height:1.2}

/* étoiles (voir stars() dans formulaire.js) */
.stars-f{display:grid;gap:4px;font-size:.82rem;color:var(--muted);font-weight:500;min-width:0}
.stars-row{display:flex;align-items:center;gap:10px}
.stars{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end}
.stars input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.stars label{font-size:1.6rem;line-height:1;color:var(--line);cursor:pointer;padding:0 2px}
.stars input:checked ~ label,
.stars label:hover,
.stars label:hover ~ label{color:var(--sand)}
.stars input:focus-visible + label{outline:2px solid var(--moss);outline-offset:2px;border-radius:4px}
.linkbtn{border:0;background:none;color:var(--muted);text-decoration:underline;font-size:.8rem;padding:0}

/* galerie photo du wiki : des miniatures (stockées en 400 px, jamais affichées plus grand) */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,200px));gap:8px}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block;background:var(--sunken)}
.ig-list{display:grid;gap:10px;justify-items:start}
.gallery.edit{grid-column:1/-1}
.gallery.edit figure{margin:0;display:grid;gap:6px}
.vote{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;border-top:1px solid var(--line);padding-top:12px}

/* case à cocher sur une ligne (profil) */
.checkline{display:flex;gap:8px;align-items:center;grid-column:1/-1;font-size:.9rem}
.checkline input{accent-color:var(--moss);width:auto}

/* jauge de place (panneau Sauvegarde) */
.meter{height:8px;border-radius:99px;background:var(--sunken);overflow:hidden}
.meter span{display:block;height:100%;background:var(--moss)}
.meter span.bad{background:var(--bad)}