/* Hondana — composants. Toutes les valeurs viennent des tokens (tokens.css). Préfixe de classe : h- */

/* ---------- socle ---------- */
h2.h-etiquette{margin:0}
.h-etiquette{font:700 12px/16px var(--font-texte);letter-spacing:.06em;text-transform:uppercase;color:var(--encre-douce)}
.h-num{font-family:var(--font-texte);font-weight:800;font-variant-numeric:lining-nums tabular-nums}
.h-icone{width:1em;height:1em;flex:none}
.h-cible{min-width:var(--cible-min);min-height:var(--cible-min)}
.h-btn-reset{appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:where(.h-sel,.h-jeton,.h-ligne,.h-carte,.h-scanner,.h-nav__item,.h-choix,.h-bouton,.h-recherche__scan,.h-recherche__effacer):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:where(.h-sel,.h-jeton,.h-scanner,.h-choix,.h-bouton){transition:transform var(--duree-appui) var(--courbe-standard)}
:where(.h-sel,.h-jeton,.h-scanner,.h-choix,.h-bouton):active,.is-presse{transform:scale(.94)}
@media (prefers-reduced-motion: reduce){:where(.h-sel,.h-jeton,.h-scanner,.h-choix,.h-bouton,.h-jeton__disque::before){transition:opacity var(--duree-fondu) linear!important}:where(.h-sel,.h-jeton,.h-scanner,.h-choix,.h-bouton):active{transform:none}}

/* ---------- pastille lecteur ---------- */
.h-pastille{--s:24px;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:50%;background:var(--c);color:var(--on);box-shadow:inset 0 0 0 1px var(--bd);font:800 calc(var(--s) * .5)/1 var(--font-texte);letter-spacing:0;overflow:hidden;user-select:none}
.h-pastille--16{--s:16px;font-size:9px}
.h-pastille--24{--s:24px}
.h-pastille--32{--s:32px}
.h-pastille--44{--s:44px;font-size:21px}
.h-pastille--64{--s:64px;font-size:30px}
.h-pastille--anneau{box-shadow:inset 0 0 0 1px var(--bd),0 0 0 2px var(--anneau,var(--surface))}
.h-pastille--photo{background:var(--surface-creuse);box-shadow:0 0 0 2px var(--c),0 0 0 3px var(--bd)}
.h-pastille--photo img{width:100%;height:100%;object-fit:cover;display:block}
.h-pastille--foyer{background:var(--surface);color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--trait-fort)}
.h-pastille--foyer svg{width:56%;height:56%}
.h-pastille--plus{background:var(--surface-creuse);color:var(--encre);box-shadow:inset 0 0 0 1px var(--trait-fort);font-size:calc(var(--s) * .44)}
.h-pile{display:inline-flex;align-items:center}
.h-pile > .h-pastille{box-shadow:inset 0 0 0 1px var(--bd),0 0 0 1.5px var(--anneau,var(--surface))}
.h-pile > .h-pastille + .h-pastille{margin-left:-3px}

