/* +--------------------------------------------------------------------------+

// 2011 PMB Services / www.sigb.net pmb@sigb.net et contributeurs (voir www.sigb.net)

// +-------------------------------------------------+

// $Id: genbib.css,v 1.86 2017/06/21 12:39:16 wlair Exp $ */

@media screen and (max-width: 1024px) {

    #container {

        width: 100%;

        border: 0;

    }

    #bandeau {

		top:-1740px;

    	width: 185px !important;

    	margin-right: 1%!important;

    	box-sizing: border-box;

    }

	#main .bloc img {

        max-width: 900px;

    	height: auto;

    	border-radius: 8px;

    	float: right;

    	margin-left: 210px; /* espace entre l'image et le texte */

    	margin-bottom: -20px;

		z-index: 1000;



    }

        

   #main {

    	width: auto !important;

    	float: none !important;

    	margin-left: 270px !important;

    	padding-right: 10px !important;

    }

	#main_hors_footer {

		overflow: hidden;

	}    

    #iframe_resume_panier {

    	width: calc(100% - 195px);

    }

    #navigator table {

    	clear: none;

    	width: calc(100% - 195px);

    }

    .title_basket, #search .row, #search_crl, #etageres, #etageres > h3, #etagere-notice-list, 

    .cms_module_article h3, .cms_module_article .row, .cms_module_recordslist h3, .cms_module_recordslist table, h3,

    .panier_avis_notCourte .clear, .row, #fiche-empr, #empr-all, #empr-late, #empr-old, 

    #empr-resa, #empr-dsi, #empr-sugg, #empr-list, #empr-dema, table {

    	clear: none;

    }

	#etagere-notice-list {

		margin-top: 8px;

	}

	#search ul.search_tabs {

		height: auto;

		overflow: hidden;

		margin-left: -1px;

    	margin-right: -1px;

	}

	#main_hors_footer {

		margin-top: 5px !important;

	}

	

	#intro .cms_module_htmlcode, #intro {

		height: auto !important;

	}

	#intro .cms_module_htmlcode {

		clear: both;

		padding-bottom: 8px !important;

	}

	.cms_module_menu {

		height: auto !important;

		position: static !important;

	}

	.parentNotCourte, .cms_module_article, .cms_module_section {

		overflow: hidden;

	}

	.poeme-container {

	font-family: 'Georgia', serif;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    margin-left: 300px;

    background: #f0f0f0;

    width: 1000px;

    max-height: 100px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #fff;

    border-radius: 12px;

    box-shadow: 0 5px 20px rgba(0,0,0,0.2);

    padding: 20px;

    text-align: center;

    position: relative;

    overflow: hidden;

    font-size: 1.2em;

}

}

@media screen and (max-width: 480px) {

    #container {

        width: 100%;

        border: 0;

    }

    #bandeau {

    	width: 185px !important;

    	margin-right: 1%!important;

    	box-sizing: border-box;

    }

	#main .bloc img {

        max-width: 90px;

    	height: auto;

    	border-radius: 8px;

    	float: right;

    	margin-left: -170px; /* espace entre l'image et le texte */

    	margin-bottom: -20px;

		z-index: 1000;



    }

        

    #main {

    	width: auto !important;

    	float: none !important;

    	margin-left: 40px !important;

    	padding-right: 10px !important;

    }

	#main_hors_footer {

		overflow: hidden;

	}    

    #iframe_resume_panier {

    	width: calc(100% - 195px);

    }

    #navigator table {

    	clear: none;

    	width: calc(100% - 195px);

    }

    .title_basket, #search .row, #search_crl, #etageres, #etageres > h3, #etagere-notice-list, 

    .cms_module_article h3, .cms_module_article .row, .cms_module_recordslist h3, .cms_module_recordslist table, h3,

    .panier_avis_notCourte .clear, .row, #fiche-empr, #empr-all, #empr-late, #empr-old, 

    #empr-resa, #empr-dsi, #empr-sugg, #empr-list, #empr-dema, table {

    	clear: none;

    }

	#etagere-notice-list {

		margin-top: 8px;

	}

	#search ul.search_tabs {

		height: auto;

		overflow: hidden;

		margin-left: -1px;

    	margin-right: -1px;

	}

	#main_hors_footer {

		margin-top: 5px !important;

	}

	

	#intro .cms_module_htmlcode, #intro {

		height: auto !important;

	}

	#intro .cms_module_htmlcode {

		clear: both;

		padding-bottom: 8px !important;

	}

	.cms_module_menu {

		height: auto !important;

		position: static !important;

	}

	.parentNotCourte, .cms_module_article, .cms_module_section {

		overflow: hidden;

	}

}



@media screen and (max-width: 959px) {

	 .cms_module_articleslist {

    	width: 100% !important;

    	margin-right: 0 !important;

    }

    .bx-pager {

    	position: absolute;

    	width: 0%;

    	bottom: 0;

    }

}

@media screen and (max-width: 9024px) {

    body#pmbopac {

        background-image: url("http://media.lasalle-douala.org/pmb/opac_css/styles/genbib/images/laureat.jpg");

        background-size: cover;           /* L'image couvre toute la zone */

        background-position: center;      /* Centre l'image */

        background-repeat: no-repeat;     /* Pas de répétition */

        background-attachment: fixed;     /* Fixe l'image lors du scroll (optionnel) */

        min-height: 100vh;                /* Prend au moins toute la hauteur de l'écran */

    }

}

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                         ATTRIBUTS GENERAUX                                 */

/*                                                                            */

/*                             COULEURS                                       */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/





body#pmbopac {

	background-color: #ffffff;

	background-repeat: repeat;

	background-position: center top;



	font-family: Segoe UI, Arial, sans-serif;



}





body#pmbopac.popup {

	background: #ffffff;

}



body {

	font-family: Segoe UI, Arial, sans-serif;

	font-size: 18px;

	color: #000000;

}



#container {

	margin: 0px auto;

	width: 985px;

	position: relative;

	border-bottom: 2px solid #4180B5;

	border-left: 2px solid #4180B5;

	border-right: 2px solid #4180B5;

	background-color: #ffffff;

}

/* Masquer le label "Sélectionner un type de document" */
#typdoc_label, 
label[for="typdoc"],
.select_document_type_label {
    display: none !important;
}

/* Masquer le label "Recherche" au-dessus du champ */
#search_label,
.simple_search_label,
form.search_form label:first-of-type {
    display: none !important;
}

/* OU rendre les labels transparents mais accessibles (meilleure accessibilité) */
.search_form label {
    opacity: 0;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* -----

#intro #intro_bibli .p1,

#facette h3,

#bandeau #post_adress h3,

#bandeau #accueil ,

.bg-grey,

#visionneuseBackground {

	background-color: #ffffff;

}

#lang_select,.bg-grey,

#visionneuseBackground {

	background-color: #3c7cb1;

}

----*/



/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                         ATTRIBUTS GENERAUX                                 */

/*                                                                            */

/*                     attrbitus generaux de la page                          */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/





* {

	margin: 0px;

	padding: 0px;

}



body {

	font-family: Arial, Verdana, Helvetica, sans-serif;

	font-size: 75%;

}



#container {

	margin: 0px auto;

	width: 90%;  /* ou une valeur fixe plus grande, ex: 1245px ou 1400px */

    max-width: 1200px; /* limite pour les très grands écrans si souhaité */

	

	position: relative;

	min-height: 100%;

	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.34);

}



#main #main_hors_footer {

	min-height: 300px;

	margin-left: -20%;

	padding-top: 1px;

}



/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                                  IFRAME                                    */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/



