/* ============================================================
   MAKTABATI DARK — Thème OPAC PMB
   Harmonisé avec le portail maktabati.univ-usto.dz
   Palette : fond sombre #0e0f13, accents chauds #c8a96e
   Typographie : DM Sans + DM Serif Display
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Variables ── */
:root {
    --bg:        #0e0f13;
    --bg2:       #15161c;
    --bg3:       #1c1d26;
    --bg4:       #22232e;
    --border:    rgba(255,255,255,0.07);
    --border2:   rgba(255,255,255,0.14);
    --text:      #f0ede8;
    --text2:     #b0aaa0;
    --muted:     #8a8896;
    --accent:    #c8a96e;
    --accent2:   #7b9ccc;
    --accent2h:  #a0bcec;
    --accent-bg: rgba(200,169,110,0.08);
    --danger:    #c0392b;
    --radius:    8px;
    --radius-lg: 12px;
    --shadow:    0 4px 24px rgba(0,0,0,0.5);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body#pmbopac {
    font-family: 'DM Sans', Arial, Verdana, sans-serif;
    font-size: 13px;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

/* Grille de fond subtile — comme le portail */
body#pmbopac::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* Halo doré en haut — comme le portail */
body#pmbopac::after {
    content: '';
    position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(200,169,110,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: #e0c080;
    text-decoration: none;
}

img { border: none; }

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

th {
    text-align: left;
    background-color: var(--bg3);
    color: var(--accent);
    padding: 7px 10px;
    font-weight: 500;
    font-size: 0.72em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

td { vertical-align: top; padding: 5px 7px; }

blockquote {
    margin: 5px 0 10px 0;
    border-left: 3px solid var(--accent);
    padding-left: 12px;
    color: var(--text2);
}

input, select, textarea {
    background-color: var(--bg3);
    border: 1px solid var(--border2);
    color: var(--text);
    border-radius: var(--radius);
    padding: 6px 10px;
    font-family: 'DM Sans', inherit;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200,169,110,0.12);
}

input[type=checkbox] { border: none; padding: 0; }

/* Boutons principaux */
input.bouton, input.boutonrechercher {
    background-color: var(--accent);
    color: #1a1208;
    border: none;
    border-radius: var(--radius);
    padding: 7px 16px;
    font-family: 'DM Sans', inherit;
    font-weight: 500;
    font-size: 0.82em;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s;
}

input.bouton:hover, input.boutonrechercher:hover {
    background-color: #e0c080;
    transform: translateY(-1px);
}

input.imp_bouton {
    background-color: var(--danger);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 5px 12px;
    cursor: pointer;
    font-size: 0.82em;
}

input.login, input.password, input.subsform {
    background-color: var(--bg3);
    color: var(--text);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
}

/* ── Container principal ── */
#container {
    margin: 0 auto;
    width: 985px;
    background-color: var(--bg2);
    position: relative;
    z-index: 1;
    min-height: 100%;
    box-shadow: 0 0 0 1px var(--border), 0 12px 60px rgba(0,0,0,0.6);
    overflow: hidden; /* contient les floats */
}

/* ── Bandeau gauche ──
   IMPORTANT : PMB génère #main AVANT #bandeau dans le HTML.
   Donc #bandeau flotte à gauche ET #main flotte à droite.
   Sans ça, #bandeau tombe en dessous de #main. */
#bandeau {
    float: left;
    width: 174px;
    background-color: var(--bg);
    border-right: 1px solid var(--border);
    min-height: 600px;
    position: relative;
    z-index: 2;
}

#bandeau #accueil {
    padding: 14px 12px;
    border-bottom: 1px solid var(--border);
}

#bandeau #accueil h3,
#bandeau #accueil h2 {
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 10px 0;
    padding: 0;
}

#bandeau #accueil img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    border-radius: 6px;
}

#bandeau #post_adress {
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

/* Badge section — style eyebrow du portail */
#bandeau #post_adress h3 {
    display: inline-block;
    background-color: var(--accent);
    color: #1a1208;
    padding: 3px 10px;
    font-size: 0.68em;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 100px;
    margin: 0 0 8px 0;
}

#bandeau #post_adress p {
    font-size: 0.85em;
    color: var(--text2);
    margin: 3px 0;
    line-height: 1.5;
}

/* ── Login ── */
#connexion {
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

#connexion h4 {
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 8px 0;
}

/* ── Lang select ── */
#lang_select {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

#lang_select h3, #lang_select h2 {
    font-size: 0.68em;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 5px 0;
}

#lang_select select {
    width: 100%;
    font-size: 0.85em;
    padding: 4px 8px;
    background-color: var(--bg2);
    border-color: var(--border);
    color: var(--text2);
    border-radius: var(--radius);
    appearance: none;
    cursor: pointer;
}

#lang_select select:hover { border-color: var(--border2); }

/* ── Main ──
   PMB génère #main AVANT #bandeau dans le HTML.
   float:right + width calculée = colonne droite correcte. */
#main {
    float: right;
    width: calc(100% - 174px);
    margin-left: 0;
    padding: 0;
    min-height: 600px;
    box-sizing: border-box;
}

#main #main_hors_footer {
    min-height: 600px;
}

/* ── Intro / Header bibliothèque ── */
#intro {
    background-color: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 0;
}

#intro #intro_bibli {
    padding: 16px 20px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Badge doré — style eyebrow du portail */
#intro #intro_bibli .p1 {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--accent);
    border: 1px solid rgba(200,169,110,0.35);
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
}

#intro #intro_bibli .p2 { flex: 1; }

#intro #intro_bibli .p2 h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.15em;
    font-weight: 400;
    color: var(--text);
    margin: 0 0 6px 0;
}

#intro #intro_bibli .p2 ul {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

#intro #intro_bibli .p2 ul li {
    background-color: var(--bg3);
    border: 1px solid var(--border);
    font-size: 0.78em;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    color: var(--text2);
}

#intro #intro_bibli .p2 ul li:hover {
    background-color: var(--accent-bg);
    border-color: rgba(200,169,110,0.35);
    color: var(--accent);
}

#intro_message {
    background-color: rgba(200,169,110,0.06);
    border-top: 1px solid rgba(200,169,110,0.15);
    border-bottom: 1px solid rgba(200,169,110,0.15);
    padding: 8px 20px;
}

#intro_message .p1 {
    color: var(--accent);
    font-size: 0.88em;
}

#intro_message .p1 p { margin: 3px 0; }

/* ── Recherche ── */
#search {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin: 16px;
    background-color: var(--bg);
    overflow: hidden;
}

ul.search_tabs {
    display: flex;
    background-color: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 0;
    margin: 0;
}

ul.search_tabs li,
#onglets_list ul.list_tabs li,
#empr_onglet ul.empr_tabs li {
    background-color: transparent;
    padding: 9px 16px;
    font-size: 0.82em;
    font-weight: 500;
    color: var(--text2);
    cursor: pointer;
    border-right: 1px solid var(--border);
    transition: background-color 0.2s, color 0.2s;
    list-style: none;
}

ul.search_tabs li:hover,
#onglets_list ul.list_tabs li:hover {
    background-color: var(--accent-bg);
    color: var(--accent);
}

