/* +--------------------------------------------------------------------------+
// Genbib 2027 - premium OPAC theme for PMB
// Based on genbib.css v1.86 (PMB Services / www.sigb.net)
// All PMB IDs / classes are preserved; only presentation changed.
// ASCII-only on purpose: safe under ISO-8859-1 or UTF-8 pages.
//
// TABLE OF CONTENTS
//  1. Design tokens            9. Facets
//  2. Base + typography       10. Social, info pages, carousel, subscription
//  3. Page layout             11. Buttons, forms
//  4. Header, hero, menu      12. Tables
//  5. Sidebar                 13. Reader account
//  6. Main column             14. Notices (results + record pages)
//  7. Search                  15. Pop-ups, messages, legacy helpers
//  8. Home sections + footer  16. Responsive, RTL, a11y, print
// +--------------------------------------------------------------------------+ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&display=swap');


/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS  (the only place where colours are defined)
   Re-brand in three lines: --color-accent, --color-accent-hover, --color-accent-soft.
   Amber variant: #B45309 / #92400E / #FEF3C7 (and --color-accent-on-dark: #FBBF24).
   --------------------------------------------------------------------------- */

:root {
  /* ink + paper */
  --color-primary: #10233A;
  --color-primary-deep: #0A1626;
  --color-bg: #F5F6F3;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-subtle: #EFF1EE;

  /* accent : deep marine teal (6.3:1 on white) */
  --color-accent: #0B6B6A;
  --color-accent-hover: #084F4F;
  --color-accent-soft: #E1F0EF;
  --color-accent-on-dark: #7FD6D0;
  --on-accent: #FFFFFF;

  /* text */
  --color-text: #1F2D3D;
  --color-text-muted: #46566B;
  --color-text-subtle: #5F6F82;

  /* lines */
  --color-border: #DDE2DE;
  --color-border-strong: #B9C2BE;

  /* semantic */
  --color-success: #146C43;  --color-success-bg: #DDF3E6;
  --color-warning: #8A4B08;  --color-warning-bg: #FCEBCF;
  --color-danger:  #B3261E;  --color-danger-bg:  #FBE3E1;

  /* focus */
  --focus-ring: 0 0 0 3px rgba(11, 107, 106, 0.28);
  --focus-outline: 2px solid var(--color-accent);

  /* legacy aliases (colonnes.css and older templates read these) */
  --color-surface-alt: var(--color-surface-subtle);
  --color-accent-strong: var(--color-accent);
  --color-ok: var(--color-success);   --color-ok-bg: var(--color-success-bg);
  --color-warn: var(--color-warning); --color-warn-bg: var(--color-warning-bg);
  --color-bad: var(--color-danger);   --color-bad-bg: var(--color-danger-bg);

  /* shape : 6 chips / 10 controls + rows / 14 panels */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* depth : restrained */
  --shadow-1: 0 1px 2px rgba(16, 35, 58, 0.06);
  --shadow-2: 0 6px 18px -8px rgba(16, 35, 58, 0.16);
  --shadow-pop: 0 18px 40px -16px rgba(16, 35, 58, 0.32);
  --shadow-card: var(--shadow-1);
  --shadow-lift: var(--shadow-2);

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 0.14s;
  --t-base: 0.2s;

  /* 4/8 spacing rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* layout */
  --container-max: 1360px;
  --container-w: min(100% - 2rem, var(--container-max));
  --side-w: 280px;
  --gap: 1.75rem;
  --control-h: 2.5rem;       /* 40px desktop, 44px on touch (see responsive) */
  --search-h: 3.5rem;        /* 56px */

  /* density of result rows (see .results-compact) */
  --row-py: 0.7rem;
  --row-px: 1rem;

  /* type */
  --font-sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --tracking-display: -0.015em;
  --lh-body: 1.6;

  /* inline icons */
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2346566B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2346566B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Arabic / RTL: Cairo for everything, no letter-spacing (it breaks joining) */
:root:lang(ar), [dir="rtl"] {
  --font-sans: 'Cairo', 'Plus Jakarta Sans', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-serif: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
  --tracking-display: 0;
  --lh-body: 1.75;
}

/* Opt-in dense research mode: add class="results-compact" on body or #main,
   or data-density="compact" on <html>. */
.results-compact, :root[data-density="compact"] {
  --row-py: 0.4rem;
  --row-px: 0.8rem;
}


/* ---------------------------------------------------------------------------
   2. BASE + TYPOGRAPHY
   --------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

body#pmbopac {
  background-color: var(--color-bg);
}

/* safety net: a stray overflowing element can never create a sideways page scroll.
   "clip" (unlike "hidden") does not create a scroll container, so sticky keeps working. */
body {
  overflow-x: hidden;
  overflow-x: clip;
}

#container,
#main,
#bandeau {
  max-width: 100%;
}

h1, h2, h3, h4, h5 {
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h1, h2 {
  font-family: var(--font-serif);
  font-weight: 600;
}

h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.9rem; }


small, .small {
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(11, 107, 106, 0.35);
  text-underline-offset: 0.2em;
  transition: color var(--t-fast) ease, text-decoration-color var(--t-fast) ease;
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration-color: currentColor;
}

/* Keyboard focus: visible everywhere, never removed */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
summary:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  border-radius: 4px;
}

img {
  border: none;
  max-width: 100%;
  height: auto;
}

blockquote {
  margin: 0.4rem 0 0.8rem;
}

ul {
  margin: 0;
  padding: 0;
}

hr {
  height: 1px;
  margin-block: var(--space-4);
  border: 0;
  background: var(--color-border);
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-primary-deep);
}

.row {
  display: flow-root;
  clear: both;
}


/* ---------------------------------------------------------------------------
   3. PAGE LAYOUT  (flex, no absolute sidebars)
   #container is a wrapping flex row:
     menu (1) / hero (2) / #bandeau + #main (3,4) / footer (9)
   #intro and #intro_bibli use display:contents so the sticky menu can travel
   along the whole page. Do not change the "order" values: PMB DOM depends on them.
   --------------------------------------------------------------------------- */

#container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap);
  position: relative;
  width: var(--container-w);
  min-height: 100%;
  margin: 0 auto;
  padding-bottom: 0;
  background: transparent;
  box-shadow: none;
}

/* unknown direct children fall to the bottom, full width */
#container > * {
  flex: 0 0 100%;
  order: 6;
  min-width: 0;
}

#intro,
#intro_bibli {
  display: contents;
}

#intro {
  position: static;
  width: auto;
}

#intro > *:not(#intro_bibli) {
  flex: 0 0 100%;
  order: 6;
}

#bandeau {
  order: 3;
  flex: 0 0 var(--side-w);
  width: var(--side-w);
  float: none;
  margin: 0;
  padding: 0;
  background: transparent;
  position: static;
}

#main {
  order: 4;
  flex: 1 1 0%;
  min-width: 0;
  float: none;
  width: auto;
  margin: 0;
}

#main #main_hors_footer {
  display: flow-root;   /* contains floated pagination / legacy floats */
  min-height: 60vh;
  padding-top: 0;
  padding-bottom: var(--space-2);
}

#bandeau_2 {
  order: 8;
  flex: 0 0 100%;
  clear: both;
}

/* cart summary iframe */
body.cart_info_body {
  background-color: transparent;
  font-size: 0.9rem;
}

iframe#iframe_resume_panier {
  width: 100%;
  height: 35px;
  border: none;
}


/* ---------------------------------------------------------------------------
   4. HEADER : floating sticky menu + hero banner
   --------------------------------------------------------------------------- */

#intro #intro_bibli h3 {
  display: none;
}

/* ---- hero (biblio_preamble_p1 : 1 to n images side by side) ---- */
#intro #intro_bibli .p1 {
  order: 2;
  flex: 0 0 100%;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: clamp(150px, 21vw, 260px);
  padding: 0;
  overflow: hidden;
  text-align: start;
  background: var(--color-primary-deep);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

/* depth: a quiet ink gradient from below + a faint marine tint + hairline edge */
#intro #intro_bibli .p1::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 22, 38, 0) 40%, rgba(10, 22, 38, 0.62) 100%),
    linear-gradient(90deg, rgba(10, 22, 38, 0.28), rgba(10, 22, 38, 0) 50%),
    rgba(11, 107, 106, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  border-radius: inherit;
}

#intro #intro_bibli .p1 a {
  display: block;
  height: 100%;
  min-width: 0;
}

#intro #intro_bibli .p1 img {
  display: block;
  width: 100%;
  height: 100% !important; /* PMB writes an inline height on these images */
  max-height: none;
  margin: 0;
  object-fit: cover;
  border: none;
  filter: saturate(0.9);
}

/* ---- menu bar (biblio_preamble_p2) ---- */
#intro #intro_bibli .p2 {
  order: 1;
  flex: 0 0 100%;
  position: sticky;
  top: 0.75rem;
  z-index: 100;
  height: auto;
  margin: 0.75rem 0 0;
  padding: 0.3rem 0.4rem;
  display: block;
  background: var(--color-primary-deep);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

/* hide the bar entirely when no menu has been configured */
#intro #intro_bibli .p2:not(:has(ul)) {
  display: none;
}

#intro_bibli .p2 > ul,
#intro_bibli .p2 #menuDeroulant,
.cms_menu_deep0 {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  vertical-align: baseline;
  z-index: auto;
}

#intro_bibli .p2 ul li,
#intro_bibli .p2 #menuDeroulant li,
.cms_menu_deep0 li {
  display: block;
  float: none;
  position: relative;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  list-style: none;
}

#intro_bibli .p2 ul li a,
#intro_bibli .p2 #menuDeroulant li a,
.cms_menu_deep0 li a {
  display: block;
  padding: 0.6rem 0.95rem;
  color: #DCE4EC;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

#intro_bibli .p2 ul li:hover > a,
#intro_bibli .p2 ul li:focus-within > a,
#intro_bibli .p2 #menuDeroulant li:hover > a,
.cms_menu_deep0 li:hover > a,
.cms_menu_deep0 li:focus-within > a {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 -2px 0 var(--color-accent-on-dark);
}

#intro_bibli .p2 ul li a:focus-visible,
.cms_menu_deep0 li a:focus-visible {
  outline-color: var(--color-accent-on-dark);
  outline-offset: -2px;
}

/* chevron on entries that own a sub menu */
#intro_bibli .p2 li:has(> ul) > a::after,
.cms_menu_deep0 li:has(> ul) > a::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-inline-start: 0.5rem;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  opacity: 0.7;
  transform: rotate(45deg) translateY(-2px);
}

/* ---- dropdown (level 1) : application-style menu, fast fade + slide ---- */
#intro_bibli .p2 #menuDeroulant .sousMenu,
#intro_bibli .p2 #menuDeroulant .sousMenu2,
.cms_menu_deep0 .cms_menu_deep1,
.cms_menu_deep0 .cms_menu_deep2 {
  display: block;
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  z-index: 20;
  width: 250px;
  min-width: 100%;
  margin: 6px 0 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.98);
  transform-origin: top;
  transition: opacity var(--t-fast) ease, transform var(--t-base) var(--ease), visibility 0s linear var(--t-fast);
}

/* invisible bridge so the pointer can cross the gap */
#intro_bibli .p2 #menuDeroulant .sousMenu::before,
#intro_bibli .p2 #menuDeroulant .sousMenu2::before,
.cms_menu_deep0 .cms_menu_deep1::before,
.cms_menu_deep0 .cms_menu_deep2::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -8px;
  height: 8px;
}

#intro_bibli .p2 #menuDeroulant li:hover > .sousMenu,
#intro_bibli .p2 #menuDeroulant li:focus-within > .sousMenu,
#intro_bibli .p2 #menuDeroulant li:hover > .sousMenu2,
#intro_bibli .p2 #menuDeroulant li:focus-within > .sousMenu2,
.cms_menu_deep0 li:hover > .cms_menu_deep1,
.cms_menu_deep0 li:focus-within > .cms_menu_deep1,
.cms_menu_deep0 li:hover > .cms_menu_deep2,
.cms_menu_deep0 li:focus-within > .cms_menu_deep2 {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

#intro_bibli .p2 #menuDeroulant .sousMenu li,
.cms_menu_deep0 .cms_menu_deep1 li {
  display: block;
  width: 100%;
  margin: 0;
  opacity: 1;
}

#intro_bibli .p2 #menuDeroulant .sousMenu li a,
.cms_menu_deep0 .cms_menu_deep1 li a {
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: normal;
  border-radius: var(--radius-sm);
}

#intro_bibli .p2 #menuDeroulant .sousMenu li:hover > a,
#intro_bibli .p2 #menuDeroulant .sousMenu li:focus-within > a,
.cms_menu_deep0 .cms_menu_deep1 li:hover > a,
.cms_menu_deep0 .cms_menu_deep1 li:focus-within > a {
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
  box-shadow: none;
}

#intro_bibli .p2 #menuDeroulant .sousMenu li:has(> ul) > a::after,
.cms_menu_deep0 .cms_menu_deep1 li:has(> ul) > a::after {
  float: inline-end;
  margin-top: 0.4em;
  transform: rotate(-45deg);
}

/* ---- dropdown (level 2) : flies out sideways ---- */
#intro_bibli .p2 #menuDeroulant .sousMenu2,
.cms_menu_deep0 .cms_menu_deep1 .cms_menu_deep2 {
  top: -0.35rem;
  inset-inline-start: 100%;
  margin: 0;
  margin-inline-start: 0.9rem;
  transform: translateX(4px) scale(0.98);
  transform-origin: left top;
}

#intro_bibli .p2 #menuDeroulant .sousMenu2::before,
.cms_menu_deep0 .cms_menu_deep1 .cms_menu_deep2::before {
  top: 0;
  bottom: 0;
  height: auto;
  inset-inline: auto;
  inset-inline-start: -1rem;
  width: 1rem;
}

#intro_bibli .p2 #menuDeroulant .sousMenu li:hover > .sousMenu2,
#intro_bibli .p2 #menuDeroulant .sousMenu li:focus-within > .sousMenu2,
.cms_menu_deep0 .cms_menu_deep1 li:hover > .cms_menu_deep2,
.cms_menu_deep0 .cms_menu_deep1 li:focus-within > .cms_menu_deep2 {
  transform: none;
}


/* ---------------------------------------------------------------------------
   5. SIDEBAR (#bandeau) : a utility rail with three levels of emphasis
     primary   -> #connexion (elevated)
     secondary -> search summary, facets (quiet panels)
     metadata  -> address, weather, opening hours (flat, muted)
   --------------------------------------------------------------------------- */

#bandeau > div {
  margin: 0 0 var(--space-4);
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

#bandeau > div:last-child {
  margin-bottom: 0;
}

#bandeau h3 {
  margin: 0 0 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* ---- home / logo / language : no card ---- */
#bandeau > #accueil {
  padding: 0;
  background: transparent;
  border: none;
}

#bandeau #accueil h3 {
  display: none;
}

#bandeau #accueil p.centered {
  margin: 0 0 0.75rem;
  text-align: center;
  z-index: auto;
}

#bandeau #accueil p.centered img {
  max-width: 300px;
  margin-bottom: 0.4rem;
  border: none;
}

#bandeau #accueil #lang_select {
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}

#bandeau #accueil #lang_select form {
  margin: 0;
  padding: 0;
}

#bandeau #accueil #lang_select select {
  width: 100%;
}

/* ---- login : the one elevated card ---- */
#bandeau > #connexion {
  padding: 1.15rem 1.15rem 1.05rem;
  border-color: var(--color-border);
  border-top: 3px solid var(--color-accent);
  box-shadow: var(--shadow-2);
}

#connexion h3 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}

#connexion #login_form form {
  margin: 0;
  padding: 0;
}

#connexion #login_form br {
  display: none;
}

#connexion #login_form label,
#connexion #login_form form > span {
  display: block;
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

#connexion #login_form input.login,
#connexion #login_form input.password {
  display: block;
  width: 100%;
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.85rem;
}

