/* =============================================================================
   PMB / OPAC — Bibliothèque de Vresse-sur-Semois
   Paramètre d'administration : default_style_addon          Version 3
   -----------------------------------------------------------------------------
   Réorganisation de la v2 : doublons supprimés, code mort retiré, sélecteurs
   :has() remplacés (non supportés par les Android anciens), et TOUS les blocs
   @media regroupés en fin de fichier, du plus large au plus étroit.

   Ce fichier travaille avec trois scripts déposés dans un cadre CMS
   « Code html ». Sans eux, les sections 7.7, 7.5 et 9 ne s'appliquent à rien :
     facette-annees-slider.js   curseur de plage sur la facette Années
     adresse-pictos.js          pictogrammes du bloc Adresse
     accueil-recherche.js       remontée du bloc Catégories

   ATTENTION : PMB convertit les caractères accentués en entités HTML
   (é -> é) quand il enregistre ce paramètre. C'est sans effet dans les
   commentaires, mais n'utilisez JAMAIS d'accent dans une valeur "content:".

   SOMMAIRE
     1.  Jetons de style
     2.  Typographie
     3.  Accessibilité
     4.  Bandeau d'en-tête
     5.  Menu principal (bureau)
     6.  Menu responsive (panneau hors-canvas)
     7.  Colonne de gauche
     8.  Modules de la page d'accueil
     9.  Page « Recherche avancée »
     10. Liste de résultats
     11. Notice détaillée
     12. Recherche multi-critères
     13. Boutons, formulaires, tableaux
     14. Compte lecteur
     15. Pied de page
     16. Largeur de page (grands écrans)
     17. Responsive : 980 / 768 / 767 / 599 / 360
     18. Impression
   ============================================================================= */

/* Montserrat en 400/500/600/700.
   L'en-tete du template ne charge que la graisse 700 : les menus, declares en
   600, etaient rendus en faux-gras par le navigateur.
   Une regle @import doit rester la toute premiere du fichier. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');


/* =============================================================================
   1. JETONS DE STYLE  (modifier une couleur ici la propage partout)
   ============================================================================= */

:root {
  /* Charte communale */
  --vr-bleu:        #184f9c;
  --vr-bleu-fonce:  #123a73;
  --vr-bleu-vif:    #1f63c4;   /* survol des liens de contenu */
  --vr-bleu-pale:   #eef3fa;
  --vr-or:          #b28b3b;   /* doré de la charte : filets, icônes, accents  */
  --vr-or-txt:      #8f6d2c;   /* doré assombri : fonds portant du texte blanc */
  --vr-or-clair:    #dcbb76;   /* doré éclairci : texte sur aplat bleu foncé   */

  /* Neutres */
  --vr-txt:         #22262d;
  --vr-txt-doux:    #585f6b;
  --vr-bord:        #dde2ea;
  --vr-fond-doux:   #f6f7f9;

  /* Formes */
  --vr-r:           8px;
  --vr-r-sm:        5px;
  --vr-ombre:       0 1px 2px rgba(16,24,40,.05), 0 6px 16px rgba(16,24,40,.07);
  --vr-ombre-haut:  0 2px 4px rgba(16,24,40,.07), 0 12px 28px rgba(16,24,40,.12);
  --vr-t:           .18s ease;
}


/* =============================================================================
   2. TYPOGRAPHIE
   ============================================================================= */

body {
  color: var(--vr-txt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mainTitle,
#main h1, #main h2, #main h3,
#bandeau h3,
.title_notCourte, .title_notCourte a,
.listNotHz h3 {
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  letter-spacing: -.01em;
}

.listNotHz h3 {
  font-size: .95em;
  color: var(--vr-txt);
  font-weight: 700;
}

/* Liens du contenu : soulignement au survol plutot qu'un simple changement de
   teinte (repere non exclusivement chromatique, critere RGAA 10.6). */
#main a:not(.bouton):hover,
#main a:not(.bouton):focus-visible {
  color: var(--vr-bleu-vif);
  text-decoration: underline;
}

/* Les resumes et paragraphes respirent davantage */
.resume,
.resume_notCourte,
.descr_notice,
#main p {
  line-height: 1.6;
}


/* =============================================================================
   3. ACCESSIBILITÉ  (RGAA / WCAG 2.1 AA)
   ============================================================================= */

/* --- 3.1 Indicateur de focus clavier : absent du template d'origine -------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--vr-or);
  outline-offset: 2px;
  border-radius: var(--vr-r-sm);
}

/* Sur les aplats bleus / dorés, le doré ne ressort pas : on passe au blanc */
#footer a:focus-visible,
#facette a:focus-visible,
#lvl1 a:focus-visible,
#connexion a:focus-visible,
#connexion input:focus-visible,
.searchbox a:focus-visible,
.searchbox input:focus-visible,
.MenuHoriz a:focus-visible {
  outline-color: #fff;
}

/* --- 3.2 Panneau de connexion ---------------------------------------------
   Le doré de la charte est conservé tel quel.
   « Se connecter » est en blanc. Blanc sur #b28b3b ne vaut que 3,16:1, sous le
   seuil du texte courant (4,5:1) — mais le titre est en 19,3 px gras, ce qui
   le fait relever du seuil « texte large » (3:1). Le critère est respecté.
   Si vous réduisez la taille OU la graisse, il repasse dessous : gardez le
   couple 1.15em / 700 ensemble.
   Tout autre texte posé sur le doré reste en brun très foncé (5,2:1). */

#connexion,
.TglUser {
  background-color: var(--vr-or) !important;
  color: #2a1e07 !important;
}

#connexion label {
  color: #2a1e07 !important;
}

#connexion h3.login_invite {
  color: #fff !important;
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}

#connexion input[type="submit"],
#connexion input[type="button"],
#connexion .bouton {
  background-color: var(--vr-or-txt) !important;   /* blanc sur ce doré : 4,8:1 */
  color: #fff !important;
  border: 0;
  border-radius: var(--vr-r-sm);
  font-weight: 600;
}

/* --- 3.3 Autres contrastes insuffisants relevés sur le site ---------------- */

/* Widget de taille de texte du pied de page : 2,84:1 -> 8:1 */
#accessibility {
  background-color: transparent !important;
}

#accessibility a,
#footer a {
  color: #fff !important;
}

/* Compteur de pagination « (1 - 15 / 1525) » : gris #999 sur blanc = 2,85:1 */
.navbar, .navbar form, .navbar td,
#navigator, #navigator form, #navigator td {
  color: var(--vr-txt-doux) !important;
}

/* Onglets de recherche inactifs : gris sur gris */
ul.search_tabs li a,
ul.list_tabs li a,
ul.empr_tabs li a {
  color: var(--vr-txt-doux);
}

/* Textes secondaires du template (#999) trop clairs */
.Slider .itemContent .resume,
.resume_notCourte,
.typeDoc_notCourte {
  color: var(--vr-txt-doux) !important;
}

/* --- 3.4 Le libellé blanc reste cantonné aux blocs à fond plein ------------
   La v1 posait label { color:#fff } pour tout le site : sur les formulaires à
   fond clair (recherche avancée, export du panier, DSI, suggestions), le texte
   devenait invisible.
   Les facettes sont sur aplat bleu même quand elles vivent dans #main : elles
   figurent donc dans la liste « blanc », en une seule fois. */

.searchbox label,
#facette label,
#facette_wrapper label,
#lvl1 label,
#footer label {
  color: #fff;
}

#main label,
#cart_action label,
#main .search_form label,
#make_sugg label {
  color: var(--vr-txt);
}

/* En mobile, facette-mobile.js deplace #facette DANS #main : le bloc ci-dessus
   se met alors a l'atteindre et repeint ses libelles en presque-noir sur
   l'aplat bleu (1,91:1, illisible). A specificite egale c'est la derniere
   regle qui gagne, il faut donc etre plus specifique, pas seulement plus bas.
   Le survol est traite aussi : #main a:hover passait les liens en bleu vif
   sur fond bleu. */
#main #facette label,
#main #facette a,
#main #lvl1 label,
#main #lvl1 a {
  color: #fff;
}

#main #facette a:not(.bouton):hover,
#main #facette a:not(.bouton):focus-visible,
#main #lvl1 a:not(.bouton):hover,
#main #lvl1 a:not(.bouton):focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* --- 3.5 Zones tactiles ---------------------------------------------------- */

@media (pointer: coarse) {
  .MenuHoriz .Nav > li > a,
  .NavResponsive li > a,
  .NavResponsive .SousNavResponsive li > a,
  .navbar a,
  ul.search_tabs li a,
  ul.empr_tabs li a,
  ul.list_tabs li a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  #facette_wrapper label,
  #facette_wrapper input[type="checkbox"] {
    min-height: 28px;
  }
}

/* --- 3.6 Texte réservé aux lecteurs d'écran -------------------------------- */

/* Retire du visuel sans retirer de l'accessibilité. À utiliser quand une
   information n'est portée que par un effet graphique (gras, couleur), qui
   ne dit rien à un lecteur d'écran. Ni display:none ni visibility:hidden :
   les deux masquent aussi pour les technologies d'assistance. */
