/* ===========================================================================
   La borne de libre-service.

   Cible : tablette de 10,6 pouces à l'HORIZONTALE, soit environ 1280 × 800
   points. Trois contraintes gouvernent tout ce fichier :

     • on lit DEBOUT, à cinquante ou soixante centimètres — plus loin qu'un
       écran de bureau, souvent sans lunettes de lecture ;
     • on touche avec un doigt, pas avec un curseur — 44 points est le minimum
       admis, et une carte entière vaut mieux qu'un bouton ;
     • la hauteur est comptée : 800 points, dont la moitié disparaît dès que le
       clavier virtuel s'ouvre.

   D'où : peu de chrome, des marges serrées en haut, et la grille qui prend
   tout ce qui reste.
   =========================================================================== */

/* ⚠️ HAUTEUR BORNÉE, PAS UNE HAUTEUR MINIMALE.
   Avec `min-height`, le conteneur grandit avec son contenu : la grille n'est
   jamais contrainte, son `overflow-y: auto` n'a rien à faire déborder, et
   aucune barre de défilement n'apparaît. C'est le défaut constaté le
   06/09/2026 — la borne n'affichait que ce qui tenait à l'écran.

   `100dvh` avant `100vh` : sur une tablette, la barre d'adresse du navigateur
   se rétracte au défilement et `100vh` compte la hauteur AVEC elle, ce qui
   cache une bande de contenu sous le bord de l'écran. `dvh` suit la hauteur
   réellement visible ; `vh` reste pour les navigateurs qui l'ignorent. */
.borne {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #F4F6F8;
}

/* ----- En-tête : titre, recherche, filtre -------------------------------- */

/* `flex-wrap` dès l'en-tête, et non seulement sous 700 px : entre une tablette
   à l'horizontale et la même à la verticale, il n'y a pas de seuil franc — il y
   a un moment où le titre, la recherche et l'interrupteur ne tiennent plus, et
   c'est le contenu qui le sait, pas une largeur écrite à l'avance. */
.borne-entete {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding: 0.9rem 1.25rem;
    background: #FFFFFF;
    border-bottom: 1px solid #E0E4E9;
    flex: 0 0 auto;
}

/* ARDOISE (#41648C) pour le logo et le nom de la bibliothèque. C'est la
   couleur des guides — celle que Lirevia emploie quand il s'adresse au lecteur
   et non à l'outil. La borne est un objet de la bibliothèque, pas une fenêtre
   sur le logiciel : elle porte le nom de l'établissement, pas la teinte de
   l'application. */