body {

	font-family: 'Inter', sans-serif;

	background: linear-gradient(135deg, #ffffff, #ffffff);

	margin: 0;

	padding: 0;

	min-height: 100vh;

	display: flex;

	align-items: center;

	justify-content: center;

  }

  

  /* Container */

  .popup_connexion_empr {

	max-width: 420px;

	width: 100%;

	background: rgba(255, 255, 255, 0.97);

	margin: 40px auto;

	padding: 40px 45px;

	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);

	border-radius: 16px;

	border-top: 6px solid #007BFF;

	backdrop-filter: blur(12px);

	animation: fadeIn 0.8s ease;

	transition: transform 0.3s ease;

  }

  

  .popup_connexion_empr:hover {

	transform: translateY(-5px);

  }

  

  /* Title */

  .popup_connexion_empr h3 {

	font-size: 24px;

	font-weight: 700;

	color: #002b5c;

	margin-bottom: 25px;

	text-align: center;

	letter-spacing: 0.5px;

  }

  

  /* Labels */

  .popup_connexion_empr label {

	display: block;

	margin-bottom: 8px;

	color: #003366;

	font-weight: 600;

	font-size: 14px;

  }

  

  /* Inputs */

  .popup_connexion_empr input[type="text"],

  .popup_connexion_empr input[type="password"] {

	width: 100%;

	padding: 14px 16px;

	margin-bottom: 20px;

	border: 1px solid #ccd6e8;

	border-radius: 10px;

	font-size: 15px;

	background: #f5f8ff;

	transition: all 0.3s ease;

  }

  

  .popup_connexion_empr input[type="text"]:focus,

  .popup_connexion_empr input[type="password"]:focus {

	border-color: #007BFF;

	box-shadow: 0 0 10px rgba(0, 123, 255, 0.35);

	outline: none;

	background: #fff;

  }

  

  /* Submit Button (bleu premium) */

  .popup_connexion_empr input[type="submit"] {

	width: 100%;

	padding: 14px 18px;

	background: linear-gradient(135deg, #007BFF, #0056b3);

	color: #fff;

	font-size: 16px;

	font-weight: 700;

	border: none;

	border-radius: 10px;

	cursor: pointer;

	transition: all 0.35s ease;

	box-shadow: 0 6px 20px rgba(0, 91, 187, 0.35);

  }

  

  .popup_connexion_empr input[type="submit"]:hover {

	background: linear-gradient(135deg, #0056b3, #004099);

	box-shadow: 0 8px 25px rgba(0, 91, 187, 0.45);

	transform: scale(1.03);

  }

  

  /* Blockquote reset */

  blockquote {

	margin: 0;

	padding: 0;

  }

  

  /* Animation */

  @keyframes fadeIn {

	from { opacity: 0; transform: translateY(20px); }

	to { opacity: 1; transform: translateY(0); }

  }

  

  /* Responsive */

  @media (max-width: 480px) {

	.popup_connexion_empr {

	  margin: 20px;

	  padding: 25px 20px;

	}

  

	.popup_connexion_empr h3 {

	  font-size: 20px;

	}

  }

  

/* -----------------------------------------------------*/

/*                         Panier                       */

/* -----------------------------------------------------*/





body.cart_info_body {

	background-color: #ffffff;

}



iframe#iframe_resume_panier {

	width: 100%;

	height: 35px;

	border: none;

}





/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                            Intro_bibli                                     */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/





#intro {

	position: absolute;

	top: 0px;

	width: 100%; /* ou 1400px si tu fixes le container */

}



#intro #intro_bibli h3 {

	display: none;

}



	

	

/* -----------------------------------------------------*/

/*                 biblio_preamble_p1                   */

/* -----------------------------------------------------*/

.banniere {

	background: linear-gradient(to right, gold, rgb(50, 91, 211), gold);

	border: 3px solid royalblue;

	border-radius: 0px;

	padding: 23px 20px;

	text-align: center;

	color: rgb(255, 255, 255);

	font-weight: bold;

	font-family: Segoe UI, Arial, sans-serif;

	font-size: 16px;

	box-shadow: 0 0 20px white inset;

	

	

	position: relative;

	left: -5%;

	width: 98.3% ;

  }

  @media (max-width: 768px) {

    .banniere {

        font-size: 0.4rem; /* 80% de la taille par défaut */

        

    }}

	@media screen and (max-width: 1024px) {

	.banniere {

	width: 100.5% ;

  }}

#intro #intro_bibli .p1 {

	height: 80px;

	padding-left: 3px;

	padding-right: 3px;

	display: block;

	text-align: center;

	overflow: hidden;

}





#intro #intro_bibli .p1 img {

	border-top: none;

	border-bottom: none;

	overflow: hidden;

	max-height: 211px;

	height: auto !important;

	height: 211px;

	height: expression(this.height > 211px ? "211px" : true);

	display: inline;

	margin-right: 2px;

	margin-left: 2px;

}





/* -----------------------------------------------------*/

/*                 biblio_preamble_p2                   */

/* -----------------------------------------------------*/



#intro #intro_bibli .p2 {



	padding-left: 400px;



}



/******************* VERSION MOBILE ********************/

/* Cache le checkbox */

#menu-toggle {

    display: none;

}



@media screen and (max-width: 768px) {

    /* Affiche le bouton hamburger */

    #menu-toggle-label {

        display: flex;

        flex-direction: column;

        justify-content: space-between;

	

        width: 30px;

        height: 21px;

        cursor: pointer;

        padding: 15px 10px;

        position: fixed;

        top: 45px;

        right: 25px;

        z-index: 1001;

        background: linear-gradient(135deg, #0a80a3 0%, #2c89ab 100%);

        border-radius: 8px;

        box-shadow: 0 4px 12px rgba(10, 128, 163, 0.3);

        border: 2px solid #ffffff;

        transition: all 0.3s ease;

    }



    #menu-toggle-label:hover {

        background: linear-gradient(135deg, #0e034b 0%, #0a80a3 100%);

        box-shadow: 0 6px 15px rgba(10, 128, 163, 0.4);

    }



    /* Les trois traits */

    #menu-toggle-label span {

        display: block;

        height: 3px;

        width: 100%;

        background-color: #ffffff;

        border-radius: 3px;

        transition: all 0.3s ease;

    }



    /* Animation des traits quand le menu est ouvert */

    #menu-toggle:checked ~ #menu-toggle-label span:nth-child(1) {

        transform: rotate(45deg) translate(6px, 6px);

    }



    #menu-toggle:checked ~ #menu-toggle-label span:nth-child(2) {

        opacity: 0;

    }



    #menu-toggle:checked ~ #menu-toggle-label span:nth-child(3) {

        transform: rotate(-45deg) translate(6px, -6px);

    }



    /* Style du menu en mobile */

    #menuDeroulant {

        display: none;

        position: fixed;

        top: 90px;

        left: 10%;

        width: 80%;

        height: auto;

        max-height: 70vh;

        background: linear-gradient(135deg, #ffffff 0%, #f8fdff 100%);

        padding: 20px;

        margin: 0;

        overflow-y: auto;

        z-index: 1000;

        border-radius: 12px;

        box-shadow: 0 8px 25px rgba(10, 128, 163, 0.3);

        border: 2px solid #0a80a3;

    }



    /* Affiche le menu quand le checkbox est coché */

    #menu-toggle:checked ~ #menuDeroulant {

        display: block;

    }



    /* Style des li en mobile */

    #menuDeroulant li {

        float: none;

        width: 100%;

        margin: 0;

        margin-bottom: 8px;

        list-style: none;

    }



    #menuDeroulant li a {

        padding: 15px 20px;

        border: 2px solid #eeeeee;

        margin-bottom: 5px;

        background-color: white;

        color: #333;

        text-decoration: none;

        border-radius: 8px;

        display: block;

        text-transform: uppercase;

        font-weight: 600;

        transition: all 0.3s ease;

        text-align: center;

    }



    #menuDeroulant li a:hover {

        background: #f0f0f0;

        border: 2px solid #0a80a3;

    }



    /* Sous-menus en mobile - STYLE UNIFORME */

    #menuDeroulant .sousMenu {

        display: block;

        position: static;

        width: 100%;

        margin: 10px 0;

        background: #ffffff;

        border: none;

        box-shadow: none;

        padding-left: 0;

    }



    #menuDeroulant .sousMenu li a {

        background: #ffffff;

        color: #333;

        font-size: 14px;

        padding: 12px 20px;

        border: 2px solid #eeeeee;

        text-transform: none;

        text-align: left;

        font-weight: normal;

    }



    #menuDeroulant .sousMenu li a:hover {

        background: #f0f0f0;

        color: #333;

        border: 2px solid #0a80a3;

    }



    /* Indicateur visuel pour les items avec sous-menu */

    #menuDeroulant li:has(.sousMenu) > a::after {

        content: " â–¼";

        font-size: 12px;

        float: right;

        color: #333;

    }



    /* Style pour tous les liens au survol */

    #menuDeroulant li a:hover {

        transform: translateY(-2px);

        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    }



	/* Overlay pour fermeture */

#menu-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: transparent;

    z-index: 998;

    cursor: default;

}



#menu-toggle:checked ~ #menu-overlay {

    display: block;

}

}

/******************* VERSION TABLETTE ********************/