ul.search_tabs li#current,
#main #search ul.search_tabs li#current,
#onglets_list ul.list_tabs li#current,
#empr_onglet ul.empr_tabs li#current a,
#onglets_list ul.list_tabs li a.current,
#search_onglet ul.search_tabs li.current a {
    background-color: var(--accent);
    color: #1a1208 !important;
    font-weight: 600;
}

#search_input {
    padding: 14px 16px;
}

#search_input input[type=text] {
    width: 100%;
    font-size: 14px;
    padding: 9px 14px;
    background-color: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    color: var(--text);
}

#search_input input[type=text]::placeholder {
    color: var(--muted);
}

/* ── Pagination / Navigator ── */
#navigator {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--bg3);
    padding: 7px 12px;
    margin: 10px 16px;
    font-size: 0.85em;
    color: var(--text2);
}

#navigator a {
    color: var(--accent);
    margin: 0 4px;
    transition: color 0.2s;
}

#navigator a:hover { color: #e0c080; }

/* ── Section labels (style portail) ── */
.section-label-pmb {
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-label-pmb::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Catégories ── */
#categories {
    margin: 20px 16px;
}

#categories h3, #categories h2 {
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#categories h3::after, #categories h2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

#categories-container {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--bg);
    margin-bottom: 16px;
    transition: border-color 0.2s;
}

#categories-container:hover { border-color: var(--border2); }

#categories-container a {
    color: var(--text2);
    transition: color 0.2s;
}

#categories-container a:hover { color: var(--accent); }

#categories-container h2 {
    font-size: 12px;
    font-weight: 500;
    color: var(--accent);
    margin: 4px 0;
}

#categories h3 span {
    background-color: transparent;
    position: static;
    padding: 0;
    margin: 0;
}

/* ── Localisations ── */
#location {
    margin: 20px 16px;
}

#location-container {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--bg);
    margin-bottom: 16px;
}

#location-container table tr td a b {
    font-weight: normal;
    color: var(--text2);
}

/* ── Dernières acquisitions ── */
#last_entries {
    margin: 20px 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--bg);
}

#last_entries h3 {
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 14px 0;
}

#last_entries h3 span {
    background-color: transparent;
    position: static;
    padding: 0;
}

/* ── Étagères ── */
#etagere-container {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--bg);
    margin: 16px;
}

#titre_etagere {
    background-color: transparent;
    color: var(--accent);
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    position: static;
    padding: 0;
    margin: 0 0 8px 0;
}

/* ── Facettes ── */
#facette {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--bg);
    margin: 10px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg3);
}

#facette h3 {
    background-color: var(--bg3);
    color: var(--muted);
    padding: 7px 12px;
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0;
    border-bottom: 1px solid var(--border);
}

#facette #facette_list th {
    background-color: var(--bg3);
    color: var(--text2);
    padding: 3px 10px;
    font-size: 0.78em;
    text-transform: none;
}

#facette #facette_list a {
    display: block;
    padding: 4px 12px;
    color: var(--text2);
    font-size: 0.88em;
    border-bottom: 1px solid var(--border);
    transition: background-color 0.15s, color 0.15s;
}

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

/* ── Notices / Résultats ── */
/* Card notice — inspiré des cards du portail */
.notice-parent {
    margin: 8px 0;
    padding: 10px 12px;
    border-left: 3px solid var(--accent);
    background-color: var(--bg3);
    border-radius: 0 var(--radius) var(--radius) 0;
    transition: background-color 0.2s;
}

.notice-parent:hover { background-color: var(--bg4); }

.notice-heada {
    font-size: 100%;
    font-weight: 600;
    color: var(--text);
}

.notice-child {
    margin: 10px 0 16px 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    text-align: justify;
}

.notice-child h3 {
    font-size: 13px !important;
    color: var(--accent);
    margin: 7px 0 4px;
}

.child {
    margin-left: 20px;
    padding: 5px;
    text-align: justify;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.parent { margin-bottom: 14px; }

.parent h3 {
    font-size: 13px;
    color: var(--accent);
}

/* Vignette livre */
.vignetteimg {
    max-width: 140px;
    max-height: 200px;
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.5);
    transition: box-shadow 0.2s;
}

.vignetteimg:hover {
    box-shadow: 0 6px 20px rgba(200,169,110,0.2);
}

.bg-grey {
    background-color: var(--bg3);
    color: var(--text2);
    padding: 2px 7px;
    font-size: 0.82em;
    border-radius: 4px;
}

/* ── Onglets ISBD/Public ── */
ul.onglets_isbd_public {
    display: flex;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
    gap: 2px;
}

ul.onglets_isbd_public li {
    display: block;
}

ul.onglets_isbd_public li.isbd_public_active a {
    color: var(--accent);
    font-weight: 600;
    background-color: var(--accent-bg);
    border-color: rgba(200,169,110,0.3);
}

ul.onglets_isbd_public a {
    text-decoration: none;
    padding: 5px 12px;
    cursor: pointer;
    color: var(--text2);
    font-size: 0.85em;
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

ul.onglets_isbd_public a:hover {
    color: var(--accent);
    background-color: var(--accent-bg);
    border-color: rgba(200,169,110,0.25);
}

/* ── Tabs (colonnes.css) ── */
.content {
    position: relative;
    margin-left: 0;
    top: -1px;
    font-family: 'DM Sans', inherit;
    padding: 10px 14px 14px;
    border: 1px solid var(--border);
    background-color: var(--bg3);
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    z-index: 500;
}

div.tabs {
    font-size: 13px;
    position: absolute;
    top: 11px;
    left: 174px;
    white-space: nowrap;
    font-family: 'DM Sans', inherit;
    cursor: default !important;
    font-weight: 600;
    z-index: 1000;
}

.tab {
    border: 1px solid var(--border2);
    padding: 4px 10px;
    background-color: var(--bg4);
    color: var(--text2);
    z-index: 100;
    border-bottom-width: 0;
    transition: background-color 0.2s, color 0.2s;
}

.tabHover {
    background-color: var(--accent-bg);
    color: var(--accent);
    z-index: 1200;
    border-bottom-width: 0;
}

.tabActive {
    padding: 4px 10px;
    color: var(--accent);
    background-color: var(--bg3);
    border-color: rgba(200,169,110,0.4);
    z-index: 10000;
}

/* ── Fiche emprunteur ── */
#empr_onglet ul.empr_tabs {
    list-style: none;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    margin-bottom: 12px;
}