.vr-invisible {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* --- 3.7 Respect de « réduire les animations » ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* =============================================================================
   4. BANDEAU D'EN-TÊTE  (photo + logo + titre)
   -----------------------------------------------------------------------------
   Le voile bleu est un CALQUE DE FOND, pas un pseudo-élément en surimpression.
   Un ::before positionné en absolu recouvrait la barre de menu située juste en
   dessous. Empilé comme background-image, le dégradé est peint dans le fond de
   la boîte : il ne peut plus, par construction, passer devant un élément
   voisin, et aucun z-index n'entre en jeu.
   Les hauteurs par palier sont regroupées en section 17.

   ATTENTION AU CHEMIN DE L'IMAGE : /temp/cms_vign/ est le dossier de CACHE des
   vignettes de PMB. Il regenere ces fichiers quand bon lui semble, et peut
   changer leur extension au passage — c'est exactement ce qui est arrive :
   section79.jpeg a disparu au profit de section79.png, et le bandeau s'est
   retrouve sans photo.

   Pour ne plus jamais subir ca : telechargez l'image, deposez-la par FTP dans
   /styles/zen/images/ (par exemple banniere.jpg) et remplacez l'URL ci-dessous
   par ./styles/zen/images/banniere.jpg — ce dossier vous appartient, PMB n'y
   touche pas.
   ============================================================================= */

#cms_module_section_177 {
  position: relative;
  min-height: 175px;
  margin-bottom: 0;
  background-color: var(--vr-bleu);
  /* Voile leger : opaque a gauche derriere le logo, transparent au centre pour
     laisser voir la photo, discret a droite sous le titre.
     Mesure sous le titre en 1024 px : contraste moyen 6,9:1, et 1 % seulement
     de la zone sous le seuil de 3:1 applicable au texte large (45 px gras).
     La version renforcee pour les petits ecrans est en section 17.4. */
  background-image:
    linear-gradient(100deg,
      rgba(18,58,115,.94) 0%,
      rgba(24,79,156,0) 42%,
      rgba(18,58,115,.46) 100%),
    url('https://bibliotheque.vresse-sur-semois.be/temp/cms_vign/mt7ln_bibli8/large/section79.png');
  background-size: auto, cover;
  background-position: center, center 40%;
  background-repeat: no-repeat, no-repeat;
  overflow: hidden;
}

/* Module image du bandeau : doublon avec l'image de fond ci-dessus */
#cms_module_section_173 {
  display: none;
}

#titrePortail {
  border: 0;
  background-color: transparent !important;
  padding: 10px;
  height: 175px;
  min-height: 175px;
  max-height: 175px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Le calage du titre se fait par flexbox : plus de padding-top a recalculer a
   chaque palier responsive. */
#titrePortail h1 span {
  padding-top: 0;
}

#titrePortail h1 .subTitle {
  display: none;
}

#titrePortail .mainTitle {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

#logo {
  background-color: transparent !important;
  height: 175px;
  max-height: 175px;
  border: 0;
  position: relative;
  margin-top: 0;
  display: flex;
  align-items: center;
}

#logo img {
  background-color: #fff !important;
  height: auto;
  max-height: 130px;
  max-width: 100%;
  border: 0;
  border-radius: var(--vr-r);
  padding: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  transition: transform var(--vr-t);
}

#logo a:hover img {
  transform: translateY(-2px);
}


/* =============================================================================
   5. MENU PRINCIPAL  (bureau)
   ============================================================================= */

.MenuHoriz .Nav > li > a,
.MenuHoriz .SousNav li a,
.SliderArt .itemContent .ItemResume h4 {
  color: var(--vr-bleu) !important;
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  font-weight: 600;
}

.MenuHoriz .Nav > li + li {
  border-left-color: var(--vr-or);
}

/* Soulignement doré à la volée, sans décalage de mise en page */
.MenuHoriz .Nav > li > a {
  position: relative;
  transition: color var(--vr-t);
}

.MenuHoriz .Nav > li > a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 2px;
  background: var(--vr-or);
  transform: scaleX(0);
  transition: transform var(--vr-t);
}

.MenuHoriz .Nav > li > a:hover::after,
.MenuHoriz .Nav > li > a:focus-visible::after {
  transform: scaleX(1);
}


/* =============================================================================
   6. MENU RESPONSIVE  (panneau hors-canvas, tablette et mobile)
   -----------------------------------------------------------------------------
   Le bouton hamburger reste EN HAUT À GAUCHE, avec le panier, l'historique, la
   recherche et le compte : c'est la convention connue des visiteurs, et cette
   barre reste atteignable à tout moment. Placé sous la bannière, le bouton
   disparaîtrait dès qu'on fait défiler une liste de résultats.

   Le panneau reprenait le gris #333 par défaut d'UIkit, avec des liens larges
   de 80 px seulement (le reste de la ligne n'était pas cliquable) et aucune
   distinction entre rubriques et sous-rubriques.
   ============================================================================= */

/* Voile de fond nettement assombri : il signale que la zone restante est
   cliquable, et un clic dessus referme le panneau. */
.uk-offcanvas {
  background: rgba(9,20,40,.55) !important;
}

.uk-offcanvas-bar {
  background: var(--vr-bleu-fonce) !important;
  width: min(300px, 82vw) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,.35);
}

/* Titre du panneau (aucun accent : PMB encoderait les caractères accentués) */
.MenuVertResp::before {
  content: "MENU";
  display: block;
  padding: 20px 20px 14px;
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--vr-or-clair);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

ul.NavResponsive {
  padding: 0 !important;
  margin: 0;
  list-style: none;
}

/* base.css pose un fond gris sur les li : on le neutralise */
.NavResponsive li,
.SousNavResponsive li {
  background: transparent !important;
  float: none;
  width: auto;
}

.NavResponsive li {
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Rubriques : ligne entière cliquable, 53 px de haut */
.NavResponsive > li > a {
  display: block !important;
  width: auto !important;
  padding: 14px 20px !important;
  color: #fff !important;
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  font-size: .9em;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--vr-t), box-shadow var(--vr-t);
}

.NavResponsive > li > a:hover,
.NavResponsive > li > a:focus-visible {
  background: rgba(255,255,255,.10);
  box-shadow: inset 3px 0 0 var(--vr-or);
}

/* Sous-rubriques : retrait, corps plus petit, bandeau assombri, filet doré */
.SousNavResponsive {
  background: rgba(0,0,0,.22) !important;
  box-shadow: inset 3px 0 0 rgba(178,139,59,.55);
  padding: 0 !important;
  margin: 0;
  list-style: none;
}

.SousNavResponsive li {
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.SousNavResponsive li:last-child {
  border-bottom: 0;
}

.SousNavResponsive li a {
  display: block !important;
  width: auto !important;
  padding: 12px 20px 12px 34px !important;
  color: rgba(255,255,255,.86) !important;
  font-size: .8em;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--vr-t), box-shadow var(--vr-t);
}

.SousNavResponsive li a:hover,
.SousNavResponsive li a:focus-visible {
  background: rgba(255,255,255,.08);
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--vr-or);
}

/* Croix de fermeture : repère visuel posé sur le voile, dessiné en deux barres
   (aucune séquence d'échappement CSS, que PMB pourrait corrompre). Le clic la
   traverse grâce à pointer-events:none et atteint le voile, qui referme. */
#offcanvas::before,
#offcanvas::after {
  content: "";
  position: fixed;
  top: 64px;
  right: 18px;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.7));
  pointer-events: none;
}

#offcanvas::before { transform: rotate(45deg); }
#offcanvas::after  { transform: rotate(-45deg); }

/* Bouton hamburger : même gabarit que ses voisins de la barre haute, qui font
   tous 40 x 40 à 7 px du haut. */
#btnMenu .tgLbtnMenu {
  width: auto;
  padding: 7px 0 0;
  margin-left: 8px;
  float: left;
}

#btnMenu .tgLbtnMenu a.MenuCanvas {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--vr-bleu) !important;
  color: #fff !important;
  border-radius: var(--vr-r-sm);
  font-size: 18px;
}


/* =============================================================================
   7. COLONNE DE GAUCHE
   ============================================================================= */

/* --- 7.1 Blocs de la colonne : coins arrondis et ombre légère -------------- */

.searchbox,
#resume_panier,
#lienHistorique,
#connexion,
#facette,
#lvl1,
#adresse {
  border-radius: var(--vr-r);
  box-shadow: var(--vr-ombre);
  overflow: hidden;
}

#facette,
#lvl1 {
  border: 0;
}

/* --- 7.2 Boîte de recherche ------------------------------------------------ */

.searchbox input[name="user_query"] {
  border-radius: var(--vr-r-sm);
  border: 1px solid rgba(255,255,255,.35);
  padding: 9px 12px;
  transition: box-shadow var(--vr-t), border-color var(--vr-t);
}

.searchbox input[name="user_query"]:focus {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.35);
}

.searchbox input[name="user_query"]::placeholder {
  color: #6b7280;
  opacity: 1;
}

/* Options « Dans le catalogue » / « Dans le site ».
   Le gabarit sépare les deux par « span.search_radio_button +
   span.search_radio_button { margin-left: 10px } ». C'est juste tant qu'elles
   tiennent côte à côte, mais dans la colonne de gauche (250 px) la seconde
   passe à la ligne et cette marge devient un retrait : les deux ronds ne
   s'alignaient plus (mesuré à x=91 puis x=101).
   L'écart est reporté à DROITE de la première : il joue de la même façon en
   ligne, et disparaît une fois les options empilées. */
#pmbopac .searchbox span.search_radio_button + span.search_radio_button {
  margin-left: 0;
}

#pmbopac .searchbox span.search_radio_button {
  margin-right: 10px;
}

/* --- 7.3 Panier et historique ---------------------------------------------- */

#resume_panier,
#lienHistorique {
  transition: background-color var(--vr-t);
}

#resume_panier:hover,
#lienHistorique:hover {
  background-color: var(--vr-bleu-fonce) !important;
}

.ui-panel-basket-item a[class^="img_baske"],
.ui-panel-basket-item > div,
.onglet_basketNot .img_basketNot img {
  background: var(--vr-or) !important;
}

div.lienP,
span.img_permalink,
span.imgTag,
span.imgSuggest,
span.ExtnotCom.imgListeLecture,
.listeLectureN a span:first-child {
  background-color: var(--vr-bleu);
}

/* --- 7.4 Champs de connexion ----------------------------------------------- */

#connexion input[type="text"],
#connexion input[type="password"],
.popup_connexion_empr input[type="text"],
.popup_connexion_empr input[type="password"] {
  border-radius: var(--vr-r-sm);
  border: 1px solid rgba(255,255,255,.4);
  padding: 9px 12px;
}

#connexion input[type="text"]::placeholder,
#connexion input[type="password"]::placeholder {
  color: #6b7280;
  opacity: 1;
}