@media screen and (min-width: 769px) and (max-width: 1024px) {

    /* Cache le checkbox */

    #menu-toggle {

        display: none;

    }



    /* Affiche le bouton hamburger - MÊME STYLE QUE MOBILE */

    #menu-toggle-label {

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        width: 30px;

        height: 21px;

        cursor: pointer;

        padding: 19px 12px;

        position: fixed;

        top: 85px;

        right: 65px;

        z-index: 1001;

        background: linear-gradient(135deg, #0a80a3 0%, #0968b6 100%);

        border-radius: 8px;

        box-shadow: 0 4px 12px rgba(10, 128, 163, 0.3);

        border: 2px solid #ffffff;

        transition: all 0.3s ease;

        pointer-events: auto;

        touch-action: manipulation;

    }



    #menu-toggle-label:hover {

        background: linear-gradient(135deg, #0e034b 0%, #0a80a3 100%);

        box-shadow: 0 6px 15px rgba(10, 128, 163, 0.4);

    }



    /* Les trois traits */

    #menu-toggle-label span {

        display: block;

        height: 3px;

        width: 100%;

        background-color: #ffffff;

        border-radius: 3px;

        transition: all 0.3s ease;

    }



    /* Animation des traits quand le menu est ouvert */

    #menu-toggle:checked ~ #menu-toggle-label span:nth-child(1) {

        transform: rotate(45deg) translate(6px, 6px);

    }



    #menu-toggle:checked ~ #menu-toggle-label span:nth-child(2) {

        opacity: 0;

    }



    #menu-toggle:checked ~ #menu-toggle-label span:nth-child(3) {

        transform: rotate(-45deg) translate(6px, -6px);

    }



    /* Style du menu en tablette - MÊME QUE MOBILE */

    #menuDeroulant {

        display: none;

        position: fixed;

        top: 90px;

        left: 10%;

        width: 80%;

        height: auto;

        max-height: 70vh;

        background: linear-gradient(135deg, #ffffff 0%, #f8fdff 100%);

        padding: 20px;

        margin: 0;

        overflow-y: auto;

        z-index: 1000;

        border-radius: 12px;

        box-shadow: 0 8px 25px rgba(10, 128, 163, 0.3);

        border: 2px solid #0a80a3;

        -webkit-overflow-scrolling: touch;

        overscroll-behavior: contain;

    }



    /* Affiche le menu quand le checkbox est coché */

    #menu-toggle:checked ~ #menuDeroulant {

        display: block;

    }



    /* Style des li en tablette - MÊME QUE MOBILE */

    #menuDeroulant li {

        float: none;

        width: 100%;

        margin: 0;

        margin-bottom: 8px;

        list-style: none;

    }



    #menuDeroulant li a {

        padding: 15px 20px;

        border: 2px solid #eeeeee;

        margin-bottom: 5px;

        background-color: white;

        color: #333;

        text-decoration: none;

        border-radius: 8px;

        display: block;

        text-transform: uppercase;

        font-weight: 600;

        transition: all 0.3s ease;

        text-align: center;

    }



    #menuDeroulant li a:hover {

        background: #f0f0f0;

        border: 2px solid #0a80a3;

        transform: translateY(-2px);

        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    }



    /* Sous-menus en tablette - MÊME QUE MOBILE */

    #menuDeroulant .sousMenu {

        display: block;

        position: static;

        width: 100%;

        margin: 10px 0;

        background: #ffffff;

        border: none;

        box-shadow: none;

        padding-left: 0;

    }



    #menuDeroulant .sousMenu li a {

        background: #ffffff;

        color: #333;

        font-size: 14px;

        padding: 12px 20px;

        border: 2px solid #eeeeee;

        text-transform: none;

        text-align: left;

        font-weight: normal;

    }



    #menuDeroulant .sousMenu li a:hover {

        background: #f0f0f0;

        color: #333;

        border: 2px solid #0a80a3;

    }



    /* Indicateur visuel pour les items avec sous-menu */

    #menuDeroulant li:has(.sousMenu) > a::after {

        content: " â–¼";

        font-size: 12px;

        float: right;

        color: #333;

    }



    /* Zone de scroll sécurisée autour du bouton */

    #menu-toggle-label::before {

        content: '';

        position: absolute;

        top: -10px;

        right: -10px;

        bottom: -10px;

        left: -10px;

        pointer-events: none;

    }



	/* Overlay pour fermeture */

#menu-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: transparent;

    z-index: 998;

    cursor: default;

}



#menu-toggle:checked ~ #menu-overlay {

    display: block;

}

}

/******************* VERSION DESKTOP ********************/

@media screen and (min-width: 1025px) {

    #intro .p2 {

}

#menuDeroulant{

  transform: translate(10px, 27px);

}

#menuDeroulant, .cms_menu_deep0 {

	font-size: 15px;

	list-style: none;

}



#menuDeroulant li, .cms_menu_deep0 li {

	display: block;

	float: left;

	margin-bottom: 5px;

	margin-right: 5px;

	position: relative;

}



#menuDeroulant li a, .cms_menu_deep0 li a {

	background-color: #ffffff;

	color: #333333;

	text-decoration: none;

	padding-top: 4px;

	padding-bottom: 4px;

	padding-left: 7px;

	padding-right: 7px;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	border-radius: 5px;

	display: block;

	-moz-box-shadow: 0px 1px 2px #b4b4b4 inset;

	-webkit-box-shadow: 0px 1px 2px #b4b4b4 inset;

	box-shadow: 0px 1px 2px #b4b4b4 inset;

	border: 3px solid #eeeeee;

	text-transform: uppercase;

}



#menuDeroulant li a:hover, .cms_menu_deep0 li a:hover {

	border: 3px solid #4180B5;

}





/******************* sous-menu ********************/





#menuDeroulant .sousMenu, .cms_menu_deep1 {

    display: none;

    position: absolute;

    left: 0px;

    top: 31px;

}



#menuDeroulant .sousMenu li, .cms_menu_deep1 li {

	display: block;

	margin-bottom: 0px;

	float: none;

}



#menuDeroulant .sousMenu li a, .cms_menu_deep1 li a {

	background-color: #eeeeee;

	display: block;

	border: none;

	border-bottom: 1px solid #ffffff;

	-moz-box-shadow: none;

	-webkit-box-shadow: none;

	box-shadow: none;

	text-transform: none;

	width: 100%;

}



#menuDeroulant .sousMenu li a:hover, .cms_menu_deep1 li a:hover {

	background-color: #4180B5;

	color: #ffffff;

	border: none;

	border-bottom: 1px solid #ffffff;

}



#menuDeroulant li:hover > .sousMenu, .cms_menu_deep0 li:hover > .cms_menu_deep1 {

    display: block;

}



}

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                            Contenu du Bandeau                              */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/





/* Bandeau PC normal */

#bandeau {

	width: 170px;

	padding-left: 10px;

	border-right: 2px solid #4180B5;

	border-bottom: 2px solid #4180B5;

	border-bottom-right-radius: 30px;

	background-color: #ffffff;

	float: left;

	margin-top: 80px;

	z-index: 2;

	position: relative;

	transition: transform 0.3s ease;

}



/* Bouton hamburger caché sur PC */

#hamburger-toggl1e {

	display: none;

	font-size: 28px;

	cursor: pointer;

	padding: 10px 15px;

	background: #4180B5;

	color: #fff;

	border-radius: 8px;

	position: fixed;

	top: 49px;

	left: 25px;

	z-index: 1000;

	box-shadow: 0 4px 12px rgba(10, 128, 163, 0.3);

    border: 2px solid #ffffff;

}



/* Mobile responsive */

@media (max-width: 768px) {

	#bandeau {

		position: fixed;

		top: auto;

		bottom: 0;

		left: -260px;

		width: 200px;

		height: 80%;

		background: #fff;

		box-shadow: 2px 0 8px rgba(0,0,0,0.2);

		padding: 20px;

		z-index: 1000;

		overflow-y: auto;

		transform: translateX(0);

		transition: transform 0.3s ease;

	}



	#hamburger-toggl1e {

		display: block;

	}



	/* Bandeau ouvert */

	#bandeau.open {

		transform: translateX(260px);

	}

}



/******************* VERSION TABLETTE ********************/

@media screen and (min-width: 769px) and (max-width: 1024px) {

    /* Bandeau tablette */

    #bandeau {

        position: fixed;

        top: auto;

        bottom: 0;

        left: -205px;

        width: 200px;

        height: 80%;

        background: #fff;

        box-shadow: 2px 0 8px rgba(0,0,0,0.2);

        padding: 20px;

        z-index: 1000;

        overflow-y: auto;

        transform: translateX(0);

        transition: transform 0.3s ease;

        /* Suppression des styles PC */

        width: auto;

        padding-left: 0;

        border-right: none;

        border-bottom: none;

        border-bottom-right-radius: 0;

        background-color: #ffffff;

        float: none;

        margin-top: 0;

    }



    /* Bouton hamburger visible sur tablette */

   #hamburger-toggl1e {

        display: block;

        font-size: 28px;

        cursor: pointer;

        padding: 10px 15px;

        background: #4180B5;

        color: #fff;

        border-radius: 8px;

        position: fixed;

         top: 85px;

        left: 65px;

        z-index: 1000;

        box-shadow: 0 4px 12px rgba(10, 128, 163, 0.3);

        border: 2px solid #ffffff;

        transition: all 0.3s ease;

    }



    #hamburger-toggl1e:hover {

        background: #0e034b;

        box-shadow: 0 6px 15px rgba(10, 128, 163, 0.4);

    }



    /* Bandeau ouvert */

    #bandeau.open {

        transform: translateX(260px);

    }



    /* Amélioration du scroll */

    #bandeau {

        -webkit-overflow-scrolling: touch;

        overscroll-behavior: contain;

    }



    /* Adaptation du contenu du bandeau pour tablette */

    #bandeau > * {

        max-width: 100%;

    }



    /* Assurer que le bandeau soit au-dessus du menu */

    #bandeau {

        z-index: 1002;

    }



    #hamburger-toggl1e {

        z-index: 1003;

    }

}