.borne-titre {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
    color: #41648C;
}

    .borne-titre .borne-logo { color: #41648C; }

    /* Le sous-titre reste en retrait : c'est le NOM qui doit accrocher l'œil. */
    .borne-titre .mud-typography-caption { color: #6B7F99; }

/* La recherche prend TOUTE la place restante : c'est le geste principal, et
   sur un écran tactile un champ large se manque beaucoup moins. */
/* `min-width` plutôt qu'une largeur fixe : la recherche prend tout ce qui
   reste, mais passe à la ligne plutôt que de se réduire à un timbre-poste. */
.borne-recherche {
    flex: 1 1 260px;
    min-width: 240px;
    max-width: none;
}

    .borne-recherche .mud-input-root {
        font-size: 1.15rem;
    }

/* ----- La barre alphabétique --------------------------------------------- */

/* Sur une borne, la recherche demande un clavier virtuel qui mange la moitié de
   l'écran ; parcourir par lettre ne demande qu'un doigt. D'où sa place, juste
   sous l'en-tête, et des cibles de 44 points — le minimum tactile admis. */
.borne-alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    padding: 0.5rem 1rem;
    background: #FFFFFF;
    border-bottom: 1px solid #E0E4E9;
    flex: 0 0 auto;
}

/* ⚠️ LE CALCUL, parce que les valeurs ne se devinent pas.
   Vingt-huit touches — « Tout », vingt-six lettres, « 0-9 » — doivent tenir sur
   UNE ligne. Sur une Xiaomi Pad 5 à l'horizontale, environ 1280 points de large
   moins 2 rem de marge, il reste ~1250 points, soit 44 par touche, écart
   compris. Constaté le 07/09/2026 : elles passaient sur deux lignes.

   D'où trois réductions, et l'écart seul n'y aurait pas suffi :
     • l'écart              0,3 → 0,2 rem   (~3 points gagnés par touche)
     • le rembourrage       0,5 → 0,2 rem   (~10 points, c'est LUI le coupable :
                                             une lettre tient en un caractère,
                                             seize points de marge autour, c'est
                                             la largeur d'une deuxième lettre)
     • la largeur minimale   38 → 34 points au plus serré

   LA HAUTEUR RESTE À 44 POINTS, et c'est le compromis qui compte. Dans une
   rangée horizontale, le mauvais appui est vertical : c'est la hauteur qui
   protège, pas la largeur. Et une touche manquée en largeur atteint la lettre
   voisine — on s'en aperçoit, on rectifie. */
.borne-lettre {
    flex: 0 1 auto;
    min-width: clamp(34px, 2.6vw, 44px);
    height: 44px;
    padding: 0 0.2rem;
    border: 1px solid #D7DDE4;
    border-radius: 6px;
    background: #FFFFFF;
    color: #41648C;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .1s ease, color .1s ease;
}

    .borne-lettre:active { transform: scale(0.94); }

    /* La lettre choisie est PLEINE, pas seulement soulignée : debout, à
       soixante centimètres, un contour ne se distingue pas d'un autre. */
    .borne-lettre-active {
        background: #41648C;
        border-color: #41648C;
        color: #FFFFFF;
    }

/* « Tout » porte un mot et non une lettre : il lui faut sa place, mais il n'a
   pas à peser autant que deux touches. */
.borne-lettre-tout {
    min-width: 52px;
    padding: 0 0.4rem;
    margin-right: 0.3rem;
}

/* ----- La grille de vignettes ------------------------------------------- */

/* ⚠️ `min-height: 0` EST INDISPENSABLE, et son absence est LA cause classique
   d'un `overflow-y: auto` qui ne défile pas.
   Par défaut un élément flex vaut `min-height: auto`, c'est-à-dire « jamais
   plus petit que mon contenu » : il refuse donc de rétrécir, rien ne déborde,
   et la barre de défilement n'apparaît jamais. La remettre à zéro autorise la
   compression, et c'est alors le débordement qui produit le défilement.

   `overscroll-behavior: contain` : sur tablette, un défilement poursuivi au-delà
   du dernier élément entraînerait la PAGE entière — l'en-tête et la barre
   alphabétique s'en iraient vers le haut. */
.borne-grille-cadre {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 1.25rem 0;
}

/* ⚠️ UNE LARGEUR DE COLONNE PROPORTIONNELLE, PAS ABSOLUE — et c'est
   l'expérience du zoom qui l'a démontré, le 07/09/2026.
   Avec un minimum en pixels (210 px), le nombre de colonnes dépend du niveau de
   zoom du navigateur et de la densité de l'écran : à 90 % on obtenait six
   vignettes étriquées, à 80 % cinq belles. Autrement dit la mise en page était
   suspendue à un réglage que personne ne contrôle sur une borne.

   `clamp(150px, 18%, 260px)` la rend PROPORTIONNELLE :

     • 18 % de la largeur disponible ⇒ environ CINQ colonnes, quelle que soit
       la largeur réelle, le zoom ou la densité. La borne a le même aspect sur
       une tablette de 10 pouces et sur un écran de bureau ;
     • plancher à 150 px : sur un téléphone à la verticale, 18 % donnerait des
       vignettes illisibles — on retombe alors sur deux colonnes ;
     • plafond à 260 px : sur un très grand écran, on préfère montrer plus de
       livres que d'agrandir indéfiniment six couvertures.

   Cinq colonnes plutôt que six : c'est le choix de l'utilisateur, et il est
   fondé. Sur une borne on parcourt À LA COUVERTURE, pas au titre — une vignette
   qu'on reconnaît de deux mètres vaut mieux qu'une de plus qu'il faut approcher.

   `min(..., 100%)` en garde-fou : sous 150 px de large, un minimum fixe ferait
   déborder la grille et partir la page en défilement horizontal. */
.borne-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(clamp(150px, 18%, 260px), 100%), 1fr));
    gap: clamp(0.6rem, 1.2vw, 1rem);
    padding-bottom: 1rem;
}

.borne-carte {
    background: #FFFFFF;
    border: 1px solid #E0E4E9;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;

    /* Retour tactile immédiat. Sans lui, l'utilisateur touche deux fois parce
       que rien ne lui confirme le premier appui. */
    transition: transform .08s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent;
}

    .borne-carte:active {
        transform: scale(0.975);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    }

/* Un ouvrage entièrement sorti reste VISIBLE mais en retrait : le masquer
   ferait croire que la bibliothèque ne le possède pas, alors que la bonne
   réponse est « revenez, ou réservez-le depuis votre compte ». */
.borne-carte-sortie {
    opacity: 0.72;
}

.borne-couverture {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
    background: #EDF0F3;
}