/* Bloc affiché une fois connecté : nom, accès rapide, déconnexion.
   Le nom est en blanc sur le doré plein, soit 3,16:1. Il mesure 19,2 px :
   au-dessus des 18,66 px du seuil « texte large », qui n'exige que 3:1 — mais
   à condition d'être en gras franc. En graisse 600 le cas est limite ; 700
   le range sans discussion du bon côté. Même raisonnement que « Se connecter ». */
#connexion .logged_user_name {
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.35;
}

#connexion #empr_quick_access {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: var(--vr-r-sm);
  border: 1px solid rgba(255,255,255,.4);
}

/* « Se déconnecter » etait en blanc sur le doré plein : 3,16:1 mesuré, pour
   15,1 px en graisse 300 — c'est du texte courant, il lui faut 4,5:1. Plutôt
   que de noircir le texte, on assombrit son fond avec le jeton prévu pour ça
   (--vr-or-txt) : le libellé reste blanc et le rapport monte à 4,78:1. */
#connexion #empr_logout_lnk {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  background: var(--vr-or-txt);
  border-radius: var(--vr-r-sm);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--vr-t);
}

#connexion #empr_logout_lnk:hover,
#connexion #empr_logout_lnk:focus {
  background: var(--vr-txt);
  text-decoration: none;
}

/* --- 7.5 Adresse de la bibliothèque ---------------------------------------
   base.css masque #adresse (display:none !important), or le pied de page ne
   contient qu'un bouton « haut de page » : coordonnées, téléphone et contact
   n'apparaissaient nulle part. Pour revenir au comportement d'origine,
   supprimer ce bloc entier.

   La liste à pictogrammes est construite par adresse-pictos.js. Les deux
   premières règles habillent aussi le bloc SANS le script : si celui-ci ne
   tourne pas, l'adresse reste lisible, simplement sans icônes. */

#adresse {
  display: block !important;
  background-color: var(--vr-bleu) !important;
  color: #fff;
  padding: 16px 18px;
  font-size: .95em;
  line-height: 1.6;
}

#adresse h3 {
  color: #fff;
  margin: 0 0 10px;
  font-size: 1.05em;
}

#adresse a {
  color: #fff !important;
  text-decoration: underline;
}

#adresse a:hover {
  text-decoration: none;
}

/* Mise en forme apportée par le script */
#adresse .vr-adresse-nom {
  margin: 0 0 10px;
  font-weight: 600;
  line-height: 1.35;
}

#adresse ul.vr-adresse {
  list-style: none;
  margin: 0;
  padding: 0;
}

#adresse ul.vr-adresse > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  margin: 0;
}

#adresse ul.vr-adresse > li > .fa {
  flex: 0 0 18px;
  width: 18px;
  text-align: center;
  line-height: 1.6;
  opacity: .9;
}

#adresse ul.vr-adresse a {
  overflow-wrap: anywhere;   /* l'adresse e-mail est longue pour 290 px */
}

#adresse .vr-adresse-mail a {
  font-size: .92em;
}

/* Horaires d'ouverture, sous les coordonnées.
   Construits par adresse-pictos.js, qui les lit dans la fiche Bibliothèque de
   PMB via la page « Infos pratiques » : ils ne sont écrits NI ici NI dans le
   script. Pour les modifier, passer par PMB.
   Si le script ne tourne pas, ce bloc n'existe pas : rien ne casse. */
#adresse .vr-horaires {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

#adresse .vr-horaires-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-weight: 600;
}

#adresse .vr-horaires-titre > .fa {
  flex: 0 0 18px;
  width: 18px;
  text-align: center;
  opacity: .9;
}

#adresse ul.vr-horaires-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Le filet doré est porté par TOUTES les lignes, transparent par défaut :
   seule sa couleur change pour le jour en cours. Une marge négative sur la
   seule ligne du jour élargissait sa boîte et débordait la colonne (mesuré
   à 242 px pour 212 px disponibles sur un écran étroit). */
#adresse ul.vr-horaires-liste > li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0;
  padding: 3px 0 3px 10px;
  border-left: 3px solid transparent;
}

#adresse .vr-h-heure {
  text-align: right;
  white-space: nowrap;
}

/* Jour en cours. Le doré ne sert qu'au filet : sur l'aplat bleu il plafonne
   à 4,33:1, suffisant pour un élément graphique (3:1) mais pas pour du texte
   courant (4,5:1). Le texte, lui, reste blanc et passe simplement en gras. */
#adresse ul.vr-horaires-liste > li.vr-h-auj {
  font-weight: 700;
  border-left-color: var(--vr-or-clair);
}


/* --- 7.6 Facettes ---------------------------------------------------------- */

#facette h3,
#lvl1 h3 {
  font-size: 1.05em;
}

#facette_wrapper label {
  cursor: pointer;
}

.facettes_multis {
  font-size: .8em;
}

/* --- 7.7 Facette « Années » : curseur de plage ----------------------------
   Habillage du widget posé par facette-annees-slider.js. Sans ce script, ces
   règles ne s'appliquent à rien : la facette reste la liste de cases d'origine.

   RAPPEL : la section 17 masque #facette sous 768 px (règle héritée du
   gabarit). Le curseur n'apparaît donc pas sur téléphone. Voir la note à cet
   endroit pour l'activer. */

tr.vr-an-tr {
  display: table-row;
}

/* display:block sur la cellule la ferait sortir du tableau et retomber à
   24 px de large : elle doit rester une vraie cellule. */
td.vr-an {
  display: table-cell !important;
  width: 100%;
  padding: 14px 12px 12px !important;
}

/* Histogramme du nombre de notices par année */
.vr-an-histo {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 46px;
  margin-bottom: 8px;
}

.vr-an-histo i {
  flex: 1 1 auto;
  background: rgba(255,255,255,.28);
  border-radius: 1px 1px 0 0;
  transition: background-color .12s ease;
}

.vr-an-histo i.on {
  background: var(--vr-or-clair);
}

/* Double curseur : deux input[type=range] superposés. La piste laisse passer
   les clics, seules les poignées les captent. */
.vr-an-slider {
  position: relative;
  height: 26px;
}

.vr-an-slider input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.vr-an-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255,255,255,.35);
  border-radius: 2px;
}

.vr-an-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--vr-or);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  cursor: grab;
}

.vr-an-slider input[type="range"]::-moz-range-track {
  height: 4px;
  background: rgba(255,255,255,.35);
  border-radius: 2px;
}

.vr-an-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--vr-or);
  cursor: grab;
}

.vr-an-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.vr-an-lecture {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 10px;
  color: #fff;
  font-weight: 700;
  font-size: 1.05em;
}

.vr-an-lecture .vr-an-sep {
  font-weight: 400;
  opacity: .7;
}

.vr-an-actions {
  display: flex;
  gap: 8px;
  margin: 0;
}

.vr-an-actions button {
  flex: 1 1 auto;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--vr-r-sm);
  font-weight: 600;
  font-size: .88em;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--vr-t);
}

.vr-an-actions .vr-an-ok {
  background: var(--vr-or);
  color: #fff;
}

.vr-an-actions .vr-an-ok:hover {
  background: var(--vr-or-txt);
}

.vr-an-actions .vr-an-raz {
  background: rgba(255,255,255,.18);
  color: #fff;
}

.vr-an-actions .vr-an-raz:hover {
  background: rgba(255,255,255,.28);
}


/* =============================================================================
   8. MODULES ET PAGES DE CONTENU
   ============================================================================= */

/* --- 8.1 Modules de la page d'accueil (Nouveautés, Sélections, articles…) -- */

.SliderHoriz,
.listselect,
.Slider,
.listArticlesGen,
.listResultArticles,
.listItemsEvent,
#widget,
.fluxRSS {
  border-radius: var(--vr-r);
  border-color: var(--vr-bord);
  box-shadow: var(--vr-ombre);
  overflow: hidden;
}

/* Bandeau de titre des modules */
.SliderHoriz .SliderNot > h3,
.listselect h3,
.titleContenu,
#widget > h3,
.fluxRSS > h3 {
  font-size: 1.05em;
  letter-spacing: .01em;
}

/* Vignettes de couverture : hauteur homogène, pas de déformation */
.listselect .itemVign img,
.SliderHoriz img,
.vignetteimgNot img,
.Slider .itemVign img {
  object-fit: contain;
  border-radius: var(--vr-r-sm);
  transition: transform var(--vr-t), box-shadow var(--vr-t);
}

.listselect .itemVign a:hover img,
.SliderHoriz a:hover img,
.vignetteimgNot a:hover img {
  transform: translateY(-3px);
  box-shadow: var(--vr-ombre-haut);
}

/* Cartouche des logos de sélections : gris rosé d'origine -> bleu très pâle */
.imgL.uk-vertical-align.uk-panel.uk-panel-box,
.listselect .itemVign .imgL.uk-panel-box {
  background-color: var(--vr-bleu-pale) !important;
  border-radius: var(--vr-r);
}

.uk-grid.uk-grid-collapse {
  background-color: transparent;
}

/* --- 8.2 Pages rédactionnelles (Charte, Infos pratiques, Actualités) -------
   Ces pages sont saisies dans l'éditeur du portail, souvent par collage depuis
   Word. Sur la Charte, cela donne 45 paragraphes portant tous en attribut
   style un margin-left de 36 pt et un text-align:justify, 13 intertitres qui
   ne sont que des <span> en gras dans un <div>, et un <font size="4"> pour le
   titre du document. Aucune balise de titre, aucune hiérarchie.

   Ces règles remettent tout ça d'aplomb sans toucher au contenu. Elles
   s'appliquent à toutes les pages du portail bâties sur .itemSolo.

   La correction durable reste de nettoyer le HTML dans l'éditeur : ces règles
   compensent un collage Word, elles ne le remplacent pas. */

/* Titre de la page, commun aux cinq pages du portail.
   Le prefixe #main est indispensable : base.css cible ce titre par
   « div .itemSolo h2 », plus specifique que « .itemSolo > h2 » — sans lui la
   regle est perdue et le titre reste en gris #666 (5,7:1 au lieu de 8:1). */