@media screen and (min-width: 1024px) and (max-width: 1280px) {

    /* Bandeau tablette */

    #bandeau {

        position: fixed;

        top: auto;

        bottom: 0;

        left: -295px;

        width: 200px;

        height: 80%;

        background: #fff;

        box-shadow: 2px 0 8px rgba(0,0,0,0.2);

        padding: 20px;

        z-index: 1000;

        overflow-y: auto;

        transform: translateX(0);

        transition: transform 0.3s ease;

        /* Suppression des styles PC */

        width: auto;

        padding-left: 0;

        border-right: none;

        border-bottom: none;

        border-bottom-right-radius: 0;

        background-color: #ffffff;

        float: none;

        margin-top: 0;

    }



    /* Bouton hamburger visible sur tablette */

    #hamburger-toggl1e {

        display: block;

        font-size: 28px;

        cursor: pointer;

        padding: 10px 15px;

        background: #4180B5;

        color: #fff;

        border-radius: 8px;

        position: fixed;

        top: px;

        left: 65px;

        z-index: 1000;

        box-shadow: 0 4px 12px rgba(10, 128, 163, 0.3);

        border: 2px solid #ffffff;

        transition: all 0.3s ease;

    }



    #hamburger-toggl1e:hover {

        background: #0e034b;

        box-shadow: 0 6px 15px rgba(10, 128, 163, 0.4);

    }



    /* Bandeau ouvert */

    #bandeau.open {

        transform: translateX(260px);

    }



    /* Amélioration du scroll */

    #bandeau {

        -webkit-overflow-scrolling: touch;

        overscroll-behavior: contain;

    }



    /* Adaptation du contenu du bandeau pour tablette */

    #bandeau > * {

        max-width: 100%;

    }



    /* Assurer que le bandeau soit au-dessus du menu */

    #bandeau {

        z-index: 1002;

    }



    #hamburger-toggl1e {

        z-index: 1003;

    }

}

/* -----------------------------------------------------*/

/*                        Accueil                       */

/* -----------------------------------------------------*/





#bandeau #accueil h3 {

	display: none;

}



#bandeau #accueil p.centered {

	text-align: center;

	margin-top: 0px;

	z-index: 100;

}



#bandeau #accueil p.centered img {

	border: none;

	max-width: 150px;

	margin-bottom: 10px;

}





/* ------------lang_select------------*/





#bandeau #accueil #lang_select {

	margin-left: -10px;

	padding-left: 10px;

	padding-top: 5px;

	padding-bottom: 5px;

	width: 160px;

}



#bandeau #accueil #lang_select form {

	margin: 0px;

	padding: 0px;

}



#bandeau #accueil #lang_select select {

	border: none;

}





/* -----------------------------------------------------*/

/*                      Connexion                       */

/* -----------------------------------------------------*/



#connexion {

	max-width: 300px;

	/* largeur agr�able pour un formulaire */

	margin: 20px auto;

	/* centr� horizontalement */

	padding: 20px;

	background-color: #ffffff;

	/* fond clair */

	border-radius: 12px;

	/* coins arrondis modernes */

	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

	/* ombre douce */

	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



/* Titre */

#connexion h3 {

	margin-bottom: 15px;

	margin-top: 0px;

	font-size: 16px;

	font-weight: 600;

	color: #4180B5;

	text-align: center;

}



/* Formulaire */

#connexion #login_form form {

	margin: 0;

	padding: 0;

	display: flex;

	flex-direction: column;

	gap: 10px;

	/* espace entre les champs */

}



/* Input texte / mot de passe */

#connexion #login_form input.login,

#connexion #login_form input.password {

	width: 80%;

	/* occupe toute la largeur du container */

	padding: 8px 12px;

	/* espace int�rieur confortable */

	margin-top: 0;

	margin-bottom: 0;

	border: 1px solid #ccc;

	border-radius: 6px;

	font-size: 14px;

	transition: all 0.3s ease;

}



#connexion #login_form input.login:focus,

#connexion #login_form input.password:focus {

	border-color: #4180B5;

	box-shadow: 0 0 5px #4180B5;

	outline: none;

}



/* Bouton de connexion */

#connexion #login_form input.bouton {

	color: #ffffff;

	background-color: #4180B5;

	font-weight: bold;

	text-transform: uppercase;

	padding: 10px 15px;

	border: none;

	border-radius: 6px;

	cursor: pointer;

	transition: background 0.3s ease;

}



#connexion #login_form input.bouton:hover {

	background-color: #0055aa;

}



/* Responsive petit �cran */

@media screen and (max-width: 480px) {

	#connexion {

		width: 75%;

		padding: 10px;

	}

}



@media screen and (min-width: 1245px) {

    #container { width: 1245px; }

    #intro { width: 1245px; }

}





/* -----------------------------------------------------*/

/*                        Meteo                         */

/* -----------------------------------------------------*/





#meteo {}





/* -----------------------------------------------------*/

/*                       Adresse                        */

/* -----------------------------------------------------*/





#adresse h3 {

	margin-bottom: 5px;

	margin-top: 20px;

	font-size: 13px;

}



#adresse #opac_biblio_email {

	font-weight: bold;

	font-style: italic;

	font-size: 13px;

}





/* -----------------------------------------------------*/

/*                 biblio_post_adress                   */

/* -----------------------------------------------------*/





#bandeau #post_adress h3 {

	color: #ffffff;

	padding-left: 10px;

	padding-top: 5px;

	padding-bottom: 5px;

	margin-top: 10px;

	margin-bottom: 5px;

	margin-left: -10px;

}





/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                            Contenu du Main                                 */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/



#main{

	

    margin-right: 20px;

    float: right;

    width: 765px;

    padding: 30px;   /* espace interne uniforme */

    padding-top: 58px;

	margin-left: -140px;

}









.poeme-container {

	font-family: 'Georgia', serif;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    margin: 0;

    background: #f0f0f0;

    width: 600px;

    max-height: 100px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #fff;

    border-radius: 12px;

    box-shadow: 0 5px 20px rgba(0,0,0,0.2);

    padding: 20px;

    text-align: center;

    position: relative;

    overflow: hidden;

    font-size: 1.2em;

}



/* Chaque poème */

.poeme-container div {

    position: absolute;

    opacity: 0;

    animation: apparaitre 20s linear infinite;

}



/* Définir le timing pour chaque poème */

.poeme-container div:nth-child(1) { animation-delay: 0s; }





/* Animation de fondu */

@keyframes apparaitre {

    0%, 20% { opacity: 1; }

    

}



#main_tete{

	

    margin-right: 100px;

    float: right;

    width: 765px;

    padding: 30px;   /* espace interne uniforme */

    padding-top: 58px;

	margin-left: -140px;



}





#main .bloc {

    display: flex;              /* active flexbox */

    align-items: center;        /* aligne verticalement au centre */

    gap: 60px;                  /* espace entre image et texte */

	font-weight: bold; color: #4180B5;

}

#main h4{

	font-weight: bold; color: rgb(65, 4, 122);

	

}



#main .bloc img {

    max-width: 150px;           /* adapte la taille de l’image */

    height: auto;

    border-radius: 8px;         /* coins arrondis (optionnel) */

}



#main h2 {

    margin: 0;

    font-size: 1.73333em;

    line-height: 1;

	

}



/* RESPONSIVE TELEPHONE AVEC DEPLACEMENT MANUEL */