/* ---------- sélecteur de lecteur courant ---------- */
.h-selecteur{display:flex;align-items:center;gap:6px;padding:6px var(--esp-4) var(--esp-2)}
.h-sel{height:var(--cible-min);min-width:var(--cible-min);display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);border-radius:var(--rayon-pilule);padding:0;color:var(--encre)}
.h-sel .h-pastille{--s:32px;font-size:16px}
.h-sel--on{background:var(--encre);color:var(--papier);padding:0 16px 0 6px;font:800 16px/20px var(--font-texte)}
.h-sel--on .h-pastille{box-shadow:inset 0 0 0 1px var(--bd),0 0 0 2px var(--papier)}
.h-selecteur--compact{gap:6px}
.h-selecteur--compact .h-sel--on{background:transparent;padding:0}
.h-selecteur--compact .h-sel--on .h-pastille{box-shadow:inset 0 0 0 1px var(--bd),0 0 0 2.5px var(--papier),0 0 0 5px var(--encre)}
.h-selecteur--compact .h-sel--on span:not(.h-pastille){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ---------- cellule de tome : le jeton ---------- */
.h-grille{display:grid;grid-template-columns:repeat(6,1fr);row-gap:6px}
.h-jeton{position:relative;width:100%;min-width:var(--cible-min);height:60px;display:grid;place-items:center;color:var(--encre)}
.h-jeton__disque{position:relative;width:var(--jeton);height:var(--jeton);border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px dashed var(--trait-fort)}
.h-jeton__disque::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--tampon);opacity:0;transform:scale(.6);transition:opacity var(--duree-tampon) var(--courbe-standard),transform var(--duree-tampon) var(--courbe-standard)}
.h-jeton__num{position:relative;font:800 20px/22px var(--font-texte);letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
.h-jeton__etiquette{position:absolute;top:1px;left:calc(50% + 11px);width:17px;height:17px;border-radius:var(--rayon-xs);display:grid;place-items:center;background:var(--c);color:var(--on);box-shadow:inset 0 0 0 1px var(--bd),0 0 0 2px var(--papier);font:800 10px/1 var(--font-texte)}
.h-jeton__etiquette svg{width:11px;height:11px}
.h-jeton .h-pile{position:absolute;bottom:0;left:50%;transform:translateX(-50%);--anneau:var(--papier)}
.h-jeton .h-pile > .h-pastille + .h-pastille{margin-left:-2px}
/* possession = l'anneau */
.h-jeton--etagere .h-jeton__disque{border:4px solid var(--c);box-shadow:0 0 0 1px var(--bd),inset 0 0 0 1px var(--bd)}
.h-jeton--emprunte .h-jeton__disque{border:3px dashed var(--mediatheque)}
.h-jeton--emprunte .h-jeton__etiquette,.h-etiquette-med{background:var(--mediatheque);color:var(--surface);box-shadow:0 0 0 2px var(--papier)}
.h-jeton--rendu .h-jeton__disque{border:2.5px dotted var(--mediatheque)}
.h-jeton--rendu .h-jeton__etiquette,.h-etiquette-med--rendu{background:var(--surface);color:var(--mediatheque);box-shadow:inset 0 0 0 1.5px var(--mediatheque),0 0 0 2px var(--papier)}
.h-jeton--manquant .h-jeton__disque{background:transparent}
.h-jeton--manquant .h-jeton__num{color:var(--encre-douce);font-weight:700}
/* lecture du lecteur courant = le tampon */
.h-jeton.is-lu .h-jeton__disque::before{opacity:1;transform:none}
.h-jeton.is-lu .h-jeton__num{color:var(--on-tampon);font-weight:800}
.h-jeton.is-selectionne .h-jeton__disque{outline:4px solid var(--surligneur);outline-offset:3px}
.h-jeton.is-focus{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--rayon-m)}
/* lentille et légende */
.h-lentille{display:flex;align-items:center;gap:var(--esp-2);font:600 13px/18px var(--font-texte);color:var(--encre-douce)}
.h-lentille b{color:var(--encre);font-weight:800}
.h-lentille__tampon{width:20px;height:20px;border-radius:50%;background:var(--tampon);flex:none}
.h-legende{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font:700 12px/16px var(--font-texte);color:var(--encre-douce)}
.h-legende > span{display:inline-flex;align-items:center;gap:6px}
.h-legende i{width:16px;height:16px;border-radius:50%;display:inline-block;flex:none;border:2px dashed var(--trait-fort)}
.h-legende i.lu{background:var(--tampon);border:3px solid var(--tampon)}
.h-legende i.etagere{border:3px solid var(--c)}
.h-legende i.emprunte{border:2px dashed var(--mediatheque)}
.h-legende i.rendu{border:2px dotted var(--mediatheque)}
.h-entete-serie__nav{display:flex;align-items:center;gap:2px;height:32px;font:700 16px/20px var(--font-texte)}
.h-entete-serie__nav svg{width:20px;height:20px}
.h-entete-serie__nav .h-plus{margin-left:auto;font-weight:900;letter-spacing:2px;font-size:18px}
.h-entete-serie h1{margin:0;font:800 28px/32px var(--font-texte);letter-spacing:-.02em}
.h-entete-serie .h-etiquette{margin-top:4px}