ul.empr_subtabs {
    list-style: none;
    padding: 0;
    padding-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

ul.empr_subtabs li {
    background-color: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.85em;
    transition: background-color 0.2s, border-color 0.2s;
}

ul.empr_subtabs li:hover {
    background-color: var(--accent-bg);
    border-color: rgba(200,169,110,0.3);
}

ul.empr_subtabs li a {
    text-decoration: none;
    color: var(--text2);
    transition: color 0.2s;
}

ul.empr_subtabs li:hover a { color: var(--accent); }

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

.listedescription {
    background-color: var(--bg4);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    padding: 6px 10px;
    position: absolute;
    visibility: hidden;
    z-index: 2000;
    font-size: 0.85em;
    color: var(--text2);
    box-shadow: var(--shadow);
}

/* ── Galerie photos ── */
.notice-global-photo,
.notice-global-nophoto {
    float: left;
    min-height: 230px;
    width: 260px;
    background-color: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin: 6px;
    padding: 8px;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s, background-color 0.25s;
    position: relative;
    overflow: hidden;
}

/* Effet gradient hover — identique aux cards du portail */
.notice-global-photo::before,
.notice-global-nophoto::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(200,169,110,0.04), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.notice-global-photo:hover,
.notice-global-nophoto:hover {
    border-color: rgba(200,169,110,0.35);
    transform: translateY(-3px);
    background-color: var(--bg4);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.notice-global-photo:hover::before,
.notice-global-nophoto:hover::before { opacity: 1; }

.notice-global-nophoto .child,
.notice-global-photo .child {
    font-family: 'DM Sans', inherit;
    padding: 3px 5px;
    text-align: justify;
    margin: 0;
    border: none;
}

.notice-global-photo A IMG {
    margin: 8px 0;
    border-radius: 5px;
    display: block;
    width: 100%;
    object-fit: cover;
    transition: opacity 0.2s;
}

.notice-global-photo:hover A IMG { opacity: 0.95; }

#form_values_block {
    clear: both;
    display: block;
}

#resultatrech_liste blockquote { margin: 0; }

/* ── Bulletins ── */
.liste_bulletins { padding: 3px; }

.carroussel_bulletin {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--bg3);
    padding: 8px;
    text-align: center;
    transition: border-color 0.2s;
}

.carroussel_bulletin:hover { border-color: var(--border2); }

.carroussel_bulletin .active a {
    color: var(--accent);
    cursor: pointer;
}

.carroussel_bulletin .current_bull_carroussel {
    font-weight: bold;
    background-color: rgba(200,169,110,0.10);
    border-radius: 4px;
}

/* ── Infopage carrousel ── */
#infopage_carrousel ul { margin: 14px 0; }

#infopage_carrousel ul li a {
    display: block;
    width: 150px;
    margin: 0 auto;
    text-align: center;
    color: var(--text2);
    transition: color 0.2s;
}

#infopage_carrousel ul li a:hover { color: var(--accent); }

/* ── Actualités ── */
#actualites h1 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.2em;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 20px;
}

#actualites .bloc_actu {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
    margin: 10px 0;
    background-color: var(--bg);
    transition: border-color 0.2s, transform 0.2s;
}

#actualites .bloc_actu:hover {
    border-color: rgba(200,169,110,0.3);
    transform: translateY(-2px);
}

#actualites .bloc_actu h3 {
    color: var(--accent);
    font-size: 0.95em;
    margin: 0 0 8px 0;
}

/* ── Bannettes ── */
.bannette-container { margin-bottom: 20px; }

.bannette-titre h1 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}

#bannette { padding: 6px; }

/* ── Popup ── */
#titre-popup {
    font-family: 'DM Serif Display', serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--accent);
    margin: 12px;
}

form#f { margin-left: 10px; }

/* ── Visionneuse ── */
#visionneuseBackground {
    background-color: rgba(8,9,12,0.92);
}

/* ── Footer ── */
#footer {
    margin-top: 20px;
    padding: 12px 16px;
    text-align: center;
    clear: both;
    border-top: 1px solid var(--border);
    background-color: var(--bg);
    color: var(--muted);
    font-size: 0.78em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#footer a {
    color: var(--muted);
    transition: color 0.2s;
}

#footer a:hover { color: var(--accent); }

/* ── Colonnes flottantes ── */
.colonne      { float: left; }
.colonne2     { float: left; width: 50%; }
.colonne60    { float: left; width: 60%; }
.colonne40    { float: left; width: 40%; }
.colonne4     { float: left; width: 25%; }
.colonne5     { float: left; width: 20%; }
.colonne3     { float: left; width: 33%; }
.colonne10    { float: left; width: 10%; }
.colonne80    { float: left; width: 80%; }
.colonne_suite { float: left; }

/* ── Utilitaires ── */
.row { clear: both; }

.right, .right-50, .right-15, .right-85 { float: right; }
.right-50 { width: 50%; }
.right-15 { width: 15%; }
.right-85 { width: 85%; }
.left, .left-50, .left-15 { float: left; }
.left-50  { width: 50%; }
.left-15  { width: 15%; }
.left-85  { width: 85%; }
.right-clear-right, .right-50-clear-right { float: right; clear: right; }
.left-clear-left,   .left-50-clear-left   { float: left;  clear: left; }
.spacer { clear: both; visibility: hidden; display: none; }

.alerte { color: #e74c3c; font-size: 14px; font-weight: 500; }
.erreur_saisie { background-color: rgba(231,76,60,0.15); border-color: var(--danger) !important; }

/* Highlighting recherche */
.text_search0 { background-color: rgba(255,220,0,0.20);   text-decoration: underline; }
.text_search1 { background-color: rgba(192,80,80,0.20);   text-decoration: underline; }
.text_search2 { background-color: rgba(200,130,80,0.20);  text-decoration: underline; }
.text_search3 { background-color: rgba(150,80,200,0.20);  text-decoration: underline; }
.text_search4 { background-color: rgba(80,150,200,0.20);  text-decoration: underline; }
.text_search5 { background-color: rgba(80,180,120,0.20);  text-decoration: underline; }

.etiq_champ { font-weight: 500; color: var(--text2); }

/* ── Authorities ── */
.authorities {
    background-color: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Responsive ── */
@media (max-width: 1000px) {
    #container { width: 100%; box-shadow: none; }
}

@media (max-width: 768px) {
    #bandeau { display: none; }
    #main    { float: none; width: 100%; margin-left: 0; }

    #search  { margin: 10px; }

    .notice-global-photo,
    .notice-global-nophoto {
        width: calc(50% - 16px);
    }
}

@media (max-width: 480px) {
    .notice-global-photo,
    .notice-global-nophoto {
        width: calc(100% - 16px);
    }
}
/* ══════════════════════════════════════════════════════════
   CORRECTIONS — Lisibilité, layout, fond transparent
   À ajouter à la fin de maktabati_dark.css
   ══════════════════════════════════════════════════════════ */

/* ── 1. ONGLET ACTIF : texte SOMBRE sur fond doré (lisible) ── */
ul.search_tabs li#current,
ul.search_tabs li#current a,
#main #search ul.search_tabs li#current,
#main #search ul.search_tabs li#current a,
#onglets_list ul.list_tabs li#current,
#onglets_list ul.list_tabs li#current a,
#empr_onglet ul.empr_tabs li#current,
#empr_onglet ul.empr_tabs li#current a,
#search_onglet ul.search_tabs li.current a {
    background-color: var(--accent) !important;
    color: #1a1208 !important;
    font-weight: 600;
}

/* Hover onglet : texte doré sur fond sombre OK */
ul.search_tabs li:hover a,
#onglets_list ul.list_tabs li:hover a {
    color: var(--accent) !important;
    background-color: var(--accent-bg) !important;
}

/* ── 2. HEADER PRINCIPAL DE LA BIBLI ── */
#main_header {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border);
    padding: 12px 20px;
}

#main_header h3,
#main_header h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.1em;
    font-weight: 400;
    color: var(--text) !important;
    margin: 0;
}

/* ── 3. BANNIÈRE INTRO — transparente style portail ── */
#intro {
    background-color: transparent !important;
}

#intro_message {
    background-color: rgba(14, 15, 19, 0.6) !important;
    border-top: 1px solid rgba(200,169,110,0.12) !important;
    border-bottom: 1px solid rgba(200,169,110,0.12) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 8px 20px;
}