#connexion #login_form input.bouton {
  display: flex;
  width: 100%;
  margin: 0.25rem 0 0.7rem;
  text-transform: none;
}

#connexion a {
  font-size: 0.85rem;
}

/* ---- password field + reveal (eye) control ----
   The eye must belong to the input on every viewport, LTR and RTL.
   1. Progressive: CSS anchor positioning glues the icon to the INPUT itself,
      whatever wrapper PMB generates (vertical centre + inline-end edge).
   2. Fallback (browsers without anchor positioning): the nearest wrapper of the
      input becomes the positioning context.
   3. The card clips anything that would still try to escape it. */
#bandeau > #connexion {
  min-width: 0;
  overflow: hidden;
  overflow: clip;
}

#connexion #login_form input.password {
  anchor-name: --login-pw;
  padding-inline-end: calc(var(--control-h) + 0.25rem);  /* text never runs under the icon */
}

#connexion #login_form :has(> input.password) {
  position: relative;
}

#connexion #login_form input.password ~ :is(
    i, svg, img, button, [role="button"],
    [class*="eye" i], [class*="show" i], [class*="toggle" i],
    [id*="eye" i], [id*="show" i], [id*="toggle" i]) {
  /* legacy PMB / inline styles position this with margins or floats */
  position: absolute !important;
  margin: 0 !important;
  float: none !important;
  inset: auto;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  min-width: var(--control-h);
  height: var(--control-h);
  min-height: 0;
  padding: 0;
  line-height: 1;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}

#connexion #login_form input.password ~ :is(i, svg, img, button, [role="button"],
    [class*="eye" i], [class*="show" i], [class*="toggle" i],
    [id*="eye" i], [id*="show" i], [id*="toggle" i]):hover {
  color: var(--color-accent);
}

@supports (anchor-name: --a) and (position-anchor: --a) {
  #connexion #login_form input.password ~ :is(i, svg, img, button, [role="button"],
      [class*="eye" i], [class*="show" i], [class*="toggle" i],
      [id*="eye" i], [id*="show" i], [id*="toggle" i]) {
    position-anchor: --login-pw;
    inset-block-start: anchor(center);
    inset-inline-end: anchor(end);       /* logical: flips by itself in RTL */
    translate: 0 -50%;
  }
}

/* ---- metadata blocks : flat, muted ---- */
#bandeau > #meteo,
#bandeau > #adresse,
#bandeau > #post_adress,
#bandeau > #horaires {
  padding: 0.9rem 1.1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
  border-color: transparent;
}

#meteo {
  text-align: center;
}

#adresse h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}

#adresse #opac_biblio_email {
  font-weight: 600;
  font-size: 0.9rem;
}

#bandeau #post_adress h3 {
  margin: 0 0 0.4rem;
  padding: 0;
  background: transparent;
  color: var(--color-primary);
}

/* sidebar action buttons are compact */
#bandeau input.bouton,
#bandeau input[type="submit"],
#bandeau input[type="button"] {
  min-height: 2.25rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}


/* ---------------------------------------------------------------------------
   6. MAIN COLUMN : titles, welcome text, navigator
   --------------------------------------------------------------------------- */

#main h3 {
  margin: 0;
  font-size: 1.15rem;
}

#main_header h3 {
  position: static;
  margin: 0 0 0.75rem;
  padding: 0;
  background: none;
  opacity: 1;
  filter: none;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
  color: var(--color-primary);
}

#intro_message .p1 {
  margin-bottom: 1rem;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

#intro_message .p1 p {
  margin: 0 0 0.4rem;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary);
}

#intro_message .p2 {
  margin-bottom: 1rem;
}

/* result toolbar: Modifier / Historique / Nouvelle recherche / Votre compte */
#navigator {
  margin-bottom: var(--space-4);
  padding: 0.3rem 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
}

#navigator ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.25rem;
  list-style: none;
}

#navigator a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.4rem 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}

#navigator a:hover {
  background: var(--color-accent-soft);
}


/* ---------------------------------------------------------------------------
   7. SEARCH  (the centrepiece : large field, segmented tabs)
   --------------------------------------------------------------------------- */

#search {
  margin: 0 0 var(--gap);
  padding: 1.25rem 1.5rem 1.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

/* ---- segmented tab control (search tabs, list tabs, account tabs) ---- */
#main #search ul.search_tabs,
#search_onglet ul.search_tabs,
#categories ul.search_tabs,
#onglets_list ul.list_tabs,
#empr_onglet ul.empr_tabs,
ul.empr_subtabs {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1rem;
  padding: 0.25rem;
  list-style: none;
  font-size: 0.875rem;
  background: var(--color-surface-subtle);
  border-radius: var(--radius-pill);
}

#main #search ul.search_tabs li,
#search_onglet ul.search_tabs li,
#categories ul.search_tabs li,
#onglets_list ul.list_tabs li,
#empr_onglet ul.empr_tabs li,
ul.empr_subtabs li {
  display: block;
  float: none;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

#main #search ul.search_tabs li a,
#search_onglet ul.search_tabs li a,
#categories ul.search_tabs li a,
#onglets_list ul.list_tabs li a,
#empr_onglet ul.empr_tabs li a,
ul.empr_subtabs li a {
  display: block;
  padding: 0.5rem 1.05rem;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-weight: 600;
  text-decoration: none;
}

#main #search ul.search_tabs li:hover,
#search_onglet ul.search_tabs li:hover,
#categories ul.search_tabs li:hover,
#onglets_list ul.list_tabs li:hover,
#empr_onglet ul.empr_tabs li:hover,
ul.empr_subtabs li:hover {
  background: var(--color-surface);
  margin: 0;
  padding: 0;
  top: auto;
}

#main #search ul.search_tabs li:hover a,
#search_onglet ul.search_tabs li:hover a,
#categories ul.search_tabs li:hover a,
#onglets_list ul.list_tabs li:hover a,
#empr_onglet ul.empr_tabs li:hover a,
ul.empr_subtabs li:hover a {
  color: var(--color-accent-hover);
}

/* current tab */
#main #search ul.search_tabs li#current,
#search_onglet ul.search_tabs li.current,
#categories ul.search_tabs li#current,
#onglets_list ul.list_tabs li#current,
#empr_onglet ul.empr_tabs li#current {
  background: var(--color-primary);
  box-shadow: var(--shadow-1);
}

#main #search ul.search_tabs li#current a,
#search_onglet ul.search_tabs li.current a,
#categories ul.search_tabs li#current a,
#onglets_list ul.list_tabs li#current a,
#onglets_list ul.list_tabs li a.current,
#empr_onglet ul.empr_tabs li#current a {
  color: #FFFFFF;
}

#onglets_list ul.list_tabs li a.current {
  background: var(--color-primary);
}

#empr_onglet ul.empr_tabs {
  font-size: 0.9rem;
}

ul.empr_subtabs {
  margin-top: 1.25rem;
}

/* ---- search forms ---- */
#search #search_crl {
  clear: both;
  float: none;
}

/* OPAC navigation links: compact, never overlapping */
#navigation_opac,
.navigation_opac,
ul.navigation_opac {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
}

#navigation_opac li,
.navigation_opac li,
ul.navigation_opac > li {
  list-style: none;
  margin: 0;
}

#navigation_opac a,
.navigation_opac a,
ul.navigation_opac > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.8rem;
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}

#navigation_opac a:hover,
.navigation_opac a:hover,
ul.navigation_opac > li > a:hover {
  background: var(--color-accent-soft);
}

#search p.p1 {
  margin: 0;
  padding-top: 0.35rem;
  clear: left;
  display: block;
}

#search form {
  margin-top: 0.25rem;
}

#search form select {
  min-height: 2.875rem;
  max-width: 260px;
  margin: 0 0 0.5rem;
  padding-inline: 0.9rem 2.35rem;
  border-color: var(--color-border-strong);
  box-shadow: none;
}

/* the main lane: field grows, button keeps its size */
#search form #simple_search_zone,
#external_simple_search_zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding: 0;
}

#search form #simple_search_zone select {
  margin: 0;
}

#search form input.text_query,
#external_simple_search_zone input.text_query {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: var(--search-h);
  padding-block: 0.75rem;
  padding-inline: 3rem 1.1rem;
  font-size: 1.0625rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: #FFFFFF var(--icon-search) no-repeat 1.05rem center / 20px 20px;
  box-shadow: var(--shadow-1);
}

#search form input.text_query:focus,
#external_simple_search_zone input.text_query:focus {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

:root:lang(ar) #search form input.text_query,
[dir="rtl"] #search form input.text_query {
  background-position: right 1.05rem center;
}

#search form #simple_search_zone input.boutonrechercher,
#search form #simple_search_zone input.bouton,
#search form #simple_search_zone button.bouton,
#external_simple_search_zone input.boutonrechercher,
#external_simple_search_zone input.bouton,
#external_simple_search_zone button.bouton {
  flex: 0 0 auto;
  width: auto;
  min-width: 8.5rem;
  min-height: var(--search-h);
  margin: 0;
  padding-inline: 1.75rem;
  font-size: 1rem;
  border-radius: var(--radius-lg);
}

#search form input.boutonrechercher {
  margin: 0;
}

.ext_search_txt {
  width: min(100%, 420px);
}

#external_simple_search_zone {
  margin-top: 1rem;
}

/* "search in..." toggle + panel */
#search #zsimplesChild {
  position: relative;
  width: 100%;
  margin: 0.6rem 0 0 !important; /* PMB toggles inline margins on this block */
  padding: 0.85rem 1rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

#search #zsimplesChild::before {
  content: "Champs \00E0  rechercher";
  display: block;
  margin: 0 0 0.5rem;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
}

#search #zsimplesChild:lang(en)::before { content: "Fields to search"; }
#search #zsimplesChild:lang(ar)::before { content: "\062D\0642\0648\0644  \0627\0644\0628\062D\062B"; }

#search #zsimplesChild table {
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  border-collapse: separate;
  border-spacing: 0;
}

#search #zsimplesChild table tbody,
#search #zsimplesChild table tr {
  width: 100%;
}

/* PMB renders the fields as table cells: show them as selectable chips */
#search #zsimplesChild table tr {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem 0.5rem;
}

#search #zsimplesChild table td {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.4rem 0.6rem;
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius);
  line-height: 1.3;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}

#search #zsimplesChild table td:hover {
  color: var(--color-primary);
  border-color: var(--color-border);
}

#search #zsimplesChild table td:has(input:checked) {
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
  border-color: rgba(11, 107, 106, 0.35);
}

#search #zsimplesChild table td label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  font-size: 0.875rem;
  color: inherit;
  cursor: pointer;
}

#search #zsimplesChild input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
}

#search #zsimplesChild table td > input[type="checkbox"] {
  margin-inline-end: 0.45rem;
  vertical-align: middle;
}

/* the "all fields" choice is set apart without dominating */
#search #zsimplesChild table td:last-child {
  font-weight: 700;
}

/* toggle control immediately before the panel (links, buttons, labels...) */
#search :is(a, button, label, input[type="button"], input[type="submit"]):has(+ #zsimplesChild),
#search #zsimplesChild + a,
#search #zsimplesChild + button,
#search .search_more,
#search .search_more_link,
#search a.search_more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  margin: 0.55rem 0 0;
  padding: 0.45rem 0.9rem;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  box-shadow: none;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

#search :is(a, button, label, input[type="button"], input[type="submit"]):has(+ #zsimplesChild):hover,
#search #zsimplesChild + a:hover,
#search #zsimplesChild + button:hover,
#search .search_more:hover,
#search .search_more_link:hover,
#search a.search_more:hover {
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
  border-color: rgba(11, 107, 106, 0.4);
}

/* small utility links inside the search card look like secondary controls */
#search a.bouton,
#search a.button,
#search a.btn,
#search .bouton a,
#search .button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-border-strong);
  text-decoration: none;
  font-weight: 600;
}

#search a.bouton:hover,
#search a.button:hover,
#search a.btn:hover,
#search .bouton a:hover,
#search .button a:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
}

#search #zsimplesChild {
  border-bottom-color: var(--color-border);
}

#search .form- .form-contenu {
  padding-top: 1.25rem;
}

/* results header area */
#resultatrech_see {
  margin-top: 0.75rem;
}

#resultatrech_see h3 {
  margin: 0.75rem 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
}

#resultatrech_liste {
  margin-top: 0.75rem;
}

#resultatrech_liste blockquote {
  margin-top: 1.25rem;
}

#resultatrech_liste tbody tr td table,
#resultatrech_liste tbody {
  padding-top: 0.3rem;
}


/* ---------------------------------------------------------------------------
   8. HOME SECTIONS : periodicals, categories, locations, last entries, etageres
   Old "legend over the border" titles become regular headings.
   --------------------------------------------------------------------------- */

#perio_a2z h3 span,
#categories h3 span,
#location h3 span,
#last_entries h3 span,
#titre_etagere,
#infopage_carrousel h3 span,
#search #perio_a2z h3 span {
  position: static;
  display: inline;
  margin: 0;
  padding: 0;
  background: none;
}

#categories h3,
#location h3,
#last_entries > h3,
#perio_a2z > h3,
#infopage_carrousel h3,
#etageres h3 {
  margin: 0 0 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
}

#titre_etagere {
  display: block;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

#perio_a2z,
#location-container,
#last_entries,
#etagere-container,
#categories-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

/* ---- periodicals A-Z ---- */
#perio_a2z {
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
}

#search #perio_a2z {
  margin-top: 0;
  border: none;
  box-shadow: none;
  padding: 0;
}

#perio_a2z label {
  margin: 0 0.35rem;
}

#perio_a2z #perio_a2z_search {
  margin-top: 1rem;
  width: 50%;
}

#perio_a2z .parent ul.onglets_isbd_public {
  padding-bottom: 0.5rem;
}

#a2z_contens {
  clear: both;
}

table.a2z_contens {
  margin-top: 0.6rem;
}

table.a2z_contens td {
  vertical-align: top;
}

table.a2z_perio_list {
  width: 100%;
  max-width: 220px;
}

table.a2z_perio_list tr td {
  padding-block: 0.2rem;
}

#a2z_perio b .header_title {
  font-size: 1.05rem;
}

#a2z_perio h3 span#titre_exemplaires {
  position: relative;
  margin: 0 0 0.4rem;
  padding: 0;
}

#a2z_perio .navbar {
  margin-top: 1.25rem;
}

input#a2z_abt_actif {
  vertical-align: middle;
  margin: 0 2px;
}

#form_search_bull form {
  margin-top: 0.6rem;
}

#form_search_bull form table td {
  vertical-align: middle;
}

/* ---- categories ---- */
#categories {
  position: relative;
  margin-top: 1.5rem;
}

#categories-container {
  margin-bottom: 1rem;
  padding: 1.25rem 1.5rem;
}

#categories-container a {
  text-decoration: none;
}

#categories-container a:hover {
  text-decoration: underline;
}

#categories-container h2 {
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
}

#categories-container h2 img {
  display: none;
}

#categories-container ul {
  margin-top: 0.15rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

#categories-container li {
  display: inline;
}

#aut_see {
  margin-top: 0.6rem;
}

/* ---- locations ---- */
#location {
  margin-top: 1.5rem;
}

#location-container {
  margin-bottom: 1rem;
  padding: 0.85rem 1.1rem;
}

#location-container table tr td a b {
  font-weight: 500;
  font-size: 1.05em;
}

/* ---- last acquisitions ---- */
#last_entries {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
}

#last_entries h3 {
  margin: 0 0 0.75rem;
}

#last_entries .notice-child h3 {
  margin: 0.3rem 0 0;
  background-color: inherit;
}

#last_entries .notice-child h3 span {
  padding: 0;
}

#last_entries .title_notCourte > h3,
#last_entries .title_notCourte > h3 span {
  margin: 0;
  padding: 0;
}

/* ---- etageres ---- */
#etageres {
  margin-top: 1.5rem;
}

#etagere-container {
  margin-bottom: 1rem;
  padding: 1.1rem 1.25rem;
}