@media (max-width: 768px) {

    #main_tete {

        float: none;

        width: 100%;

        margin: 0;

        padding: 15px;

        padding-top: 30px;

        box-sizing: border-box;

    }

    

     .poeme-container {

        width: 240px;

        height: 120px;

        max-height: none;

        margin: 0;

        font-size: 1em;

        padding: 15px;

        

        /* Styles pour le déplacement manuel */

       

        top: 16%;

        left: 1%;

       

    }

    

    .poeme-container div {

        font-size: 0.92em;

        line-height: 1.5;

    }

    

    .poeme-container h4 {

        font-size: 0.8em;

        margin-top: 8px;

    }

	#main .bloc {

    display: flex;              /* active flexbox */

    align-items: center;        /* aligne verticalement au centre */

    gap: 6px;                  /* espace entre image et texte */

	font-weight: bold; color: #4180B5;

}

}

/* ---------------------------------------------------------------------------*/

/*                                Main_header                                 */

/* ---------------------------------------------------------------------------*/





#main_header h3 {

	background-color: #ffffff;

	opacity: 0.5;

	-ms-filter: "alpha(opacity=50)";

	/* IE 8 */

	filter: alpha(opacity=50);

	/* IE < 8 */

	position: absolute;

	top: 100px;

	margin-left: -200px;

	z-index: 10;

	font-size: 30px;

	padding-left: 10px;

	padding-right: 10px;

	padding-top: 5px;

	padding-bottom: 5px;

}





/* -----------------------------------------------------*/

/*                     Intro_message                    */

/* -----------------------------------------------------*/





/* --------biblio_important_p1-----------*/





#intro_message .p1 {

	font-size: 16px;

	font-weight: bold;

	margin-left:150px;

	margin-bottom: 15px;

	

}



#intro_message .p1 p {

	font-size: 21px;

	font-weight: bold;

	margin-top: 0px;

	margin-bottom: 10px;

}





/* --------biblio_important_p2-----------*/





#intro_message .p2 {

	margin-bottom: 10px;

}





/* -----------------------------------------------------*/

/*                        Navigator                     */

/* -----------------------------------------------------*/





#navigator {

	margin-bottom: 20px;

	padding-left: 10px;

	padding-top: 5px;

}





/* -----------------------------------------------------*/

/*                        Search                        */

/* -----------------------------------------------------*/





#search {

	padding-left: 15px;

	padding-bottom: 15px;

	padding-right: 15px;

	margin-top: 25px;

	margin-bottom: 15px;

	font-weight: bold; color: rgb(100, 149, 237);

}



#main #search ul.search_tabs,

#onglets_list ul.list_tabs {

	margin-top: -23px;

	margin-left: -16px;

	font-size: 1.166666em;

}



#main #search ul.search_tabs li,

#onglets_list ul.list_tabs li,

#empr_onglet ul.empr_tabs li {

	display: block;

	float: left;

	padding-top: 3px;

	padding-bottom: 3px;

	padding-left: 10px;

	padding-right: 10px;

	margin-right: 5px;

	margin-bottom: 5px;



}



#main #search ul.search_tabs li:hover,

#onglets_list ul.list_tabs li:hover,

#empr_onglet ul.empr_tabs li:hover {

	padding-bottom: 5px;

	padding-top: 5px;

	margin-top: -4px;

}



#main #search ul.search_tabs li#current:hover,

#onglets_list ul.list_tabs li#current:hover,

#empr_onglet ul.empr_tabs li#current:hover {

	padding-top: 3px;

	padding-bottom: 3px;

	margin-top: 0px;

}

/*

#main #search ul.search_tabs li a,

#onglets_list ul.list_tabs li a,

#empr_onglet ul.empr_tabs li a {

	text-decoration: none;

	color: #ffffff;

}

*/

#search #search_crl {

	clear: both;

	float: none;

}



#search p.p1 {

	margin: 0px;

	padding-top: 5px;

	*padding-top: 10px;

	/* Hack pour IE6 et IE7 */

	clear: left;

	display: block;

}



#search form {

	margin-top: 10px;

}



#search form select {

	margin-right: 10px;

	margin-bottom: 10px;

}



#search form input.text_query {

	width: 437px;

	height: 30px;   /* Hauteur augmentée */

    padding: 2px;  /* Espacement interne du texte */

    font-size: 16px; /* Taille du texte */

    border-radius: 8px; /* Pour les bords arrondis */

}



input.bouton,

input.boutonrechercher {

	color: #000000;

	margin-left: 5px;

	cursor: pointer;

        text-shadow : none ;

}



#search form #simple_search_zone {

	margin-top: 10px;

}



#search #zsimplesChild {

	border-bottom: none;

	margin-bottom: 0px !important;

}

@media (max-width: 480px) {

    #search {

    padding-left: 15px;

    padding-bottom: 15px;

    padding-right: 15px;

    margin-top: -90px;

    margin-bottom: 15px;

    margin-left: auto; /* Centre ou pousse à droite */

    margin-right: 0; /* Enlève la marge droite */

    font-weight: bold; color: rgb(100, 149, 237);

    width: 300px; /* ou la largeur souhaitée */

	.search_tabs {

    transform: translate(20px, 40px);

    }

    }

    input.bouton,

input.boutonrechercher {

	margin-top: 10px;

}

#search form select {

	margin-top: 40px;

}



    #search form input.text_query {

        width: 70%;

        font-size: 16px; /* Taille standard pour éviter le zoom iOS */

    }

}


/* Supprimer complètement les labels et libérer l'espace */
label.visually-hidden[for="typdoc_select"],
label.visually-hidden[for="user_query_lib"] {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* Alternative plus agressive - cibler tous les visually-hidden dans le formulaire de recherche */
.search_form label.visually-hidden,
#search_form label.visually-hidden,
form[action*="search"] label.visually-hidden {
    display: none !important;
}

/*--- efface le  type de document ---*/
/* Masquer l'icône de type de document spécifique */
img[src*="icon_a_16x16.gif"],
img[alt*="Document: texte imprimé"],
img[title*="Document: texte imprimé"],
img[alt*="type de document" i],
img[title*="type de document" i] {
    display: none !important;
}


/*-----Recherche par termes-----*/





#search .form- .form-contenu {

	padding-top: 20px;

}





/*---Recherche multi-crit�res---*/





.ext_search_txt {

	width: 330px;

}



#external_simple_search_zone {

	margin-top: 15px;

}





/*-----Onglets de Recherche-----*/





#search_onglet ul.search_tabs {

	list-style: none;

	padding-left: 0px;

	margin-left: 0px;

	margin-bottom: 15px;

	margin-top: 10px;

}



#search_onglet ul.search_tabs li {

	display: inline;

	padding-top: 3px;

	padding-bottom: 3px;

	padding-left: 10px;

	padding-right: 10px;

}



#search_onglet ul.search_tabs li:hover {

	padding-top: 6px;

	padding-bottom: 5px;

	position: relative;

	top: -2px;

}



#search_onglet ul.search_tabs li a {

	color: #ffffff;

	text-decoration: none;

}



#search_onglet ul.search_tabs li.current:hover {

	padding-top: 3px;

	padding-bottom: 3px;

	padding-left: 10px;

	padding-right: 10px;

	top: 0px;

}



#resultatrech_see h3 {

	margin-bottom: 10px;

	margin-top: 10px;

}



#resultatrech_liste blockquote {

	margin-top: 20px;

}





/* -----------------------------------------------------*/

/*                 Liste periodiques                    */

/* -----------------------------------------------------*/





#perio_a2z {

	margin-top: 20px;

}



#perio_a2z h3 span {

	background-color: #FFFFFF;

	margin-left: 10px;

	margin-top: -10px;

	padding-left: 10px;

	padding-right: 10px;

	position: absolute;

}



#perio_a2z label {

	margin-left: 5px;

	margin-right: 5px;

}



#perio_a2z #perio_a2z_search {

	margin-top: 20px;

	width: 50%;

}



#perio_a2z ul.onglets_isbd_public {

	margin-top: 15px;

	padding-left: 5px;

}



#perio_a2z .parent ul.onglets_isbd_public {

	padding-bottom: 5px;

}



#perio_a2z ul.onglets_isbd_public li {

	float: none;

	display: inline;

}



#a2z_contens {

	clear: both;

}



table.a2z_contens {

	margin-top: 10px;

}



table.a2z_contens td {

	vertical-align: top;

}



table.a2z_perio_list {

	width: 200px;

}



table.a2z_perio_list tr td {

	padding-bottom: 3px;

	padding-top: 3px;

}



#a2z_perio b .header_title {

	font-size: 16px;

	text-transform: uppercase;

}



#a2z_perio h3 span#titre_exemplaires {

	margin-left: 0px;

	margin-top: 0px;

	margin-bottom: 5px;

	padding-left: 0px;

	padding-right: 0px;

	position: relative;

}



#a2z_perio .navbar {

	margin-top: 20px;

}



input#a2z_abt_actif {

	vertical-align: middle;

	margin-left: 2px;

	margin-right: 2px;

}