#main .itemSolo > h2 {
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  font-size: 1.6em;
  font-weight: 700;
  color: var(--vr-bleu);
  text-transform: uppercase;
  letter-spacing: .02em;
  padding-bottom: 10px;
  margin: 0 0 26px;
  border-bottom: 4px solid var(--vr-bleu);
}

/* Colonne de lecture : 890 px faisaient environ 110 signes par ligne, bien
   au-dela du confort de lecture. 68ch ramene a ~75. */
.itemSolo .resume {
  max-width: 68ch;
  line-height: 1.7;
  color: var(--vr-txt);
}

/* Les margin-left et le justifie viennent des attributs style de Word :
   il faut !important pour passer devant. */
.itemSolo .resume p {
  margin: 0 0 1.1em !important;
  text-align: left !important;
  line-height: 1.7;
}

/* Titre du document : le seul div que l'editeur a centre */
.itemSolo .resume > div[style*="center"] {
  margin: 0 0 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--vr-bord);
}

.itemSolo .resume > div[style*="center"] span {
  font-size: 1.2em;
  line-height: 1.4;
}

/* <font size="4"> : on neutralise, la taille vient des regles ci-dessus */
.itemSolo .resume font {
  font-size: inherit !important;
}

/* Le <br> qui suit les intertitres de la Charte ajoutait une ligne vide */
.itemSolo .resume > div:not([style]) > span[style*="bold"] br {
  display: none;
}

/* Listes */
.itemSolo .resume ul {
  margin: 0 0 1.2em;
  padding-left: 1.3em;
}

.itemSolo .resume li {
  margin-bottom: .45em;
  line-height: 1.6;
}

.itemSolo .resume li p {
  margin-bottom: .3em !important;
}

/* Un texte souligne qui n'est pas un lien prete a confusion : la page ne
   contient qu'un seul vrai lien (l'adresse e-mail). On en fait un sous-titre. */
.itemSolo .resume u {
  display: inline-block;
  margin-top: .6em;
  font-weight: 600;
  color: var(--vr-txt);
  text-decoration: none;
}


/* --- 8.3 Une hiérarchie de titres commune à toutes les pages du portail ----
   Avant : le titre de page en gris #666, les intertitres de « Infos
   pratiques » en gris #626262 avec un filet gris clair, ceux de la Charte en
   gras noir dans le flux, et les titres de « Sélections » en Open Sans 400.
   Cinq pages, quatre traitements différents.

   Deux niveaux suffisent, et il faut distinguer deux ROLES :

   - titre de section dans du texte rédactionnel : bleu, filet discret ;
   - titre de carte : c'est un LIEN cliquable (Sélections, sous-rubriques).
     Il adopte la même police et la même couleur, mais garde son rôle de lien
     et ne prend pas de filet, qui le ferait passer pour un intertitre.

   Le niveau 1 (titre de page) est réglé plus haut, sur #main .itemSolo > h2. */

/* Niveau 2 — titres de section du contenu rédactionnel */
.itemSolo .resume h3,
.infosBib h3,
.itemSolo .resume > div:not([style]) > span[style*="bold"] {
  display: block;
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  font-size: 1.15em;
  font-weight: 700;
  color: var(--vr-bleu);
  text-transform: none;
  line-height: 1.3;
  margin: 1.9em 0 .6em;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--vr-bord);
}

/* Les intertitres de la Charte ne sont pas des <h3> mais des <span>, et le
   document contient deux lignes vides bâties sur le même modèle : elles
   hériteraient du filet et dessineraient des traits parasites en plein texte.
   Ils gardent donc la typographie du niveau 2, sans le filet.
   Si ces deux lignes vides sont supprimées dans l'éditeur du portail, cette
   règle peut sauter et les intertitres retrouveront leur filet. */
.itemSolo .resume > div:not([style]) > span[style*="bold"] {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: .4em;
}

/* Niveau 2 bis — titres de cartes cliquables */
.listItemsGen .itemAbrege h3,
.rubContent h3 {
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  font-weight: 600;
  color: var(--vr-bleu);
}


/* =============================================================================
   9. PAGE « RECHERCHE AVANCÉE »
   -----------------------------------------------------------------------------
   L'ordre des blocs (Catégories remonte avant Dernières acquisitions) et le
   masquage des cellules de remplissage sont assurés par accueil-recherche.js.

   La v2 le faisait en CSS avec :has() et la propriété order : les Chrome et
   WebView Android antérieurs à la version 105 ignorent :has() et sautaient
   donc toute la règle. Le déplacement dans le DOM fonctionne partout, et
   l'ordre de lecture au clavier suit enfin l'ordre affiché.

   Il ne reste ici que l'espacement et l'habillage du titre.
   ============================================================================= */

/* Les cinq blocs de la page étaient collés à 0 px les uns des autres */
#search,
#location,
#categories,
#last_entries,
#etageres {
  margin-bottom: 34px;
}

/* Le titre « Catégories » était le seul des cinq à ne pas être habillé :
   18 px / graisse 400 / sans filet, contre 19,2 px / 600 / majuscules pour
   ses voisins. La taille est en em pour suivre le widget A- / A / A+. */
#categories h3 {
  font-size: 1.145em;
  font-weight: 600;
  text-transform: uppercase;
  padding: 7px 15px 7px 0;
  margin: 0 0 15px;
  border-bottom: 4px solid var(--vr-bleu);
}


/* =============================================================================
   10. LISTE DE RÉSULTATS
   ============================================================================= */

/* --- 10.1 Barre d'actions (panier, flux RSS, partage, suggestion…) ---------
   Six liens bleus qui se déversaient sur trois lignes : on en fait des
   pastilles cliquables, alignées et distinctes du reste du texte. */

#resultatrech_liste > span.addCart,
#resultatrech_liste > span.open_visionneuse,
#resultatrech_liste > span.affiner_recherche,
#resultatrech_liste > span.short_url,
#resultatrech_liste > span.short_url_permalink,
#resultatrech_liste > span.search_bt_sugg,
#resultatrech_liste > span.print_search_result,
span.navig_actions_last_search,
span.navig_actions_history,
span.navig_actions_first_screen {
  display: inline-block;
  margin: 0 6px 8px 0;
}

#resultatrech_liste > span.addCart > a,
#resultatrech_liste > span.open_visionneuse > a,
#resultatrech_liste > span.affiner_recherche > a,
#resultatrech_liste > span.short_url > a,
#resultatrech_liste > span.short_url_permalink > a,
#resultatrech_liste > span.search_bt_sugg > a,
span.navig_actions_last_search > a,
span.navig_actions_history > a,
span.navig_actions_first_screen > a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--vr-bord);
  border-radius: 999px;
  background: #fff;
  color: var(--vr-bleu) !important;
  font-size: .88em;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--vr-t), border-color var(--vr-t), color var(--vr-t);
}

#resultatrech_liste > span.addCart > a:hover,
#resultatrech_liste > span.open_visionneuse > a:hover,
#resultatrech_liste > span.affiner_recherche > a:hover,
#resultatrech_liste > span.short_url > a:hover,
#resultatrech_liste > span.short_url_permalink > a:hover,
#resultatrech_liste > span.search_bt_sugg > a:hover,
span.navig_actions_last_search > a:hover,
span.navig_actions_history > a:hover,
span.navig_actions_first_screen > a:hover {
  background: var(--vr-bleu);
  border-color: var(--vr-bleu);
  color: #fff !important;
}

/* --- 10.2 Une notice = une carte ------------------------------------------- */

.parentNotCourte {
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--vr-bord);
  border-radius: var(--vr-r);
  background: #fff;
  transition: box-shadow var(--vr-t), border-color var(--vr-t);
}

.parentNotCourte:hover {
  border-color: #c3cede;
  box-shadow: var(--vr-ombre);
}

.title_notCourte,
.title_notCourte a {
  font-size: 1.08em;
  font-weight: 600;
  color: var(--vr-bleu) !important;
  line-height: 1.35;
}

.infoCompl_notCourte {
  font-size: .9em;
  margin: 4px 0 6px;
}

.resume_notCourte {
  font-size: .9em;
}

/* Type de document : pastille discrète plutôt que texte gris flottant.

   ATTENTION : c'est bien .typeDoc_notCourte. .vignetteDocNot est le conteneur
   de la vignette de couverture, lui appliquer ce style encadre l'image.

   La pastille vit dans .vignetteimgNot, qui est en float:left et ne fait que
   la largeur de la couverture — 86 px en 1024, 77 px en 700. Avec
   white-space:nowrap, « TEXTE IMPRIME » reclamait 112 px : la pastille
   depassait de sa colonne et venait mordre sur le titre et l'auteur.
   max-width la contient, white-space:normal la laisse passer sur deux lignes,
   et inline-block lui garde sa taille de badge quand la colonne est large
   (202 px en mobile, ou elle reste a 112 px). */
.typeDoc_notCourte {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--vr-fond-doux);
  border: 1px solid var(--vr-bord);
  font-size: .75em;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: normal;
  text-align: center;
}

/* Colonne d'actions à droite de chaque notice : moins lourde que le titre */
.panier_avis_notCourte a,
.onglet_basketNoticeCourte a,
.avisNCourte a {
  font-size: .85em;
}

/* Disponibilité et réservation */
.dispoLien_notice {
  font-weight: 600;
}

.resa_notice {
  float: right;
}

.resa_notice a {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--vr-or-txt);
  color: #fff !important;
  font-size: .85em;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--vr-t);
}

.resa_notice a:hover {
  background: #75581f;
}

.footer_notice {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--vr-bord);
}

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

.navbar a,
#navigator a {
  display: inline-block;
  min-width: 34px;
  padding: 5px 9px;
  border-radius: var(--vr-r-sm);
  text-align: center;
  transition: background-color var(--vr-t);
}

.navbar a:hover,
#navigator a:hover {
  background: var(--vr-bleu-pale);
}


/* =============================================================================
   11. NOTICE DÉTAILLÉE
   ============================================================================= */

.notice_contenu {
  border-radius: var(--vr-r);
}