#intro_message .p1 {
    color: var(--text2) !important;
    font-size: 0.85em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#intro_message .p1 a {
    color: var(--accent2) !important;
    font-size: 0.82em;
    padding: 2px 8px;
    border: 1px solid rgba(123,156,204,0.25);
    border-radius: 4px;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

#intro_message .p1 a:hover {
    color: var(--accent) !important;
    border-color: rgba(200,169,110,0.35);
}

/* ── 4. BOUTONS SEARCH — plus de chevauchement ── */
#search_input {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
}

/* Masquer les <br> que PMB insère entre les éléments */
#search_input br { display: none !important; }

#search_input select,
#search_input select#typdoc_select {
    flex-shrink: 0;
    width: auto;
    min-width: 180px;
    background-color: var(--bg3) !important;
    color: var(--text) !important;
    border-color: var(--border2) !important;
}

#search_input input[type=text],
#search_input input.text_query {
    flex: 1 1 250px;
    background-color: var(--bg3) !important;
    color: var(--text) !important;
    border: 1px solid var(--border2) !important;
    border-radius: var(--radius) !important;
    font-size: 14px;
    padding: 9px 14px;
}

#search_input input[type=text]::placeholder {
    color: var(--muted);
}

#search_input input.boutonrechercher,
#search_input input.bouton,
#search_input input[type=submit],
#search_input input[type=button] {
    flex-shrink: 0;
    white-space: nowrap;
    height: auto;
    line-height: normal;
}

/* ── 5. FONDS BLANCS/CLAIRS injectés par common.css — override ── */

/* Tables résultats */
body#pmbopac #resultatrech_liste table,
body#pmbopac #resultatrech_liste tbody,
body#pmbopac #resultatrech_liste tr,
body#pmbopac #resultatrech_liste td {
    background-color: transparent !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

body#pmbopac #resultatrech_liste tr:nth-child(even) td {
    background-color: rgba(255,255,255,0.025) !important;
}

body#pmbopac #resultatrech_liste tr:hover td {
    background-color: var(--accent-bg) !important;
}

/* Tables génériques */
body#pmbopac table td,
body#pmbopac table tr {
    background-color: transparent;
}

body#pmbopac th {
    background-color: var(--bg3) !important;
    color: var(--accent) !important;
}

/* ── 6. DOJO TUNDRA — neutraliser fond blanc des widgets ── */
.tundra .dijitDialog,
.tundra .dijitContentPane,
.tundra .dijitTooltipDialog,
.tundra .dijitMenuItem,
.tundra .dijitMenu {
    background-color: var(--bg3) !important;
    color: var(--text) !important;
    border-color: var(--border2) !important;
}

.tundra .dijitDialogTitle {
    background-color: var(--bg4) !important;
    color: var(--accent) !important;
    border-bottom: 1px solid var(--border) !important;
}

.tundra .dijitMenuItemHover {
    background-color: var(--accent-bg) !important;
    color: var(--accent) !important;
}

/* ── 7. SIMPLE SEARCH ZONE — mise en forme propre ── */
#simple_search_zone {
    width: 100%;
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

#simple_search_zone .notice-parent {
    cursor: pointer;
    padding: 6px 10px;
    background-color: var(--bg3);
    border-left: 2px solid var(--border2);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.85em;
    color: var(--text2);
    transition: border-color 0.2s, color 0.2s;
}

#simple_search_zone .notice-parent:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Checkboxes dans la zone de recherche */
#zsimplesChild {
    background-color: var(--bg3) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 10px !important;
    margin-top: 6px !important;
}

#zsimplesChild label {
    color: var(--text2);
    font-size: 0.88em;
}

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

/* ── 8. NAVIGATOR / PAGINATION ── */
.navig_actions_first_screen a,
.navig_empr_bt_show_compte a,
a.navig_lastnotices {
    color: var(--accent2) !important;
    font-size: 0.85em;
    padding: 4px 10px;
    border: 1px solid rgba(123,156,204,0.2);
    border-radius: var(--radius);
    transition: color 0.2s, border-color 0.2s;
    display: inline-block;
}

.navig_actions_first_screen a:hover,
.navig_empr_bt_show_compte a:hover,
a.navig_lastnotices:hover {
    color: var(--accent) !important;
    border-color: rgba(200,169,110,0.3);
    background-color: var(--accent-bg);
}

/* ── 9. RESPONSIVE MOBILE ── */
@media (max-width: 768px) {
    #search_input {
        flex-direction: column;
        gap: 10px;
    }

    #search_input select,
    #search_input input[type=text],
    #search_input input.text_query {
        width: 100% !important;
        flex: none;
    }

    #search_input input.boutonrechercher,
    #search_input input.bouton {
        width: 100%;
    }

    #intro_message .p1 {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* ══════════════════════════════════════════════════════════
   PATCH v2 — corrections ciblées après analyse HTML réel
   ══════════════════════════════════════════════════════════ */

/* ── 1. ONGLET ACTIF : texte sombre lisible sur fond doré ── */
/* PMB met la classe sur le <li>, le texte est dans le <a> */
#search ul.search_tabs li#current > a,
#search ul.search_tabs li#current,
ul.search_tabs li#current > a,
ul.search_tabs li.current > a {
    color: #1a1208 !important;
    background-color: var(--accent) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* Hover : texte doré sur fond sombre = lisible */
ul.search_tabs li:hover > a {
    color: var(--accent) !important;
}

/* ── 2. MENU DÉROULANT — fond sombre, pas blanc ── */
#menuDeroulant {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    position: static;
}

#menuDeroulant li {
    position: relative;
}

#menuDeroulant > li > a {
    display: inline-block;
    color: var(--text2) !important;
    background-color: transparent !important;
    font-size: 0.82em;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
    white-space: nowrap;
}

#menuDeroulant > li > a:hover {
    color: var(--accent) !important;
    border-color: rgba(200,169,110,0.35);
    background-color: var(--accent-bg) !important;
}

/* Sous-menu (dropdown) */
#menuDeroulant ul.sousMenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    background-color: var(--bg3) !important;
    border: 1px solid var(--border2) !important;
    border-radius: var(--radius);
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    padding: 4px 0;
    list-style: none;
    margin: 2px 0 0 0;
}

#menuDeroulant li:hover > ul.sousMenu {
    display: block;
}

#menuDeroulant ul.sousMenu li a {
    display: block;
    padding: 6px 14px;
    color: var(--text2) !important;
    background-color: transparent !important;
    font-size: 0.82em;
    white-space: nowrap;
    transition: color 0.2s, background-color 0.2s;
}

#menuDeroulant ul.sousMenu li a:hover {
    color: var(--accent) !important;
    background-color: var(--accent-bg) !important;
}

/* ── 3. INTRO_BIBLI — structure HTML réelle : h3 direct ── */
#intro_bibli {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background-color: var(--bg) !important;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

#intro_bibli h3 {
    font-family: 'DM Serif Display', serif !important;
    font-size: 1.05em !important;
    font-weight: 400 !important;
    color: var(--text) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    flex-shrink: 0;
}

#intro_bibli .p1 {
    /* contient les images commentées — masquer si vide */
    display: none;
}

#intro_bibli .p2 {
    flex: 1;
}