.etagere {
  margin-top: 1rem;
}

#etagere-container #etagere-titre h1 {
  margin: 0;
  font-size: 1.15rem;
}

#etagere-container #etagere-comment h2 {
  margin: 0;
  text-align: end;
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

#etagere-notice-list {
  margin: 0.4rem 0;
  margin-inline-start: 1.4rem;
}

/* ---- footer ---- */
#footer,
#all_footer {
  order: 9;
  flex: 0 0 100%;
  clear: both;
  margin: 1.5rem 0 0;
  padding: 1.5rem 1rem;
  text-align: center;
  color: #B9C6D3;
  background: var(--color-primary-deep);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-size: 0.875rem;
}

#footer a,
#all_footer a {
  color: #BFE7E3;
  text-decoration-color: rgba(191, 231, 227, 0.4);
}

#footer a:hover,
#all_footer a:hover {
  color: #FFFFFF;
}

#footer a:focus-visible,
#all_footer a:focus-visible {
  outline-color: var(--color-accent-on-dark);
}


/* ---------------------------------------------------------------------------
   9. FACETS  (refine / compare panel)
   --------------------------------------------------------------------------- */

#facette {
  max-height: min(70vh, 30rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

#facette h3 {
  margin: 0 0 0.6rem;
  padding: 0;
  background: transparent;
  color: var(--color-primary);
}

#facette table,
#facette #facette_list {
  border-collapse: collapse;
}

/* facet group header */
#facette th,
#facette #facette_list th {
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-sm);
}

#facette td {
  padding: 0.2rem 0.25rem;
}

/* facet value + count */
#facette #facette_list a {
  display: block;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--t-fast) ease;
}

#facette a:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
}

#facette input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}


/* ---------------------------------------------------------------------------
   10. SOCIAL, INFOPAGES, CAROUSEL, SUBSCRIPTION
   --------------------------------------------------------------------------- */

table td div.addthis_toolbox {
  margin-block: 0.6rem;
}

a.addthis_button_facebook_like iframe {
  height: 20px !important;
  width: 60px !important;
}

a.addthis_button_tweet iframe {
  width: 80px !important;
}

/* ---- reglement ---- */
#reglement h1 {
  margin: 0 0 1.5rem;
}

#reglement h3 {
  margin: 1.25rem 0 0.3rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ---- actualites ---- */
#actualites h1 {
  margin: 0 0 1.5rem;
}

#actualites .bloc_actu {
  margin: 0 0 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

#actualites .bloc_actu h3 {
  margin: 0 0 0.6rem;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
}

#actualites .bloc_actu table td {
  padding: 0;
  text-align: start;
}

#actualites .bloc_actu table td.image {
  padding-inline-start: 1rem;
  width: 200px;
}

#actualites .bloc_actu table td.image img {
  max-width: 200px;
  max-height: 140px;
  border-radius: var(--radius);
  object-fit: cover;
}

/* ---- horaires ---- */
#horaires h1 {
  margin: 1rem 0 0.5rem;
}

#horaires table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

#horaires table td {
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--color-border);
}

#horaires table tr:first-child td {
  border-top: none;
}

#horaires table tr:nth-child(even) td {
  background: var(--color-bg);
}

/* ---- carousel (bxSlider : widths and arrows are driven by JS, keep them) ---- */
#infopage_carrousel .bx-window,
#infopage_carrousel .bx-wrapper {
  width: inherit !important;
}

#infopage_carrousel ul {
  margin-block: 1rem;
}

#infopage_carrousel ul li {
  width: 245px !important;
}

#infopage_carrousel ul li a {
  display: block;
  width: 150px;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
}

#infopage_carrousel ul li a img {
  display: block;
  height: 150px;
  background-repeat: no-repeat;
  background-image: url("../../images/no_image.jpg");
  text-indent: -9999px;
  border-radius: var(--radius-sm);
  transition: transform var(--t-base) var(--ease);
}

@media (hover: hover) {
  #infopage_carrousel ul li a:hover img {
    transform: translateY(-2px);
  }
}

.bx-next {
  position: absolute;
  z-index: 1000;
  width: 32px;
  height: 32px;
  right: 10px;
  top: 75px;
  background-image: url("../../images/next.png");
  background-repeat: no-repeat;
  background-position: 0 0;
}

.bx-prev {
  position: absolute;
  z-index: 1000;
  width: 32px;
  height: 32px;
  left: 10px;
  top: 75px;
  background-image: url("../../images/prev.png");
  background-repeat: no-repeat;
  background-position: 0 0;
}

/* ---- 10.b CMS CAROUSEL MODULE (bxSlider, /cms/modules/carousel) ----------
   WHY THE RULES ABOVE NEVER REACHED IT: they are scoped to #infopage_carrousel,
   an id CMS carousels do not have. A CMS carousel renders as
     <div id="cms_module_carousel_N">              the "cadre" (dom id)
       <div class="bx-wrapper">
         <div class="bx-window">                   inline width / height / overflow
           <ul id="carousel_cms_module_carousel_N">  inline width + left/top (animated)
             <li class="cms_module_carousel_N_item"> inline width set by the view JS
       <a class="bx-prev"> <a class="bx-next">
   and its own CSS (PMB "CSS associee") is injected as a <link> with rules such as
   ".bx-wrapper { width/height: inherit !important }" and "img { height: 145px }".
   bxSlider moves the <ul> and sizes the <li> from JS, so this block never touches
   width / height / left / top / float of ul and li. It only:
     - contains the slider inside its column (nothing can widen #main),
     - restyles covers, arrows and dots with the theme tokens,
     - runs the slider LTR even in Arabic (bxSlider animates with left offsets),
       while the page itself stays RTL.
   Prefix used below (raises specificity above the injected #id rules):
     :is(#main, body) :is(div[id^="cms_module_carousel"], div.cms_module_carousel) */

/* the frame: never wider than its column, arrows / wide <ul> cannot escape */
:is(#main, body) :is(div[id^="cms_module_carousel"], div.cms_module_carousel) {
  position: relative;
  display: block;
  float: none;
  clear: both;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-block: var(--space-4) var(--space-5);
  padding-block: var(--space-2) var(--space-3);
  overflow: hidden;
  contain: layout paint;
  isolation: isolate;
}

:is(#main, body) :is(div[id^="cms_module_carousel"], div.cms_module_carousel) .bx-wrapper {
  position: relative;
  max-width: 100%;
  height: auto !important;       /* the injected "height: inherit" pinned it */
  margin-inline: auto;
  direction: ltr;                /* see the RTL note above */
}

:is(#main, body) :is(div[id^="cms_module_carousel"], div.cms_module_carousel) .bx-window {
  max-width: 100%;
  margin-inline: auto;
  direction: ltr;
}

/* list + items: cosmetics only (bxSlider owns width, float, left, top) */
:is(#main, body) :is(div[id^="cms_module_carousel"], div.cms_module_carousel) .bx-wrapper ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(#main, body) :is(div[id^="cms_module_carousel"], div.cms_module_carousel) .bx-wrapper ul li {
  box-sizing: content-box;       /* bxSlider 3.0 reads width() but slides by outerWidth(): */
  margin: 0;                     /* no padding / border / margin on the items, the gap */
  padding: 0;                    /* comes from the max-width of the link inside */
  list-style: none;
  text-align: center;
}

/* covers: fluid, same ratio for every book, book-like elevation */
:is(#main, body) :is(div[id^="cms_module_carousel"], div.cms_module_carousel) .bx-wrapper ul li a {
  display: block;
  width: 100%;
  max-width: 9.5rem;
  margin-inline: auto;
  color: inherit;
  text-decoration: none;
}

:is(#main, body) :is(div[id^="cms_module_carousel"], div.cms_module_carousel) .bx-wrapper ul li a br {
  display: none;
}

:is(#main, body) :is(div[id^="cms_module_carousel"], div.cms_module_carousel) .bx-wrapper ul li a img {
  display: block;
  width: 100%;
  height: auto;                  /* beats the injected "height: 145px" */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  margin-inline: auto;
  background-color: var(--color-surface-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(16, 35, 58, 0.08);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

@media (hover: hover) {
  :is(#main, body) :is(div[id^="cms_module_carousel"], div.cms_module_carousel) .bx-wrapper ul li a:hover img {
    transform: translateY(-3px);
    box-shadow: var(--shadow-pop), 0 0 0 1px rgba(16, 35, 58, 0.08);
  }
}

:is(#main, body) :is(div[id^="cms_module_carousel"], div.cms_module_carousel) .bx-wrapper ul li a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* arrows: glass buttons, 44px, no image files (replaces the old next.png / prev.png
   rules above for every bxSlider on the site). Physical left / right on purpose:
   the slider runs LTR, so "previous" is always on the left, also in Arabic. */
.bx-wrapper .bx-prev,
.bx-wrapper .bx-next {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0;
  padding: 0;
  overflow: hidden;
  color: #FFFFFF;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  background: var(--glass-bg, rgba(10, 22, 38, 0.72)) none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-line, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-pill, 999px);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  transition: transform var(--t-base) var(--ease), background-color var(--t-fast) var(--ease);
}

.bx-wrapper .bx-prev { left: var(--space-2); right: auto; }
.bx-wrapper .bx-next { right: var(--space-2); left: auto; }

.bx-wrapper .bx-prev::before,
.bx-wrapper .bx-next::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  transform: translateX(0.12rem) rotate(45deg);
}

.bx-wrapper .bx-next::before {
  transform: translateX(-0.12rem) rotate(-135deg);
}

@media (hover: hover) {
  .bx-wrapper .bx-prev:hover,
  .bx-wrapper .bx-next:hover {
    background-color: var(--color-accent);
    transform: scale(1.06);
  }
}

.bx-wrapper .bx-prev:focus-visible,
.bx-wrapper .bx-next:focus-visible {
  outline: 2px solid var(--color-accent-on-dark);
  outline-offset: 2px;
}

/* dots (only when "Affichage des liens vers les elements" = yes) */
.bx-wrapper .bx-pager {
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  margin-top: var(--space-3);
  text-align: center;
}

.bx-wrapper .bx-pager a {
  display: block;
  width: 0.65rem;
  height: 0.65rem;
  overflow: hidden;
  font-size: 0;
  text-indent: -9999px;
  background: var(--color-border-strong);
  border-radius: 50%;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}

.bx-wrapper .bx-pager a:hover,
.bx-wrapper .bx-pager a.pager-active {
  background: var(--color-accent);
  transform: scale(1.25);
}

/* RTL / Arabic: the slider stays LTR, only the text inside the items follows the page */
[dir="rtl"] :is(div[id^="cms_module_carousel"], div.cms_module_carousel) .bx-wrapper ul li,
:lang(ar) :is(div[id^="cms_module_carousel"], div.cms_module_carousel) .bx-wrapper ul li {
  direction: rtl;
}

/* phones: slightly smaller covers, arrows stay 44px (touch target) */
@media (max-width: 768px) {
  :is(#main, body) :is(div[id^="cms_module_carousel"], div.cms_module_carousel) .bx-wrapper ul li a {
    max-width: 8rem;
  }
}

/* the column that holds the home content must never shrink to the slider's width */
#main #main_hors_footer {
  float: none;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  :is(#main, body) :is(div[id^="cms_module_carousel"], div.cms_module_carousel) .bx-wrapper ul li a:hover img,
  .bx-wrapper .bx-prev:hover,
  .bx-wrapper .bx-next:hover {
    transform: none;
  }
}

/* ---- subscription page ---- */
#websubscribe h1 {
  margin-bottom: 0.6rem;
  font-size: 1.5rem;
}

#websubscribe #subs_form table td h4 {
  margin: 0;
}

#websubscribe #subs_form table td input.subsform {
  width: 100%;
  max-width: 320px;
  background-color: #FFFFFF;
}

#subs_form table td input {
  background-color: #FFFFFF;
}

/* ---- serial issues carousel ---- */
.carroussel_bulletin {
  text-align: center;
  padding: 0.4rem;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
}

.carroussel_bulletin img {
  border: none;
}

.carroussel_bulletin .active,
.carroussel_bulletin .current_bull_carroussel {
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  color: #FFFFFF;
}

.carroussel_bulletin .active a {
  color: #FFFFFF;
  cursor: pointer;
}

.carroussel_bulletin .current_bull_carroussel {
  font-weight: 700;
}


/* ---------------------------------------------------------------------------
   11. BUTTONS + FORMS
   Hierarchy:  primary   input.bouton / .boutonrechercher / [type=submit] / button.bouton
               secondary input[type=button] / .bouton-secondary
               ghost     .bouton-ghost
               danger    .imp_bouton / .bouton-danger
               icon      .bouton-icon
   Loading state (no JS needed for the look): aria-busy="true" or .is-loading
   --------------------------------------------------------------------------- */

input.bouton,
input.boutonrechercher,
input[type="submit"],
button.bouton,
input[type="button"],
.bouton-secondary,
.bouton-ghost,
.bouton-danger,
.bouton-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--control-h);
  margin-inline-start: 0.35rem;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius);
  -webkit-appearance: none;
  appearance: none;
  text-shadow: none;
  cursor: pointer;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease,
    color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform var(--t-fast) var(--ease);
}

/* primary */
input.bouton,
input.boutonrechercher,
input[type="submit"],
button.bouton {
  color: var(--on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-1);
}

input.bouton:hover,
input.boutonrechercher:hover,
input[type="submit"]:hover,
button.bouton:hover {
  color: var(--on-accent);
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* secondary: bare buttons used for cancel / close / helpers */
input[type="button"]:not(.bouton):not(.boutonrechercher),
.bouton-secondary {
  color: var(--color-primary);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  box-shadow: none;
}

input[type="button"]:not(.bouton):not(.boutonrechercher):hover,
.bouton-secondary:hover {
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
  border-color: rgba(11, 107, 106, 0.4);
}

/* ghost */
.bouton-ghost {
  color: var(--color-accent);
  background: transparent;
  border-color: transparent;
}

.bouton-ghost:hover {
  background: var(--color-accent-soft);
}

/* destructive */
input.imp_bouton,
.bouton-danger {
  min-height: 2rem;
  padding: 0.3rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius);
  text-shadow: none;
  cursor: pointer;
}

input.imp_bouton:hover,
.bouton-danger:hover {
  background: #8F1D17;
  border-color: #8F1D17;
}

/* icon button */
.bouton-icon {
  width: var(--control-h);
  padding: 0;
  margin-inline-start: 0;
}

/* press + focus + disabled + loading */
input.bouton:active,
input.boutonrechercher:active,
input[type="submit"]:active,
button.bouton:active,
input[type="button"]:active {
  transform: translateY(1px);
  box-shadow: none;
}

input.bouton:focus-visible,
input.boutonrechercher:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
button.bouton:focus-visible,
.bouton-secondary:focus-visible,
.bouton-ghost:focus-visible,
.bouton-danger:focus-visible,
.bouton-icon:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

input.bouton:disabled,
input.boutonrechercher:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
button.bouton:disabled,
.bouton-secondary:disabled,
.bouton-ghost:disabled,
.bouton-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

button.bouton[aria-busy="true"],
button.bouton.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

button.bouton[aria-busy="true"]::after,
button.bouton.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: genbib-spin 0.7s linear infinite;
}

@keyframes genbib-spin {
  to { transform: rotate(360deg); }
}

/* ---- fields ---- */
:is(input:not([type]), input[type="text"], input[type="search"], input[type="password"],
  input[type="email"], input[type="tel"], input[type="url"], input[type="number"],
  input[type="date"], input[type="time"], input[type="datetime-local"], input[type="file"],
  select, textarea) {
  min-height: var(--control-h);
  padding: 0.55rem 0.85rem;
  font: inherit;
  color: var(--color-text);
  background-color: #FFFFFF;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, background-color var(--t-fast) ease;
}