/* Tableau titre/valeur : libellés plus lisibles, lignes alternées douces */
#main .notice_corps table td:first-child,
.notice_contenu td:first-child {
  color: var(--vr-txt-doux);
  font-weight: 600;
}

.even {
  background: #aaaaaa36;
}

/* Onglets ISBD / exemplaires */
ul.onglets_isbd_public li.isbd_public_active,
ul.search_tabs li#current,
ul.empr_tabs #current,
ul.empr_tabs li.subTabCurrent {
  border-color: var(--vr-bleu) !important;
}

ul.empr_tabs li.subTabCurrent a {
  color: var(--vr-bleu);
}

/* Calendrier Dojo (retours, réservations) */
.dijitCalendarMonthContainer {
  background-color: var(--vr-bleu) !important;
}


/* =============================================================================
   12. RECHERCHE MULTI-CRITÈRES
   -----------------------------------------------------------------------------
   Le formulaire est un <table> de six colonnes. Cinq défauts cumulés le
   rendaient illisible : libellé bridé à max-width:80px (« Date de publication
   ou année d'édition » se cassait sur 5 lignes au milieu d'un mot), enveloppes
   <span> en inline (les champs ne pouvaient pas s'étirer), première cellule
   vide occupant 163 px, aucun alignement vertical ni séparation de lignes.
   La variante mobile est en section 17.
   ============================================================================= */

#extended-search-container {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

#extended-search-container > tbody > tr > td {
  vertical-align: middle;
  padding: 12px 8px;
  border-top: 1px solid var(--vr-bord);
}

#extended-search-container > tbody > tr:first-child > td {
  border-top: 0;
}

/* colonnes : 0 (champ caché) | Et-Ou | libellé | opérateur | valeur | X */
#extended-search-container > tbody > tr > td:first-child {
  width: 0;
  padding-left: 0;
  padding-right: 0;
}

#extended-search-container td.search_first_column      { width: 88px; }
#extended-search-container > tbody > tr > td:nth-child(3) { width: 180px; }
#extended-search-container > tbody > tr > td:nth-child(4) { width: 215px; }
#extended-search-container > tbody > tr > td.td-border-display { width: auto; }
#extended-search-container > tbody > tr > td:last-child { width: 46px; text-align: center; }

/* base.css bridait le libellé à max-width:80px */
#extended-search-container .search_critere {
  width: auto !important;
  max-width: none !important;
  display: block;
  font-weight: 600;
  color: var(--vr-txt);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Enveloppes inline : les champs ne pouvaient pas s'étirer */
#extended-search-container .search_operator,
#extended-search-container .search_sous_critere,
#extended-search-container .search_value,
#extended-search-container .ui-panel-display {
  display: block;
}

#extended-search-container .ui-panel-display {
  margin: 4px 0;
}

#extended-search-container select,
#extended-search-container input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

#extended-search-container .td-border-display > div {
  border-radius: 6px;
  padding: 8px;
  margin: 6px 0;
}

#td_search_submit {
  text-align: right;
  padding-top: 16px !important;
}

/* Bouton de recherche : action principale, pas un bouton gris. Cible aussi
   celui de la recherche simple, pour la cohérence.
   NE PAS y remettre background-image:none : sous 767 px le gabarit masque le
   libellé et affiche une loupe blanche en image de fond. */
#search input.boutonrechercher {
  background-color: var(--vr-bleu) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--vr-r-sm) !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  cursor: pointer;
}

#search input.boutonrechercher:hover {
  background-color: var(--vr-bleu-fonce) !important;
}


/* =============================================================================
   13. BOUTONS, FORMULAIRES, TABLEAUX
   ============================================================================= */

input[type="submit"].bouton,
input[type="button"].bouton,
#search input[type="submit"],
#cart_action input[type="button"].bouton,
#empr-all input.bouton,
#print_options input[type="submit"],
.popup_connexion_empr input[type="submit"] {
  border-radius: var(--vr-r-sm);
  border: 1px solid transparent;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--vr-t), box-shadow var(--vr-t);
}

input[type="submit"].bouton:hover,
input[type="button"].bouton:hover,
#search input[type="submit"]:hover {
  box-shadow: var(--vr-ombre);
}

#main input[type="text"],
#main input[type="password"],
#main input[type="email"],
#main input[type="search"],
#main select,
#main textarea {
  border: 1px solid var(--vr-bord);
  border-radius: var(--vr-r-sm);
  padding: 7px 10px;
  transition: border-color var(--vr-t), box-shadow var(--vr-t);
}

#main input[type="text"]:focus,
#main input[type="password"]:focus,
#main input[type="email"]:focus,
#main input[type="search"]:focus,
#main select:focus,
#main textarea:focus {
  border-color: var(--vr-bleu);
  box-shadow: 0 0 0 3px rgba(24,79,156,.15);
}

/* Empêche les tableaux larges (exemplaires, prêts) de pousser la page.
   Ils se compriment ; ils ne défilent pas horizontalement — un vrai
   défilement demanderait d'envelopper chaque tableau, donc du JavaScript. */
#main table {
  max-width: 100%;
}

.tb_pret_location_row > td {
  color: #fff !important;
}


/* =============================================================================
   14. COMPTE LECTEUR
   -----------------------------------------------------------------------------
   Structure produite par PMB (empr.php), relevée sur le site :

     #empr_onglet > ul.empr_tabs > li[.subTabCurrent] > a     onglets
     #fiche-empr
       > h3 > span                                            nom du lecteur
       > #fiche-empr-container > table.fiche-lecteur
           tr.tab_empr_info_cb|_adr|_tel|_mail|_prof|_year|_adh
             td.bg-grey.align_right > span.etiq_champ         libellé
             td                                               valeur
       > ul.empr_subtabs > li > a#logout_profil|#change_password|#change_profil

   Les classes tab_empr_info_* ne servent pas ici : les règles portent sur la
   structure, pour rester valables si PMB ajoute une ligne.
   ============================================================================= */

/* --- 14.1 Onglets --------------------------------------------------------- */

/* L'onglet actif était en gris (#6f6f6f) et les autres en bleu : la hiérarchie
   était inversée. Ici l'actif porte le bleu et le filet, les autres reculent. */
#empr_onglet ul.empr_tabs {
  overflow: hidden;              /* contient les li flottants */
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  border-bottom: 2px solid var(--vr-bord);
}

#empr_onglet ul.empr_tabs li {
  float: left;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

#empr_onglet ul.empr_tabs li a {
  display: block;
  padding: 9px 16px;
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  font-size: .95em;
  font-weight: 600;
  color: var(--vr-txt-doux);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color var(--vr-t), border-color var(--vr-t);
}

#empr_onglet ul.empr_tabs li a:hover,
#empr_onglet ul.empr_tabs li a:focus {
  color: var(--vr-bleu);
  border-bottom-color: var(--vr-or-clair);
}

#empr_onglet ul.empr_tabs li.subTabCurrent {
  background: none;
}

#empr_onglet ul.empr_tabs li.subTabCurrent a {
  color: var(--vr-bleu);
  border-bottom-color: var(--vr-bleu);
}

/* --- 14.2 Fiche du lecteur ------------------------------------------------ */

/* base.css gonfle toute la fiche : « #fiche-empr { font-size: 1.145em } »,
   soit 19,2 px au lieu des 16,8 px du reste du site. C'est la cause de fond
   de l'aspect surdimensionné, pas les éléments pris un par un. On revient à
   la taille du site : toutes les valeurs en em ci-dessous en découlent. */
#fiche-empr {
  font-size: 1em;
}

/* Le nom rejoint le niveau 2 de la hiérarchie de titres (section 8.3). */
#fiche-empr > h3 {
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  font-size: 1.15em;
  font-weight: 700;
  color: var(--vr-bleu);
  line-height: 1.3;
  margin: 0 0 16px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--vr-bord);
}

/* table-layout:fixed est indispensable : en disposition « auto » la largeur
   de 190 px posée sur la colonne des libellés n'est qu'une indication, et le
   navigateur lui redistribuait l'espace libre — mesuré à 572 px sur 856. */
#fiche-empr table.fiche-lecteur {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* La colonne des libellés occupait 328 px sur 673, alignée à droite : le
   regard traversait un vide de près de 100 px avant d'atteindre la valeur.
   Largeur ramenée à 190 px et alignement à gauche. */
/* « border: 0 » et non « border-bottom: 0 » : base.css pose un cadre complet
   (.fiche-lecteur .bg-grey { border: 3px solid #fff }). Sur le fond gris du
   panneau, ce cadre blanc dessinait un rectangle autour de chaque libellé. */
#fiche-empr table.fiche-lecteur td.bg-grey {
  width: 190px;
  background: none;
  border: 0;
  padding: 10px 14px 10px 0;
  vertical-align: top;
}

#fiche-empr table.fiche-lecteur td.align_right {
  text-align: left;
}

/* base.css pose « .fiche-lecteur td { width: 33% } » sur les DEUX colonnes.
   L'espace restant partait alors sur la colonne des libellés, qui repassait
   à 572 px malgré les 190 px demandés. En largeur « auto », la colonne des
   valeurs prend tout le reste et celle des libellés tient ses 190 px. */
#fiche-empr table.fiche-lecteur td:not(.bg-grey) {
  width: auto;
}

/* padding:5px hérité du gabarit : en affichage empilé (mobile) le libellé
   démarrait 5 px à droite de sa valeur, les deux ne s'alignaient plus. */
#fiche-empr .etiq_champ {
  padding: 0;
  font-size: .92em;
  font-weight: 600;
  color: var(--vr-txt-doux);
}

/* La valeur est l'information : elle prend le noir, le libellé recule.
   C'était l'inverse (libellé noir, valeur #6f6f73). */
#fiche-empr table.fiche-lecteur td {
  padding: 10px 0;
  color: var(--vr-txt);
  vertical-align: top;
  line-height: 1.5;
}