#form_search_bull form {

	margin-top: 10px;

}



#form_search_bull form table td {

	vertical-align: middle;

}





/*-----Search p�riodiques-----*/



#search #perio_a2z {

	margin-top: 0px;

	border: none;

}



#search #perio_a2z h3 span {

	background-color: none;

	margin-left: 10px;

	margin-top: 0px;

	padding-left: 0px;

	padding-right: 0px;

	position: relative;

}





/* -----------------------------------------------------*/

/*                       Categories                     */

/* -----------------------------------------------------*/





#categories {

	margin-top: 40px;

	position: relative;

}



#categories ul.search_tabs {

	right: 0px;

	margin-top: -20px;

	position: absolute;

}



#categories ul.search_tabs li {

	display: block;

	float: left;

	padding-top: 3px;

	padding-bottom: 3px;

	padding-left: 10px;

	padding-right: 10px;

	margin-left: 3px;

}



#categories ul.search_tabs li:hover {

	padding-top: 6px;

	padding-bottom: 5px;

	top: -5px;

	position: relative;

}



#categories ul.search_tabs li#current:hover {

	padding-top: 3px;

	padding-bottom: 3px;

	top: 0px;

}



#categories ul.search_tabs li a {

	text-decoration: none;

	color: #ffffff;

}



#categories h3 span {

	background-color: #FFFFFF;

	margin-left: 10px;

	margin-top: -10px;

	padding-left: 10px;

	padding-right: 10px;

	position: absolute;

}



#categories-container {

	padding-left: 40px;

	padding-top: 20px;

	padding-bottom: 20px;

	padding-right: 40px;

	margin-bottom: 15px;

}



#categories-container a {

	text-decoration: none;

}



#categories-container h2 {

	font-size: 13px;

	margin-top: 5px;

}



#categories-container h2 img {

	display: none;

}



#categories-container ul {

	margin-top: 2px;

	padding-bottom: 5px;

}



#categories-container li {

	display: inline;

}



#aut_see {

	margin-top: 10px;

}





/* -----------------------------------------------------*/

/*                    Localisations                     */

/* -----------------------------------------------------*/





#location {
	margin-top: 40px;

}



#location h3 span {

	background-color: #ffffff;

	padding-left: 10px;

	padding-right: 10px;

	margin-left: 10px;

	position: absolute;

	margin-top: -10px;

}



#location-container {

	padding-left: 15px;

	padding-bottom: 10px;

	padding-right: 15px;

	padding-top: 10px;

	margin-bottom: 15px;

}



#location-container table tr td a b {

	font-weight: normal;

	font-size: 1.166666em;

    color: #2d65dd;

}





/* -----------------------------------------------------*/

/*               Dernieres Acquisitions                 */

/* -----------------------------------------------------*/





#last_entries {

	margin-top: 30px;

	padding-left: 37px;

	padding-right: 15px;

	padding-bottom: 15px;

}



#last_entries h3 {

	margin-top: -10px;

	margin-bottom: 10px;

	margin-left: -27px;

}



#last_entries h3 span {

	background-color: #ffffff;

	padding-left: 10px;

	padding-right: 10px;

}



#last_entries .notice-child h3 {

	margin-top: 5px;

	margin-bottom: 0px;

	margin-left: 0px;

	background-color: inherit;

	margin-left: 0px;

}



#last_entries .notice-child h3 span {

	padding: 0px;

}



/* notices format Neuf*/

#last_entries .title_notCourte>h3,

#last_entries .title_notCourte>h3 span {

	margin: 0px;

	padding: 0px;

}



/* -----------------------------------------------------*/

/*                        Etageres                      */

/* -----------------------------------------------------*/





#etageres {

	margin-top: 40px;

}



#etagere-container {

	padding-left: 15px;

	padding-top: 15px;

	padding-bottom: 15px;

	padding-right: 15px;

	margin-bottom: 15px;

}



.etagere {

	margin-top: 15px;

}



#titre_etagere {

	background-color: #ffffff;

	padding-left: 10px;

	padding-right: 10px;

	margin-left: 10px;

	position: absolute;

	margin-top: -10px;

}



#etagere-container #etagere-titre h1 {

	margin: 0px;

	font-size: 15px;

}



#etagere-container #etagere-comment h2 {

	text-align: right;

	font-style: italic;

	font-size: 12px;

	margin: 0px;

}





/* -----------------------------------------------------*/

/*                        Footer                        */

/* -----------------------------------------------------*/





#footer {

	margin-top: 40px;

	margin-left: 0px;

	margin-bottom: 0px;

	padding: 5px;

	text-align: center;

	clear: both;

}





/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                                  Facettes                                  */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/





#facette {

	max-height: 200px;

	overflow-y: scroll;

}



#facette h3 {

	color: #FFFFFF;

	margin-left: -10px;

	padding-bottom: 5px;

	padding-left: 10px;

	padding-top: 5px;

}



#facette #facette_list {

	border-collapse: collapse;

}



#facette #facette_list th {

	padding-bottom: 2px;

	padding-left: 5px;

	padding-right: 5px;

	padding-top: 2px;

}



#facette #facette_list a {

	display: block;

	padding-bottom: 2px;

	padding-left: 5px;

	padding-right: 5px;

	padding-top: 2px;

}





/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                               Liens Sociaux                                */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/





table td div.addthis_toolbox {

	margin-bottom: 10px;

	margin-top: 10px;

}



a.addthis_button_facebook_like iframe {

	height: 20px !important;

	width: 60px !important;

}



a.addthis_button_tweet iframe {

	width: 80px !important;

}





/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                                  Infopages                                 */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/





/*--------page reglement--------*/





#reglement h1 {

	margin-bottom: 25px;

	margin-top: 0px;

}



#reglement h3 {

	text-decoration: underline;

	margin-top: 15px;

	margin-bottom: 5px;

	font-weight: normal;

}





/*--------page actualites--------*/





#actualites h1 {

	margin-bottom: 25px;

	margin-top: 0px;

}



#actualites .bloc_actu {

	margin-bottom: 10px;

	margin-top: 10px;

}



#actualites .bloc_actu h3 {

	margin-bottom: 10px;

	margin-top: 5px;

}



#actualites .bloc_actu table td {

	padding: 0px;

	text-align: justify

}



#actualites .bloc_actu table td.image {

	padding-left: 10px;

	text-align: justify

}



#actualites .bloc_actu table td.image img {

	max-width: 200px;

	max-height: 140px;

	width: expression(this.width > 200 ? "200px" : true);

	height: expression(this.height > 140 ? "140px" : true);

}





/*--------page horaires--------*/





#horaires h1 {

	margin-bottom: 5px;

	margin-top: 15px;

}







/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                                  Carroussel                                */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/





#infopage_carrousel h3 span {

	background-color: #FFFFFF;

	margin-left: 10px;

	margin-top: -10px;

	padding-left: 10px;

	padding-right: 10px;

	position: absolute;

}



#infopage_carrousel .bx-window {

	width: inherit !important;

}



#infopage_carrousel .bx-wrapper {

	width: inherit !important;

}



#infopage_carrousel ul {

	margin-top: 15px;

	margin-bottom: 15px;

}



#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 {

	height: 150px;

	background-repeat: no-repeat;

	background-image: url("../../images/no_image.jpg");

	display: block;

	text-indent: -9999px;

}



/*next button*/

.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 0px;

}



/*previous button*/

.bx-prev {

	position: absolute;

	z-index: 1000;

	width: 32px;

	height: 32px;

	top: 75px;

	left: 10px;

	background-image: url("../../images/prev.png");

	background-repeat: no-repeat;

	background-position: 0 0px;

}





/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                              Page Inscription                              */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/







#websubscribe h1 {

	font-size: 16px;

	margin-bottom: 5px;

}



#websubscribe #subs_form table td h4 {

	margin: 0px;

}



#websubscribe #subs_form table td h4 {

	margin: 0px;

}



#websubscribe #subs_form table td input.subsform {

	width: 195px;

	background-color: #ffffff;

}





/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                           Carroussel bulletin                              */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/





.carroussel_bulletin {

	text-align: center;

}



.carroussel_bulletin img {

	border: none;

}



.carroussel_bulletin .active a {

	color: #ffffff;

	cursor: pointer;

}



.carroussel_bulletin .current_bull_carroussel {

	font-weight: bold;

}





/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                         Balises HTML de base                               */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/





a {

	text-decoration: underline;

}



a:hover {

	text-decoration: none;

}



blockquote {

	margin-top: 5px;

	margin-bottom: 10px;

	margin-left: 0px;

	margin-right: 0px;

}



ul {

	margin-top: 0px;

	margin-bottom: 0px;

	margin-left: 0px;

	padding-left: 0px;

}