:is(input:not([type]), input[type="text"], input[type="search"], input[type="password"],
  input[type="email"], input[type="tel"], input[type="url"], input[type="number"],
  input[type="date"], input[type="time"], input[type="datetime-local"], input[type="file"],
  select, textarea):hover {
  border-color: var(--color-text-subtle);
}

:is(input:not([type]), input[type="text"], input[type="search"], input[type="password"],
  input[type="email"], input[type="tel"], input[type="url"], input[type="number"],
  input[type="date"], input[type="time"], input[type="datetime-local"], input[type="file"],
  select, textarea):focus {
  outline: 2px solid transparent; /* keeps a visible ring in forced-colors mode */
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

:is(input[type="text"], input[type="search"], input[type="password"], input:not([type]),
  select, textarea)::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.4rem;
  background-image: var(--icon-chevron);
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 16px 16px;
  cursor: pointer;
}

[dir="rtl"] select:not([multiple]):not([size]),
:root:lang(ar) select:not([multiple]):not([size]) {
  background-position: left 0.8rem center;
}

select[multiple], select[size] {
  min-height: 0;
  padding: 0.35rem;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  min-height: 0;
  accent-color: var(--color-accent);
  border: none;
  vertical-align: middle;
}

/* states */
input[disabled], select[disabled], textarea[disabled] {
  background-color: var(--color-surface-subtle);
  color: var(--color-text-subtle);
  border-color: var(--color-border);
  cursor: not-allowed;
}

:is(input, select, textarea)[aria-invalid="true"],
:is(input, select, textarea).is-invalid,
.erreur_saisie {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

:is(input, select, textarea)[aria-invalid="true"]:focus,
:is(input, select, textarea).is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.22);
}

:is(input, select, textarea).is-valid {
  border-color: var(--color-success);
}

@supports selector(:user-invalid) {
  :is(input, select, textarea):user-invalid {
    border-color: var(--color-danger);
  }
}

label {
  font-weight: 600;
  color: var(--color-text);
}


/* ---------------------------------------------------------------------------
   12. TABLES
   Legacy tables stay tables. Data tables get header/row treatment; layout
   tables keep their compact cells.
   --------------------------------------------------------------------------- */

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  clear: both;
}

th {
  padding: 0.55rem 0.8rem;
  text-align: start;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  background-color: var(--color-surface-subtle);
}

td {
  padding: 0.25rem 0.4rem;
  vertical-align: top;
}

.authorities {
  background-color: var(--color-surface-subtle);
}

/* PMB row highlight classes (set by its own mouseover scripts) */
tr.surbrillance,
tr.surbrillance td {
  background-color: var(--color-accent-soft);
  color: var(--color-text);
}

/* ---- copies / holdings ---- */
table.exemplaires,
.exemplaires {
  border-collapse: separate;
  border-spacing: 0;
}

table.exemplaires {
  width: 100%;
  margin: 0.5rem 0;
  font-size: 0.875rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

table.exemplaires th {
  padding: 0.6rem 0.85rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border);
}

table.exemplaires td {
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
  background: transparent;
}

table.exemplaires tr:first-child td {
  border-top: none;
}

table.exemplaires tr:hover td {
  background: var(--color-accent-soft);
}

table.exemplaires td:first-child {
  font-variant-numeric: tabular-nums;
}

/* availability : status cell becomes a compact badge.
   Green by default; the explicit classes keep their semantic colours. */
table.exemplaires td.expl_situation strong,
table.exemplaires td.expl_situation b,
table.exemplaires td.expl_situation .badge {
  display: inline-block;
  padding: 0.15rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--color-success);
  background: var(--color-success-bg);
  border: 1px solid rgba(20, 108, 67, 0.15);
  border-radius: var(--radius-pill);
}

/* warning */
table.exemplaires td.expl_situation .badge-warn,
table.exemplaires td.expl_situation strong.badge-warn,
table.exemplaires td.expl_situation b.badge-warn,
table.exemplaires td.expl_situation .unavailable,
table.exemplaires td.expl_situation .non-disponible,
table.exemplaires td.expl_situation strong:has(.unavailable),
table.exemplaires td.expl_situation b:has(.unavailable),
table.exemplaires td.expl_situation strong:has(.non-disponible),
table.exemplaires td.expl_situation b:has(.non-disponible) {
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border-color: rgba(138, 75, 8, 0.18);
}

/* error / excluded */
table.exemplaires td.expl_situation .badge-bad,
table.exemplaires td.expl_situation strong.badge-bad,
table.exemplaires td.expl_situation b.badge-bad,
table.exemplaires td.expl_situation .bad,
table.exemplaires td.expl_situation .exclu,
table.exemplaires td.expl_situation strong:has(.bad),
table.exemplaires td.expl_situation b:has(.bad),
table.exemplaires td.expl_situation strong:has(.exclu),
table.exemplaires td.expl_situation b:has(.exclu) {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border-color: rgba(179, 38, 30, 0.18);
}

/* avoid a double box when the template nests <b>/<strong> inside a status class */
table.exemplaires td.expl_situation .unavailable strong,
table.exemplaires td.expl_situation .unavailable b,
table.exemplaires td.expl_situation .non-disponible strong,
table.exemplaires td.expl_situation .non-disponible b,
table.exemplaires td.expl_situation .bad strong,
table.exemplaires td.expl_situation .bad b,
table.exemplaires td.expl_situation .exclu strong,
table.exemplaires td.expl_situation .exclu b {
  color: inherit;
  background: transparent;
  border-color: transparent;
  padding: 0;
}

table.exemplaires tr.expl_unavailable td.expl_situation strong {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border-color: rgba(179, 38, 30, 0.18);
}

/* ready-made badges: add these classes in your copy templates */
.badge {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  background: var(--color-surface-subtle);
}

.badge-ok   { color: var(--color-success); background: var(--color-success-bg); }
.badge-warn { color: var(--color-warning); background: var(--color-warning-bg); }
.badge-bad  { color: var(--color-danger);  background: var(--color-danger-bg); }

/* ---- suggestion table ---- */
.tab_sug {
  table-layout: fixed;
}

.tab_sug th,
.tab_sug td {
  width: 100%;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--color-border);
  border-collapse: collapse;
}

.tab_sug input,
.tab_sug textarea {
  width: 95%;
  height: 100%;
}

.tab_sug select {
  width: 95%;
}


/* ---------------------------------------------------------------------------
   13. READER ACCOUNT
   --------------------------------------------------------------------------- */

ul.empr_subtabs li {
  display: block;
}

#fiche-empr, #empr-all, #empr-late, #empr-old, #empr-resa, #empr-dsi, #empr-sugg,
#empr-list, #empr-dema {
  margin-top: 1.5rem;
}

/* loan / reservation lists read as data tables */
:is(#empr-all, #empr-late, #empr-old, #empr-resa, #empr-dsi, #empr-sugg, #empr-list, #empr-dema) table td {
  padding: 0.6rem 0.8rem;
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
}

:is(#empr-all, #empr-late, #empr-old, #empr-resa, #empr-dsi, #empr-sugg, #empr-list, #empr-dema) table tr:hover td {
  background: var(--color-surface-subtle);
}

#list_cadre {
  border: none !important;
  padding-top: 1rem !important;
  overflow: visible !important;
  height: auto !important;
}

#list_cadre img {
  vertical-align: bottom;
}

.listedescription {
  position: absolute;
  visibility: hidden;
  z-index: 2000;
  max-width: 320px;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}

#empr-list h3 {
  margin-top: 0;
}

#empr-list #onglets_list {
  margin-top: 1.5rem;
}

#onglets_list ul.list_tabs {
  margin-inline-start: 0;
}

.form_liste_lecture .form-contenu .row .colonne2 .row textarea {
  max-width: 290px;
}

.form_liste_lecture .row .right {
  margin-block: 1rem 0.6rem;
}


/* ---------------------------------------------------------------------------
   14. NOTICES (catalogue results + record pages)
   .notice-parent = result row (title line)   .notice-child = expanded record
   Never force "display" on .notice-child : PMB toggles it inline.
   --------------------------------------------------------------------------- */

.notice-heada {
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-primary);
}

.notice-heada a {
  font-weight: 500;
}

.notice-parent {
  margin: 0 0 0.4rem;
  padding: var(--row-py) var(--row-px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, background-color var(--t-fast) ease;
}

.notice-parent img {
  vertical-align: middle;
  margin-inline-end: 0.4rem;
}

@media (hover: hover) {
  .notice-parent:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-2);
  }
}

.notice-parent:focus-within {
  border-color: var(--color-accent);
}

.notice-child {
  margin: 0 0 1rem;
  margin-inline-start: 1rem;
  margin-bottom: 1rem !important; /* PMB writes inline margins here */
  padding: 1.15rem 1.3rem 1.25rem;
  text-align: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.notice-child h3 {
  margin-top: 0.4rem;
  font-family: var(--font-serif);
  font-size: 1.25rem !important; /* legacy inline sizes */
  font-weight: 600;
  line-height: 1.3;
}

/* bibliographic fields: label / value reads like an editorial data sheet */
.notice-child table:not(.exemplaires),
.notice-child table:not(.exemplaires) tbody,
.notice-child table:not(.exemplaires) tr,
.notice-child table:not(.exemplaires) td {
  background: transparent;
  color: var(--color-text);
}

.notice-child table {
  margin: 0;
}

.notice-child table:not(.exemplaires) td.bg-grey,
.notice-child table td.bg-grey {
  width: 10.5rem;
  min-width: 8rem;
  padding: 0.5rem 1rem 0.5rem 0;
  padding-inline: 0 1rem;
  text-align: start;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 0.8125rem;
  font-weight: 600;
}

.notice-child table:not(.exemplaires) td.bg-grey a,
.notice-child table td.bg-grey a {
  color: inherit;
}

.notice-child td.bg-grey,
.notice-child td.bg-grey + td {
  border-bottom: 1px solid var(--color-border);
}

.notice-child tr:last-child > td.bg-grey,
.notice-child tr:last-child > td.bg-grey + td {
  border-bottom: none;
}

.notice-child td.bg-grey + td {
  padding-block: 0.5rem;
  line-height: 1.6;
}

.notice-child table td div table tr td {
  padding: 0.2rem 0.4rem;
}

.notice-child table td div table td a,
.notice-child table.exemplaires td a {
  text-decoration: underline;
}

.etiq_champ {
  font-weight: 600;
  color: var(--color-surface);
}

/* cover */
.vignetteimg {
  max-width: 150px;
  max-height: 210px;
  width: auto;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 6px 16px -8px rgba(16, 35, 58, 0.5);
}

.parent {
  margin-bottom: 1rem;
}

.parent h3 {
  font-size: 1rem;
}

.child {
  margin-inline-start: 1.5rem;
  padding: 0.25rem 0.75rem;
  text-align: start;
  border: none;
  border-inline-start: 2px solid var(--color-border);
}

.liste_bulletins {
  padding-inline: 0.2rem;
}

.bg-grey {
  width: 150px;
  padding-inline-end: 0.2em;
  color: #FFFFFF;
  background-color: var(--color-primary);
  border-radius: var(--radius-sm);
}

/* ISBD / public display tabs (small inline pills) */
ul.onglets_isbd_public {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.25rem;
  list-style: none;
  border-bottom: 1px solid var(--color-border);
}

ul.onglets_isbd_public li,
#perio_a2z ul.onglets_isbd_public li {
  display: block;
  float: none;
  border: none;
}

ul.onglets_isbd_public a,
ul.onglets_isbd_public li a {
  display: inline-block;
  height: auto;
  padding: 0.3rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}

ul.onglets_isbd_public li:hover a {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
}

ul.onglets_isbd_public li.onglet_basket {
  margin-inline-start: auto;
  border-right: none;
}

ul.onglets_isbd_public li.isbd_public_active {
  font-weight: 700;
}

ul.onglets_isbd_public li.isbd_public_active a {
  color: #FFFFFF;
  background: var(--color-primary);
}

#perio_a2z ul.onglets_isbd_public {
  margin-top: 0.9rem;
  padding-inline-start: 0;
}

/* pagination + per-page selector (PMB .navbar)
   Structure assumed: one centred line of arrows / page numbers / (x - y / total),
   plus a "Par page : 25 50 100 200" group that PMB floats to the inline-end.
   Desktop keeps that compact single-row look; the container now CONTAINS its
   floats (flow-root) so nothing can hang out over the footer. */
.navbar {
  display: flow-root;
  clear: both;
  max-width: 100%;
  margin: 1.25rem 0 var(--space-4);
  padding-top: 0.9rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  overflow-wrap: anywhere;
}

.navbar :is(form, div) {
  min-width: 0;
  max-width: 100%;
}

.navbar form {
  margin: 0;
}

.navbar a,
.navbar b,
.navbar strong {
  display: inline-block;
  min-width: 2rem;
  margin-block: 0.125rem;
  padding: 0.2rem 0.5rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.navbar a {
  color: var(--color-primary);
}

.navbar a:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
}

.navbar b,
.navbar strong {
  color: #FFFFFF;
  background: var(--color-primary);
}

.navbar img {
  vertical-align: middle;
}

/* result range "(1 - 10 / 3182)" : never split in the middle of the figures */
.navbar :is(i, em):not([class]) {
  display: inline-block;
  margin-inline: 0.5rem;
  white-space: nowrap;
  color: var(--color-text-subtle);
}

/* "Par page" group : a tidy wrapping row instead of loose floated links */
.navbar :is(.right, .right-clear-right, [class*="per_page"], [id*="per_page"], [class*="perpage"], [id*="perpage"]) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.25rem;
  max-width: 100%;
}

/* search-term highlighting */
.text_search0 { background-color: #FEF08A; }
.text_search1 { background-color: #FECACA; }
.text_search2 { background-color: #FED7AA; }
.text_search3 { background-color: #E9D5FF; }
.text_search4 { background-color: #BFDBFE; }
.text_search5 { background-color: #BBF7D0; }

.text_search0, .text_search1, .text_search2,
.text_search3, .text_search4, .text_search5 {
  padding: 0 0.15em;
  color: var(--color-primary-deep);
  border-radius: 3px;
  text-decoration: none;
}


/* ---------------------------------------------------------------------------
   15. POP-UPS, MESSAGES, LEGACY HELPERS
   --------------------------------------------------------------------------- */

#att #serialcirc_ask_copy {
  z-index: 100;
}

#titre-popup {
  margin: 0.6rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-primary);
}

form#f {
  margin-inline-start: 0.6rem;
}

.echelle_avis {
  padding: 0.45rem;
}

.alerte {
  color: var(--color-danger);
  font-size: 0.95rem;
  font-weight: 600;
}

/* block-level alerts read as an empty-state / message callout */
div.alerte,
p.alerte {
  padding: 0.75rem 1rem;
  background: var(--color-danger-bg);
  border-inline-start: 3px solid var(--color-danger);
  border-radius: var(--radius);
}

.categmouseout,
.categmouseover {
  position: absolute;
  z-index: 2000;
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}

.categmouseout {
  visibility: hidden;
}

.categmouseover {
  visibility: visible;
  margin-top: 2px;
}

#visionneuseBackground {
  background-color: var(--color-primary-deep);
}

/* bulletins / bannettes */
#bannette {
  padding: 0.4rem;
}

.bannette-container {
  margin-bottom: 1.25rem;
}

.bannette-titre h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
}

.bannette-titre h1 a {
  margin-inline-end: 0.4rem;
}

/* legacy float helpers (kept for markup compatibility) */
.right, .right-50, .right-15, .right-85 {
  float: right;
  float: inline-end;
}

.right-50 { width: 50%; }
.right-15 { width: 15%; }
.right-85 { width: 85%; }

.right-clear-right, .right-50-clear-right {
  float: right;
  float: inline-end;
  clear: right;
  clear: inline-end;
}

.left-clear-left, .left-50-clear-left {
  float: left;
  float: inline-start;
  clear: left;
  clear: inline-start;
}

.left, .left-50, .left-15 {
  float: left;
  float: inline-start;
}

.left-50 { width: 50%; }
.left-15 { width: 15%; }
.left-85 { width: 85%; }