/* Le filet de séparation est porté par la ligne, pas par les cellules : la
   cellule des libellés a « border: 0 » (voir plus haut) et couperait sinon
   le trait en deux. En bordures fusionnées, un « none » de cellule cède
   toujours devant une bordure déclarée sur la ligne. */
#fiche-empr table.fiche-lecteur tr {
  border-bottom: 1px solid var(--vr-bord);
}

#fiche-empr table.fiche-lecteur tr:last-child {
  border-bottom: 0;
}

#fiche-empr table.fiche-lecteur a {
  color: var(--vr-bleu);
  font-weight: 400;
  overflow-wrap: anywhere;   /* une adresse e-mail longue ne doit pas déborder */
}

/* PMB souligne la commune avec <u> : ça se lit comme un lien mort. */
#fiche-empr table.fiche-lecteur u {
  text-decoration: none;
}

/* Les dates de validité restent distinguées, sans crier. */
#fiche-empr table.fiche-lecteur strong {
  font-weight: 600;
}

/* --- 14.3 Boutons d'action ------------------------------------------------
   ul.empr_subtabs sert PARTOUT dans le compte, avec une classe en plus selon
   l'onglet : empr_loan_reza_subtabs, empr_sugg_subtabs, empr_lecture_subtabs.
   Les règles portaient sur « #fiche-empr ul.empr_subtabs » et ne couvraient
   donc que Mon compte : ailleurs les boutons restaient gris par défaut.

   Nuance : dans Mon compte ce sont trois actions indépendantes ; dans les
   autres onglets ce sont des bascules de vue, et PMB marque la vue affichée
   par « subTabCurrent ». D'où deux apparences : contour, et plein pour la
   vue active. */

#main ul.empr_subtabs {
  overflow: hidden;              /* contient les li flottants */
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

/* Dans Mon compte la barre ferme la fiche : filet de séparation au-dessus. */
#fiche-empr ul.empr_subtabs {
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--vr-bord);
}

#main ul.empr_subtabs li {
  float: left;
  margin: 0 10px 10px 0;
  padding: 0;
  background: none;
  border: 0;
  width: auto;
}

#main ul.empr_subtabs li a {
  display: block;
  padding: 9px 16px;
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  font-size: .95em;            /* était 19,2 px : disproportionné */
  font-weight: 600;
  color: var(--vr-bleu);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--vr-bleu);
  border-radius: var(--vr-r-sm);
  transition: background var(--vr-t), color var(--vr-t);
}

#main ul.empr_subtabs li a:hover,
#main ul.empr_subtabs li a:focus {
  background: var(--vr-bleu);
  color: #fff;
}

/* Vue actuellement affichée */
#main ul.empr_subtabs li.subTabCurrent a {
  background: var(--vr-bleu);
  color: #fff;
  cursor: default;
}

/* Sur « Mes prêts / Mes réservations », PMB marque DEUX bascules comme
   courantes — « prêts en cours » ET « réservations » — parce que la page
   affiche effectivement les deux sections. Deux boutons pleins donnaient
   l'impression d'être dans deux vues à la fois. Seule la première reste
   pleine ; les suivantes reprennent l'apparence au repos.
   Le combinateur ~ vise toute bascule courante PRÉCÉDÉE d'une autre : pas
   besoin de :has(), incompatible avec les vieux Android. */
#main ul.empr_subtabs li.subTabCurrent ~ li.subTabCurrent a {
  background: #fff;
  color: var(--vr-bleu);
  cursor: pointer;
}

/* La règle ci-dessus est plus spécifique que le survol général : il faut la
   redire ici, sinon ces boutons ne réagiraient plus au passage de la souris. */
#main ul.empr_subtabs li.subTabCurrent ~ li.subTabCurrent a:hover,
#main ul.empr_subtabs li.subTabCurrent ~ li.subTabCurrent a:focus {
  background: var(--vr-bleu);
  color: #fff;
}

/* Se déconnecter n'est pas une action de gestion du profil : ton neutre. */
#fiche-empr ul.empr_subtabs li a#logout_profil {
  color: var(--vr-txt-doux);
  border-color: var(--vr-bord);
}

#fiche-empr ul.empr_subtabs li a#logout_profil:hover,
#fiche-empr ul.empr_subtabs li a#logout_profil:focus {
  background: var(--vr-fond-doux);
  color: var(--vr-txt);
  border-color: var(--vr-txt-doux);
}

/* --- 14.4 Titres de section des autres onglets ----------------------------
   Quatre traitements différents pour un même rôle, relevés sur le site :
     #empr-resa h3   19,2 px / 600 / #444 / MAJUSCULES / filet gris 4 px
     #empr-sugg h3   18 px   / 400 / #444
     #empr-list h3   18 px   / 400 / #444
     #alerts h2      24 px   / 400 / #444
   Tous rejoignent le niveau 2 de la hiérarchie du portail (section 8.3). */

/* Le préfixe #pmbopac (l'identifiant du <body>) sert uniquement à monter la
   spécificité : [id^="empr-"] ne compte que pour une classe et perdrait face
   aux règles du gabarit écrites avec un identifiant. Énumérer les conteneurs
   un par un s'était révélé fragile — #empr-old avait été oublié, et son titre
   comme son bouton « Ajouter au panier » étaient restés sans style. */
#pmbopac div[id^="empr-"] > h3,
#pmbopac #alerts h2 {
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  font-size: 1.15em;
  font-weight: 700;
  color: var(--vr-bleu);
  text-transform: none;
  line-height: 1.3;
  margin: 0 0 16px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--vr-bord);
}

/* Aucune marge haute n'est ajoutée entre les deux listes d'alertes :
   l'écart naturel mesuré entre le premier tableau et le titre suivant
   est déjà de 48 px. */

/* Barre de défilement horizontale permanente : le gabarit met ces blocs en
   « overflow-x: scroll », qui dessine la barre MÊME quand il n'y a rien à
   faire défiler — mesuré à 886 px de contenu pour 886 px de large. En « auto »
   elle n'apparaît que si un tableau de prêts est réellement trop large. */
#pmbopac div[id^="empr-"] {
  overflow-x: auto;
}

/* --- 14.5 Tableaux des autres onglets -------------------------------------
   Deux générations de modules cohabitent : table.list_ui_list (réservations,
   suggestions) et .uk-table (alertes). Les premiers n'ont AUCUNE marge
   intérieure sur les en-têtes, d'où les libellés collés les uns aux autres
   (« Date créationTitre/Description du fichierEditeur… »). Les seconds sont
   centrés et alignés en bas, ce qui décale les en-têtes sur deux lignes. */

#main table.list_ui_list th,
#main #alerts .uk-table th {
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  font-size: .92em;
  font-weight: 700;
  color: var(--vr-txt);
  border-bottom: 2px solid var(--vr-bord);
}

#main table.list_ui_list td,
#main #alerts .uk-table td {
  padding: 10px 12px;
  vertical-align: top;
  color: var(--vr-txt);            /* était du noir pur */
  border-bottom: 1px solid var(--vr-bord);
  line-height: 1.5;
}

/* Alternance des lignes. PMB pose lui-même .even / .odd ; on garde SES
   classes plutôt qu'un :nth-child, qui compterait aussi la ligne d'en-tête
   selon la présence d'un <thead>. La bande grise du gabarit est du
   rgba(170,170,170,.21), soit un #d5d5d5 très dense qui découpait la liste
   en pavés. Une teinte discrète suffit à guider l'œil sur une ligne longue. */
#main table.list_ui_list tr.even {
  background: var(--vr-fond-doux);
}

#main table.list_ui_list tr.odd {
  background: transparent;
}

#main table.list_ui_list tbody tr:hover {
  background: var(--vr-bleu-pale);
}

/* PMB écrit « style="text-align:center" » DANS la balise sur la colonne des
   dates. Un style en ligne ne cède qu'à !important ; le sélecteur d'attribut
   limite la portée aux seules cellules concernées, au lieu d'imposer
   l'alignement à tout le tableau. Les en-têtes étant à gauche, les dates
   centrées ne s'alignaient sur rien. */
#main table.list_ui_list td[style*="text-align:center"] {
  text-align: left !important;
}

/* Prêts et réservations : titre de l'ouvrage en premier, auteur ensuite.
   Le titre porte l'information principale, l'auteur la complète.
   Ciblé par la classe du module (opac_loans_… / opac_reservations_…) : les
   autres tableaux du compte n'ont pas cet ordre de colonnes. */
#main table[class*="loans"] td:first-child,
#main table[class*="reservations"] td:first-child {
  font-weight: 600;
}

#main table[class*="loans"] td:nth-child(2),
#main table[class*="reservations"] td:nth-child(2) {
  color: var(--vr-txt-doux);
}

/* Notices supprimées du catalogue : PMB laisse la cellule entièrement vide
   (6 cas sur cette liste). Un tiret vaut mieux qu'un trou, qui donne
   l'impression d'un affichage cassé. */
#main table.list_ui_list td:empty::before {
  content: '\2014';
  color: var(--vr-txt-doux);
}

/* « Ajouter au panier » est enveloppé dans un span.addCart auquel le gabarit
   donne margin-bottom: -16px — utile dans les listes de résultats, néfaste
   ici : le titre suivant remontait SUR le bouton (chevauchement de 16 px
   mesuré). Portée limitée au compte pour ne pas déranger les résultats. */
#pmbopac div[id^="empr-"] span.addCart {
  display: block;
  margin-bottom: 18px;
}

/* --- 14.6 Formulaires des autres onglets ---------------------------------- */

/* Alertes : la loupe est un <svg> en position absolue, calé en haut à gauche
   du champ, donc posé sur le texte de substitution. On le centre verticalement
   et on lui réserve sa place par une marge intérieure.

   La marge basse de 10 px est déplacée du champ vers le conteneur : sinon le
   conteneur mesure 49 px pour un champ de 39, et « top: 50% » vise le milieu
   du conteneur — la loupe tombait 5 px trop bas. Ainsi les deux hauteurs
   coïncident et le centrage reste juste même si la police grossit (bouton A+). */
#alerts .dsi-search-container {
  margin-bottom: 10px;
}

