@media screen and (max-device-width: 1024px) {
    body * {
        box-sizing: border-box;
        white-space: normal !important;
    }


    /** FORCED RULES **/
    iframe, 
    .ui-dialog {
        width: 100% !important;
    }


    .liste_vignettes dl * {
        width: 100% !important;
        clear: both;
        padding: 0px !important;
        margin: 0px !important;
        float: left !important;
        text-align: left !important;
    }

    
    #my_vid {
        width: 100% !important;
        height: auto !important;
    }


    #site_web_content {
        width: 90% !important;
        max-width: 90% !important;
        min-width: 90% !important;
        margin: 5% !important;
    }


    #banniere,
    #header {
        height: auto !important;
        width: 100% !important;
    }

    
    .boite[class*="menu_horizontal"] .contenu, 
    .boite[class*="menu_horizontal"] .content,
    #menu_horizontal ,
    #header ,
    #header > * {
        overflow: visible !important;
        width: 100% !important;
    }


    #header > * {
        position: inherit !important;
    }


    #menu_horizontal,
    #header div[class*="menu_horizontal"] {
        position: relative !important;
    }


    div[class*="menu_horizontal"].show_menu > ul ul,
    div[class*="menu_horizontal"].show_menu > ul li {
        min-width: 0 !important;
    }


    div[class*="menu_horizontal"] li img {
        display: none !important;
    }



    div[class*="menu_horizontal"]:not(.show_menu) > ul > li ,
    div[class*="menu_horizontal"]:not(.show_menu) > ul > li > ul ,
    div[class*="menu_horizontal"]:not(.show_menu) > ul > li > ul > li {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    div[class*="menu_horizontal"].show_menu > ul li {
        margin: auto !important
    }


    div[class*="menu_horizontal"] > ul > li {
        display: block !important;
        height: auto !important;
    }



    #header > *,
    #menu_horizontal,
    #header div[class*="menu_horizontal"] ,
    div[class*="menu_horizontal"] * {
        display: block !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        min-height: none !important;
    }


    #col_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }


    #col_wrapper > *  {
        margin: 1% 0 !important;
        width: 100% !important;
    }


    .footer,
    .layout-division,
    div[id^="col"][id*="Inner"] {
        padding: 0 !important;
        margin: 0 !important;
    }


    #colMilieuInner .contenuInner ,    
    #colMilieuInner .contenuInner > *,
    .siteWeb,
    .footer,
    #site_web_content > :not(.menu_horizontal):not(#col_wrapper),
    #site_web_wrapper,
    .layout-division ,
    #col_wrapper .boite > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }


    #col_wrapper .boite > div {
	overflow: hidden;
    }


    #colGaucheInner, 
    #colDroiteInner, 
    #colMilieuInner {
        min-height: auto !important;
    }


    /** DEFAULT RULES **/

    #suggestion input[type="password"],
    #suggestion input[type="text"],
    #suggestion input[type="url"],
    #suggestion textarea {
        width: 100%;
    }

    .siteWeb div#col_wrapper,
    #abonne_edit, 
    #abonne_edit > *, 
    #abonne_edit fieldset, 
    #abonne_edit fieldset td,
    #suggestion,
    #suggestion > *, 
    #suggestion fieldset, 
    #suggestion fieldset td,
    .filtre_recherche,
    .filtre_recherche > *,
    #colMilieuInner .contenuInner ,    
    #colMilieuInner .contenuInner > *,
    #colContenuInner .boiteMilieu,
    .resultat_recherche,
    .resultat_recherche > div ,
    .resultat_recherche .notice_wrapper,
    #colMilieuInner > *,
    .siteWeb,
    .footer,
    #site_web_content,
    #site_web_wrapper,
    #header > *,
    #header,
    #col_wrapper .boite,
    .layout-division,
    .contenu,
    .content,
    .title,
    .titre ,
    .col_gauche,
    .col_droite {
        float: left;
        max-height: auto;
        min-height: 0;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        overflow: hidden;
    }


    #site_web_content > *,
    .siteWeb div#col_wrapper,
    #abonne_edit > *,
    #abonne_edit fieldset, 
    #abonne_edit fieldset td,
    #suggestion > *,
    #suggestion fieldset, 
    #suggestion fieldset td,
    .resultat_recherche,
    .siteWeb,
    .footer,
    #site_web_wrapper,
    #header,
    #header > *,
    .contenu,
    .content,
    .title,
    .titre,
    #colMilieuInner,
    #colMilieuInner .contenuInner > * ,
    .resultat_recherche > div,
    .filtre_recherche,
    #col_wrapper .boite.conteneur_deux_colonnes {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        clear: both;
    }


    #colMilieuInner .contenuInner ,    
    #col_wrapper .col_gauche .boite,
    #col_wrapper .col_droite .boite {
        width: 98%;
        max-width: 98%;
        min-width: 98%;
    }



    #abonne_edit > *,
    #suggestion > *, 
    .filtre_recherche > *,
    .resultat_recherche .notice_wrapper,
    #col_wrapper .boite,
    #col_wrapper .col_gauche,
    #col_wrapper .col_droite {
        width: 49%;
        max-width: 49%;
        min-width: 49%;
        clear: none;
    }


    #abonne_edit > *:nth-of-type(even),
    .filtre_recherche > *:nth-of-type(even),
    .resultat_recherche .notice_wrapper:nth-of-type(even),
    #col_wrapper .boite:nth-of-type(even),
    .col_droite {
        float: right;
        clear: right;
    }


    #abonne_edit > *:nth-of-type(odd),
    #suggestion > *:nth-of-type(odd), 
    .filtre_recherche > *:nth-of-type(odd),
    .resultat_recherche .notice_wrapper:nth-of-type(odd),
    #col_wrapper .boite:nth-of-type(odd) {
        clear: left;
    }


    .colFlottant.layout-division {
        display: none;
    }


    #header > * ,
    #site_web_content > * {
        float: left;
    }


    .back_to_phone {
        right: 0;
        width: auto;
        padding: 5px;
        z-index: 1;
    }


    .titre {
        height: auto;
        max-height: none;
        min-height: none;
    }


    .calendar .month_list > *{
        display:inline-block;
    }


    .recherche_avancee #site_web_wrapper form.recherche_avancee select[name*="operateur"] {
        width: 50px !important;
        margin-top: 10px;
    }


    .recherche_simple .boiteMilieu,
    .recherche_viewnotice #col_wrapper #colMilieuInner .contenuInner > * {
        width: 100%;
        float: left;
        clear: both;
    }


    div.onglets_titre h2{
        white-space: nowrap;
    }


    .onglets_titre > div > div {
        float: left;
        clear: both;
        width: 100% !important;
    }


    table {
	display:block;
	overflow-x: auto;
    }
    
    table.exemplaires {
        width: 100%;
        display: table;
        overflow: hidden;
        float: left;
    }


    .nothumbnail {
        overflow: hidden;
    }


    table.photo_onglet {
        width: 100%;
    }


    table.photo_onglet * {
        display: inline-block;
        float: left;
        width: 100%;
    }


    table.photo_onglet td.photo_onglet {
        width: 50%;
    }


    div[id*="set"] {
        float: left;
        width: 100%;
    }


    .liste_vignettes dl > * {
        line-height: 1.5em;
    }

    .liste_vignettes dl dt {
        font-weight: 800;
    }


    table.soustitre th:first-child, 
    table.panier_notices td:first-child {
        width: auto;
    }
    

    /** MENU **/
    .boite.menu_vertical.toggle_menu .menu_wrapper {
        position: relative;
    }

    .boite.menu_vertical.toggle_menu .menu_wrapper > ul {
        height: 0;
        overflow: hidden;
        position: absolute;
    }

    .boite.menu_vertical.toggle_menu.show_menu .menu_wrapper > ul {
        height: auto;
    }

    div:not(.show_menu)[class*="menu_horizontal"],
    #menu_horizontal {
        background: none;
        height: auto;
        padding: 0;
        margin: 0;
    }

    
    div[class*="menu_horizontal"] * {
        transition: none;
    }


    div[class*="menu_horizontal"] > ul {
    }


    div[class*="menu_horizontal"] > ul > li > a {
        text-transform: uppercase;
    }


    div[class*="menu_horizontal"] > ul {
        display: block;
        position: absolute;
        height: 0;
        visibility: hidden;
    }


    div[class*="menu_horizontal"].show_menu > ul ul,
    div[class*="menu_horizontal"].show_menu > ul li,
    #menu_horizontal.show_menu > ul ul,
    #menu_horizontal.show_menu > ul li {
        display: block;
        position: relative;
        min-width: auto;
        width: auto;
        float: left;
        clear: both;
        text-align: left;
        left: 0;
        top: 0;
        border: none;
    }


    #menu_horizontal.show_menu > ul > li,
    div[class*="menu_horizontal"].show_menu > ul > li {
        float: left;
        width: 100%;
        border-bottom: 1px solid #efefef;
    }


    #menu_horizontal.show_menu > ul > li:last-of-type,
    div[class*="menu_horizontal"].show_menu > ul > li:last-of-type {
        border: none;
    }


    div[class*="menu_horizontal"] > ul ul,
    div[class*="menu_horizontal"] > ul li,
    div[class*="menu_horizontal"] > ul li a,
    div[class*="menu_horizontal"] > ul li ul li a,
    #menu_horizontal > ul ul,
    #menu_horizontal > ul li,
    #menu_horizontal > ul li a ,
    #menu_horizontal > ul li ul li a {
        color: #efefef;
    }


    div[class*="menu_horizontal"].show_menu > ul ul,
    div[class*="menu_horizontal"].show_menu > ul li,
    div[class*="menu_horizontal"].show_menu > ul li a,
    #menu_horizontal.show_menu > ul ul,
    #menu_horizontal.show_menu > ul li,
    #menu_horizontal.show_menu > ul li a {
        background: none;   
        height: auto;
    }

    
    div[class*="menu_horizontal"].show_menu > ul li {
        line-height: 2em;
    }


    #menu_horizontal ul li ul {
        border: none;
    }

    
    #menu_horizontal,
    #header div[class*="menu_horizontal"] ,
    div[class*="menu_horizontal"].show_menu > ul,
    #menu_horizontal.show_menu > ul ,
    div:not(.show_menu)[class*="menu_horizontal"] li.selected_profil > a[href*="/"],
    #menu_horizontal:not(.show_menu) li.selected_profil > a[href*="/"] ,
    div:not(.boite)[class*="menu_horizontal"]:after {
        background-color: #333;
    }


    div[class*="menu_horizontal"].show_menu > ul,
    #menu_horizontal.show_menu > ul{
        visibility: visible;
        width: auto;
        height: auto;
        font-size: 1em;
        padding: 0 2%;
        margin: 3em 0 0 0;
        left: 0;
        z-index: 101;
    }


    div[class*="menu_horizontal"] li.selected_profil > a[href*="/"]:only-child {
        visibility: visible;
    }


    div:not(.show_menu)[class*="menu_horizontal"] li.selected_profil > a[href*="/"]:only-child,
    #menu_horizontal:not(.show_menu) li.selected_profil > a[href*="/"]:only-child{
        float: left;
        line-height: 3em;
        margin: 0 0 0 3em;
        padding: 0 0.5em;
    }


    div[class*="menu_horizontal"].show_menu li.selected_profil > a[href*="/"]:only-child,
    #menu_horizontal.show_menu li.selected_profil > a[href*="/"]:only-child {
        border-left: 5px solid #00C000;
        margin-left: -10px;
        padding-left: 5px;
    }


    div:not(.boite)[class*="menu_horizontal"]:after {
        content: '';
        height: 3em;
        width: 3em;
        background: #333 url(../images/buttons/menu.png) no-repeat center center / 2em;
        background-size: 32px 32px;
        float: left;
        cursor: pointer;
    }


    div:not(.boite)[class*="menu_horizontal"].show_menu:after {
        background: #333 url(../images/buttons/close_menu.png) no-repeat center center / 2em;
    }


    #menu_horizontal a {
        background: none;
    }


    #open_accessibility {
        z-index: 1;
    }

    
    /** WIDGET **/

    #colMilieuInner .contenuInner,
    #col_wrapper .boite {
        margin: 0;
    }


    /** ADVANCED SEARCH **/
    .recherche_avancee #site_web_wrapper form.recherche_avancee div, 
    .recherche_avancee #site_web_wrapper form.recherche_avancee table,
    .recherche_avancee #site_web_wrapper form.recherche_avancee tr,
    .recherche_avancee #site_web_wrapper form.recherche_avancee td,
    .recherche_avancee #site_web_wrapper form.recherche_avancee select,
    .recherche_avancee #site_web_wrapper form.recherche_avancee input {
        width: 100% !important;
        clear: both;
        float: left;
    }


    /** SEARCH RESULT **/

    .facette_outer {
        margin: 10px 0 !important;
        padding: 10px 0 !important;
	position: relative;
    }


    /** RECORD **/
    
    table.exemplaires tr {
        font-size: 1em;
        line-height: 1.5em;
        height: auto;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 2.5em;
        white-space: normal !important;
        text-align: left !important;
        width: 25% !important;
        display: inline-block !important;
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #333 !important;
    }


    table.exemplaires tr:odd {
        clear: left;
    }


    table.exemplaires tr > * {
        display: block;
        width: 100% !important;
        max-width: none !important;
        padding: 0 1%;
        margin: 1% 0;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden;
        font-size: 1em;
        text-align: left !important;
        line-height: 1.5em;
        height: 1.5em;  
    }


    table.exemplaires tr > th {
        text-align: right !important;
    }


    table.exemplaires tr .num {

    }


    #dialog_reserver {
        padding: 0 !important;
    }


    .recherche_viewnotice .boiteMilieu .blocs_notice .notice_bloc {
        max-width: 100% !important;
    }


    .recherche_viewnotice .boiteMilieu .contenuInner > * ,
    .recherche_viewnotice .boiteMilieu .blocs_notice > * {
        float: left;
        clear: both;
        width: 100%;
        min-width: 100%;
        max-width: 100;
        margin: 0 auto;
        padding: 0;
        position: inherit;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    } 


    /** LEFT COL COLLAPSED **/

    #col_wrapper .colGauche .boite {
        width: 49% !important;
        min-width: 0 !important;
        max-width: auto !important;
    }


    .facette_outer > div,
    #col_wrapper .colGauche .boite .contenu {
        display: none !important;
    }


    .facette_outer:before,
    #col_wrapper .colGauche .boite:before {
        content: '';
        display: block;
        height: 2em;
        width: 40px;
        background-image: url(../images/buttons/down-chevron.png);
        background-position: center center;
        background-repeat: no-repeat;
	position: absolute;
	top: 1ex;
	right: 0;
    }


    .facette_outer.show_content:before,
    #col_wrapper .colGauche .show_content:before {
        background-image: url(../images/buttons/up-chevron.png);
    }

    
    .facette_outer.show_content > div ,
    #col_wrapper .colGauche .show_content .contenu {
        display: block !important;
    }

    /*responsive tableaux compte lecteur*/

    /*démentellement du tableau et centrage des textes*/
    #borrower_loans tbody, table.reservations tbody, .tablesorter-default tbody {
        display: grid;
        text-align:center;
    }

    /* transformation des colonnes du tableau en lignes*/
    #borrower_loans tbody tr, table.reservations tbody tr, .tablesorter-default tbody tr {
        width: auto;
        display: inline-grid;
    }

    /*centrer le nom de l'auteur dans liste réservation*/
    table.reservations td:nth-child(5) {
        text-align: center;
    }

    /*centrer les images dans les fiches de prêts et réservations*/
    #borrower_loans tbody img, table.reservations tbody img, #borrower_loans tbody .nothumbnail_wrapper, table.reservations tbody .nothumbnail_wrapper {
        width: 50% !important;
        margin: 0 auto;
    }

    /* désactive la règle ci dessus sur l'image de désinscription*/
    table.reservations tbody a img {
        width:auto!important;
    }

    /*masquer les entêtes de tableaux*/
    .tablesorter-headerRow {
        display: none;
    }

    /*centrer nom de l'emprunteur et réservataire*/
    table.loans td:first-child, table.reservations td:first-child {
        width: auto;
    }
}



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

    #col_wrapper .colGauche .boite {
        width: 100% !important;
    }


    table.exemplaires tr {
        width: 50% !important;
    }
    

    #abonne_edit, 
    #abonne_edit > *, 
    #abonne_edit fieldset, 
    #abonne_edit fieldset td,
    #suggestion, 
    #suggestion > *, 
    #suggestion fieldset, 
    #suggestion fieldset td,
    .filtre_recherche,
    .filtre_recherche > *,
    .resultat_recherche,
    .resultat_recherche > div ,
    .resultat_recherche .notice_wrapper,
    #colMilieuInner > *,
    .siteWeb,
    .footer,
    #site_web_content,
    #site_web_wrapper,
    #header > *,
    #header,
    .contenu,
    .content,
    .title,
    .titre ,
    #col_wrapper .col_gauche,
    #col_wrapper .col_droite ,
    #col_wrapper .boite {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }
}