.spacer {
  clear: both;
  visibility: hidden;
  display: none;
  margin-block: -10px;
}

/* readable line length for prose pages */
#reglement p,
#actualites p,
#infopage p {
  max-width: 75ch;
}


/* ---------------------------------------------------------------------------
   16. RESPONSIVE  (1440 / 1200 / 1024 / 768 / 600 / 480 / 375)
   --------------------------------------------------------------------------- */

/* ---- wide desktop ---- */
@media (min-width: 1440px) {
  :root {
    --container-max: 1440px;
    --side-w: 300px;
    --gap: 2rem;
  }

  body {
    font-size: 1rem;
  }
}

/* ---- desktop ---- */
@media (max-width: 1200px) {
  :root {
    --side-w: 260px;
  }
}

/* ---- tablet landscape ---- */
@media (max-width: 1024px) {
  :root {
    --side-w: 240px;
    --gap: 1.25rem;
  }

  #search {
    padding: 1.1rem 1.15rem 1.25rem;
  }

  #perio_a2z #perio_a2z_search {
    width: 100%;
  }

  #search #zsimplesChild table tr {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- touch: bigger targets everywhere ---- */
@media (max-width: 768px), (pointer: coarse) {
  :root {
    --control-h: 2.75rem;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
  }

  .navbar a,
  .navbar b,
  .navbar strong {
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding-block: 0.45rem;
  }

  ul.onglets_isbd_public a,
  ul.onglets_isbd_public li a {
    padding-block: 0.5rem;
  }
}

/* ---- tablet portrait and phones: sidebar collapses under the content ---- */
@media (max-width: 768px) {
  :root {
    --gap: 1rem;
    --container-w: min(100% - 1.5rem, var(--container-max));
    --search-h: 3.25rem;
  }

  body {
    font-size: 1rem;
  }

  #container {
    gap: 1rem;
  }

  /* hero: fluid, never oversized */
  #intro #intro_bibli .p1 {
    height: clamp(120px, 34vw, 200px);
    max-width: 100%;
  }

  #intro #intro_bibli .p1 img {
    max-width: 100%;
  }

  #main_header h3 {
    margin: 0.4rem 0 0.75rem;
  }

  /* menu: static wrapping chips, 44px targets; dropdowns stay real dropdowns */
  #intro #intro_bibli .p2 {
    position: static;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.25rem;
    overflow: visible;
  }

  #intro_bibli .p2 ul li a,
  #intro_bibli .p2 #menuDeroulant li a,
  .cms_menu_deep0 li a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
  }

  #intro_bibli .p2 #menuDeroulant .sousMenu,
  .cms_menu_deep0 .cms_menu_deep1 {
    width: min(16rem, calc(100vw - 3rem));
  }

  /* the last entries open towards the inside of the screen */
  #intro_bibli .p2 > ul > li:nth-last-child(-n+2) > ul,
  #intro_bibli .p2 #menuDeroulant > li:nth-last-child(-n+2) > .sousMenu,
  .cms_menu_deep0 > li:nth-last-child(-n+2) > .cms_menu_deep1 {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  /* level 2 opens inline under its parent instead of flying out */
  #intro_bibli .p2 #menuDeroulant .sousMenu2,
  .cms_menu_deep0 .cms_menu_deep1 .cms_menu_deep2 {
    position: static;
    width: auto;
    max-height: 0;
    margin: 0;
    margin-inline-start: 0.75rem;
    padding: 0;
    overflow: hidden;
    border: none;
    box-shadow: none;
    transform: none;
  }

  #intro_bibli .p2 #menuDeroulant .sousMenu li:hover > .sousMenu2,
  #intro_bibli .p2 #menuDeroulant .sousMenu li:focus-within > .sousMenu2,
  .cms_menu_deep0 .cms_menu_deep1 li:hover > .cms_menu_deep2,
  .cms_menu_deep0 .cms_menu_deep1 li:focus-within > .cms_menu_deep2 {
    max-height: 30rem;
    padding: 0.25rem 0;
  }

  #intro_bibli .p2 #menuDeroulant .sousMenu2::before,
  .cms_menu_deep0 .cms_menu_deep1 .cms_menu_deep2::before {
    display: none;
  }

  /* content first, then the sidebar as a grid of panels */
  #main {
    order: 4;
    flex: 0 0 100%;
  }

  #bandeau {
    order: 5;
    flex: 0 0 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    align-items: start;
  }

  #bandeau > div {
    margin: 0;
  }

  #bandeau > #accueil {
    grid-column: 1 / -1;
  }

  /* search: full-width stack */
  #search {
    padding: 0.9rem;
    border-radius: var(--radius-lg);
  }

  #search form select {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0.55rem;
    font-size: 16px; /* prevents iOS zoom */
  }

  #search form #simple_search_zone,
  #external_simple_search_zone {
    gap: 0.55rem;
  }

  #search form input.text_query,
  #external_simple_search_zone input.text_query {
    flex: 1 1 100%;
    width: 100%;
    font-size: 16px;
  }

  #search form #simple_search_zone input.boutonrechercher,
  #search form #simple_search_zone input.bouton,
  #search form #simple_search_zone button.bouton,
  #external_simple_search_zone input.boutonrechercher,
  #external_simple_search_zone input.bouton,
  #external_simple_search_zone button.bouton {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .ext_search_txt {
    width: 100%;
  }

  #search a.bouton,
  #search a.button,
  #search a.btn {
    width: auto;
    max-width: 100%;
  }

  #search #zsimplesChild {
    padding: 0.75rem;
  }

  #search #zsimplesChild table tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
  }

  #search #zsimplesChild table td {
    min-height: 2.75rem;
  }

  #search :is(a, button, label, input[type="button"], input[type="submit"]):has(+ #zsimplesChild) {
    min-height: 2.75rem;
  }

  #search {
    overflow: hidden;
  }

  :is(input:not([type]), input[type="text"], input[type="search"], input[type="password"],
    input[type="email"], input[type="tel"], input[type="url"], input[type="number"],
    select, textarea) {
    font-size: 16px;
  }

  input.bouton,
  input.boutonrechercher,
  input[type="submit"],
  input[type="button"],
  button.bouton {
    margin-inline-start: 0;
  }

  /* login stays full width inside its panel */
  #connexion #login_form input.login,
  #connexion #login_form input.password,
  #connexion #login_form input.bouton,
  #connexion #login_form select,
  #connexion #login_form button {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    margin-inline-start: 0;
  }

  /* notices: cover above details, label above value */
  .notice-child {
    margin-inline-start: 0;
    padding: 0.95rem;
  }

  .notice-child > table,
  .notice-child > table > tbody,
  .notice-child > table > tbody > tr {
    display: block;
    width: 100%;
  }

  .notice-child > table > tbody > tr > td {
    display: block;
    width: auto !important; /* PMB sets inline widths on these cells */
    padding-inline: 0;
  }

  .notice-child table:not(.exemplaires) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .notice-child table:not(.exemplaires) td.bg-grey,
  .notice-child table td.bg-grey {
    display: block;
    width: 100%;
    min-width: 0;
    padding-block: 0.6rem 0;
    border-bottom: none;
  }

  .notice-child td.bg-grey + td {
    display: block;
    padding-block: 0.15rem 0.6rem;
  }

  /* data tables scroll instead of overflowing the page */
  table.exemplaires,
  .tab_sug,
  :is(#empr-all, #empr-late, #empr-old, #empr-resa, #empr-dsi, #empr-sugg, #empr-list, #empr-dema) table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bg-grey {
    width: auto;
  }

  .right-50, .right-15, .right-85,
  .left-50, .left-15, .left-85 {
    float: none;
    width: 100%;
  }

  #actualites .bloc_actu table td.image {
    display: none;
  }

  #perio_a2z,
  #categories-container,
  #last_entries {
    padding: 1rem;
  }

  #facette {
    max-height: none;
  }

  #footer,
  #all_footer {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

/* ---- pagination on phones: a deliberate stacked component ----
   [ arrows + page numbers, wrapping ]   /   [ (x - y / total) ]   /   [ Par page : ... ]
   Inline float styles written by PMB need !important to be neutralised. */
@media (max-width: 640px) {
  .navbar {
    margin-top: 1rem;
    padding-top: 1rem;
    padding-inline: 0;
    font-size: 0.9rem;
  }

  .navbar a,
  .navbar b,
  .navbar strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin: 0.15rem;
    padding: 0.25rem 0.5rem;
  }

  .navbar a img {
    max-width: none;   /* arrow icons keep their size */
  }

  /* result range on its own centred line */
  .navbar :is(i, em):not([class]) {
    display: block;
    margin: 0.6rem 0 0;
    white-space: normal;
    text-align: center;
  }

  /* per-page group: its own full-width row below, wrapping, centred */
  .navbar :is(.right, .right-clear-right, .right-50, [class*="per_page"], [id*="per_page"],
      [class*="perpage"], [id*="perpage"], [style*="float"]) {
    float: none !important;
    clear: both !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.15rem 0.25rem;
    width: 100%;
    margin: 0.85rem 0 0 !important;
    padding: 0.75rem 0 0;
    border-top: 1px dashed var(--color-border);
    text-align: center;
  }
}

@media (max-width: 375px) {
  .navbar a,
  .navbar b,
  .navbar strong {
    min-width: 2.5rem;
    margin: 0.1rem;
  }
}

/* ---- small phones ---- */
@media (max-width: 600px) {
  /* keep the hero readable: two images at most */
  #intro #intro_bibli .p1 > *:nth-child(n+3) {
    display: none;
  }

  #intro #intro_bibli .p1 {
    height: clamp(110px, 32vw, 170px);
    border-radius: var(--radius);
  }
}

@media (max-width: 480px) {
  #bandeau {
    grid-template-columns: 1fr;
  }

  #search {
    padding: 0.8rem;
  }

  #main #search ul.search_tabs,
  #search_onglet ul.search_tabs,
  #categories ul.search_tabs,
  #onglets_list ul.list_tabs,
  #empr_onglet ul.empr_tabs,
  ul.empr_subtabs {
    width: 100%;
    border-radius: var(--radius-lg);
  }

  #main #search ul.search_tabs li a,
  #search_onglet ul.search_tabs li a,
  #categories ul.search_tabs li a,
  #onglets_list ul.list_tabs li a,
  #empr_onglet ul.empr_tabs li a,
  ul.empr_subtabs li a {
    padding-inline: 0.8rem;
  }

  #search #zsimplesChild table tr {
    grid-template-columns: 1fr;
  }

  #search :is(a, button, label, input[type="button"], input[type="submit"]):has(+ #zsimplesChild) {
    width: fit-content;
    max-width: 100%;
  }

  .navbar {
    font-size: 0.8125rem;
  }
}

@media (max-width: 375px) {
  :root {
    --container-w: min(100% - 1rem, var(--container-max));
  }

  #bandeau > div {
    padding: 0.9rem;
  }

  .notice-parent {
    padding-inline: 0.7rem;
  }
}


/* ---------------------------------------------------------------------------
   17. RTL / ARABIC
   Everything above uses logical properties; this block only fixes what CSS
   cannot express logically (rotations, transform origins, bitmap positions).
   --------------------------------------------------------------------------- */

[dir="rtl"] #intro_bibli .p2 #menuDeroulant .sousMenu li:has(> ul) > a::after,
[dir="rtl"] .cms_menu_deep0 .cms_menu_deep1 li:has(> ul) > a::after,
:root:lang(ar) #intro_bibli .p2 #menuDeroulant .sousMenu li:has(> ul) > a::after,
:root:lang(ar) .cms_menu_deep0 .cms_menu_deep1 li:has(> ul) > a::after {
  transform: rotate(135deg);
}

[dir="rtl"] #intro_bibli .p2 #menuDeroulant .sousMenu2,
[dir="rtl"] .cms_menu_deep0 .cms_menu_deep1 .cms_menu_deep2,
:root:lang(ar) #intro_bibli .p2 #menuDeroulant .sousMenu2,
:root:lang(ar) .cms_menu_deep0 .cms_menu_deep1 .cms_menu_deep2 {
  transform: translateX(-4px) scale(0.98);
  transform-origin: right top;
}

[dir="rtl"] #intro_bibli .p2 #menuDeroulant .sousMenu li:hover > .sousMenu2,
[dir="rtl"] #intro_bibli .p2 #menuDeroulant .sousMenu li:focus-within > .sousMenu2,
[dir="rtl"] .cms_menu_deep0 .cms_menu_deep1 li:hover > .cms_menu_deep2,
[dir="rtl"] .cms_menu_deep0 .cms_menu_deep1 li:focus-within > .cms_menu_deep2,
:root:lang(ar) #intro_bibli .p2 #menuDeroulant .sousMenu li:hover > .sousMenu2,
:root:lang(ar) #intro_bibli .p2 #menuDeroulant .sousMenu li:focus-within > .sousMenu2,
:root:lang(ar) .cms_menu_deep0 .cms_menu_deep1 li:hover > .cms_menu_deep2,
:root:lang(ar) .cms_menu_deep0 .cms_menu_deep1 li:focus-within > .cms_menu_deep2 {
  transform: none;
}

/* Arabic: no tracking, a touch more air in dense metadata */
[dir="rtl"] .notice-child td.bg-grey + td,
:root:lang(ar) .notice-child td.bg-grey + td {
  line-height: 1.8;
}

[dir="rtl"] th, [dir="rtl"] td.bg-grey,
:root:lang(ar) th, :root:lang(ar) td.bg-grey {
  letter-spacing: 0;
}


/* ---------------------------------------------------------------------------
   18. ACCESSIBILITY + MOTION PREFERENCES
   --------------------------------------------------------------------------- */

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

/* stronger separation for people who ask for more contrast */
@media (prefers-contrast: more) {
  :root {
    --color-border: #6B7A8C;
    --color-border-strong: #3B4A5C;
    --color-text-muted: #2A3A4D;
    --color-text-subtle: #33455A;
    --shadow-1: none;
    --shadow-2: none;
  }

  a {
    text-decoration-thickness: 2px;
  }
}

@media (forced-colors: active) {
  input.bouton,
  input.boutonrechercher,
  input[type="submit"],
  button.bouton {
    border: 1px solid ButtonText;
  }

  #intro #intro_bibli .p2,
  .notice-child,
  .notice-parent {
    border: 1px solid CanvasText;
  }

  table.exemplaires td.expl_situation strong,
  table.exemplaires td.expl_situation b {
    border: 1px solid CanvasText;
  }
}


/* ---------------------------------------------------------------------------
   19. PRINT
   print.css keeps hiding menu / sidebar / footer; this block only resets the
   flex layout so long result lists paginate normally.
   --------------------------------------------------------------------------- */

@media print {
  body#pmbopac {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
  }

  body#pmbopac #container {
    display: block;
    width: 100%;
    max-width: none;
  }

  body#pmbopac #container #main {
    position: static;
    display: block;
    width: 100%;
    margin: 0;
  }

  #intro_bibli .p2,
  #bandeau,
  #footer,
  #all_footer {
    display: none !important;
  }

  .notice-parent,
  .notice-child,
  #search {
    box-shadow: none;
    transform: none;
  }

  .notice-child {
    break-inside: avoid;
  }

  a {
    color: #000000;
    text-decoration: none;
  }
}


/* ===========================================================================
   ADDENDUM  2027 - RESPONSIVE REFINEMENTS (mobile + tablet)
   These rules appear AFTER all existing @media blocks and therefore WIN the
   cascade. Desktop rules (no media query) are not touched.

   Structure:
     A.  Tablet   : max-width 992px
     B.  Mobile   : max-width 768px
         B-1  Login relocation   (display:contents on #bandeau)
         B-2  Navigation chips   (horizontal scrollable row)
         B-3  Search bar         (full-width vertical stack)
         B-4  Touch targets      (44px minimums, 12-16px safety gaps)
         B-5  Password eye icon  (right-padding safe zone)
         B-6  Data tables        (horizontal scroll wrappers)
         B-7  Search tabs        (flex-wrap, 44px tap)
     C.  Small phones : max-width 480px
   =========================================================================== */