#alerts .dsi-search-container input.text_query {
  margin-bottom: 0;
  padding-left: 34px;
}

#alerts .dsi-search-container svg {
  top: 50%;
  left: 12px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  fill: var(--vr-txt-doux);
  pointer-events: none;
}

/* Mes listes : la case à cocher et son libellé suivent le champ de recherche
   dans le même flux ; « Y compris dans les avis » se coupait en deux lignes
   dont la seconde repassait sous le champ. */
#empr-list label {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

#empr-list .form_liste_lecture > .form-contenu > .row > .row > label:first-child {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--vr-txt-doux);
}

/* float:left hérité du gabarit : la case sautait à gauche du champ, séparée
   de son propre libellé par les 627 px du champ de recherche. */
#empr-list input[type="checkbox"] {
  float: none;
  vertical-align: middle;
  margin: 0 6px 0 16px;
}

#empr-list input.text_query {
  vertical-align: middle;
  min-width: 300px;
  max-width: 100%;
}

/* La case « Afficher uniquement celles que j'ai créées » ouvre sa propre
   ligne : pas de marge à gauche, elle ne suit aucun champ. */
#empr-list > .row > input[type="checkbox"] {
  margin-left: 0;
}

/* « Rechercher », « Réserver un document », « Ajouter au panier » : la section
   13 ne leur donne qu'une forme, aucune couleur — d'où leur aspect gris
   d'origine.

   MÊME APPARENCE QUE LES BARRES DE BASCULE ci-dessus, à la demande :
   fond blanc et texte bleu au repos, fond bleu et texte blanc au survol.
   Ne pas les repasser en bleu plein : l'uniformité de ces trois états est
   voulue dans tout le compte.

   Le sélecteur div[id^="empr-"] remplace une énumération manuelle qui avait
   laissé #empr-old de côté. #empr_onglet n'enveloppe que la barre d'onglets
   (et #alerts) : #empr-list, #empr-resa, #empr-old et #empr-sugg sont ses
   FRÈRES, pas ses descendants. Et aucune classe ne distingue empr.php des
   autres pages : se rabattre sur #main_hors_footer recolorerait les boutons
   de tout le site. Le préfixe #pmbopac (identifiant du <body>) ne sert qu'à
   hausser la spécificité, un sélecteur d'attribut ne pesant qu'une classe. */
#pmbopac div[id^="empr-"] input.boutonrechercher,
#pmbopac div[id^="empr-"] input[type="button"].bouton,
#pmbopac div[id^="empr-"] input[type="submit"].bouton,
#pmbopac #alerts input.boutonrechercher,
#pmbopac #alerts input[type="button"].bouton,
#pmbopac #alerts input[type="submit"].bouton,
#pmbopac #change-password input[type="button"],
#pmbopac #change-password input[type="submit"] {
  padding: 9px 18px;
  background: #fff;
  color: var(--vr-bleu);
  border: 1px solid var(--vr-bleu);
  border-radius: var(--vr-r-sm);
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  font-size: .95em;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--vr-t), color var(--vr-t);
}

#pmbopac div[id^="empr-"] input.boutonrechercher:hover,
#pmbopac div[id^="empr-"] input[type="button"].bouton:hover,
#pmbopac div[id^="empr-"] input[type="submit"].bouton:hover,
#pmbopac #alerts input.boutonrechercher:hover,
#pmbopac #alerts input[type="button"].bouton:hover,
#pmbopac #alerts input[type="submit"].bouton:hover,
#pmbopac #change-password input[type="button"]:hover,
#pmbopac #change-password input[type="submit"]:hover {
  background: var(--vr-bleu);
  color: #fff;
}

/* --- 14.7 Correctifs hérités ---------------------------------------------- */

/* Correctifs de contraste du gabarit d'origine, conservés tels quels. */
#empr-all, #empr-late, #empr-old, #empr-resa,
#empr-dsi, #empr-sugg, #empr-list, #empr-dema, #change-password {
  color: #000;
}

#empr-resa small form input[type="button"],
#change-password input[type="button"],
#onglets_list ul.list_tabs li,
#empr-all input.bouton {
  color: #353535;
}


/* =============================================================================
   15. PIED DE PAGE
   ============================================================================= */

#footer {
  background: var(--vr-bleu) repeat-x top left;
  color: #fff;
}

#footer .footer_biblio_name {
  font-weight: 600;
}


/* =============================================================================
   16. LARGEUR DE PAGE  (grands écrans)
   -----------------------------------------------------------------------------
   La largeur de #main est calculée, pas exprimée en %, et la marge du palier
   1260 de zonepageo_a.css est neutralisée : sans ça, la somme des deux
   colonnes dépassait le conteneur de 2,8 px entre 1200 et 1260 px, et #bandeau
   (overflow:hidden, donc contexte de formatage de bloc) basculait sous #main —
   d'où une immense zone blanche et une page deux fois plus haute.
   ============================================================================= */

@media screen and (min-width: 1200px) {
  #container {
    max-width: 1220px;
  }

  #main {
    max-width: none;
    width: calc(100% - 310px);   /* 290 de colonne + 10 de marge + 10 de reserve */
    margin-left: 0;
  }

  #bandeau {
    width: 290px;
    max-width: 290px;
  }
}


/* =============================================================================
   17. RESPONSIVE  (un seul bloc par palier, du plus large au plus étroit)
   ============================================================================= */

/* --- 17.1 Jusqu'à 980 px : la mise en page passe sur une colonne ----------- */

@media screen and (max-width: 980px) {
  #cms_module_section_177  { min-height: 150px; }
  #titrePortail            { height: 150px; min-height: 150px; max-height: 150px; }
  #titrePortail .mainTitle { font-size: 1.9rem; }
  #logo                    { height: 150px; max-height: 150px; }
  #logo img                { max-height: 118px; }

  /* zzen_responsive.css annule le padding de #main a ce palier (il ecrase
     zonepageo_a.css) : le contenu principal n'avait plus que les 20 px du
     body, alors que la colonne laterale en a 40. */
  #main {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .tgLbtnMenu { float: left; }

  /* Le burger apparaît à ce palier et occupe 28 -> 68 px. zzen_responsive.css
     place le panier à left:67px : les deux blocs bleus se touchaient d'1 px et
     se lisaient comme un seul bouton. On le décale de 8 px et on borne sa
     largeur pour laisser respirer l'historique, qui commence à 290 px.
     (Sous 599 px le bloc ci-dessous le réduit à une icône.) */
  #pmbopac #resume_panier {
    left: 84px;
    max-width: 190px;
  }

  .searchbox.heightZero { height: 175px; }
}

/* --- 17.2 Jusqu'à 768 px : tablette et mobile ------------------------------ */

@media screen and (max-width: 768px) {
  #cms_module_section_177  { min-height: 120px; }
  #titrePortail            { height: 120px; min-height: 120px; max-height: 120px; }
  #titrePortail .mainTitle { font-size: 1.5rem; }
  #logo                    { height: 120px; max-height: 120px; }
  #logo img                { max-height: 96px; }

  /* Facettes sur mobile : elles etaient masquees (display:none herite de la
     v1), ce qui escamotait aussi le curseur d'annees de la section 7.7.
     Elles sont maintenant affichees.

     Deux precisions :
     - le display:none venait de CETTE feuille, pas du gabarit ; le gabarit,
       lui, pose position:absolute a 767 px, qu'il faut neutraliser sinon le
       bloc se superpose au contenu ;
     - #facette vit dans #bandeau, qui passe SOUS #main en mobile : sans
       facette-mobile.js pour le remonter, le bloc atterrit apres toute la
       liste de resultats (mesure : 13 600 px plus bas sur 1 525 resultats). */
  #facette {
    display: block !important;
    position: static !important;
    background-color: var(--vr-bleu) !important;
    margin-bottom: 20px;
  }

  /* Notice en liste : la réservation passe sous la ligne */
  .parentNotCourte { padding: 12px; }
  .resa_notice     { float: none; display: block; margin-top: 8px; }

  /* Rayons : le gabarit force td{display:block}, soit un rayon par ligne.
     minmax(0,1fr) impose des colonnes vraiment égales — avec 1fr seul, le
     contenu imposait sa largeur (100 / 100 / 75 px). */
  #location table.center {
    display: block;
    width: 100%;
  }

  #location table.center > tbody {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  /* les <tr> s'effacent pour que les 11 rayons forment une seule grille */
  #location table.center > tbody > tr {
    display: contents;
  }

  #location table.center > tbody > tr > td.center {
    display: block;
    width: auto !important;
    height: auto !important;
    padding: 0;
    text-align: center;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }

  /* Recherche multi-critères : un critère = une carte */
  #extended-search-container,
  #extended-search-container > tbody,
  #extended-search-container > tbody > tr,
  #extended-search-container > tbody > tr > td {
    display: block !important;
    width: auto !important;
    max-width: none !important;
  }

  #extended-search-container > tbody > tr {
    position: relative;
    border: 1px solid var(--vr-bord);
    border-radius: var(--vr-r);
    padding: 12px;
    margin-bottom: 12px;
  }

  /* la dernière ligne porte le bouton Rechercher : pas de carte autour.
     :last-child plutôt que :has(#td_search_submit), non supporté par les
     Chrome Android antérieurs à la version 105. */
  #extended-search-container > tbody > tr:last-child {
    border: 0;
    padding: 0;
    margin: 0;
  }

  #extended-search-container > tbody > tr > td {
    border: 0 !important;
    padding: 5px 0 !important;
  }

  /* ATTENTION : la derniere ligne du tableau ne contient qu'une cellule, celle
     du bouton Rechercher — elle est donc a la fois :first-child ET :last-child.
     Sans le :not(:last-child) ci-dessous, elle tombait sous la regle qui masque
     la cellule cachee des criteres, et le bouton disparaissait purement et
     simplement sur mobile : le formulaire n'etait plus validable. */
  #extended-search-container > tbody > tr:not(:last-child) > td:first-child {
    display: none !important;
  }

  /* la croix de suppression en haut à droite de la carte */
  #extended-search-container > tbody > tr:not(:last-child) > td:last-child {
    position: absolute;
    top: 8px;
    right: 8px;
    width: auto !important;
    padding: 0 !important;
  }

  #extended-search-container .search_critere {
    font-size: 1.05em;
    padding-right: 44px;
  }

  /* zzen_responsive.css impose width:33%!important à TOUS les <span> du
     formulaire : les champs tombaient à 88 px et « Titre d'oeuvres » se
     cassait une lettre par ligne. Il faut une spécificité supérieure à
     #search .row form .row span. */
  #search .row form .row #extended-search-container span {
    width: auto !important;
    float: none !important;
  }

  #search .row form .row #extended-search-container span.search_value,
  #search .row form .row #extended-search-container span.search_operator,
  #search .row form .row #extended-search-container span.search_sous_critere,
  #search .row form .row #extended-search-container span.ui-panel-display {
    width: 100% !important;
    display: block;
  }

  #extended-search-container input[type="text"],
  #extended-search-container select {
    width: 100% !important;
    max-width: none !important;
  }

  #td_search_submit {
    text-align: center;
    padding: 12px 0 !important;
  }

  /* Le gabarit met tous les boutons de recherche en font-size:0 + loupe sous
     767 px. Pour CELUI-CI on remet le libelle : un bouton pleine largeur qui
     dit « Rechercher » est plus clair qu'une loupe au bas d'un formulaire. */
  #td_search_submit input.boutonrechercher {
    width: 100%;
    font-size: 1em !important;
    background-image: none !important;
    padding: 12px 16px !important;
    height: auto !important;
    min-height: 44px !important;
  }

  /* Onglets du compte : les cinq libellés demandent environ 800 px. Flottants,
     ils s'empilaient sur cinq lignes, soit 282 px de haut avant d'atteindre la
     fiche. Bande unique défilable au doigt : l'onglet actif reste visible et
     le suivant dépasse, ce qui signale qu'on peut faire défiler. */
  #empr_onglet ul.empr_tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* zzen_responsive.css impose « ul.empr_tabs li { width: 49% } » sous 767 px
     et « 100% » sous 599 : chaque onglet occupait toute la bande. */
  #empr_onglet ul.empr_tabs li {
    float: none;
    flex: 0 0 auto;
    width: auto;
  }

  #empr_onglet ul.empr_tabs li a {
    white-space: nowrap;
  }
}