/* ── 4. INPUTS fond blanc forcé par common.css — override total ── */
body#pmbopac input,
body#pmbopac input[type=text],
body#pmbopac input[type=password],
body#pmbopac input[type=search],
body#pmbopac input[type=email],
body#pmbopac input[type=number],
body#pmbopac textarea,
body#pmbopac select {
    background-color: var(--bg3) !important;
    color: var(--text) !important;
    border: 1px solid var(--border2) !important;
    border-radius: var(--radius) !important;
}

body#pmbopac input:focus,
body#pmbopac textarea:focus,
body#pmbopac select:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(200,169,110,0.12) !important;
}

/* Boutons — NE PAS hériter du fond sombre */
body#pmbopac input[type=submit],
body#pmbopac input[type=button],
body#pmbopac input.bouton,
body#pmbopac input.boutonrechercher {
    background-color: var(--accent) !important;
    color: #1a1208 !important;
    border: none !important;
    cursor: pointer;
    font-weight: 500 !important;
}

body#pmbopac input[type=submit]:hover,
body#pmbopac input[type=button]:hover,
body#pmbopac input.bouton:hover,
body#pmbopac input.boutonrechercher:hover {
    background-color: #e0c080 !important;
}

body#pmbopac input.imp_bouton {
    background-color: var(--danger) !important;
    color: #fff !important;
}

body#pmbopac input[type=checkbox],
body#pmbopac input[type=radio] {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    accent-color: var(--accent);
}

/* ── 5. SEARCH input.text_query — common.css force rgba(0,0,0,0.05) ── */
#search input.text_query,
.searchbox input[name="user_query"],
body#pmbopac #search input[type=text] {
    background-color: var(--bg3) !important;
    color: var(--text) !important;
    border: 1px solid var(--border2) !important;
}

/* ── 6. ACCESSIBILITY bar ── */
#accessibility {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background-color: transparent;
}

.accessibility_font_size {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.accessibility_font_size li a {
    display: inline-block;
    color: var(--text2) !important;
    background-color: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.82em;
    transition: color 0.2s, border-color 0.2s;
    text-decoration: none;
}

.accessibility_font_size li a:hover {
    color: var(--accent) !important;
    border-color: rgba(200,169,110,0.35) !important;
}

/* ── 7. LOGIN FORM dans le bandeau ── */
#connexion h3.login_invite {
    font-size: 0.68em !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--accent) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#login_form label {
    font-size: 0.78em;
    color: var(--text2);
    display: block;
    margin-bottom: 6px;
}

#login_form br { display: none; }

#login_form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#login_form input.login,
#login_form input.password {
    width: 100%;
}

/* Bouton œil password */
#login_form button.fa {
    background-color: var(--bg4) !important;
    border: 1px solid var(--border2) !important;
    color: var(--text2) !important;
    border-radius: var(--radius) !important;
    padding: 4px 8px;
    cursor: pointer;
    transition: color 0.2s;
}

#login_form button.fa:hover {
    color: var(--accent) !important;
}

.myform-password-text-visually {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* ── 8. NAVIGATOR links propres ── */
#navigator table {
    background-color: transparent !important;
}

#navigator td {
    background-color: transparent !important;
    padding: 0;
}

/* ── 9. tabActive texte lisible ── */
.tabActive {
    color: var(--accent) !important;
    background-color: var(--bg3) !important;
    border-color: rgba(200,169,110,0.4) !important;
}

/* contenu sous les tabs */
.content {
    background-color: var(--bg3) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* ── 10. Dojo tree (recherche multi-critères) ── */
.tundra .dijitTreeNode,
.tundra .dijitTreeRow,
.tundra .dijitTreeContent {
    background-color: transparent !important;
    color: var(--text2) !important;
}

.tundra .dijitTreeRowSelected,
.tundra .dijitTreeRowHover {
    background-color: var(--accent-bg) !important;
    color: var(--accent) !important;
}

.tundra .dijitSplitter,
.tundra .dijitSplitterH {
    background-color: var(--border) !important;
    border-color: var(--border2) !important;
}

/* Zone résultats multi-critères */
body#pmbopac .tundra {
    background-color: transparent !important;
    color: var(--text) !important;
}

body#pmbopac .tundra * {
    font-family: 'DM Sans', inherit !important;
}

/* Panneaux Dojo */
.dijitContentPane,
.dijitBorderContainer,
.dijitBorderContainer-child {
    background-color: var(--bg3) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* ══════════════════════════════════════════════════════════
   PATCH v3 — bannière, menu, footer, boutons
   ══════════════════════════════════════════════════════════ */

/* ── INTRO global : conteneur flex propre ── */
#intro {
    background-color: var(--bg) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* ── INTRO_BIBLI : h3 + menu sur la même ligne ── */
#intro_bibli {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 20px !important;
    flex-wrap: nowrap !important;
    background-color: var(--bg) !important;
    border-bottom: 1px solid var(--border) !important;
    min-height: 48px;
    position: relative;
    z-index: 50;
}

/* Titre bibli — badge style eyebrow portail */
#intro_bibli h3 {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.72em !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--accent) !important;
    background-color: transparent !important;
    border: 1px solid rgba(200,169,110,0.35) !important;
    padding: 3px 12px !important;
    border-radius: 100px !important;
    margin: 0 !important;
    white-space: nowrap;
    flex-shrink: 0;
}

#intro_bibli .p1 { display: none !important; }

#intro_bibli .p2 {
    flex: 1 !important;
    overflow: visible;
}

/* ── MENU DÉROULANT — reset complet ── */
#menuDeroulant {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    background: transparent !important;
}

#menuDeroulant > li {
    position: relative !important;
    list-style: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

#menuDeroulant > li > a {
    display: inline-block !important;
    color: var(--text2) !important;
    background-color: var(--bg3) !important;
    border: 1px solid var(--border) !important;
    font-size: 0.78em !important;
    padding: 3px 10px !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    transition: color 0.2s, border-color 0.2s !important;
    text-decoration: none !important;
}

#menuDeroulant > li > a:hover {
    color: var(--accent) !important;
    border-color: rgba(200,169,110,0.4) !important;
    background-color: var(--accent-bg) !important;
}

/* Sous-menu dropdown sombre */
#menuDeroulant ul.sousMenu,
#menuDeroulant .sousMenu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    z-index: 9999 !important;
    background-color: var(--bg3) !important;
    border: 1px solid var(--border2) !important;
    border-radius: var(--radius) !important;
    min-width: 160px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
    padding: 4px 0 !important;
    list-style: none !important;
    margin: 0 !important;
}

#menuDeroulant > li:hover > ul.sousMenu,
#menuDeroulant > li:hover > .sousMenu {
    display: block !important;
}

#menuDeroulant .sousMenu li {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

#menuDeroulant .sousMenu li a {
    display: block !important;
    padding: 6px 14px !important;
    color: var(--text2) !important;
    background-color: transparent !important;
    font-size: 0.82em !important;
    white-space: nowrap !important;
    transition: color 0.2s, background-color 0.2s !important;
    border: none !important;
    border-radius: 0 !important;
}

#menuDeroulant .sousMenu li a:hover {
    color: var(--accent) !important;
    background-color: var(--accent-bg) !important;
}