/* ---------------------------------------------------------------------------
   A.  TABLET  (992px)
   Side-by-side layout still exists; hero, nav and search are tightened.
   --------------------------------------------------------------------------- */

@media (max-width: 992px) {
  :root {
    --side-w: 240px;
    --gap: 1.4rem;
  }

  /* compact hero on iPad portrait */
  #intro #intro_bibli .p1 {
    height: clamp(130px, 24vw, 220px);
  }

  /* sticky bar: slightly less vertical air */
  #intro #intro_bibli .p2 {
    padding: 0.3rem 0.4rem;
  }

  #intro_bibli .p2 ul li a,
  #intro_bibli .p2 #menuDeroulant li a,
  .cms_menu_deep0 li a {
    padding: 0.5rem 0.85rem;
    font-size: 0.9rem;
  }

  /* search: allow wrapping when the select + query + button no longer fit */
  #search form #simple_search_zone,
  #external_simple_search_zone {
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  #search form input.text_query {
    flex: 1 1 180px;
  }

  /* bandeau sidebar cards: a touch less padding */
  #bandeau > div {
    padding: 1rem;
  }

  /* slightly narrower sidebar text */
  #bandeau h3 {
    font-size: 0.95rem;
  }
}


/* ---------------------------------------------------------------------------
   B.  MOBILE  (768px) - comprehensive override block
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* -------------------------------------------------------------------------
     B-1.  LOGIN RELOCATION
     Strategy: apply display:contents to #bandeau, which dissolves it as a flex
     item and promotes its children directly into #container's flex context.
     Each child then gets its own flex: + order: so #connexion can be pinned
     to order:3  (immediately after the hero at order:2, before #main at order:4).
     CSS selectors that target "#bandeau > div" still work because display:contents
     does not remove the element from the DOM -- it only removes its box.
     ------------------------------------------------------------------------- */

  #bandeau {
    /* dissolve: children become direct flex items of #container */
    display: contents;
  }

  /* --- default card for every bandeau child: full-width, below #main --- */
  #bandeau > div,
  #bandeau > section,
  #bandeau > aside {
    flex: 0 0 100%;
    order: 7;             /* below #main (order 4) and #accueil (order 6) */
    min-width: 0;
    margin: 0 0 0.85rem;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    grid-column: auto;    /* reset any grid-column left from the old grid block */
  }

  /* accueil (logo + language selector): transparent, sits just below #main */
  #bandeau > #accueil {
    order: 6;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.5rem 0;
    text-align: center;
    grid-column: auto;
  }

  /* *** THE RELOCATION: connexion card immediately below the hero *** */
  #bandeau > #connexion {
    order: 3;                         /* hero=2 is above; #main=4 is below    */
    max-width: min(26rem, 100%);      /* centered card, full-bleed on narrow   */
    width: 100%;
    margin-inline: auto;
    margin-bottom: 1rem;
    border-top: 3px solid var(--color-accent);
    box-shadow: var(--shadow-lift);
    grid-column: auto;
  }

  /* -------------------------------------------------------------------------
     B-2.  NAVIGATION: horizontally scrollable chip row
     Prevents the "dark blob" where nav items stack and overlap.
     All top-level items are 44px-tall chips; level-1 dropdowns remain real
     popups; level-2 collapses inline under its parent on touch.
     ------------------------------------------------------------------------- */

  /* bar: static (not sticky) on phone so it does not eat vertical space */
  #intro #intro_bibli .p2 {
    position: static;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.2rem 0.35rem;
    overflow: visible;    /* dropdowns may pop out */
  }

  /* scrollable row */
  #intro_bibli .p2 > ul,
  #intro_bibli .p2 #menuDeroulant,
  .cms_menu_deep0 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    padding-bottom: 3px;                  /* space for focus ring */
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;                /* Firefox */
  }

  #intro_bibli .p2 > ul::-webkit-scrollbar,
  #intro_bibli .p2 #menuDeroulant::-webkit-scrollbar,
  .cms_menu_deep0::-webkit-scrollbar {
    display: none;
  }

  /* each top-level list item: non-shrinking inline chip */
  #intro_bibli .p2 ul li,
  #intro_bibli .p2 #menuDeroulant li,
  .cms_menu_deep0 li {
    flex-shrink: 0;
    display: block;       /* reset display:contents if set by an earlier rule */
    position: relative;
  }

  /* 44px touch target */
  #intro_bibli .p2 ul li a,
  #intro_bibli .p2 #menuDeroulant li a,
  .cms_menu_deep0 li a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;    /* 44px */
    padding: 0.5rem 0.9rem;
    white-space: nowrap;
  }

  /* level-1 dropdown: real popup, width-capped to screen */
  #intro_bibli .p2 #menuDeroulant .sousMenu,
  #intro_bibli .p2 #menuDeroulant .sousMenu2,
  .cms_menu_deep0 .cms_menu_deep1,
  .cms_menu_deep0 .cms_menu_deep2 {
    position: absolute;
    width: min(15rem, calc(100vw - 1.5rem));
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* last items: open toward the inside of the screen (avoid right-clip) */
  #intro_bibli .p2 #menuDeroulant > li:nth-last-child(-n+2) > .sousMenu,
  .cms_menu_deep0 > li:nth-last-child(-n+2) > .cms_menu_deep1 {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  /* level-2: collapse inline rather than fly sideways */
  #intro_bibli .p2 #menuDeroulant .sousMenu2,
  .cms_menu_deep0 .cms_menu_deep1 .cms_menu_deep2 {
    position: static;
    width: auto;
    max-height: 0;
    margin: 0;
    margin-inline-start: 0.75rem;
    padding: 0;
    overflow: hidden;
    border: none;
    box-shadow: none;
    transform: none;
    transition: max-height 0.2s ease;
  }

  #intro_bibli .p2 #menuDeroulant .sousMenu li:hover > .sousMenu2,
  #intro_bibli .p2 #menuDeroulant .sousMenu li:focus-within > .sousMenu2,
  .cms_menu_deep0 .cms_menu_deep1 li:hover > .cms_menu_deep2,
  .cms_menu_deep0 .cms_menu_deep1 li:focus-within > .cms_menu_deep2 {
    max-height: 30rem;
    padding: 0.25rem 0;
  }

  #intro_bibli .p2 #menuDeroulant .sousMenu2::before,
  .cms_menu_deep0 .cms_menu_deep1 .cms_menu_deep2::before {
    display: none;
  }

  /* -------------------------------------------------------------------------
     B-3.  SEARCH BAR: vertical stack, full-width controls
     flex-direction:column so query / select / button never wrap awkwardly.
     ------------------------------------------------------------------------- */

  #search form #simple_search_zone,
  #external_simple_search_zone {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  #search form select,
  #search form input.text_query,
  #external_simple_search_zone input.text_query {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
    margin-inline-start: 0;
    font-size: 16px;     /* prevents iOS auto-zoom on focus */
  }

  #search form #simple_search_zone input.boutonrechercher,
  #search form #simple_search_zone input.bouton,
  #search form #simple_search_zone button.bouton,
  #external_simple_search_zone input.boutonrechercher,
  #external_simple_search_zone input.bouton {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
    margin-inline-start: 0;
    min-height: 2.75rem;
  }

  /* advanced search checkbox grid: 2 columns on phone */
  #search #zsimplesChild table {
    width: 100%;
    display: block;
  }

  #search #zsimplesChild table tbody {
    display: block;
  }

  #search #zsimplesChild table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 0.6rem;
    margin-bottom: 0.3rem;
  }

  #search #zsimplesChild table td,
  #search #zsimplesChild table th {
    display: block;
    min-height: 2.75rem;
    padding: 0.25rem 0.4rem;
  }

  /* -------------------------------------------------------------------------
     B-4.  TOUCH TARGETS: 44px x 44px minimums + 12-16px safety gaps
     ------------------------------------------------------------------------- */

  /* Force --control-h to 44px on all touch/small screens regardless of pointer type */
  :root {
    --control-h: 2.75rem;     /* 44px: overrides the 2.5rem desktop default */
  }

  input.bouton,
  input.boutonrechercher,
  input[type="submit"],
  input[type="button"],
  button.bouton,
  button:not([role="presentation"]):not([aria-hidden]) {
    min-height: 2.75rem !important;   /* 44px: beats any earlier height rule */
    padding-block: 0.55rem;
  }

  select {
    min-height: 2.75rem;
    padding-block: 0.5rem;
  }

  /* 16px gap above the submit button inside the login card */
  #connexion #login_form input.bouton {
    margin-top: 0.85rem;
  }

  /* "Mot de passe oublie?" link: large tap zone, 12px below the button */
  #connexion a,
  #connexion #login_form a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-top: 0.5rem;
    padding-block: 0.25rem;
  }

  /* Other bandeau buttons: 16px from adjacent inputs */
  #bandeau input.bouton + a,
  #bandeau a + input.bouton {
    margin-top: 0.75rem;
    display: block;
  }

  /* -------------------------------------------------------------------------
     B-5.  PASSWORD EYE ICON: right-padding safe zone, 44px icon touch target
     Prevents typed text from running under the eye icon on small screens.
     ------------------------------------------------------------------------- */

  #connexion #login_form input.password {
    padding-inline-end: 3.25rem;    /* 52px: room for the 44px icon + 4px gap */
  }

  /* the input wrapper must be positioned so the icon can be absolute inside */
  #connexion #login_form :has(> input.password) {
    position: relative;
  }

  /* any element used as the eye toggle -- PMB themes vary */
  #connexion #login_form input.password ~ :is(
    i, svg, img,
    button, [role="button"], input[type="button"],
    .toggle, .eye,
    [class*="eye"],    [id*="eye"],
    [class*="toggle"], [id*="toggle"],
    [class*="reveal"], [id*="reveal"],
    [class*="show"],   [id*="show"],
    [class*="pass"],   [id*="pass"]
  ) {
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    min-width: 2.75rem;       /* 44px tap target */
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    background: none;
    border: none;
  }

  /* -------------------------------------------------------------------------
     B-6.  DATA TABLES: horizontal scroll wrappers
     Prevents exemplaires / reader tables from overflowing the page width.
     ------------------------------------------------------------------------- */

  table.exemplaires,
  .notice-child table.exemplaires,
  .tab_sug {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
  }

  /* The thead / tbody inside the scrollable block keeps its table semantics */
  table.exemplaires > thead,
  table.exemplaires > tbody,
  table.exemplaires > tfoot {
    min-width: max-content;
  }

  /* Reader account tables */
  :is(#empr-all, #empr-late, #empr-old, #empr-resa,
      #empr-dsi, #empr-sugg, #empr-list, #empr-dema) > table,
  :is(#empr-all, #empr-late, #empr-old, #empr-resa,
      #empr-dsi, #empr-sugg, #empr-list, #empr-dema) table:not(table table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* -------------------------------------------------------------------------
     B-7.  SEARCH TABS: flex-wrap + 44px tap, no awkward broken lines
     ------------------------------------------------------------------------- */

  #main #search ul.search_tabs,
  #search_onglet ul.search_tabs,
  #categories ul.search_tabs,
  #onglets_list ul.list_tabs,
  #empr_onglet ul.empr_tabs,
  ul.empr_subtabs,
  .navigation_opac {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
  }

  #main #search ul.search_tabs li a,
  #search_onglet ul.search_tabs li a,
  #categories ul.search_tabs li a,
  #onglets_list ul.list_tabs li a,
  #empr_onglet ul.empr_tabs li a,
  ul.empr_subtabs li a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* navigation_opac links (used in some PMB templates) */
  .navigation_opac a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-block: 0.4rem;
  }

} /* end @media (max-width: 768px) */


/* ---------------------------------------------------------------------------
   C.  SMALL PHONES  (480px)
   --------------------------------------------------------------------------- */

@media (max-width: 480px) {
  /* advanced search: single column */
  #search #zsimplesChild table tr {
    grid-template-columns: 1fr;
  }

  /* connexion: full bleed at very small sizes */
  #bandeau > #connexion {
    max-width: 100%;
    border-radius: var(--radius-lg);
  }

  /* tab pill labels: slightly tighter */
  #main #search ul.search_tabs li a,
  #search_onglet ul.search_tabs li a,
  #categories ul.search_tabs li a {
    padding-inline: 0.65rem;
    font-size: 0.85rem;
  }

  /* fewer hero images on very narrow screens */
  #intro #intro_bibli .p1 > *:nth-child(n+3) {
    display: none;
  }

  #intro #intro_bibli .p1 {
    height: clamp(100px, 30vw, 160px);
  }
}


/* ===========================================================================
   20. GENBIB 2027 APP LAYER
   Appended LAST so it wins the cascade. Everything here is presentation only:
   no PMB id / class / DOM order is changed. Optional progressive enhancements
   (drawer, sliding pill, password eye) need genbib-2027.js; without it the
   page falls back to the rules above (scrollable chip row, static pills).
   ASCII-only on purpose.
     20.1 Glass floating navigation      20.5 Login widget
     20.2 Hero card                      20.6 Discovery cards + covers
     20.3 Sliding pill tabs              20.7 Tablet <= 1024
     20.4 Filter chips                   20.8 Mobile drawer <= 768, touch
   =========================================================================== */

:root {
  --glass-bg: rgba(10, 22, 38, 0.72);
  --glass-bg-solid: rgba(10, 22, 38, 0.97);
  --glass-line: rgba(255, 255, 255, 0.1);
  --glass-blur: 12px;
  --touch: 2.75rem; /* 44px */
}

@keyframes gb-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------------------
   20.1 GLASS FLOATING NAVIGATION
   --------------------------------------------------------------------------- */

#intro #intro_bibli .p2 {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur));
  backdrop-filter: saturate(160%) blur(var(--glass-blur));
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px -16px rgba(10, 22, 38, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #intro #intro_bibli .p2 {
    background: var(--glass-bg-solid);
  }
}

/* micro-interaction: links lift 1px, the accent line grows from the start edge */
#intro_bibli .p2 ul li > a,
.cms_menu_deep0 li > a {
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

@media (hover: hover) {
  #intro_bibli .p2 > ul > li:hover > a,
  #intro_bibli .p2 #menuDeroulant > li:hover > a,
  .cms_menu_deep0 > li:hover > a {
    transform: translateY(-1px);
  }
}


/* ---------------------------------------------------------------------------
   20.2 HERO CARD (immersive: gradient overlay + slow image zoom)
   --------------------------------------------------------------------------- */

#intro #intro_bibli .p1 {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  isolation: isolate;
}

#intro #intro_bibli .p1::after {
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(127, 214, 208, 0.24), rgba(127, 214, 208, 0) 55%),
    linear-gradient(180deg, rgba(10, 22, 38, 0) 35%, rgba(10, 22, 38, 0.7) 100%),
    linear-gradient(90deg, rgba(16, 35, 58, 0.4), rgba(16, 35, 58, 0) 55%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

#intro #intro_bibli .p1 img {
  transition: transform 0.9s var(--ease);
  will-change: transform;
}

@media (hover: hover) {
  #intro #intro_bibli .p1:hover img {
    transform: scale(1.03);
  }
}

/* any text an admin puts in the banner stays crisp on the overlay */
#intro #intro_bibli .p1 :is(h1, h2, h3, p, span):not(:empty) {
  color: #FFFFFF;
  text-shadow: 0 1px 12px rgba(10, 22, 38, 0.55);
}


/* ---------------------------------------------------------------------------
   20.3 SLIDING PILL TABS
   genbib-2027.js adds .gb-slide on each tab list and moves --pill-* to the
   hovered / focused item. The current tab keeps its own dark pill (existing
   rules); this light pill glides underneath the other tabs.
   --------------------------------------------------------------------------- */

:is(#main #search ul.search_tabs, #search_onglet ul.search_tabs, #categories ul.search_tabs,
    #onglets_list ul.list_tabs, #empr_onglet ul.empr_tabs, ul.empr_subtabs).gb-slide {
  position: relative;
  isolation: isolate;
}