.borne-couverture-absente {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9AA6B2;
}

.borne-carte-texte {
    padding: 0.6rem 0.7rem 0.4rem;
    flex: 1 1 auto;
}

/* Deux lignes maximum, coupées proprement : un titre de série qui en prendrait
   cinq déformerait sa carte et casserait l'alignement de toute la rangée. */
.borne-carte-titre {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.borne-carte-auteur {
    font-size: 0.9rem;
    color: #5C5C5C;
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.borne-pastille {
    margin: 0 0.7rem 0.7rem;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.borne-pastille-libre {
    background: #E4F2E8;
    color: #256B3C;
}

.borne-pastille-sortie {
    background: #EDF0F3;
    color: #5C5C5C;
}

/* ----- Pagination -------------------------------------------------------- */

.borne-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 0 1.25rem;
}

/* ----- Le détail --------------------------------------------------------- */

/* Voile plein écran : TOUT le fond ferme. Un bouton de fermeture de 24 px en
   haut à droite se vise mal debout, avec le pouce. */
.borne-voile {
    position: fixed;
    inset: 0;
    background: rgba(20, 26, 33, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1400;
}

/* ⚠️ UNE TAILLE PROPORTIONNELLE, comme la grille et pour la même raison : une
   largeur écrite en pixels donne une fiche minuscule au milieu d'un grand écran
   et une fiche à l'étroit sur une petite tablette. 820 px fixes laissaient les
   deux tiers de l'écran vides — constaté le 07/09/2026.

   `min(1180px, 94vw)` : la fiche occupe l'écran qu'on lui donne, sans jamais
   coller aux bords ni s'étirer au point que l'œil doive balayer une ligne de
   texte trop longue.

   La colonne de couverture suit : `clamp` la fait grandir avec la fenêtre, entre
   200 points (une vignette lisible) et 320 (au-delà, la couverture prendrait le
   pas sur le texte). */
.borne-detail {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 2rem;
    max-width: min(1180px, 94vw);
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: clamp(200px, 22vw, 320px) 1fr;
    grid-template-areas:
        "couverture texte"
        "fermer     fermer";
    gap: 2rem;
}

.borne-detail-couverture {
    grid-area: couverture;
    width: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.borne-detail-texte { grid-area: texte; }

.borne-detail .mud-button-root { grid-area: fermer; }

/* L'emplacement est CE QU'ON EST VENU CHERCHER : traité comme l'information
   principale de la fiche, pas comme une ligne de plus. */
.borne-emplacement {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    background: #EEF3F8;
    border-left: 4px solid #5478A5;
    border-radius: 0 6px 6px 0;
}

.borne-emplacement-libelle {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5478A5;
}

.borne-emplacement-valeur {
    font-size: 1.25rem;
    font-weight: 600;
}

/* ⚠️ LE RÉSUMÉ GARDE SON PROPRE DÉFILEMENT, et ce n'est pas un oubli.
   La fiche elle-même défile (`overflow-y: auto` plus haut) : laisser le résumé
   s'étendre librement repousserait le bouton « Fermer » hors de l'écran, et sur
   une borne c'est le seul geste dont on soit sûr qu'il sera cherché. Le résumé
   défile donc à l'intérieur, la fiche garde sa forme, et le bouton reste où on
   l'a laissé.

   La hauteur devient proportionnelle : 11 rem fixes ne montraient que six lignes
   sur un écran qui en offrait trente. `34vh` suit la place réellement
   disponible, entre 11 rem sur une petite tablette et 26 rem au plus large. */
.borne-resume {
    max-height: clamp(11rem, 34vh, 26rem);
    overflow-y: auto;
    color: #3A3A3A;
    font-size: 1.02rem;
    line-height: 1.55;
}

/* ----- Écrans d'attente et d'erreur -------------------------------------- */

.borne-centre {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
}

/* ----- Tablette tenue à la VERTICALE ------------------------------------- */

/* Non prévu, mais quelqu'un finira par la tourner : la fiche passe en une
   colonne plutôt que d'écraser la couverture à 200 px sur un écran de 800. */
@media (max-width: 700px) {
    /* `flex-wrap` est désormais posé sur l'en-tête en toutes circonstances : il
       n'a plus à être répété ici. Ne restent que les règles qui demandent
       réellement un seuil — la fiche de détail, qui ne peut pas décider seule
       de passer sur une colonne. */
    .borne-detail {
        grid-template-columns: 1fr;
        grid-template-areas:
            "couverture"
            "texte"
            "fermer";
    }

    .borne-detail-couverture {
        max-width: 200px;
        justify-self: center;
    }
}