/* ── INTRO_MESSAGE (barre de liens) — en dessous du titre ── */
#intro_message {
    background-color: rgba(14,15,19,0.7) !important;
    border-top: 1px solid rgba(200,169,110,0.1) !important;
    border-bottom: 1px solid rgba(200,169,110,0.1) !important;
    backdrop-filter: blur(6px) !important;
    padding: 6px 20px !important;
}

#intro_message .p1 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--muted) !important;
    font-size: 0.82em !important;
}

#intro_message .p1 a {
    color: var(--accent2) !important;
    background-color: transparent !important;
    border: 1px solid rgba(123,156,204,0.2) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 0.82em !important;
    white-space: nowrap !important;
    transition: color 0.2s, border-color 0.2s !important;
}

#intro_message .p1 a:hover {
    color: var(--accent) !important;
    border-color: rgba(200,169,110,0.35) !important;
    background-color: var(--accent-bg) !important;
}

/* Masquer l'image spacer invisible */
#map_lien_retour { display: none !important; }

/* ── NAVIGATOR — flex propre, pas de table ── */
#navigator {
    background-color: var(--bg3) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    margin: 10px 16px !important;
    padding: 6px 12px !important;
}

#navigator table {
    background: transparent !important;
    border: none !important;
}

#navigator td {
    background: transparent !important;
    color: var(--text2) !important;
    padding: 2px 6px !important;
    vertical-align: middle !important;
}

#navigator .navig_actions_first_screen a,
#navigator .navig_empr_bt_show_compte a,
#navigator a.navig_lastnotices {
    display: inline-block !important;
    color: var(--accent2) !important;
    background-color: var(--bg4) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 4px 12px !important;
    font-size: 0.82em !important;
    text-decoration: none !important;
    transition: color 0.2s, border-color 0.2s !important;
}

#navigator .navig_actions_first_screen a:hover,
#navigator .navig_empr_bt_show_compte a:hover {
    color: var(--accent) !important;
    border-color: rgba(200,169,110,0.35) !important;
    background-color: var(--accent-bg) !important;
}

/* ── FOOTER — style portail ── */
#footer {
    background-color: var(--bg) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--muted) !important;
    font-size: 0.78em !important;
    padding: 14px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    clear: both !important;
    margin-top: 0 !important;
    text-align: left !important;
}

#footer p, #footer div, #footer span, #footer td {
    color: var(--muted) !important;
    background: transparent !important;
    font-size: inherit !important;
    margin: 0 !important;
}

#footer a {
    color: var(--muted) !important;
    transition: color 0.2s !important;
}

#footer a:hover { color: var(--accent) !important; }

/* Point décoratif doré centre footer — comme portail */
#footer::after {
    content: '';
    display: none; /* géré inline si besoin */
}

/* ── MAIN_HEADER (titre page au-dessus de tout) ── */
#main_header {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 20px !important;
}

#main_header h3, #main_header h2, #main_header h1 {
    font-family: 'DM Serif Display', serif !important;
    font-size: 1.1em !important;
    font-weight: 400 !important;
    color: var(--text) !important;
    margin: 0 !important;
    background: transparent !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   PATCH v4 — footer vide, intro position, layout final
   ══════════════════════════════════════════════════════════ */

/* ── FOOTER vide — contenu via CSS pseudo-element ── */
#footer {
    background-color: var(--bg) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--muted) !important;
    font-size: 0.78em !important;
    padding: 12px 20px !important;
    clear: both !important;
    margin-top: 0 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Injecter le texte footer via CSS (div vide) */
#footer::before {
    content: '© 2025 Bibliothèque USTO — Bib Architecture, G.Civil, HYDRAULIQUE';
    color: var(--muted);
    font-size: 0.78em;
}

#footer::after {
    content: 'maktabati.univ-usto.dz';
    color: var(--muted);
    font-size: 0.72em;
    opacity: 0.6;
}

/* ── STRUCTURE HTML PMB : #footer est DANS #main_hors_footer
   mais AVANT #intro — on le remet visuellement en bas ── */
#main_hors_footer {
    display: flex !important;
    flex-direction: column !important;
    min-height: 600px !important;
}

/* L'ordre HTML réel est : footer → intro → search → ...
   On utilise order pour remettre footer à la fin */
#footer       { order: 99 !important; margin-top: auto !important; }
#intro        { order: 1 !important; }
#navigator    { order: 2 !important; }
#resume_panier { order: 3 !important; }
#search       { order: 4 !important; }
#categories   { order: 5 !important; }
#location     { order: 6 !important; }
#last_entries { order: 7 !important; }
#etagere-container { order: 8 !important; }
#facette      { order: 9 !important; }
#resultatrech { order: 10 !important; }
#actualites   { order: 11 !important; }
#empr_onglet  { order: 12 !important; }
#bannette     { order: 13 !important; }
#main_header  { order: 0 !important; }

/* ══════════════════════════════════════════════════════════
   PATCH v5 — fix définitif bannière + onglet actif + layout
   ══════════════════════════════════════════════════════════ */

/* ── SUPPRIMER le double titre : #main_header est redondant ──
   PMB affiche le nom de la bibli dans #main_header ET #intro_bibli h3
   On masque #main_header pour éviter le doublon */
#main_header {
    display: none !important;
}

/* ── INTRO : occupe toute la largeur disponible ── */
#intro {
    background-color: var(--bg) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── INTRO_BIBLI : flex horizontal propre ── */
#intro_bibli {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    padding: 10px 20px !important;
    background-color: var(--bg) !important;
    border-bottom: 1px solid var(--border) !important;
    position: relative !important;
    z-index: 50 !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
}

/* Badge titre bibli */
#intro_bibli > h3 {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.68em !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--accent) !important;
    background: transparent !important;
    border: 1px solid rgba(200,169,110,0.35) !important;
    padding: 4px 14px !important;
    border-radius: 100px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1.4 !important;
}

#intro_bibli .p1 { display: none !important; }

#intro_bibli .p2 {
    flex: 1 1 auto !important;
    overflow: visible !important;
    min-width: 0 !important;
}

/* ── MENU DÉROULANT — flex wrap propre ── */
ul#menuDeroulant {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

ul#menuDeroulant > li {
    position: relative !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

ul#menuDeroulant > li > a {
    display: inline-block !important;
    font-size: 0.78em !important;
    color: var(--text2) !important;
    background-color: var(--bg3) !important;
    border: 1px solid var(--border) !important;
    border-radius: 5px !important;
    padding: 4px 11px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s !important;
    line-height: 1.4 !important;
}

ul#menuDeroulant > li > a:hover {
    color: var(--accent) !important;
    border-color: rgba(200,169,110,0.4) !important;
    background-color: var(--accent-bg) !important;
}

/* Sous-menu sombre positionné correctement */
ul#menuDeroulant ul.sousMenu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 3px) !important;
    left: 0 !important;
    z-index: 9999 !important;
    background-color: var(--bg3) !important;
    border: 1px solid var(--border2) !important;
    border-radius: var(--radius) !important;
    min-width: 160px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.7) !important;
    padding: 4px 0 !important;
    list-style: none !important;
    margin: 0 !important;
}

ul#menuDeroulant > li:hover > ul.sousMenu {
    display: block !important;
}

ul#menuDeroulant ul.sousMenu > li > a {
    display: block !important;
    padding: 7px 16px !important;
    color: var(--text2) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 0.82em !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: color 0.2s, background-color 0.2s !important;
}