:is(#main #search ul.search_tabs, #search_onglet ul.search_tabs, #categories ul.search_tabs,
    #onglets_list ul.list_tabs, #empr_onglet ul.empr_tabs, ul.empr_subtabs).gb-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0; /* physical on purpose: the script measures offsetLeft, correct in RTL too */
  z-index: 0;
  width: var(--pill-w, 0);
  height: var(--pill-h, 0);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  opacity: 0;
  transform: translate(var(--pill-x, 0), var(--pill-y, 0));
  pointer-events: none;
  transition: transform 0.32s var(--ease), width 0.32s var(--ease), height 0.32s var(--ease), opacity 0.18s ease;
}

:is(#main #search ul.search_tabs, #search_onglet ul.search_tabs, #categories ul.search_tabs,
    #onglets_list ul.list_tabs, #empr_onglet ul.empr_tabs, ul.empr_subtabs).gb-slide.gb-hover::before {
  opacity: 1;
}

:is(#main #search ul.search_tabs, #search_onglet ul.search_tabs, #categories ul.search_tabs,
    #onglets_list ul.list_tabs, #empr_onglet ul.empr_tabs, ul.empr_subtabs).gb-slide > li {
  position: relative;
  z-index: 1;
}

/* the moving pill replaces the per-item hover background */
:is(#main #search ul.search_tabs, #search_onglet ul.search_tabs, #categories ul.search_tabs,
    #onglets_list ul.list_tabs, #empr_onglet ul.empr_tabs, ul.empr_subtabs).gb-slide > li:not(#current):not(.current):hover {
  background: transparent;
}

/* the active tab eases in on page load */
:is(#main #search ul.search_tabs li#current, #search_onglet ul.search_tabs li.current,
    #categories ul.search_tabs li#current, #empr_onglet ul.empr_tabs li#current) {
  animation: gb-pill-in 0.36s var(--ease) both;
}

@keyframes gb-pill-in {
  from { opacity: 0.4; transform: scale(0.9); }
  to   { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------------------
   20.4 SEARCH HUB + FILTER CHIPS
   --------------------------------------------------------------------------- */

#search {
  border-radius: calc(var(--radius-lg) + 6px);
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

/* 64px field on roomy screens, glowing focus ring, button lifts on hover */
@media (min-width: 769px) {
  #search form input.text_query,
  #external_simple_search_zone input.text_query,
  #search form #simple_search_zone input.boutonrechercher,
  #search form #simple_search_zone input.bouton,
  #search form #simple_search_zone button.bouton {
    min-height: 4rem;
  }
}

#search form input.text_query,
#external_simple_search_zone input.text_query {
  border-radius: 1.1rem;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

#search form input.text_query:focus,
#external_simple_search_zone input.text_query:focus {
  box-shadow: 0 0 0 4px rgba(11, 107, 106, 0.2), 0 12px 28px -14px rgba(11, 107, 106, 0.55);
}

#search form #simple_search_zone input.boutonrechercher,
#external_simple_search_zone input.boutonrechercher {
  border-radius: 1.1rem;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background-color var(--t-fast) ease;
}

@media (hover: hover) {
  #search form #simple_search_zone input.boutonrechercher:hover,
  #external_simple_search_zone input.boutonrechercher:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -12px rgba(11, 107, 106, 0.7);
  }
}

#search form #simple_search_zone input.boutonrechercher:active {
  transform: translateY(0) scale(0.98);
}

/* fields as wrapping pill chips (was a 4-column grid) at every width */
#search #zsimplesChild table tr {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#search #zsimplesChild table td {
  flex: 0 1 auto;
  min-height: var(--control-h);
  padding: 0.35rem 0.9rem;
  border-color: var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

@media (hover: hover) {
  #search #zsimplesChild table td:hover {
    border-color: rgba(11, 107, 106, 0.45);
    background: var(--color-accent-soft);
    transform: translateY(-1px);
  }
}

#search #zsimplesChild table td:active {
  transform: scale(0.97);
}

#search #zsimplesChild table td:has(input:checked) {
  font-weight: 600;
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

#search #zsimplesChild table td:has(input:focus-visible) {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

#search #zsimplesChild input[type="checkbox"] {
  accent-color: var(--color-accent);
}

#search #zsimplesChild:not([style*="display: none"]):not([style*="display:none"]) {
  animation: gb-rise 0.24s var(--ease) both;
}


/* ---------------------------------------------------------------------------
   20.5 LOGIN WIDGET (#connexion)
   Focus "float" (lift + glow) on the fields, tidy labels, password eye.
   --------------------------------------------------------------------------- */

#bandeau > #connexion {
  border-radius: calc(var(--radius-lg) + 2px);
  background: linear-gradient(180deg, var(--color-surface) 0%, #FBFCFB 100%);
}

#connexion label {
  display: block;
  margin: 0 0 0.3rem;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

#connexion input[type="text"],
#connexion input[type="password"],
#connexion input.login,
#connexion input.password {
  width: 100%;
  min-height: var(--control-h);
  margin-bottom: 0.7rem;
  border-radius: var(--radius);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-fast) ease;
}

#connexion input[type="text"]:focus,
#connexion input[type="password"]:focus,
#connexion input.login:focus,
#connexion input.password:focus {
  transform: translateY(-1px);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(11, 107, 106, 0.16), 0 10px 22px -14px rgba(11, 107, 106, 0.55);
}

#connexion input.bouton,
#connexion input[type="submit"] {
  width: 100%;
}

/* password visibility toggle (inserted by genbib-2027.js) */
.gb-pw {
  position: relative;
  display: block;
}

.gb-pw > input {
  padding-inline-end: 3rem;
}

.gb-pw-toggle {
  position: absolute;
  inset-inline-end: 0.2rem;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--control-h);
  padding: 0;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--t-fast) ease, background-color var(--t-fast) ease;
}

.gb-pw-toggle::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--icon-eye) center / contain no-repeat;
  mask: var(--icon-eye) center / contain no-repeat;
}

.gb-pw-toggle[aria-pressed="true"] {
  color: var(--color-accent);
}

.gb-pw-toggle:hover {
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
}

:root {
  --icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* neutralise the older mobile eye rules for our own button (it is already placed) */
#connexion #login_form .gb-pw > input.password ~ .gb-pw-toggle {
  inset-inline-end: 0.2rem;
  top: 0;
  bottom: 0;             /* stretch to the input: the eye is centred on it */
  height: auto;
  transform: none;
  translate: none;       /* the anchor rule's translate(-50%) used to lift the eye off the input */
  min-width: var(--touch);
  min-height: 0;
}


/* ---------------------------------------------------------------------------
   20.6 DISCOVERY CARDS + COVERS
   .notice-parent / .notice-child stay in place; they now read as cards.
   --------------------------------------------------------------------------- */

.notice-parent {
  margin-bottom: 0.65rem;
  padding: calc(var(--row-py) + 0.3rem) calc(var(--row-px) + 0.15rem);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}

@media (hover: hover) {
  .notice-parent:hover {
    transform: translateY(-2px);
    border-color: rgba(11, 107, 106, 0.35);
    box-shadow: var(--shadow-2);
  }
}

.notice-child {
  border-radius: calc(var(--radius-lg) + 2px);
  box-shadow: var(--shadow-2);
  animation: gb-rise 0.28s var(--ease) both; /* runs each time PMB un-hides it */
}

.notice-heada {
  line-height: 1.45;
}

/* covers: elevated like physical books */
.vignetteimg {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(16, 35, 58, 0.08);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

@media (hover: hover) {
  a:hover > .vignetteimg,
  .vignetteimg:hover {
    transform: translateY(-3px) rotate(-0.4deg);
    box-shadow: var(--shadow-pop), 0 0 0 1px rgba(16, 35, 58, 0.08);
  }
}

/* sidebar cards get the same quiet elevation */
#bandeau > div {
  box-shadow: var(--shadow-1);
}


/* ---------------------------------------------------------------------------
   20.7 TABLET  (<= 1024px)
   Side-by-side layout survives, everything is a little tighter.
   --------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --side-w: 250px;
    --gap: 1.25rem;
    --container-w: min(100% - 1.5rem, var(--container-max));
  }

  #search {
    padding: 1.1rem 1.15rem 1.2rem;
  }

  #search #zsimplesChild table td {
    padding-inline: 0.75rem;
  }

  .notice-child {
    padding: 1rem 1.1rem 1.1rem;
  }
}

/* iPad / touch laptops: every control reaches 44px regardless of width */
@media (pointer: coarse) {
  :root {
    --control-h: var(--touch);
  }

  input.bouton, input.boutonrechercher, input[type="submit"], input[type="button"],
  button.bouton, select {
    min-height: var(--touch);
  }

  #intro_bibli .p2 ul li a,
  .cms_menu_deep0 li a,
  :is(#main #search ul.search_tabs, #search_onglet ul.search_tabs, #categories ul.search_tabs,
      #onglets_list ul.list_tabs, #empr_onglet ul.empr_tabs, ul.empr_subtabs) li a,
  #navigation_opac a, .navigation_opac a, ul.navigation_opac > li > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
  }

  #intro_bibli .p2 ul li a,
  .cms_menu_deep0 li a {
    display: flex;
  }

  #search #zsimplesChild table td {
    min-height: var(--touch);
  }

  #search #zsimplesChild input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
  }

  .gb-pw-toggle {
    width: var(--touch);
    height: var(--touch);
  }
}


/* ---------------------------------------------------------------------------
   20.8 MOBILE  (<= 768px)  -  slide-down drawer navigation
   All drawer rules are scoped to html.gb-js (set by genbib-2027.js), so without
   the script the earlier chip row keeps working.
   --------------------------------------------------------------------------- */

.gb-nav-toggle {
  display: none;
}

@media (max-width: 768px) {

  /* sticky glass bar on phones too */
  html.gb-js #intro #intro_bibli .p2 {
    position: sticky;
    top: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.3rem;
    overflow: visible;
  }

  html.gb-js .gb-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: var(--touch);
    padding: 0.4rem 0.9rem;
    color: #FFFFFF;
    font: inherit;
    font-weight: 600;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
  }

  html.gb-js .gb-nav-toggle:focus-visible {
    outline: 2px solid var(--color-accent-on-dark);
    outline-offset: -2px;
  }

  /* hamburger drawn with one element, morphs into a cross */
  .gb-burger,
  .gb-burger::before,
  .gb-burger::after {
    display: block;
    width: 1.25rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--t-base) var(--ease), opacity var(--t-fast) ease;
  }

  .gb-burger {
    position: relative;
  }

  .gb-burger::before,
  .gb-burger::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
  }

  .gb-burger::before { top: -6px; }
  .gb-burger::after  { top: 6px; }

  html.gb-nav-open .gb-burger { background: transparent; }
  html.gb-nav-open .gb-burger::before { transform: translateY(6px) rotate(45deg); }
  html.gb-nav-open .gb-burger::after  { transform: translateY(-6px) rotate(-45deg); }

  /* the drawer: a floating panel that fades and slides under the bar */
  html.gb-js #intro_bibli .p2 > ul,
  html.gb-js #intro_bibli .p2 #menuDeroulant,
  html.gb-js .cms_menu_deep0 {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 0.4rem);
    z-index: 5;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px;
    max-height: min(72vh, 32rem);
    padding: 0.4rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--glass-bg-solid);
    border: 1px solid var(--glass-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility 0s linear var(--t-base);
  }

  html.gb-nav-open #intro_bibli .p2 > ul,
  html.gb-nav-open #intro_bibli .p2 #menuDeroulant,
  html.gb-nav-open .cms_menu_deep0 {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }

  html.gb-js #intro_bibli .p2 ul li,
  html.gb-js #intro_bibli .p2 #menuDeroulant li,
  html.gb-js .cms_menu_deep0 li {
    flex-shrink: 1;
    width: 100%;
  }

  html.gb-js #intro_bibli .p2 ul li a,
  html.gb-js #intro_bibli .p2 #menuDeroulant li a,
  html.gb-js .cms_menu_deep0 li a {
    justify-content: space-between;
    width: 100%;
    white-space: normal;
  }

  /* sub menus become an accordion inside the drawer (tap once to open) */
  html.gb-js #intro_bibli .p2 #menuDeroulant .sousMenu,
  html.gb-js #intro_bibli .p2 #menuDeroulant .sousMenu2,
  html.gb-js .cms_menu_deep0 .cms_menu_deep1,
  html.gb-js .cms_menu_deep0 .cms_menu_deep2 {
    position: static;
    width: auto;
    min-width: 0;
    max-height: 0;
    margin: 0;
    margin-inline-start: 0.75rem;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-inline-start: 2px solid var(--glass-line);
    border-radius: 0;
    box-shadow: none;
    visibility: hidden;
    opacity: 0;
    transform: none;
    transition: max-height var(--t-base) var(--ease), opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);
  }

  html.gb-js #intro_bibli .p2 #menuDeroulant li.gb-open > .sousMenu,
  html.gb-js #intro_bibli .p2 #menuDeroulant li.gb-open > .sousMenu2,
  html.gb-js #intro_bibli .p2 #menuDeroulant .sousMenu li.gb-open > .sousMenu2,
  html.gb-js .cms_menu_deep0 li.gb-open > .cms_menu_deep1,
  html.gb-js .cms_menu_deep0 li.gb-open > .cms_menu_deep2 {
    max-height: 30rem;
    padding: 0.2rem 0;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }

  html.gb-js #intro_bibli .p2 #menuDeroulant .sousMenu li a,
  html.gb-js .cms_menu_deep0 .cms_menu_deep1 li a {
    color: #DCE4EC;
  }

  html.gb-js #intro_bibli .p2 #menuDeroulant .sousMenu li:hover > a,
  html.gb-js .cms_menu_deep0 .cms_menu_deep1 li:hover > a {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
  }

  html.gb-js #intro_bibli .p2 li.gb-open > a::after,
  html.gb-js .cms_menu_deep0 li.gb-open > a::after {
    transform: rotate(-135deg) translateY(2px);
  }

  /* results and sidebar: airy single column */
  .notice-parent {
    padding: 0.85rem 0.95rem;
  }

  .notice-child {
    margin-inline-start: 0;
    padding: 1rem;
  }

  .notice-child td.bg-grey,
  .notice-child table:not(.exemplaires) td.bg-grey {
    width: 7.5rem;
    min-width: 6rem;
  }

  #search {
    border-radius: var(--radius-lg);
  }

  /* chips scroll sideways only if a single chip is wider than the screen */
  #search #zsimplesChild table td {
    max-width: 100%;
  }

  /* keep the last card clear of the home indicator on notched phones */
  #container {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}


/* ---------------------------------------------------------------------------
   20.9 RTL  (dir="rtl" and :lang(ar))
   Logical properties above already mirror padding, borders and toggles.
   Only what CSS cannot express logically is fixed here.
   --------------------------------------------------------------------------- */

[dir="rtl"] .gb-pw-toggle,
:root:lang(ar) .gb-pw-toggle {
  letter-spacing: 0;
}

[dir="rtl"] #intro_bibli .p2 li.gb-open > a::after,
:root:lang(ar) #intro_bibli .p2 li.gb-open > a::after {
  transform: rotate(-135deg) translateY(2px);
}

[dir="rtl"] a:hover > .vignetteimg,
:root:lang(ar) a:hover > .vignetteimg {
  transform: translateY(-3px) rotate(0.4deg);
}

[dir="rtl"] #search #zsimplesChild table td,
:root:lang(ar) #search #zsimplesChild table td {
  letter-spacing: 0;
}

/* Arabic text keeps a comfortable line height inside cards and chips */
:root:lang(ar) .notice-heada,
[dir="rtl"] .notice-heada {
  line-height: 1.75;
}