img {

	border: none;

}



.row {

	clear: both;

}



input[type=checkbox] {

	border: none;

}



input.bouton,

input.boutonrechercher {

	/*--CSS3--

	-webkit-text-shadow: 1px 1px 2px #000000;

	-moz-text-shadow: 1px 1px 2px #000000;

	text-shadow: 1px 1px 2px #000000;*/

}



input.imp_bouton {

	/*--CSS3--*/

	-webkit-text-shadow: 1px 1px 2px #000000;

	-moz-text-shadow: 1px 1px 2px #000000;

	text-shadow: 1px 1px 2px #000000;

	background-color: #A52727;

	color: #ffffff;

	font-size: 11px;

}



input,

select,

textarea {

	padding: 1px;

}





/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                                   Tableaux                                 */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/





table {

	border-collapse: separate;

	width: 100%;

	clear: both;

}



.exemplaires {

	border-collapse: separate;

}



th {

	text-align: left;

}



td {

	vertical-align: top;

	color: #A52727;



}





/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                  Mise en forme de la fiche emprunteur	                  */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/





#empr_onglet ul.empr_tabs {

	list-style: none;

	font-size: 14px;

}



ul.empr_subtabs {

	list-style: none;

	padding-left: 0px;

	padding-top: 20px;

}



ul.empr_subtabs li {

	display: inline-block;

	margin-bottom: 5px;

	margin-right: 5px;

	padding: 0.4em;

}



ul.empr_subtabs li a {

	text-decoration: none;

}



#fiche-empr,

#empr-all,

#empr-late,

#empr-old,

#empr-resa,

#empr-dsi,

#empr-sugg,

#empr-list,

#empr-dema {

	margin-top: 25px;

}



#list_cadre {

	border: none !important;

	padding-top: 15px !important;

	overflow: visible ! important;

	height: auto ! important;

}



#list_cadre img {

	vertical-align: bottom;

}



.listedescription {

	background-color: #ffffff;

	padding-top: 1px;

	padding-bottom: 1px;

	padding-left: 5px;

	padding-right: 5px;

	position: absolute;

	visibility: hidden;

	z-index: 2000;

}



#empr-list h3 {

	margin-top: -10px;

}



#empr-list #onglets_list {

	margin-top: 25px;

}



#onglets_list ul.list_tabs {

	margin-left: 0px;

}



.form_liste_lecture .form-contenu .row .colonne2 .row textarea {

	max-width: 290px;

}



.form_liste_lecture .row .right {

	margin-top: 15px;

	margin-bottom: 10px;

}





/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                               Notices affichage                            */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/





.bg-grey {

	padding-right: 0.2em;

	width: 150px;

	color: #ffffff;

}



#resultatrech_liste tbody tr td table,

#resultatrech_liste tbody {

	padding-top: 5px;

}



.notice-heada {

	font-size: 100%;

	font-weight: bold;

}



.notice-parent {

	margin-top: 5px;

	margin-bottom: 5px;

}



.notice-parent img {

	vertical-align: bottom;

	margin-right: 2px;

}



.parent {

	margin-bottom: 15px;

}



.parent h3 {

	font-size: 13px;

}



.notice-child {

	margin-left: 20px;

	text-align: justify;

	margin-bottom: 20px !important;

}



.notice-child table {

	margin-left: -2px;

}



.notice-child h3 {

	margin-top: 10px;

	font-size: 13px !important;

}



.notice-child table td div table tr td {

	padding-bottom: 3px;

	padding-left: 5px;

	padding-right: 5px;

}



.notice-child table td div table td a {

	text-decoration: underline;

}



.notice-child table.exemplaires td a {

	text-decoration: underline;

}



.vignetteimg {

	max-width: 140px;

	max-height: 200px;

	width: expression(this.width > 140 ? "140px" : true);

	height: expression(this.height > 200 ? "200px" : true);

}



.child {

	margin-left: 25px;

	padding-left: 4px;

	padding-right: 4px;

	text-align: justify;

	border-bottom-style: solid;

	border-bottom-width: 1px;

	border-bottom-color: #c0c0c0;

	border-left-style: solid;

	border-left-width: 1px;

	border-left-color: #c0c0c0;

	border-right-style: none;

	border-top-style: none;

}



.liste_bulletins {

	padding-left: 3px;

	padding-right: 3px;

}



.colonne_suite {

	float: left;

}

/* --- Responsive pour les téléphones --- */

@media only screen and (max-width: 768px) {

  /* ============================================
     CONTENEUR PRINCIPAL - DÉFILEMENT BIDIRECTIONNEL
     ============================================
     Problème initial : overflow-y était défini mais max-height limitait 
     la visibilité. Solution : on assure que le conteneur prend l'espace
     nécessaire tout en permettant le scroll vertical natif du body.
  */

  .notice-child {
    /* Suppression du max-height restrictif qui cachait le contenu */
    /* max-height: 80vh;  -- SUPPRIMÉ car causait le bug */
    
    /* Le conteneur s'étend naturellement pour tout afficher */
    height: auto;
    min-height: 100%;
    
    /* Scroll horizontal uniquement pour les tableaux larges */
    overflow-x: auto;
    overflow-y: visible; /* Laisse le body gérer le scroll vertical global */
    
    /* Layout de base */
    display: block;
    margin-left: 0 !important;
    padding: 12px; /* Augmenté pour meilleure lisibilité tactile */
    box-sizing: border-box;
    
    /* Défilement fluide pour l'axe X (horizontal) */
    scroll-behavior: smooth;
    
    /* Assure que le conteneur est visible dans le flux */
    position: relative;
    width: 100%;
  }



  /* ============================================
     TABLES - TRANSFORMATION EN CARTES MOBILES
     ============================================
     Conversion des lignes de tableau en blocs empilés
     pour éviter le débordement horizontal excessif
  */

  .notice-child table {
    width: 100%;
    border-collapse: collapse;
    /* Suppression de display:block qui causait des problèmes de layout */
    display: table;
    background: #fff;
    border-radius: 8px; /* Légèrement augmenté */
    box-shadow: 0 2px 8px rgba(0,0,0,0.12); /* Ombre plus douce */
    margin-bottom: 16px; /* Espace entre les tables */
  }



  /* Chaque ligne devient une "carte" sur mobile */
  .notice-child table tbody tr {
    display: flex; /* Flexbox pour meilleur contrôle */
    flex-direction: column; /* Empilement vertical */
    margin-bottom: 12px;
    border-bottom: 2px solid #e0e0e0; /* Séparation plus visible */
    padding-bottom: 12px;
    background: #fafafa; /* Fond léger pour distinguer les sections */
    border-radius: 6px;
    padding: 10px;
  }



  /* Cellules en mode bloc complet */
  .notice-child table td {
    display: block;
    width: 100%;
    text-align: left !important;
    padding: 8px 0; /* Plus d'espace tactile */
    word-break: break-word;
    line-height: 1.5; /* Meilleure lisibilité */
  }



  /* ============================================
     MISE EN FORME DES CHAMPS (ÉTIQUETTE + VALEUR)
     ============================================
     Structure : Label en haut (gris foncé), valeur en bas (blanc)
  */

  /* Cellule d'étiquette (première colonne) */
  .notice-child table td.align_right.bg-grey,
  .notice-child table tr td:first-child {
    font-weight: 600; /* Semi-bold pour meilleure hiérarchie */
    color: #ffffff;
    background: #555555; /* Gris légèrement adouci */
    padding: 10px 12px;
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
    font-size: 13px;
    text-transform: uppercase; /* Style professionnel */
    letter-spacing: 0.5px;
  }



  /* Cellule de valeur (deuxième colonne) */
  .notice-child table td.public_line_value,
  .notice-child table tr td:last-child {
    background: #ffffff;
    padding: 12px;
    border-radius: 0 0 6px 6px;
    margin-top: 0;
    color: #333333;
    border: 1px solid #e0e0e0;
    border-top: none;
    font-size: 14px;
  }



  /* ============================================
     IMAGE DE COUVERTURE (VIGNETTE)
     ============================================
     Centrée et responsive
  */

  .vignetteimg {
    display: block;
    margin: 16px auto; /* Plus d'espace autour */
    max-width: 150px; /* Légèrement plus grande */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombre subtile */
  }



  /* ============================================
     TITRES (H3)
     ============================================
     Style épuré et centré
  */

  .notice-child h3 {
    font-size: 16px !important; /* Légèrement plus grand */
    text-align: center;
    margin: 20px 0 12px 0; /* Plus d'espace avant */
    color: #222;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
  }



  /* ============================================
     BOUTON DE RÉSERVATION - CRITICAL FIX
     ============================================
     Assure que le bouton est visible et cliquable
  */

  #bt_resa {
    display: block; /* Prend toute la largeur */
    width: 90%;
    margin: 20px auto; /* Centré avec espace */
    padding: 14px 20px;
    background: #007bff; /* Bleu standard */
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 4px 6px rgba(0,123,255,0.3);
    transition: all 0.3s ease;
  }

  #bt_resa:active {
    background: #0056b3; /* Feedback tactile */
    transform: translateY(2px);
  }



  /* ============================================
     TABLE DES EXEMPLAIRES - OPTIMISATION MOBILE
     ============================================
     Permet le scroll horizontal si nécessaire tout en gardant 
     la structure visible
  */

  table.exemplaires {
    display: block; /* Permet overflow-x */
    overflow-x: auto; /* Scroll horizontal si tableau trop large */
    white-space: nowrap; /* Empêche le retour à la ligne forcé */
    -webkit-overflow-scrolling: touch; /* Scroll fluide iOS */
  }

  table.exemplaires tbody {
    display: table; /* Maintient la structure tableau */
    width: 100%;
  }

  table.exemplaires th,
  table.exemplaires td {
    padding: 10px 8px; /* Plus d'espace tactile */
    font-size: 13px;
    white-space: normal; /* Permet retour à ligne dans cellules */
  }



  /* ============================================
     ONGLETS (Public / ISBD)
     ============================================
     Navigation par onglets optimisée tactile
  */

  .onglets_isbd_public {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0 0 16px 0;
    list-style: none;
    border-bottom: 2px solid #ddd;
  }

  .onglets_isbd_public li {
    flex: 1; /* Onglets égaux */
    text-align: center;
  }

  .onglets_isbd_public a {
    display: block;
    padding: 12px 8px;
    text-decoration: none;
    color: #666;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
  }

  .isbd_public_active a {
    color: #007bff;
    border-bottom-color: #007bff;
    background: rgba(0,123,255,0.05);
  }



  /* ============================================
     SCROLLBARS PERSONNALISÉES
     ============================================
     Style cohérent pour webkit (Chrome, Safari)
  */

  .notice-child::-webkit-scrollbar,
  table.exemplaires::-webkit-scrollbar {
    width: 8px;   /* Vertical */
    height: 8px;  /* Horizontal */
  }

  .notice-child::-webkit-scrollbar-thumb,
  table.exemplaires::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  .notice-child::-webkit-scrollbar-thumb:hover,
  table.exemplaires::-webkit-scrollbar-thumb:hover {
    background-color: #999;
  }

  .notice-child::-webkit-scrollbar-track,
  table.exemplaires::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 4px;
  }



  /* ============================================
     LIENS ET TEXTE
     ============================================
     Accessibilité tactile améliorée
  */

  .notice-child a {
    color: #0066cc;
    text-decoration: none;
    padding: 2px 0; /* Zone de clic plus grande */
    display: inline-block;
  }

  .notice-child a:hover,
  .notice-child a:active {
    text-decoration: underline;
    color: #004499;
  }

  /* Mots-clés avec espacement */
  .public_keywords a {
    display: inline-block;
    margin: 4px 4px 4px 0;
    padding: 4px 8px;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 12px;
  }

}

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                       Onglets de l'affichage public/ISBD                   */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/