/* ---------- carte série ---------- */
.h-carte{display:grid;grid-template-columns:1fr 88px;column-gap:var(--esp-3);align-items:start;background:var(--surface);border-radius:var(--rayon-m);box-shadow:0 0 0 1px var(--trait),var(--ombre-carte);padding:14px 12px 14px var(--esp-4);color:var(--encre);text-decoration:none}
.h-carte--couv{grid-template-columns:44px 1fr 88px}
.h-carte__couv{width:44px;height:62px;border-radius:var(--rayon-s);overflow:hidden;background:var(--surface-creuse);box-shadow:inset 0 0 0 1px var(--trait)}
.h-carte__couv img{width:100%;height:100%;object-fit:cover;display:block}
.h-carte__titre{margin:4px 0 0;font:900 21px/24px var(--font-texte);letter-spacing:-.015em}
.h-carte__lus{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.h-carte__lus > .h-etiquette{width:100%;font-size:11px;line-height:14px}
.h-puce{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px 0 3px;border-radius:var(--rayon-pilule);background:var(--surface-creuse);font:800 14px/16px var(--font-texte);font-variant-numeric:lining-nums tabular-nums}
.h-puce.is-courant{background:var(--tt);box-shadow:inset 0 0 0 1.5px var(--bd)}
.h-puce small{font:700 11px/14px var(--font-texte);letter-spacing:.04em;text-transform:uppercase;color:var(--encre-douce)}
.h-carte__pied{grid-column:1 / -1;margin:10px 0 0;font:600 13px/18px var(--font-texte);color:var(--encre-douce)}
.h-carte__pied b{color:var(--encre);font-weight:800}
.h-sceau{width:88px;height:88px;display:block}
.h-sceau .fond{fill:var(--tt,var(--surface-creuse));stroke:var(--bd,var(--trait-fort));stroke-width:1.5}
.h-sceau .arc{font:800 9px var(--font-texte);letter-spacing:1.5px;fill:var(--encre)}
.h-sceau .gros{font:900 34px var(--font-texte);letter-spacing:-1px;fill:var(--encre)}
.h-sceau--fini .fond{fill:var(--surligneur);stroke:var(--trait-fort)}
.h-sceau--foyer .fond{fill:var(--surface-creuse);stroke:var(--trait-fort);stroke-dasharray:4 3}

/* ---------- étagères ---------- */
.h-entete-etagere{display:flex;align-items:center;gap:10px;padding:var(--esp-2) 0}
.h-entete-etagere h3{margin:0;flex:1;font:800 18px/22px var(--font-texte);letter-spacing:-.01em}
.h-carre{width:24px;height:24px;border-radius:var(--rayon-xs);display:grid;place-items:center;flex:none;background:var(--c);color:var(--on);box-shadow:inset 0 0 0 1px var(--bd);font:800 13px/1 var(--font-texte)}
.h-carre svg{width:15px;height:15px}
.h-carre.h-etiquette-med{box-shadow:none}
.h-liste{background:var(--surface);border-radius:var(--rayon-m);box-shadow:0 0 0 1px var(--trait),var(--ombre-carte);overflow:hidden}
.h-ligne{display:flex;align-items:center;gap:var(--esp-3);width:100%;min-height:64px;padding:8px 12px 8px var(--esp-3);text-align:left;color:var(--encre)}
.h-ligne + .h-ligne{box-shadow:0 -1px 0 var(--trait)}
.h-ligne:active,.h-ligne.is-presse{background:var(--surface-creuse);transform:none}
.h-ligne__vignette{width:34px;height:48px;border-radius:var(--rayon-s);flex:none;overflow:hidden;background:var(--surface-creuse);box-shadow:inset 0 0 0 1px var(--trait);display:grid;place-items:center;font:800 12px/1 var(--font-texte);color:var(--encre-douce)}
.h-ligne__vignette img{width:100%;height:100%;object-fit:cover}
.h-ligne__corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.h-ligne__titre{font:700 16px/20px var(--font-texte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-ligne__sous{font:500 14px/18px var(--font-texte);color:var(--encre-douce);font-variant-numeric:lining-nums tabular-nums}
.h-ligne__compte{min-width:30px;height:30px;padding:0 8px;border-radius:var(--rayon-pilule);display:grid;place-items:center;background:var(--surface-creuse);font:800 14px/1 var(--font-texte);font-variant-numeric:lining-nums tabular-nums}
.h-ligne__badge{display:flex;margin-top:3px}
.h-ligne__chevron{width:18px;height:18px;color:var(--encre-douce);flex:none}

/* ---------- badge de statut ---------- */
.h-badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px 0 7px;border-radius:var(--rayon-pilule);background:var(--surface-creuse);color:var(--encre);font:800 11px/14px var(--font-texte);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.h-badge svg{width:14px;height:14px}
.h-badge--emprunte{background:var(--mediatheque-teinte)}
.h-badge--emprunte svg,.h-badge--rendu svg{color:var(--mediatheque)}
.h-badge--bientot,.h-badge--doublon{background:var(--alerte-teinte);color:var(--alerte)}
.h-badge--en-retard{background:var(--erreur-teinte);color:var(--erreur)}
.h-badge--ajoute{background:var(--succes-teinte);color:var(--succes)}
.h-badge--lu{background:var(--tampon);color:var(--on-tampon)}
.h-badge--prochain{background:var(--surligneur)}
.h-badge--manquant{background:transparent;box-shadow:inset 0 0 0 1.5px var(--trait-fort);color:var(--encre-douce)}

/* ---------- barre de recherche ---------- */
.h-recherche{display:flex;align-items:center;gap:6px}
.h-recherche__champ{flex:1;display:flex;align-items:center;gap:10px;height:var(--cible-min);padding:0 6px 0 16px;border-radius:var(--rayon-pilule);background:var(--surface-creuse);color:var(--encre-douce);cursor:text}
.h-recherche__champ svg{width:18px;height:18px;flex:none}
.h-recherche__champ input{flex:1;min-width:0;border:0;background:transparent;outline:0;font:500 16px/22px var(--font-texte);color:var(--encre)}
.h-recherche__champ input::placeholder{color:var(--encre-douce);opacity:1}
.h-recherche__champ input::-webkit-search-cancel-button{display:none}
.h-recherche.is-focus .h-recherche__champ,.h-recherche__champ:focus-within{background:var(--surface);box-shadow:inset 0 0 0 2px var(--encre)}
.h-recherche__effacer{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--trait);color:var(--encre)}
.h-recherche__effacer svg{width:14px;height:14px}
.h-recherche__scan{width:var(--cible-min);height:var(--cible-min);border-radius:50%;display:grid;place-items:center;background:var(--surface-creuse);color:var(--encre);flex:none}
.h-recherche__scan svg{width:22px;height:22px}
.h-resultats{margin-top:var(--esp-2);background:var(--surface);border-radius:var(--rayon-m);box-shadow:0 0 0 1px var(--trait),var(--ombre-carte);overflow:hidden}
.h-resultats mark{background:var(--surligneur);color:var(--encre);border-radius:3px;padding:0 1px}

/* ---------- bouton scanner ---------- */
.h-scanner{display:inline-grid;place-items:center;color:var(--on-action);background:var(--action)}
.h-scanner--nav{width:62px;height:62px;border-radius:50%;box-shadow:0 0 0 5px var(--surface),var(--ombre-feuille)}
.h-scanner--nav svg{width:28px;height:28px}
.h-scanner--plein{display:inline-flex;gap:10px;height:52px;padding:0 24px 0 20px;border-radius:var(--rayon-pilule);font:800 17px/20px var(--font-texte)}
.h-scanner--plein svg{width:24px;height:24px}
.h-scanner--plein.h-scanner--large{width:100%;justify-content:center}
.h-scanner.is-scan{background:var(--surligneur);color:var(--encre);box-shadow:0 0 0 5px var(--surface),0 0 0 7px var(--encre)}
.h-scanner:disabled,.h-scanner.is-inactif{background:var(--surface-creuse);color:var(--encre-douce);box-shadow:inset 0 0 0 1.5px var(--trait-fort);cursor:not-allowed}
.h-scanner--nav.is-inactif{box-shadow:0 0 0 5px var(--surface),inset 0 0 0 1.5px var(--trait-fort)}

/* ---------- navigation basse ---------- */
.h-nav{height:86px;background:var(--surface);box-shadow:0 -1px 0 var(--trait);display:grid;grid-template-columns:repeat(5,1fr);align-items:start;padding-top:6px}
.h-nav__item{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:var(--cible-min);justify-content:center;font:700 11px/14px var(--font-texte);color:var(--encre-douce);text-decoration:none}
.h-nav__icone{width:56px;height:30px;border-radius:var(--rayon-pilule);display:grid;place-items:center}
.h-nav__icone svg{width:24px;height:24px}
.h-nav__item.is-actif{color:var(--encre);font-weight:800}
.h-nav__item.is-actif .h-nav__icone{background:var(--surface-creuse)}
.h-nav__badge{position:absolute;top:0;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 5px;border-radius:var(--rayon-pilule);background:var(--encre);color:var(--papier);font:800 11px/18px var(--font-texte);text-align:center;box-shadow:0 0 0 2px var(--surface)}
.h-nav .h-scanner--nav{justify-self:center;margin-top:-22px}

/* ---------- état vide ---------- */
.h-vide{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--esp-3);padding:var(--esp-6) var(--esp-5)}
.h-vide__fantomes{display:flex;gap:10px;margin-bottom:var(--esp-2)}
.h-vide__fantomes i{font:700 18px/1 var(--font-texte);font-style:normal;font-variant-numeric:lining-nums tabular-nums;width:var(--jeton);height:var(--jeton);border-radius:50%;border:2px dashed var(--trait-fort);display:grid;place-items:center;color:var(--encre-douce)}
.h-vide__fantomes i.plein{border-style:solid;border-color:var(--encre);color:var(--encre)}
.h-vide__fantomes svg{width:22px;height:22px}
.h-vide h2{margin:0;font:800 20px/24px var(--font-texte);letter-spacing:-.01em}
.h-vide p{margin:0;max-width:300px;font:500 15px/21px var(--font-texte);color:var(--encre-douce)}
.h-vide .h-bouton,.h-vide .h-scanner{margin-top:var(--esp-2)}

/* ---------- boutons ---------- */
.h-bouton{display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);min-height:52px;padding:0 24px;border-radius:var(--rayon-pilule);font:800 17px/20px var(--font-texte)}
.h-bouton--principal{background:var(--action);color:var(--on-action)}
.h-bouton--secondaire{min-height:var(--cible-min);background:transparent;color:var(--encre);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;font-size:16px}
.h-bouton--large{width:100%}