ul#menuDeroulant ul.sousMenu > li > a:hover {
    color: var(--accent) !important;
    background-color: var(--accent-bg) !important;
}

/* ── ONGLET ACTIF — texte SOMBRE sur fond doré ── */
/* Spécificité maximale pour battre common.css */
body#pmbopac #main #search ul.search_tabs li#current,
body#pmbopac #main #search ul.search_tabs li#current a,
body#pmbopac ul.search_tabs li#current,
body#pmbopac ul.search_tabs li#current a,
body#pmbopac ul.search_tabs li#current > a:link,
body#pmbopac ul.search_tabs li#current > a:visited {
    background-color: var(--accent) !important;
    color: #1a1208 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    text-decoration: none !important;
}

/* Tous les liens d'onglets non-actifs */
body#pmbopac ul.search_tabs li a {
    color: var(--text2) !important;
    background-color: transparent !important;
    text-decoration: none !important;
    display: block !important;
    padding: 9px 16px !important;
}

body#pmbopac ul.search_tabs li:hover a {
    color: var(--accent) !important;
    background-color: var(--accent-bg) !important;
}

/* ── IMAGE CARROUSEL dans intro (si présente) ── */
#intro_bibli .p2 img,
#intro_bibli img {
    display: none !important; /* masquer images cassées/commentées */
}

/* ── #map_lien_retour spacer invisible ── */
img#map_lien_retour {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ── FOOTER avec contenu CSS ── */
#footer {
    position: relative !important;
    background-color: var(--bg) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--muted) !important;
    padding: 14px 24px !important;
    clear: both !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 20px !important;
    order: 99 !important;
}

#footer::before {
    content: '© 2025 Bibliothèques USTO-MB — Architecture · Génie Civil · Hydraulique';
    color: var(--muted);
    font-size: 0.78em;
    font-family: 'DM Sans', sans-serif;
}

#footer::after {
    content: 'maktabati.univ-usto.dz';
    color: var(--muted);
    font-size: 0.72em;
    opacity: 0.5;
    font-family: 'DM Sans', sans-serif;
}

/* ── MÉTÉO section bandeau ── */
#bandeau .meteo,
#bandeau [id*="meteo"],
#bandeau [class*="meteo"] {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    font-size: 0.82em;
    color: var(--text2);
}

/* ── SEARCH input & boutons — alignement flex ── */
#search_input {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 16px !important;
}

#search_input br { display: none !important; }

#search_input select {
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 180px !important;
}

#search_input input[type=text],
#search_input input.text_query {
    flex: 1 1 200px !important;
    min-width: 180px !important;
}

#search_input input[type=submit],
#search_input input[type=button],
#search_input input.boutonrechercher,
#search_input input.bouton {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* ══════════════════════════════════════════════════════════
   PATCH v6 — masquer carrousel intro, fix onglets, menu
   ══════════════════════════════════════════════════════════ */

/* ── MASQUER tout ce qui est dans .p1 de intro_bibli
   (carrousel images, slideshows, etc.) ── */
#intro_bibli .p1,
#intro_bibli .p1 *,
#intro .carrousel,
#intro .slideshow,
#intro .infopage_carrousel,
#infopage_carrousel,
#intro_bibli img,
#intro img:not(#map_lien_retour) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* ── ONGLET ACTIF — spécificité maximale absolue ──
   common.css cible probablement les <a> directement */
body#pmbopac div#search ul.search_tabs > li#current > a,
body#pmbopac div#search ul.search_tabs > li#current > a:link,
body#pmbopac div#search ul.search_tabs > li#current > a:visited,
body#pmbopac div#search ul.search_tabs > li#current > a:hover,
html body#pmbopac ul.search_tabs li#current a {
    color: #1a1208 !important;
    background-color: #c8a96e !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* ── TOUS LES LIENS d'onglets ── */
body#pmbopac ul.search_tabs li > a,
body#pmbopac ul.search_tabs li > a:link,
body#pmbopac ul.search_tabs li > a:visited {
    display: block !important;
    padding: 9px 14px !important;
    color: var(--text2) !important;
    background-color: transparent !important;
    text-decoration: none !important;
    text-shadow: none !important;
    font-size: 0.82em !important;
    font-weight: 500 !important;
    transition: color 0.2s, background-color 0.2s !important;
}

body#pmbopac ul.search_tabs li > a:hover {
    color: var(--accent) !important;
    background-color: var(--accent-bg) !important;
}

/* ── LI onglet actif lui-même ── */
body#pmbopac ul.search_tabs li#current {
    background-color: #c8a96e !important;
}

/* ── MENU : fixer le z-index et overflow ── */
#intro_bibli {
    overflow: visible !important;
    z-index: 100 !important;
}

#intro_bibli .p2 {
    overflow: visible !important;
    z-index: 100 !important;
    position: relative !important;
}

ul#menuDeroulant {
    position: relative !important;
    z-index: 100 !important;
    overflow: visible !important;
}

ul#menuDeroulant > li {
    overflow: visible !important;
}

/* Sous-menu — s'assurer qu'il ne pousse pas le contenu */
ul#menuDeroulant ul.sousMenu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 10000 !important;
    background-color: #1c1d26 !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 8px !important;
    min-width: 180px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
    padding: 4px 0 !important;
    margin: 2px 0 0 0 !important;
    list-style: none !important;
    /* Caché par défaut */
    display: none !important;
    pointer-events: none !important;
}

ul#menuDeroulant > li:hover > ul.sousMenu {
    display: block !important;
    pointer-events: all !important;
}

/* ══════════════════════════════════════════════════════════
   PATCH v7 — onglet actif, encodage, menu overflow
   ══════════════════════════════════════════════════════════ */

/* ── ONGLET ACTIF — spécificité absolue maximale ──
   On cible TOUS les cas possibles que PMB peut générer */
html body#pmbopac div#search ul.search_tabs li#current,
html body#pmbopac div#search ul.search_tabs li#current a,
html body#pmbopac div#search ul.search_tabs li#current a:link,
html body#pmbopac div#search ul.search_tabs li#current a:visited,
html body#pmbopac div#search ul.search_tabs li#current a:hover,
html body#pmbopac div#search ul.search_tabs li#current a:active,
html body#pmbopac #search_onglet ul.search_tabs li.current,
html body#pmbopac #search_onglet ul.search_tabs li.current a,
html body#pmbopac #search_onglet ul.search_tabs li.current a:link,
html body#pmbopac #search_onglet ul.search_tabs li.current a:visited {
    background-color: #c8a96e !important;
    color: #1a1208 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    text-decoration: none !important;
    -webkit-text-fill-color: #1a1208 !important;
}

/* ── MENU — empêcher overflow sur header ── */
#search ul.search_tabs {
    overflow-x: auto !important;
    overflow-y: visible !important;
    flex-wrap: nowrap !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--accent) var(--bg3) !important;
}

/* Conteneur intro — z-index inférieur au header sticky */
#intro, #intro_bibli, #intro_bibli .p2, ul#menuDeroulant {
    z-index: 10 !important;
}

/* ── ENCODAGE — s'assurer que les caractères spéciaux passent ──
   Forcer UTF-8 sur tous les éléments texte */
body#pmbopac, body#pmbopac * {
    font-variant-ligatures: normal;
}