/* ---------------------------------------------------------------------------
   20.10 MOTION SAFETY  (belt and braces for the additions above)
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .notice-parent:hover,
  a:hover > .vignetteimg,
  #search #zsimplesChild table td:hover,
  #intro #intro_bibli .p1:hover img {
    transform: none;
  }
}


/* ---------------------------------------------------------------------------
   20.11 SEARCH ROW: field + Rechercher + Aide, and the "Rechercher dans..." panel
   The buttons are inline siblings of the field (not inside #simple_search_zone
   in this template), so they are aligned and spaced here for every width.
   --------------------------------------------------------------------------- */

/* same height as the field, top-aligned so both share one edge */
#search form input.text_query {
  vertical-align: top;
}

#search form :is(input.boutonrechercher, input.bouton, button.bouton) {
  vertical-align: top;
  min-height: var(--search-h);
  margin: 0;
  margin-inline-start: 0.75rem;
  padding-inline: 1.5rem;
  border-radius: 1.1rem;
}

@media (min-width: 1025px) {
  #search form :is(input.boutonrechercher, input.bouton, button.bouton) {
    min-height: 4rem;
  }
}

/* tablet + phone: buttons drop under the field, with air above and between */
@media (max-width: 1024px) {
  #search form :is(input.boutonrechercher, input.bouton, button.bouton) {
    min-height: 2.75rem;
    margin-block: 1rem 0.25rem;
    margin-inline: 0 0.75rem;
  }
}

/* the "Rechercher dans..." panel: clear space under the field / buttons */
#search #zsimplesChild {
  margin-top: 1.25rem !important; /* PMB toggles inline margins on this block */
}

/* ...but not when it is the first thing in a flex zone that already has a gap */
#search #simple_search_zone #zsimplesChild {
  margin-top: 0.25rem !important;
}


/* ---------------------------------------------------------------------------
   20.12 VERTICAL RHYTHM OF THE SEARCH CARD
   select / query field / buttons / "Rechercher dans..." get one even gap.
   Covers both cases: controls inside #simple_search_zone (flex gap) or
   direct children of the form (margins).
   --------------------------------------------------------------------------- */

#search form #simple_search_zone,
#external_simple_search_zone {
  gap: 1.1rem 0.75rem;
  margin-top: 0.5rem;
}

#search form > select,
#search form select {
  margin-bottom: 1.1rem;
}

#search form #simple_search_zone select {
  margin-bottom: 0;
}

#search form input.text_query,
#external_simple_search_zone input.text_query {
  margin-bottom: 0;
}

/* the collapsible panel, inside or outside the zone */
#search #zsimplesChild,
#search form #zsimplesChild,
#search #simple_search_zone #zsimplesChild {
  margin-top: 1.25rem !important; /* PMB toggles inline margins on this block */
}

#search #simple_search_zone #zsimplesChild {
  margin-top: 0.15rem !important; /* the zone gap already adds 1.1rem above it */
}


/* ---------------------------------------------------------------------------
   20.13 SPACE ABOVE THE "Rechercher dans..." TOGGLE
   The visible pill is the toggle element that sits right BEFORE #zsimplesChild
   (the hidden field panel), so the margin must go on the toggle, not the panel.
   Same specificity as the earlier toggle rule; placed later so it wins.
   --------------------------------------------------------------------------- */

#search :is(div, a, button, label, span, p, h3, h4, input, li, td):has(+ #zsimplesChild) {
  margin-top: 1.5rem;
}

/* inside a flex zone the gap already adds space: avoid doubling it */
#search #simple_search_zone :is(div, a, button, label, span, p, h3, h4, input, li, td):has(+ #zsimplesChild) {
  margin-top: 0.4rem;
}


/* ---------------------------------------------------------------------------
   20.14 TABLET LANDSCAPE (1025px - 1280px): air between field and buttons
   Here the query field fills the row, so Rechercher / Aide wrap right under
   it. The space is added as a bottom margin on the field (buttons are top
   aligned, so nothing shifts if they ever sit beside it).
   --------------------------------------------------------------------------- */

@media (min-width: 1025px) and (max-width: 1280px) {
  #search form input.text_query,
  #external_simple_search_zone input.text_query {
    margin-bottom: 1rem;
  }

  #search form :is(input.boutonrechercher, input.bouton, button.bouton) {
    margin-block: 0;
  }
}


/* ---------------------------------------------------------------------------
   20.15 LAYOUT REPAIR  (login card + "Rechercher dans..." toggle)
   Structural safety nets, placed last so they win at equal specificity.
   --------------------------------------------------------------------------- */

/* --- A. login card: a plain column, nothing can overlap ---
   The password wrapper always keeps the height of its input, so "Ok" can never
   ride up over the field, whatever floats or margins PMB / older rules add. */
#connexion #login_form {
  height: auto;
  overflow: visible;
}

#connexion #login_form form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#connexion #login_form form > * {
  float: none;
  flex: 0 0 auto;
  min-width: 0;
}

#connexion #login_form .gb-pw {
  position: relative;
  display: flow-root;            /* contains the input, its margins and the eye */
  height: auto;
  min-height: var(--control-h);
  margin: 0 0 0.85rem;
}

#connexion #login_form .gb-pw > input.password {
  position: static !important;   /* never taken out of flow */
  float: none;
  height: auto;
  margin: 0;                     /* the spacing lives on the wrapper */
}


/* --- B. "Rechercher dans..." toggle: never clipped, never floated --- */
#search :is(div, a, button, label, span, p, h3, h4, input, li, td):has(+ #zsimplesChild) {
  float: none;
  clear: both;
  align-self: flex-start;
  box-sizing: border-box;
  height: auto;
  max-width: 100%;
  overflow: visible;
}

/* whatever holds the toggle must grow with it (but never break the flex search zone) */
#search :has(> #zsimplesChild):not(#simple_search_zone):not(#external_simple_search_zone) {
  display: flow-root;
  height: auto;
  overflow: visible;
}
/* ---------------------------------------------------------------------------
   20.16 LOGIN FORMS OVERRIDE  (sidebar card + "Connexion au portail documentaire")
   Load LAST (it is also appended to the end of genbib.css).
   Everything is !important on purpose: it has to beat inline styles, the older
   position:absolute rules for the password "eye", and PMB's own markup.
   :not(#_) adds one id of specificity so these win over the #connexion rules
   above them; it matches nothing else on the page. ASCII-only.
   --------------------------------------------------------------------------- */


/* ===========================================================================
   1. SIDEBAR LOGIN  (#connexion / .connexion / #block_connexion)
   Whichever element directly holds the fields (the form, or the <span> PMB
   wraps them in) becomes a vertical flex column.
   =========================================================================== */

/* 1a. the column */
#bandeau :is(#connexion, .connexion, #block_connexion):not(#_)
  :is(form, span, div, p):is(form, :has(> input[type="password"], > input.password, > .gb-pw)):not(.gb-pw) {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 12px !important;
  float: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* 1b. the form itself gets the 8px of air under the title / helper text */
#bandeau :is(#connexion, .connexion, #block_connexion):not(#_) form {
  margin-top: 8px !important;
}

/* 1c. stray <br> would add extra flex items / gaps */
#bandeau :is(#connexion, .connexion, #block_connexion):not(#_) form br {
  display: none !important;
}

/* 1d. every field, the submit button and the link: in normal flow, no offsets.
   This is what removes the overlap: no absolute / relative-with-top / transform /
   negative margin can move the button any more. The gap does the spacing. */
#bandeau :is(#connexion, .connexion, #block_connexion):not(#_)
  :is(form, span, div, p) > :is(input:not([type="hidden"]), label, a, button:not(.gb-pw-toggle)) {
  position: static !important;
  inset: auto !important;
  float: none !important;
  clear: none !important;
  transform: none !important;
  translate: none !important;
  z-index: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 1e. submit button ("Ok"): same guarantees, whatever class PMB gives it */
#bandeau :is(#connexion, .connexion, #block_connexion):not(#_)
  :is(input[type="submit"], input.bouton, input.boutonrechercher, button.bouton, button[type="submit"]) {
  position: static !important;
  inset: auto !important;
  float: none !important;
  transform: none !important;
  translate: none !important;
  margin: 0 !important;
  width: 100% !important;
}

/* 1f. password box: always fully visible, always above the button */
#bandeau :is(#connexion, .connexion, #block_connexion):not(#_) .gb-pw {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 2.75rem !important;
  margin: 0 !important;
  overflow: visible !important;
}

#bandeau :is(#connexion, .connexion, #block_connexion):not(#_)
  :is(input.password, input[type="password"]) {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 2.75rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 1g. the eye: centred on the password box, inside it */
#bandeau :is(#connexion, .connexion, #block_connexion):not(#_) .gb-pw > .gb-pw-toggle {
  position: absolute !important;
  inset-block: 0 !important;
  inset-inline-end: 0.25rem !important;
  inset-inline-start: auto !important;
  height: auto !important;
  margin: 0 !important;
  translate: none !important;
  transform: none !important;
}


/* ===========================================================================
   2. MAIN PORTAL LOGIN PAGE  ("Connexion au portail documentaire")
   Scoped to the form that holds BOTH a login field and a password field, so
   other forms are untouched. If your login input is not named "login" / class
   "login", change the second :has() below.
   =========================================================================== */

/* 2a. the form: one vertical stack */
#main form:has(input[type="password"]):has(input.login, input[name="login"]) {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 12px !important;
  float: none !important;
  height: auto !important;
  margin-bottom: 16px !important;
}

/* 2b. no <br>, and any row / column wrappers stack too */
#main form:has(input[type="password"]):has(input.login, input[name="login"]) br {
  display: none !important;
}

#main form:has(input[type="password"]):has(input.login, input[name="login"])
  :is(.row, .form-contenu, [class*="colonne"]) {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 12px !important;
  float: none !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2c. "Identifiant : *" / "Mot de passe : *": label ABOVE its field */
#main form:has(input[type="password"]):has(input.login, input[name="login"])
  :is(label, .etiquette, form > span) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* 2d. fields: one consistent width, in flow */
#main form:has(input[type="password"]):has(input.login, input[name="login"])
  :is(input.login, input[type="text"], input.password:not(.gb-pw > *), input[type="password"]:not(.gb-pw > *)) {
  display: block !important;
  position: static !important;
  float: none !important;
  width: min(100%, 22rem) !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 2e. password + eye: the wrapper is exactly as wide as the field, so the eye
   sits inside the box instead of at the far edge of the page */
#main form:has(input[type="password"]):has(input.login, input[name="login"]) .gb-pw {
  position: relative !important;
  display: block !important;
  float: none !important;
  width: min(100%, 22rem) !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

#main form:has(input[type="password"]):has(input.login, input[name="login"]) .gb-pw > input {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

#main form:has(input[type="password"]):has(input.login, input[name="login"]) .gb-pw > .gb-pw-toggle {
  position: absolute !important;
  inset-block: 0 !important;
  inset-inline-end: 0.25rem !important;
  height: auto !important;
  margin: 0 !important;
  translate: none !important;
  color: var(--color-text-muted, #46566B) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* 2f. submit button: 16px above, cleared floats and side margins */
#main form:has(input[type="password"]):has(input.login, input[name="login"])
  :is(input[type="submit"], input.bouton, input.boutonrechercher, button.bouton, button[type="submit"]) {
  position: static !important;
  float: none !important;
  clear: both !important;
  align-self: flex-start !important;
  width: auto !important;
  min-width: 8rem !important;
  margin: 16px 0 0 !important;
  transform: none !important;
  translate: none !important;
}

/* 2g. "Mot de passe oublie ?": its own line, no stray margins */
#main form:has(input[type="password"]):has(input.login, input[name="login"])
  :is(a, a.lien, .forgot, .mdp_oublie) {
  display: inline-flex !important;
  position: static !important;
  float: none !important;
  clear: both !important;
  align-self: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ===========================================================================
   21. LAYOUT REPAIRS  (tablet scroll, header/body alignment, notice + carousel flow)
   Appended LAST on purpose. No token is changed. ASCII-only.
     21.1 Page scrolling (tablet / iPad Pro)
     21.2 Header + hero share the exact width of the body container
     21.3 Carousel + record (notice) flow, empty ghost boxes
   =========================================================================== */


/* ---------------------------------------------------------------------------
   21.1 PAGE SCROLLING  (v2: nothing on html / body can clip or trap the page)
   The sideways safety net used to sit on <body>, then on <html>. Any non-visible
   overflow on the root elements changes how touch browsers and DevTools device
   mode size and paint the document (content cut at a fixed height, no scroll).
   Root elements are now plain; the net lives on #container with overflow: clip
   (clip creates no scroll box, so the sticky menu keeps working).
   --------------------------------------------------------------------------- */

html,
body {
  height: auto !important;
  min-height: 100%;
  overflow: visible !important;
  position: static;
  touch-action: auto;
  overscroll-behavior: auto;
}

#container {
  overflow-x: clip;
  overflow-y: visible;
  overflow-clip-margin: 1rem;   /* keeps the soft shadows at the edges */
}

#intro,
#bandeau,
#main,
#main #main_hors_footer {
  height: auto;
  max-height: none;
  touch-action: auto;
}

/* dragging on the slider must still scroll the page vertically */
.bx-wrapper,
.bx-window {
  touch-action: pan-y pinch-zoom;
}

@media (max-width: 1366px) {
  #container {
    min-height: 0;            /* never taller than its content on tablets */
    height: auto !important;
    max-height: none !important;
  }
}


/* ---------------------------------------------------------------------------
   21.2 HEADER + HERO = SAME WIDTH AS THE BODY
   Observed: hero and menu were 5/6 of the container (3 images x 400px = 1200px
   inside a 1440px container). The hero was shrink-wrapping its images instead of
   filling its flex row. Everything below forces it to take the full row.
   --------------------------------------------------------------------------- */

#intro,
#intro_bibli {
  display: contents !important;  /* their width / max-width can no longer matter */
}

#intro #intro_bibli .p1,
#intro #intro_bibli .p2 {
  box-sizing: border-box;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin-inline: 0;
  align-self: stretch;
}

#intro #intro_bibli .p1 {
  grid-auto-columns: minmax(0, 1fr);   /* equal columns that may shrink */
  justify-content: stretch;
}

#intro #intro_bibli .p1 > a,
#intro #intro_bibli .p1 > img {
  width: 100%;
  min-width: 0;
  max-width: none;
}

#intro #intro_bibli .p1 img {
  width: 100%;
  max-width: none;
}

/* body row: exactly the container width, no side margins */
#container {
  box-sizing: border-box;
  width: var(--container-w);
  max-width: var(--container-max);
  margin-inline: auto;
}

#container > #bandeau,
#container > #main {
  box-sizing: border-box;
}


/* ---------------------------------------------------------------------------
   21.3 CAROUSEL + RECORD (NOTICE) FLOW
   A cover link loads the record page (?lvl=notice_display), nothing is injected,
   so the record must simply follow the carousel in normal flow.
   --------------------------------------------------------------------------- */

/* the carousel is a normal block: own stacking layer, clears floats, arrows cannot
   climb over the menu bar or the record */
div[id^="cms_module_carousel"],
div.cms_module_carousel,
#infopage_carrousel {
  position: relative;
  z-index: 0;
  clear: both;
  float: none;
}

/* whatever follows the carousel starts below it, in flow */
:is(div[id^="cms_module_carousel"], div.cms_module_carousel, #infopage_carrousel)
  ~ :is(.notice-parent, .notice_parent, .notice-child, #notice_detail, #notice, #notice_display, [id^="notice"]) {
  position: relative;
  clear: both;
  float: none;
  inset: auto;
  margin-top: var(--space-5);
}

:is(.notice-parent, .notice_parent, #notice_detail, #notice_display) {
  position: relative;
  clear: both;
  z-index: auto;
}

/* empty wrappers must not draw a white card (the small blank box above the carousel) */
:is(#main, #main_hors_footer) > :is(div, section, p, ul):empty:not([class*="bx-"]):not([id^="cms_module_carousel"]) {
  display: none;
}

:is(.notice-parent, .notice-child, #notice_detail):empty {
  display: none;
}