/* --- 17.3 Jusqu'à 767 px : ligne de recherche simple -----------------------
   Palier distinct de 768 parce que le gabarit bascule le bouton en mode icône
   à cette largeur exactement. */

@media screen and (max-width: 767px) {
  /* Le gabarit dimensionne l'icone a 90% de la LARGEUR du bouton : le padding
     du bouton bureau l'elargissait et faisait exploser la loupe.
     Regle limitee au formulaire de recherche simple : sans cette restriction
     elle rabotait aussi le bouton de la recherche multi-criteres a 44 px. */
  #search form[name="search_input"] input.boutonrechercher {
    padding: 0 !important;
    width: 44px !important;
    min-width: 44px;
    height: 38px !important;
    min-height: 38px !important;
    background-size: 20px auto !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
  }

  /* Le champ prend la place restante au lieu d'une largeur fixe de 190 px :
     sans ca, champ + loupe + Aide demandaient 309 px pour 295 disponibles,
     et le bouton Aide decrochait sous la ligne. */
  #search form[name="search_input"] .text_query {
    width: calc(100% - 125px) !important;
    margin-right: 8px !important;
  }

  #search form[name="search_input"] .button_search_help {
    height: 38px;
    min-height: 38px;
    padding: 0 12px;
    margin-left: 8px;
  }
}

/* --- 17.4 Jusqu'à 599 px : smartphone -------------------------------------- */

@media screen and (max-width: 599px) {
  /* Voile renforce : sur un bandeau de 335 px le titre commence a 46 % de la
     largeur, la ou le voile du bureau est encore quasi nul. Mesure avec le
     voile leger : 12,6 % de la zone du titre sous 3:1. Avec celui-ci : 2,4 %,
     soit le meme niveau qu'en grand ecran. La photo reste bien visible. */
  #cms_module_section_177 {
    min-height: 95px;
    background-position: center;
    background-image:
      linear-gradient(100deg,
        rgba(18,58,115,.94) 0%,
        rgba(24,79,156,.30) 42%,
        rgba(18,58,115,.75) 100%),
      url('https://bibliotheque.vresse-sur-semois.be/temp/cms_vign/mt7ln_bibli8/large/section79.png');
  }
  #titrePortail            { height: 95px; min-height: 95px; max-height: 95px; padding: 5px; }
  #titrePortail .mainTitle { font-size: 1.15rem; }
  #logo                    { height: 95px; max-height: 95px; }
  #logo img                { max-height: 76px; padding: 6px; }

  /* Rangée de boutons du bandeau. Positions mesurées à 360 px AVANT :
       burger      28 -> 68
       panier      53 -> 186   (chevauche le burger de 15 px)
       historique 200 -> 242   (chevauche la loupe de 2 px)
       loupe      240 -> 280
     Tous ces blocs sont bleus à coins arrondis : superposés, ils se lisaient
     comme un seul bouton.

     Le panier passe en icône seule. Son libellé « Votre panier est vide »
     réclame 150 px (109 pour le texte, 37 pour l'icône) alors qu'il n'en
     reste que 147 avant l'historique : il passait à la ligne et la seconde
     ligne était coupée par la hauteur de 40 px, ne laissant voir que
     « Votre ». Le texte vit dans l'iframe cart_info.php, qui ne reçoit PAS
     cette feuille : impossible de le réduire d'ici. L'icône seule rejoint
     d'ailleurs les trois autres boutons, qui n'ont déjà pas de libellé.

     Le préfixe #pmbopac est nécessaire : zzen_responsive.css pose
     « #resume_panier, .empty { max-width:133px; left:53px } » à spécificité
     égale mais est chargé APRÈS le style addon — sans lui, ces valeurs
     étaient ignorées.

     Écart retenu : 16 px, celui qui sépare déjà la loupe du bouton compte
     (ces deux-là sont ancrés à droite par right:60px et right:10px, on n'y
     touche pas). Les cinq boutons ont ainsi le même intervalle.

     APRÈS, à 390 px : burger 28->68 | panier 84->128 | historique 144->186
     puis, ancrés à droite, loupe 270->310 | compte 326->366 */
  #pmbopac #resume_panier {
    width: 44px;
    max-width: 44px;
    left: 84px;
  }

  #pmbopac #lienHistorique {
    left: 144px;
  }

  .searchbox.heightZero {
    height: auto;
    min-height: 175px;
  }

  /* Les blocs d'actions de la liste de résultats s'empilent proprement */
  .panier_avis_notCourte { margin-top: 10px; }

  /* Compte lecteur : deux colonnes ne tiennent plus. Libellé au-dessus de sa
     valeur, et les boutons d'action sur toute la largeur. */
  #fiche-empr table.fiche-lecteur td,
  #fiche-empr table.fiche-lecteur td.bg-grey {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: 0;
  }

  #fiche-empr table.fiche-lecteur td.bg-grey {
    padding-top: 12px;
  }

  #fiche-empr table.fiche-lecteur tr {
    display: block;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--vr-bord);
  }

  #fiche-empr table.fiche-lecteur tr:last-child {
    border-bottom: 0;
  }

  #fiche-empr ul.empr_subtabs li {
    float: none;
    margin-right: 0;
  }

  #fiche-empr ul.empr_subtabs li a {
    text-align: center;
  }

  /* Tableaux du compte : sous 599 px le gabarit passe déjà les lignes en
     blocs et répète le libellé de colonne par un ::before. On garde ce
     mécanisme, on l'allège : le libellé était un bandeau gris #efefef en
     16,8 px, aussi lourd que la donnée qu'il annonce. Chaque ligne devient
     une fiche, ce qui remplace avantageusement l'alternance de couleurs. */
  #main table.list_ui_list thead {
    display: none;             /* redondant : chaque cellule porte son libellé */
  }

  #main table.list_ui_list tr {
    display: block;
    margin-bottom: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--vr-bord);
    border-radius: var(--vr-r-sm);
  }

  #main table.list_ui_list tr.even {
    background: #fff;          /* la fiche remplace la bande alternée */
  }

  #main table.list_ui_list tbody tr:hover {
    background: #fff;          /* pas d'état de survol au doigt */
  }

  #main table.list_ui_list td {
    display: block;
    padding: 0 0 10px;
    text-align: left;          /* la colonne des dates était centrée */
    border-bottom: 0;
  }

  #main table.list_ui_list tr td:last-child {
    padding-bottom: 0;
  }

  #main table.list_ui_list td::before {
    display: block;
    padding: 0 0 2px;
    background: none;          /* était un bandeau gris pleine largeur */
    font-size: .82em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--vr-txt-doux);
  }
}

/* --- 17.5 Jusqu'à 360 px : très petits écrans -----------------------------
   Défaut du gabarit d'origine : #container a un min-width de 320 px auquel
   s'ajoutent les 40 px de padding du body, soit 360 px demandés dans 320 —
   la page débordait horizontalement. */

@media screen and (max-width: 360px) {
  body {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #container {
    min-width: 0 !important;
  }
}


/* =============================================================================
   18. IMPRESSION  (une notice imprimée doit tenir sur une page lisible)
   ============================================================================= */

@media print {
  #bandeau, #footer, .MenuHoriz, .NavResponsive, .searchbox,
  #cms_module_section_177, .panier_avis_notCourte, #accessibility,
  .navbar, #navigator, .resa_notice, #tarteaucitronRoot {
    display: none !important;
  }

  #container, #main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  body {
    color: #000;
    font-size: 11pt;
  }

  .parentNotCourte {
    border: 0;
    border-bottom: 1px solid #999;
    border-radius: 0;
    box-shadow: none;
    page-break-inside: avoid;
  }

  a[href]::after {
    content: "";
  }
}