/* ══════════════════════════════════════════════════════════
   PATCH v8 — fix définitif menu déroulant + encodage
   common.css force z-index:1 et top:36px — on écrase
   ══════════════════════════════════════════════════════════ */

/* ── Charset déclaré explicitement ── */
/* (ajouté en tête du fichier via sed) */

/* ── MENU DÉROULANT — écraser common.css ── */
#menuDeroulant,
.cms_menu_deep0 {
    display: flex !important;
    flex-wrap: wrap !important;
    float: none !important;
    position: relative !important;
    z-index: 20 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 5px !important;
    background: transparent !important;
}

#menuDeroulant li,
.cms_menu_deep0 li {
    display: block !important;
    float: none !important;
    position: relative !important;
    background: transparent !important;
}

#menuDeroulant > li > a,
.cms_menu_deep0 > li > a {
    display: inline-block !important;
    font-size: 0.78em !important;
    color: var(--text2) !important;
    background-color: var(--bg3) !important;
    border: 1px solid var(--border) !important;
    border-radius: 5px !important;
    padding: 4px 11px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: color 0.2s, border-color 0.2s !important;
}

#menuDeroulant > li > a:hover,
.cms_menu_deep0 > li > a:hover {
    color: var(--accent) !important;
    border-color: rgba(200,169,110,0.4) !important;
    background-color: var(--accent-bg) !important;
}

/* Sous-menu — écraser top:36px et z-index:1 de common.css */
#menuDeroulant .sousMenu,
.cms_menu_deep1 {
    display: none !important;
    position: absolute !important;
    top: 100% !important;          /* au lieu de 36px fixe */
    left: 0 !important;
    z-index: 9999 !important;      /* au lieu de 1 */
    width: auto !important;
    min-width: 180px !important;
    background-color: var(--bg3) !important;
    border: 1px solid var(--border2) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.7) !important;
    padding: 4px 0 !important;
    margin: 2px 0 0 0 !important;
    list-style: none !important;
}

#menuDeroulant li:hover > .sousMenu,
.cms_menu_deep0 li:hover > .cms_menu_deep1,
#menuDeroulant li:focus > .sousMenu,
.cms_menu_deep0 li:focus > .cms_menu_deep1 {
    display: block !important;
}

#menuDeroulant .sousMenu li,
.cms_menu_deep1 li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    background: transparent !important;
}

#menuDeroulant .sousMenu li a,
.cms_menu_deep1 li a {
    display: block !important;
    padding: 7px 16px !important;
    color: var(--text2) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 0.82em !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: color 0.2s, background-color 0.2s !important;
}

#menuDeroulant .sousMenu li a:hover,
.cms_menu_deep1 li a:hover,
#menuDeroulant .sousMenu li a:focus,
.cms_menu_deep1 li a:focus {
    color: var(--accent) !important;
    background-color: var(--accent-bg) !important;
}

/* ── Z-INDEX général : intro sous le header sticky ── */
#intro        { z-index: 10 !important; }
#intro_bibli  { z-index: 10 !important; overflow: visible !important; }
#intro_bibli .p2 { overflow: visible !important; position: relative !important; z-index: 10 !important; }

/* ══════════════════════════════════════════════════════════
   PATCH v9 — sous-menu ne chevauche plus le contenu
   ══════════════════════════════════════════════════════════ */

/* ── Donner de l'espace pour que le sous-menu descende ── */
#intro {
    position: relative !important;
    z-index: 20 !important;
    overflow: visible !important;
}

#intro_bibli {
    position: relative !important;
    z-index: 20 !important;
    overflow: visible !important;
    min-height: 46px !important;
}

#intro_bibli .p2 {
    position: relative !important;
    z-index: 20 !important;
    overflow: visible !important;
}

ul#menuDeroulant {
    position: relative !important;
    z-index: 20 !important;
    overflow: visible !important;
}

ul#menuDeroulant > li {
    position: relative !important;
    z-index: 20 !important;
}

/* Le sous-menu doit passer AU-DESSUS de #main_header et du titre */
ul#menuDeroulant .sousMenu,
ul#menuDeroulant ul.sousMenu {
    z-index: 9999 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 3px !important;
    /* Empêcher le sous-menu d'être coupé par un parent overflow:hidden */
    transform: translateZ(0) !important;
}

/* ── Le titre de la page (#main_header masqué)
   et l'intro message ont un z-index inférieur ── */
#intro_message {
    position: relative !important;
    z-index: 5 !important;
}

#navigator {
    position: relative !important;
    z-index: 5 !important;
}

/* ── Astuce/hint bar — style cohérent ── */
.opac_hint, .hint, [class*="hint"], [class*="astuce"] {
    background-color: rgba(200,169,110,0.06) !important;
    border-left: 3px solid var(--accent) !important;
    color: var(--text2) !important;
    padding: 8px 14px !important;
    font-size: 0.85em !important;
    margin: 8px 16px !important;
    border-radius: 0 var(--radius) var(--radius) 0 !important;
}

.opac_hint strong, .hint strong,
[class*="hint"] strong, [class*="astuce"] strong {
    color: var(--accent) !important;
    font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════
   PATCH v10 — masquer images .p1 (genbib/images)
   ══════════════════════════════════════════════════════════ */

/* Ces images cassent le layout — elles viennent de genbib */
#intro_bibli .p1 {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    position: absolute !important;
}

#intro_bibli .p1 img,
#intro_bibli img[src*="genbib"],
#intro_bibli img[src*="image1"],
#intro_bibli img[src*="image2"],
#intro_bibli img[src*="image3"] {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════
   BANNIÈRE PORTAIL — injectée via CSS sur body#pmbopac
   Identique au header de maktabati.univ-usto.dz
   ══════════════════════════════════════════════════════════ */

/* ── Décaler #container pour laisser place à la bannière ── */
body#pmbopac {
    padding-top: 58px !important;
}

/* ── Bannière sticky en haut ── */
body#pmbopac::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 58px !important;
    background: rgba(14,15,19,0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    z-index: 99999 !important;
    pointer-events: none !important;
}

/* ── Contenu bannière via JS injecté ── */
#pmb-portal-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 58px !important;
    background: rgba(14,15,19,0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 2rem !important;
    font-family: 'DM Sans', sans-serif !important;
    box-sizing: border-box !important;
}

#pmb-portal-header .ph-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    text-decoration: none !important;
}

#pmb-portal-header .ph-logo {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    filter: brightness(1.1) !important;
}

#pmb-portal-header .ph-title {
    font-family: 'DM Serif Display', serif !important;
    font-size: 0.95rem !important;
    color: #f0ede8 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

#pmb-portal-header .ph-title span {
    display: block !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 300 !important;
    color: #8a8896 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

#pmb-portal-header .ph-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

#pmb-portal-header .ph-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    color: #8a8896 !important;
    font-size: 0.75rem !important;
    text-decoration: none !important;
    padding: 0.3rem 0.75rem !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 6px !important;
    transition: color 0.2s, border-color 0.2s !important;
    background: transparent !important;
}

#pmb-portal-header .ph-back:hover {
    color: #c8a96e !important;
    border-color: rgba(200,169,110,0.35) !important;
}

#pmb-portal-header .ph-badge {
    font-size: 0.62rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #c8a96e !important;
    border: 1px solid rgba(200,169,110,0.3) !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 100px !important;
    white-space: nowrap !important;
}