/* ---------- feuille de confirmation ---------- */
.h-voile{position:absolute;inset:0;background:rgba(10,12,24,.42)}
.h-feuille{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:var(--rayon-l) var(--rayon-l) 0 0;box-shadow:var(--ombre-feuille);padding:8px var(--esp-4) 34px;display:flex;flex-direction:column;gap:var(--esp-4)}
.h-feuille__poignee{width:36px;height:5px;border-radius:3px;background:var(--trait-fort);margin:0 auto 4px}
.h-feuille__tete{display:grid;grid-template-columns:var(--jeton-xl) 1fr;gap:var(--esp-4);align-items:center}
.h-feuille__tete h2{margin:4px 0 0;font:800 22px/26px var(--font-texte);letter-spacing:-.015em}
.h-feuille .h-jeton{height:96px}
.h-feuille .h-jeton__disque{width:var(--jeton-xl);height:var(--jeton-xl)}
.h-feuille .h-jeton__disque::before{inset:5px}
.h-feuille .h-jeton--etagere .h-jeton__disque{border-width:6px}
.h-feuille .h-jeton--manquant .h-jeton__disque{border-width:3px}
.h-feuille .h-jeton__num{font-size:44px;line-height:44px;font-weight:900;letter-spacing:-.03em}
.h-feuille .h-jeton__etiquette{width:26px;height:26px;top:0;left:calc(50% + 22px);font-size:14px;border-radius:6px}
.h-feuille .h-jeton__etiquette svg{width:16px;height:16px}
.h-encart{display:flex;gap:var(--esp-3);align-items:flex-start;padding:12px 14px;border-radius:var(--rayon-m);background:var(--surface-creuse);font:500 15px/21px var(--font-texte)}
.h-encart b{font-weight:800}
.h-encart--ligne{align-items:center;flex-wrap:wrap;row-gap:8px}
.h-encart--doublon{background:var(--surligneur)}
.h-encart .h-carre{margin-top:-1px}
.h-champ{display:flex;flex-direction:column;gap:var(--esp-2)}
.h-choix-ligne{display:flex;flex-wrap:wrap;gap:var(--esp-2)}
.h-choix{display:inline-flex;align-items:center;gap:var(--esp-2);height:var(--cible-min);padding:0 14px 0 6px;border-radius:var(--rayon-pilule);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--trait-fort);font:700 15px/18px var(--font-texte);color:var(--encre)}
.h-choix .h-carre,.h-choix .h-pastille{--s:30px;width:30px;height:30px}
.h-choix[aria-checked="true"],.h-choix[aria-pressed="true"]{background:var(--encre);color:var(--papier);box-shadow:none}
.h-choix[aria-pressed="true"] .h-pastille{box-shadow:inset 0 0 0 1px var(--bd),0 0 0 2px var(--papier)}
.h-choix__coche{width:16px;height:16px;margin-left:-2px}
.h-feuille__actions{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:4px}

/* ---------- échafaudage des aperçus (pas un composant) ---------- */
.h-tel{width:390px;height:844px;border-radius:52px;background:var(--papier);box-shadow:0 0 0 1px var(--trait),0 24px 60px rgba(0,0,0,.10);overflow:hidden;position:relative;display:flex;flex-direction:column;color:var(--encre);font-family:var(--font-texte)}
.h-tel__statut{height:50px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 30px 8px 40px;font:700 16px/20px var(--font-texte)}
.h-tel__statut i{display:inline-block;width:26px;height:12px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--encre);position:relative}
.h-tel__statut i::after{content:"";position:absolute;inset:3px 7px 3px 3px;border-radius:2px;background:var(--encre)}
.h-tel__ecran{flex:1;min-height:0;padding:4px var(--esp-4) 0;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.h-tel > .h-nav{flex:none}
/* fiche série : tampon partiel = part du foyer qui a lu (--lu, 0 à 1), en secteur ; le numéro garde l'encre */
.h-jeton.is-partiel .h-jeton__disque::before{opacity:1;transform:none;background:conic-gradient(color-mix(in oklab,var(--tampon) 30%,transparent) calc(var(--lu) * 1turn),transparent 0)}