ul.onglets_isbd_public {

	padding-bottom: 20px;

}



ul.onglets_isbd_public li {

	display: block;

	float: left;

	border-right: 1px solid #000000;

}



ul.onglets_isbd_public li:last-child,

ul.onglets_isbd_public li.onglet_basket {

	border-right: none;

}



ul.onglets_isbd_public li.isbd_public_active {

	font-weight: bold;

}



ul.onglets_isbd_public a {

	text-decoration: none;

	padding: 4px;

	cursor: pointer;

	height: 15px;

}





/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                                   Pop-up                                   */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/





#att #serialcirc_ask_copy {

	z-index: 100;

}



#titre-popup {

	font-size: 16px;

	font-weight: bold;

	margin-top: 10px;

	margin-bottom: 10px;

	margin-left: 10px;

}



form#f {

	margin-left: 10px;

}



.echelle_avis {

	padding: 7px;

}



.alerte {

	color: #ff0000;

	font-size: 14px;

}





/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                            CLASSES GENERIQUES                              */

/*                 divers pour les affichages simples de texte                */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/





.right,

.right-50,

.right-15,

.right-85 {

	float: right;

}



.right-50 {

	width: 50%;

}



.right-15 {

	width: 15%;

}



.right-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;

}



.left,

.left-50,

.left-15 {

	float: left;

}



.left-50 {

	width: 50%;

}



.left-15 {

	width: 15%;

}



.left-85 {

	width: 85%;

}



.spacer {

	clear: both;

	visibility: hidden;

	display: none;

	margin-bottom: -10px;

	margin-top: -10px;

}





/* Bannettes */

#bannette {

	padding: 5px;

}



.bannette-container {

	margin-bottom: 20px;

}



#etagere-notice-list {

	margin-left: 22px;

	margin-bottom: 5px;

	margin-top: 5px;

}



.bannette-titre h1 {

	margin: 0px;

	font-size: 13px;

	font-weight: bold;

}



.bannette-titre h1 a {

	margin-right: 5px;

}



.text_search0 {

	background-color: yellow;

	text-decoration: underline;

}



.text_search1 {

	background-color: #dd9797;

	text-decoration: underline;

}



.text_search2 {

	background-color: #ddb397;

	text-decoration: underline;

}



.text_search3 {

	background-color: #cd97dd;

	text-decoration: underline;

}



.text_search4 {

	background-color: #97c2dd;

	text-decoration: underline;

}



.text_search5 {

	background-color: #97ddae;

	text-decoration: underline;

}



.etiq_champ {

	font-weight: bold;

}



/*Suggestion Multiple*/



.tab_sug {

	table-layout: fixed;

}



.tab_sug th,

.tab_sug td {

	border: 1px solid #CCCCCC;

	border-collapse: collapse;

	overflow: hidden;

	vertical-align: center;

	text-align: center;

	width: 100%;

}



.tab_sug input,

.tab_sug textarea {

	width: 95%;

	height: 100%;

}



.tab_sug select {

	width: 95%;

}



.erreur_saisie {

	background-color: #ff0000;

}



.categmouseout {

	border: solid 2px #555555;

	position: absolute;

	visibility: hidden;

	background-color: #ffffff;

	z-index: 2000;

}



.categmouseover {

	border: solid 2px #555555;

	position: absolute;

	visibility: visible;

	background-color: #ffffff;

	z-index: 2000;

	margin-top: 2px;

}







@media screen and (min-width: 540px) and (max-width: 740px) {



	   #main {

    	width: auto !important;

    	float: none !important;

    	margin-left: 95px !important;

    	padding-right: 10px !important;

    }



	#main .bloc img {

        max-width: 900px;

        height: auto;

        border-radius: 8px;

        float: right;

        margin-left: -100px; /* espace entre l'image et le texte */

        margin-bottom: -20px;

        z-index: 1000;

    }

	#search form input.text_query {

	width: 220px;

	height: 30px;   /* Hauteur augmentée */

    padding: 2px;  /* Espacement interne du texte */

    font-size: 16px; /* Taille du texte */

    border-radius: 8px; /* Pour les bords arrondis */

}

}

@media screen and (min-width: 768px) and (max-width: 1024px) {



	   #main {

    	width: auto !important;

    	float: none !important;

    	margin-left: 95px !important;

    	padding-right: 10px !important;

    }

	#search form input.text_query {

	width: 400px;

	height: 30px;   /* Hauteur augmentée */

    padding: 2px;  /* Espacement interne du texte */

    font-size: 16px; /* Taille du texte */

    border-radius: 8px; /* Pour les bords arrondis */

}

	#main .bloc img {

        max-width: 900px;

        height: auto;

        border-radius: 8px;

        float: right;

        margin-left: -100px; /* espace entre l'image et le texte */

        margin-bottom: -20px;

        z-index: 1000;

    }



}



@media screen and (min-width: 800px) and (max-width: 1280px) {



	   #main {

    	width: auto !important;

    	float: none !important;

    	margin-left: 190px !important;

    	padding-right: 10px !important;

    }

	#main .bloc img {

        max-width: 900px;

        height: auto;

        border-radius: 8px;

        float: right;

        margin-left: 260px; /* espace entre l'image et le texte */

        margin-bottom: -20px;

        z-index: 1000;

    }

}

@media screen and (min-width: 600px) and (max-width: 1024px) {



	   #main {

    	width: auto !important;

    	float: none !important;

    	margin-left: 130px !important;

    	padding-right: 10px !important;

    }

}