@import "polices/polices.css";
@import "mosaique.css";

/* ############# Début - taille des padding des encarts de base ############## */


/* masquer/afficher encarts selon instances GG 16/06/2022 */

.visible-musee,
.visible-catalogue,
.visible-pad,
.visible-edutheque,
.visible-metiers {
    display: none;
}

.hide-sm,
.hide-md {
    display: none;
}

@media (min-width:992px) {
    .hide-sm {
        display: inline;
    }
}

@media (min-width:1170px) {
    .hide-md {
        display: inline;
    }
}


/* fin : masquer/afficher encarts selon instances GG 16/06/2022 */

.tablink:focus,
.connectBox {
    z-index: 999999999;
}

.panel-front,
.panel-selection {
    border: none;
    /* padding: 7px 7px 7px 30px; */
}


/* 	#portal .panel-body {
	padding-top: 5px;
	} */

.edutheque .panel-front,
.panel-selection {
    border: none;
    padding: 0;
}

.edutheque #portal .panel-body {
    padding-top: 0;
}


/* ############# Fin - taille des padding des encarts de base ############### */


/* ############# Titre à côté de la Barre de recherche  ###############*/

#scenario-selected-label {
    margin-right: 5px !important;
    font-size: 20px !important;
}


/* ############# Fin Titre à côté de la Barre de recherche  ###############*/


/* ##################### Début - Niveau de titre ############################ */


/*
h1, span, h2, h3, h4, p, a, li, td{
    color:#001b3b;
}
*/


/* ############# Barre de recherche cachée sur les pages de contenus; sauf sur la home ###############*/

.accueil-modele #search-panel {
    display: inherit;
}

.page-contenu #search-panel,
.incontournable-modele #search-panel,
.mosaique-modele #search-panel,
.content-modele #search-panel,
.listing-modele #search-panel,
.biographie-modele #search-panel,
.content-oe-modele #search-panel,
.dossier-oe-modele #search-panel,
.thematique-modele #search-panel,
.parcours-modele #search-panel,
.content-catalogue #search-panel,
.archives-modele #search-panel,
.bibliographie-modele #search-panel,
.exposition-modele #search-panel,
.histoireinstru-modele #search-panel,
.focus #search-panel,
.facteur-modele #search-panel {
    display: none;
}


/* ##################### Début - Niveau de titre ############################ */

#portal h1 {
    /* 30 pixel */
    font-size: 2.143rem;
    text-transform: uppercase;
    font-weight: 400;
}

#page h1.titre-instance,
#page h1.titre-instance a,
#page h1.titre-instance span {
    font-size: 2.143rem;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    text-indent: 0;
    width: auto;
    text-align: left;
    color: #001b3b;
}

#page h1.titre-instance {
    margin-top: 1rem;
    margin-bottom: 1rem;
}


/* ##################### Fin - Niveau de titre ############################## */


/* ##################### Début - Généralités des balises #################### */
/* gg 18/08/2022 modifs taille <p> edutheque + soulignement des liens */
.edutheque p,
.edutheque li,
.musee p,
.musee li {
    font-size: 1rem;
}
/* gg 30/08/2022 et 06/09/2022 : listes ul li dans les contenus texte */
.page-2021 #portal ul {
    margin-bottom: 1rem;
}
#portal .only-content ul,
#portal .only-content li {
    list-style-type:disc;
    /* list-style-position: inside; */
	margin-left: .45rem;
}
#portal .rsSlide ul,
#portal .rsSlide li,
#portal .rs-staticList ul,
#portal .rs-staticList li{
    list-style-type:none;
}
/* fin gg 30/08/2022 et 06/09/2022 : listes ul li dans les contenus texte */

.musee a {
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    color: inherit;
}
.edutheque p a:not(.btn),
.musee p a:not(.btn) {
    text-decoration: underline;
}
/* fin : gg 18/08/2022 modifs taille <p> edutheque + soulignement des liens */

em,
i {
    /* - généralité sur les em en italique*/
    font-style: italic;
    font-weight: inherit;
}

blockquote {
    margin: 0;/
    border: 0;/
    margin-bottom: 12px;
    font-style: italic;
}

cite {
    font-weight: inherit;
}

strong,
b {
    /* - généralité sur les strong et bold en italique*/
    /* ddenocq 20161020 - le bold est forcé par l'utilisation de la police bold - pour Chrome MacOS */
    font-family: "SourceSansPro";
    font-weight: bold;
}

sup {
    vertical-align: middle;
    font-family: 'SourceSansPro', sans-serif!important;
	font-size: 75%!important;
}


/* ddenocq 20160512 - suppression de la bordure grise (changement de charte (?))*/


/* ccecconi 20160609 - suppression ci-dessous de la bordure grise pour content-modele*/

figure img {
    border: 10px solid #e4e4e4;
    margin-bottom: 10px;
}
/* gg 18/08/2022 et 29/08/2022 : correction légende d'images flottante sur le nouveau modèle 2022 */
.page-2021-1colonne figure[style="float: right;"],
.page-2021-2colonnes figure[style="float: right;"]{
    margin-left: .5rem;
}
.page-2021-1colonne figure[style="float: left;"],
.page-2021-2colonnes figure[style="float: left;"]{
    margin-right: .5rem;
}
.page-2021-1colonne figure[style*="float"] figcaption,
.page-2021-2colonnes figure[style*="float"] figcaption{
    max-width: 300px;
}
/* gg 18/08/2022 et 29/08/2022 : correction légende d'images flottante sur le nouveau modèle 2022 */

/* guillaume 07/2021 - en attendant la suppression partout de la bordure grise (changement de charte) */

.page-2021 figure img,
.accueil-metiers figure img {
    border: 0;
    margin: 0;
    margin-bottom: 0;
}

figcaption {
    font-size: .825rem;
    font-weight: normal;
    font-style: italic;
    color: #808080;
    padding: 0;
    margin-bottom: 5px;
}

a {
    /* Avoir toujours la main quand lien */
    cursor: pointer;
}
/* gg 10/08/2022 mise à niveau des liens de téléchargement */
a:not(.btn).download-link{
    text-decoration:underline;
}
.btn.lien-download:before,
.btn.download-link:before {
    content: url(/ui/skins/CIMU/images/icon-download.svg);
    margin-right: .5rem;
	width: 1rem;
	height: 1rem;
}
.edutheque .btn.btn-default.lien-download:before,
.edutheque .btn.btn-default.download-link:before {
    content: url(/ui/skins/CIMU/images/icon-download-blanc.svg);
    margin-right: .5rem;
	width: 1rem;
	height: 1rem;
}
a:not(.btn).lien-download:before,
a:not(.btn).download-link:before {
    display: none;
}
a:not(.btn).lien-download:after,
a:not(.btn).download-link:after {
    content: url(/ui/skins/CIMU/images/icon-download.svg);
    margin-right: .25rem;
    margin-left: .25rem;
	width: 1rem;
	height: 1rem;
}
/* fin : gg 10/08/2022 mise à niveau des liens de téléchargement */

h1 sup,
h2 sup,
h3 sup,
h4 sup,
h5 sup {
    /* Mettre en minuscule le e de XXe par exemple */
    text-transform: lowercase;
    font-family: "SourceSansPro";
}

.nav-tabs>li {
    background-color: transparent;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    border-bottom: none !important;
    background-color: #FAF8F9;
    color: #001b3b !important;
    border: 1px solid;
    border-radius: .5rem .5rem 0 0;
}


/* ########################## Fin - Généralités des balises ######################################*/


/* ########################### Boutons a #########################################################*/


/* bouton retour haut page PP */

.retourTop {
    display: none;
}

#backtotop {
    background: url(https://edutheque.philharmoniedeparis.fr/ui/skins/CIMU/images/backtotop.png) no-repeat center center;
    background-size: 50px;
    border: 0;
    bottom: 20px;
    cursor: pointer;
    display: none;
    height: 70px;
    position: fixed;
    right: 25px;
    text-indent: -9999px;
    width: 70px;
    z-index: 300;
}

#backtotop:hover {
    opacity: 0.8;
}

#backtotop:focus {
    opacity: 0.6;
    outline: none;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    #backtotop {
        background: url(https://edutheque.philharmoniedeparis.fr/ui/skins/CIMU/images/backtotop2x.png) no-repeat center center;
        background-size: 50px;
    }
}

.btn-info.tarzan {
    /*Titre trop long sur les rebonds - ddenocq 20160926*/
    text-align: left;
    white-space: normal;
    border-radius: 1rem;
}

a.btn-plus {
    /* Bouton fond blanc - texte en noir */
    background-color: #FFF;
    padding: 6px 12px;
    color: #001b3b !important;
    border-radius: 1rem;
}


/* Boutons (teaser concert participatif) fond bleu - texte en noir - guillaume*/

.btn-bgBleu,
.dossier-oe-modele .oe-accroche .btn-bgBleu,
.popVideoExtrait.btn-bgBleu,
.dossier-oe-modele .oe-accroche .popVideoExtrait.btn-bgBleu {
    background-color: #b3d6fd;
    padding: 7px 5px;
    color: #001b3b;
    border-radius: 1rem;
}

.btn-bgBleu:hover,
.dossier-oe-modele .oe-accroche .btn-bgBleu:hover,
.popVideoExtrait.btn-bgBleu:hover,
.dossier-oe-modele .oe-accroche .popVideoExtrait.btn-bgBleu:hover {
    text-decoration: none;
    color: #001b3b;
    border-radius: 1rem;
}

.popVideoExtrait.btn-bgBleu:before,
.dossier-oe-modele .oe-accroche .popVideoExtrait.btn-bgBleu:before {
    content: '';
    padding: 0;
    border-radius: 1rem;
}


/* Boutons effets hover avec transition - sarah*/

a#tous:hover,
a.btn-plus-bl:hover,
a.btn-plus:hover,
a.btn-plusdbl:hover,
a.btn-acheter:hover,
.btn-default:hover,
a.more-info:hover,
a.tarzan:hover,
a.document-link:hover,
a.btn-first:hover,
a.musee-btn:hover,
.btn-info:hover,
a.btn:hover,
a.btn.btn-default.btn-xs:hover {
    /* A rajouter selon les besoins */
    opacity: 0.70;
    text-decoration: none !important;
    -webkit-transition: all 0.4s ease-in-out 0.1s;
    transition: all 0.4s ease-in-out 0.1s;
}

a.see-biography {
    /* 	Bouton depuis notice détaillée collections exemple doc/MUSEE/0158215/0129119-biographie-de-laurens-hammond.aspx */
    font-family: 'SourceSansPro', 'Arial', 'Helvetica', sans-serif;
    padding: 2px 8px;
    font-size: 10px;
    margin-top: -25px;
}

a.player-link {
    /* Player conférence */
    display: block;
    float: left;
    width: 100%;
    background-color: #b3d6fd;
    cursor: pointer;
    padding: 10px 0px 10px 20px;
    font-size: 18px;
    color: #001b3b;
    margin: 10px 0px;
}

a.download-link::before {
    content: url(/ui/skins/MEDIA/images/icon-download-16px-bleu.png);
    display: inline-block;
    vertical-align: middle;
    margin-right: .75rem;
}


/* ########################### Picto #######################*/

img.ermes-thumb {
    background-color: transparent !important;
}


/* ########################### mombre par page #######################*/

.btn-group.pageSize-container button {
    color: #7ab9ff !important;
    font-weight: bold !important;
}

.btn-group.pageSize-container.open .dropdown-menu>li>a {
    color: #001b3b !important;
    padding: 0 0 0 5px;
}


/* ############################## Début - Ensemble des classes communes ############################################*/

.line:after {
    /* Création du petit trait noir après */
    content: url("images/pp-trait-separateur-noir.png");
    display: block;
}

.clear {
    clear: both;
}

.upper {
    /* En majuscule quand besoin */
    text-transform: uppercase;
}

.bckg-bleu {
    /* Très utilisés dans les tableaux pour donner un fond bleu, ou dans les rebonds propre à la philha */
    background-color: #b3d6fd;
    padding: 12px;
    border-radius: .5rem;
}

.bckg-vert {
    background-color: #7bd69d;
}

.bckg-peche {
    background-color: #ffbd70;
}

.aplat-gris {
    background-color: #EFEFEF;
}

.musee #page #portal .frame.aplat-gris {
    background-color: #EFEFEF;
    padding: 1rem;
    border-radius: .5rem;
    margin: 1rem !important;
    box-sizing: border-box;
    width: auto;
}


/* ############################ Fin - Ensemble des classes communes############################################*/


/* ############################ Début - Page accueil - style page .accueil-modele ############################################*/


/* --- Début Niveau de titre des pages accueils catalogue, digital et collections / Pas pour GPM car style de page no-search----- */

.accueil-modele h2 {
    text-transform: uppercase;
}

.accueil-modele h3 {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    color: #001b3b;
    font-size: 1.1em;
}

.accueil-modele a:focus {
    text-decoration: none;
}


/* ---- Fin Niveau de titre de la page accueil de collections du musée ------- */

.accueil-modele figure img {
    border: none;
}


/* ############################ Fin - Page accueil - style page .accueil-modele ########################################################*/


/* ############################ Début Page listing modele - exemple :./expositions-temporaires-du-musee-de-la-musique.aspx ############# */

.listing-modele #portal .liste h2 {
    margin-bottom: 10px;
    font-size: 1.714em;
}

.listing-modele #portal .rebond-bleu h2,
.listing-modele #portal .rebond-blanc h2 {
    font-size: 1.438em;
}

.listing-modele h3 {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1.125em;
}

.listing-modele h4 {
    font-family: 'SourceSansPro', sans-serif;
    font-weight: 700;
    font-size: 1.125em;
    padding: 8px 0px;
}

.listing-modele p {
    font-size: 1.125em;
}

.listing-modele #portal a {
    color: #1D89DB;
}

.listing-modele #portal li {
    /*		font-size:1.071em;*/
    font-size: 1rem;
}


/* ####################### Fin Page listing modele ########################################## */


/* ******************************************** */


/* Sidebar REBONDS */


/* ******************************************** */

.sidebar-heading .panel-heading h2,
.sidebar-heading .panel-heading h2 span,
p.sidebar-heading,
p.sidebar-heading span {
    font-size: 2rem !important;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase!important;
    color: #999;
    font-weight: 600;
    background: transparent!important;
}


/* ******************************************** */


/* fin : Sidebar REBONDS */


/* ******************************************** */


/* ####################### Début Encart MENU ################################################ */


/* --- Début Menu à droite ---- */


/* --- Pour fixer le  Menu à droite ----
		.menu nav{
			position:fixed!important;
			  top: auto;
		}
		*/

.menu nav li {
    display: block;
    padding: 8px 0 !important;
    background-color: #f5f5f5;
    margin: 2px;
    padding-left: 10px !important;
    margin-left: 0px !important;
}

.menu nav li:hover {
    opacity: 0.70;
}

.menu nav li.menu-blanc {
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    margin-top: -2px;
    font-size: 1.071em !important;
}

.panel-body span.fleche-menu-droite {
    float: right;
}

.menu nav ul li a {
    color: #000 !important;
    height: auto;
    text-align: left;
    font-size: 1.200em !important;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
}

.menu nav ul li a:hover {
    color: #1D89DB !important;
    text-decoration: none !important;
}


/* ------ Partie responsive avec le menu-------  */

@media screen and (min-width: 200px) and (max-width: 980px) {
    .exposition-modele main .menu,
    /* En responsive, le menu de droite disparaît sous les modèles suivants ! */
    .histoireinstru-modele main .menu,
    .fiche main .menu,
    .content-modele main .menu {
        display: none;
    }
}


/* ####################### FIN Encart MENU ################################################ */


/*************************************************** DEBUT page catalogue mediatheque news***************************************************************************************/

.mediatheque .info {
    background-color: #ffbd6f;
    font-family: 'Philharmonique', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    color: #000;
    /*font-size: 20px;*/
    font-size: 20px;
    padding: 7px;
    text-align: center;
    width: 100%;
}


/* ------- Début Menu --------------*/


/* Remove margins and padding from the list, and add a black background color */

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    padding-bottom: 30px;
    /*background-color: #333;*/
}


/* Float the list items side by side */

ul.topnav li {
    float: left;
    border-left: 1px solid #000000;
    height: 20px;
    /* margin-top: 20px;*/
}

ul.topnav li:first-child {
    /* ou :first-of-type inutile dans une liste ou <li> sont les seuls enfants direct possible */
    border: none;
}


/* Style the links inside the list items */

ul.topnav li a {
    display: inline-block;
    color: #000000;
    text-align: center;
    padding: 0px 20px 0px 20px;
    text-decoration: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    font-size: 15px;
    font-family: 'SourceSansPro';
}


/* Change background color of links on hover */

ul.topnav li a:hover {
    /*background-color: #111; */
    text-decoration: underline;
    color: #000;
    /* On passe le texte en noir... */
}


/* Hide the list item that contains the link that should open and close the topnav on small screens */

ul.topnav li.icon {
    display: none;
    border-left: none;
}


/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */

@media screen and (max-width:800px) {
    ul.topnav li:not(:first-child) {
        display: none;
    }
    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */

@media screen and (max-width:800px) {
    ul.topnav.responsive {
        position: relative;
    }
    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
        border-left: none;
        border-right: none;
    }
    ul.topnav.responsive li {
        float: none;
        display: inline;
        border-left: none;
        border-right: none;
    }
    ul.topnav.responsive li a {
        display: block;
        text-align: left;
        text-decoration: none;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        font-size: 15px;
        font-family: 'SourceSansPro';
        /*margin-top:25px;*/
        /*padding: 20px 0px 0px 0px;*/
    }
    ul.topnav li a {
        display: inline-block;
        color: #000000;
        text-align: center;
        padding-top: 1.5em;
        text-decoration: none;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        font-size: 15px;
        font-family: 'SourceSansPro';
    }
}


/* ------- Fin Menu --------------*/


/* ------- Début Menu 2--------------*/


/* Remove margins and padding from the list, and add a black background color */

ul.topnav2 {
    list-style-type: none;
    margin: 25px 0px 45px 0px;
    padding: 25px 0px 25px 0px;
    overflow: hidden;
    background-color: #e4e4e4;
    border-radius: 1rem;
}


/* Float the list items side by side */

ul.topnav2 li {
    float: left;
    width: 130px;
}


/* Style the links inside the list items */

ul.topnav2 li a {
    display: inline-block;
    color: #000000;
    text-align: center;
    padding: 5px 5px 5px 5px;
    text-decoration: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    font-size: 15px;
    font-family: 'SourceSansPro';
}


/* Change background color of links on hover */

ul.topnav2 li a:hover {
    /*background-color: #111; */
    text-decoration: underline;
    color: #000;
    /* On passe le texte en noir... */
}

ul.topnav2 li a img {
    height: auto;
    max-width: 100%;
    padding: 5px 5px 5px 5px;
}


/* ------- Fin Menu 2 --------------*/


/* ------- Accès ressources numériques -----*/

@media screen and (min-width: 1000px) {
    .topnav2abo {
        width: 70%;
        float: left;
    }
}

@media screen and (min-width: 1000px) {
    ul.topnav2.topnav2abo li {
        width: 14%;
    }
}

@media screen and (min-width: 1000px) {
    .abo-num-homepage {
        width: 28%;
        float: right;
        margin: 25px 0px 45px 0px;
    }
}

.abo-num-homepage .media-body {
    border: 1px solid #ebebeb;
    height: 195px;
    background: url(https://drop.philharmoniedeparis.fr/homepage/catalogue/pictos/ressources_numeriques_6.png) 0px 35px no-repeat;
    border-radius: 1rem;
}

.abo-num-homepage .media-body:hover,
.abo-num-homepage .media-body:focus {
    background-color: #ebebeb;
    opacity: 0.5;
}

.abo-num-homepage .media-body h3 a {
    padding: 45px 20px 0 100px;
}

@media screen and (min-width: 1000px) {
    .abo-num-homepage .media-body p a {
        padding: 10px 20px 40px 100px;
    }
}

@media screen and (max-width: 999px) {
    .abo-num-homepage .media-body p a {
        padding: 10px 20px 85px 100px;
    }
}

.abo-num-homepage .media-body a {
    color: #000000;
    display: block;
}

.abo-num-homepage .media-body a:link,
.abo-num-homepage .media-body a:hover,
.abo-num-homepage .media-body a:active {
    text-decoration: none;
}


/* ------- Fin Accès ressources numériques -----*/


/*--------  Page Revue et périodiques  ----------------------*/

.content-modele .modele_9 .row div.jstor {
    padding: 0;
}


/*--------  Fin Page Revue et périodiques  ----------------------*/


/*--------  Page Catalogues de compositeurs  ----------------------*/

.content-modele div.catalogues-compositeurs figure {
    float: left;
    width: 30%;
}

.content-modele div.catalogues-compositeurs dt {
    font-family: SourceSansPro;
    font-size: 16px;
    font-weight: normal;
    float: left;
    width: 20%;
}

.content-modele div.catalogues-compositeurs dd {
    float: left;
    width: 80%;
}

.content-modele div.catalogues-compositeurs td {
    border: none;
}

.content-modele div.catalogues-compositeurs td.tableau-en-tete {
    padding-right: 10%;
}

.content-modele div.catalogues-compositeurs td.indice-catalogue,
.content-modele div.catalogues-compositeurs dd.indice-catalogue,
.content-modele div.catalogues-compositeurs td.titre-catalogue,
.content-modele div.catalogues-compositeurs dd.titre-catalogue {
    font-family: "SourceSansPro";
    font-weight: 500;
}


/*--------  Fin Page Catalogues de compositeurs  ----------------------*/


/* ######################################### Début page de contenu : Les Incontournables ###############################################  */


/* -------- Niveau de titre pour les incontournables -----------------------*/

.incontournable-nom h2 {
    text-transform: uppercase;
    background: none;
}

.incontournable-modele h3 {
    font-family: 'SourceSansPro', sans-serif;
    font-size: 1.25em;
    margin-bottom: 15px;
    padding-top: 5px;
    font-weight: normal;
    text-transform: uppercase;
}

.incontournable-modele h4 {
    font-family: 'SourceSansPro', sans-serif;
    font-weight: 700;
}


/* -------- Fin Niveau de titre pour les incontournables ---------------- */


/* ---------  règles  sur les a liens des incontournables  ---------- */

.incontournable-modele #portal .incontournable-instrument a,
.incontournable-accroche a {
    color: #1675e1;
    font-size: 1.000em;
}

.incontournable-modele #portal .incontournable-instrument a {
    text-decoration: none;
}

.incontournable-modele #portal .incontournable-instrument a:hover {
    text-decoration: underline;
}

.incontournable-modele #portal .incontournable-instrument a.btn,
.incontournable-modele #portal .incontournable-instrument a.btn:hover {
    color: #001B3B;
    border-radius: 25px;
}


/* --------- Fin règles  sur les a liens des incontournables ----------- */


/* --------- Début Paragraphe, images et listes pour incontournables ------- */

.incontournable-modele p {
    font-size: 1rem;
}

.incontournable-accroche li {
    font-size: 1.143rem;
}

.incontournable-modele p.inc-chapo {
    /* L'accroche - EnricheFromCMS en gras */
    font-family: "SourceSansPro";
    font-weight: 500;
}


/* Les éléments sur la balise figure - donc image avec légende*/

.incontournable-modele .incontournable-modele figcaption {
    color: #808285;
    font-style: italic;
    font-size: 1.000em;
}


/* --------- Fin Paragraphe, images et listes pour incontournables ------- */


/* --------- Début info incontournable identité ---------------------------*/

.incontournable-modele .incontournable-identite dl {
    clear: both;
}

.incontournable-modele .incontournable-identite dt {
    font-weight: normal;
}

.incontournable-modele .inc-facteur dt,
.inc-facture dt,
.incontournable-identite dt {
    float: left;
    font-family: "SourceSansPro";
    font-weight: 500;
    font-size: 1.143em;
    margin-right: 5px;
}

.incontournable-modele .inc-facteur dt,
.inc-facture dt {
    display: none;
}

.incontournable-modele .incontournable-identite dd {
    float: left;
    font-size: 1.143em;
    margin-right: 10px;
}


/*  --------------------Fin info incontournable identité -------*/


/*  -------------------- REBOND incontournable -----------------*/


/* .incontournable-modele .incontournable-rebond .notice_corps a>div>div:last-of-type, */

.incontournable-modele .incontournable-rebond .InstrumentTypeValue,
.incontournable-modele #portal .InventoryNumberValue,
.incontournable-modele .incontournable-rebond.line,
.footer-icon-container,
.exposition-modele .incontournable-rebond .InstrumentTypeValue,
.exposition-modele #portal .InventoryNumberValue,
.exposition-modele .exposition-modele.line,
.facteur-modele .incontournable-rebond .InstrumentTypeValue,
.facteur-modele #portal .InventoryNumberValue,
.facteur-modele .facteur-modele.line {
    /* Dans rebond, informations cachées dont le flux rss */
    display: none;
}

.incontournable-modele #portal .incontournable-rebond h2,
.exposition-modele #portal .incontournable-rebond h2,
.facteur-modele #portal .incontournable-rebond h2 {
    font-size: 1.475em;
    margin-top: 5px;
}

.incontournable-modele #portal .incontournable-rebond h3,
.exposition-modele #portal .incontournable-rebond h3,
.facteur-modele #portal .incontournable-rebond h3 {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-size: 1.150em;
    margin-bottom: 5px;
    font-weight: normal;
    color: #000;
}

.incontournable-modele #portal .incontournable-rebond li div,
.exposition-modele #portal .incontournable-rebond li div,
.facteur-modele #portal .incontournable-rebond li div {
    color: #000;
    font-size: 1.000em;
}

.incontournable-modele #portal .img-thumbnail,
.exposition-modele #portal .img-thumbnail,
.facteur-modele #portal .img-thumbnail {
    margin-bottom: 1rem;
    margin-right: .5rem;
    border-radius: .5rem;
}

#zone-5 .notice-courte .vignette {
    margin-right: 1rem;
}

#zone-5 .notice_corps .vignette img {
    margin-bottom: 0;
    margin-right: 0;
    border-radius: .5rem;
}

.incontournable-modele #portal .incontournable-rebond p.CONTRAT_3,
.incontournable-modele #portal .incontournable-rebond p.line,
.exposition-modele #portal .incontournable-rebond p.CONTRAT_3,
.exposition-modele #portal .incontournable-rebond p.line,
.facteur-modele #portal .incontournable-rebond p.CONTRAT_3,
.facteur-modele #portal .incontournable-rebond p.line {
    /* Info enlever : contrat, durée */
    display: none;
}


/* masquer la 2e vignette pour les notices du musee - GG 21/06/2022 */

.webframe-ermes-lastviewedresources-item .notice-courte-MUSEE .notice-courte .vignette {
    display: none;
}


/* -------- Fin Aside Incontournable Rebond ----------- */


/* ################################### Fin PAGE INCONTOURNABLES ######################################  */


/* ############################### Début Fenêtre modale - Pop up / définition ###################### */

#fade {
    /*--Masque opaque noir de fond--*/
    display: none;
    /*--masqué par défaut--*/
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .70;
    z-index: 9999;
}

.definition {
    display: none;
    /*--masqué par défaut--*/
    background: #fff;
    padding: 20px;
    border: 10px solid #e4e4e4;
    float: left;
    font-size: 1rem;
    position: fixed;
    left: 50%;
    z-index: 99999;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    text-decoration: none !important;
    border-radius: 5px;
    line-height: 22px;
    cursor: context-menu;
    font-family: 'SourceSansPro', sans-serif;
}

.content-oe-modele .close {
    color: #1D89DB;
    padding-left: 10px;
}

#portal a.close {
    /* Bouton pour fermer pop up*/
    font-size: 22px !important;
}


/* --Gérer la position fixed pour IE6-- */

html #fade {
    position: absolute;
}

html .definition {
    position: absolute;
}


/* #################################Fin Fenêtre modale - Pop up / définition ###################### */


/* ################################# Début Extraits audio avec Soundcite ########################## */

.soundcite-loaded {
    /* Player MP3 exemples de soundcite */
    color: #1D89DB;
}

.rubrique-oe .soundcite-loaded {
    color: #000;
}

.soundcite {
    /* Player MP3 exemples de soundcite */
    background-color: rgba(0, 0, 0, 0.0470588);
}

.SoundciteAudioGlobal {
    /* http://admin-ressources.philharmoniedeparis.fr/histoires-d-instruments-la-guitare-electrique.aspx player audio avec metadonnees*/
    padding: 10px 10px 5px 15px;
    background-color: #f7f7f7;
    margin-bottom: 15px;
    border-left: 5px solid #b3d6fd;
}

.SoundciteAudioGlobal p.SoundciteAudioDonnees,
.SoundciteAudioGlobal p.SoundciteAudioDate {
    font-style: italic;
}

.SoundciteAudioGlobal p {
    margin-bottom: 5px;
}


/* ############################  Fin Extraits audio avec Soundcite ###############################*/


/* ============================ Pictos in corpus de texte ========================= */


/* Picto Video */

a.popVideoExtrait:before {
    content: url(images/popVideo.svg);
}


/* Picto Audio */


/* Picto Guide d'écoute */

a.metascore-api-processed[rel="metascore"]:before {
    content: url(images/icon/picto-guide-ecoute.svg);
}

a.metascore-api-processed[rel="metascore"],
a.popVideoExtrait {
    white-space: nowrap;
}


/* Styling Content */

a.metascore-api-processed[rel="metascore"]:before,
a.popVideoExtrait:before {
    display: inline-block;
    width: 13px;
    margin: 0 5px;
    position: relative;
    top: 3px;
}


/* ============================ END Pictos in corpus de texte ========================= */


/* ###########################################  POP-UP Vidéo #########################*/

.closeV {
    /* Bouton fermer pour les pop-up video*/
    float: right;
    color: #fff;
    padding-left: 10px;
    font-size: 2em;
}

#containerVideo .closeV:hover,
#containerImgZoomHD .closeV:hover {
    /* Bouton en hover fermer pour les pop-up video*/
    color: #b3d6fd;
}

.closeC {
    /* Bouton fermer pour les pop-up conferences*/
    float: right;
    color: #fff;
    padding-left: 10px;
    font-size: 2em;
}

#containerFrame .closeC:hover {
    color: #b3d6fd;
}


/* ############################  Fin POP-UP Vidéo #########################*/


/* ############################# Début Home outils éducatifs + page dossier outils éducatifs : http://digital.philharmoniedeparis.fr/outils-educatifs.aspx #################---- */


/* ------------- Début Titres (H2, H3) -  PAGES Home + DOSSIER EDUCATIF -------------------- */

.dossier-oe-modele h2 {
    font-size: 1.7em;
    text-transform: uppercase;
    /* background: url("images/h2.png") repeat-x scroll left center rgba(0, 0, 0, 0); */
    margin-top: 10px;
}

.dossier-oe-modele .rsItem h2.h2-boite-outil {
    /* Très important : correspond aux titres des oeuvres dans les pages dossier */
    font-size: 1.7em;
    /* background: url("images/h2.png") repeat-x scroll left center rgba(0, 0, 0, 0); */
}

.dossier-oe-modele .rsItem h2 {
    /* Dans la home des outils éducatifs, correspond à toutes les boîtes à outils */
    background: none;
    font-size: 1.4em;
}

body:not(.musee).dossier-oe-modele .oe-composant h2 {
    /* Composant des boîtes à outils : pièces participatives, guide écoute, portraits... */
    height: 50px;
    font-size: 1.25em;
}

body:not(.musee).dossier-oe-modele h3 {
    /* font-family: LinotypeBrewery-Regular; */
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1.071em;
}

body:not(.musee).dossier-oe-modele h3.media-heading {
    /* Espace dans page home outils + page dossier : niveau titre h3 */
    height: 45px;
}

div.block-image-compo h3,
.oe-fiches-oeuvres-tab h3 {
    /* Correspond aux noms des compositeurs dans page portraits + h3 fiches oeuvres */
    font-size: 1em;
    margin-top: 10px;
    text-align: center;
    /* font-family: LinotypeBrewery-Regular; */
    text-transform: uppercase;
    font-weight: normal;
}

div.block-image-compo h3,
.oe-fiches-oeuvres-tab h3 {
    font-size: 1rem;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-weight: 500;
}

.content-modele div.block-image-compo p,
.facteur-modele div.block-image-compo p {
    /* Page abonnements et périodiques sur le catalogue et liste des facteurs */
    text-align: center;
}

.oe-fiches-oeuvres-tab h3 {
    text-align: left;
}


/* ------------- Fin Titres (H2, H3)+ Paragraphes et listes -  PAGES Home + DOSSIER EDUCATIF -------------------- */


/* --------------Début paragraphe - Page home + dossier éducatif ----------------------------- */

.dossier-oe-modele .oe-accroche p,
.dossier-oe-modele .oe-accroche li {
    /* Paragraphe de type accroche */
    font-size: 1.125em;
}

.dossier-oe-modele .oe-accroche a.billet {
    background: url("images/picto-billets-blancs.png") no-repeat left center;
    /* repeat:none;*/
    padding-left: 25px;
    padding-top: 3px;
    padding-bottom: 3px;
    /*background-color: #CCCCCC;-*/
}

.dossier-oe-modele .oe-accroche a {
    color: #1D89DB;
}

.dossier-oe-modele .oe-accroche a:hover {
    text-decoration: underline;
}


/* --------------Fin paragraphe - Page home + dossier éducatif ----------------------------- */


/*---------- Début Outils éducatifs - Home + page dossier / Liste et liens ---------- */

.dossier-oe-modele .oe-accroche li,
.content-oe-modele #portal .only-content li,
.content-oe-modele #portal .content-img-dr li,
.content-oe-modele #portal .content-img-gch li,
.content-oe-modele .rubrique-oe li,
.facteur-modele .bckg-bleu li {
    list-style-image: url(images/puces.png);
    margin-left: 20px;
}

.dossier-oe-modele .oe-accroche li li,
.content-oe-modele #portal .only-content li li,
.content-oe-modele #portal .content-img-dr li li,
.content-oe-modele #portal .content-img-gch li li,
.content-oe-modele .rubrique-oe li li,
.facteur-modele .bckg-bleu li li {
    list-style-image: none;
    list-style-type: disc;
}

.content-oe-modele .rubrique-oe li,
.facteur-modele .bckg-bleu li {
    margin-left: 10px;
}

.dossier-oe-modele a.tous {
    /* Bouton sur la home des outils éducatifs*/
    float: right;
}


/* ----------------- lien billetterie ------------- */


/*---------- Fin Outils éducatifs - Home + page dossier / Liste et liens ---------- */


/* -------------Début  Images dossier-oe-modele ------------ */

.dossier-oe-modele figure {
    /* - généralité sur les images quand figure image à gauche avec légende. espace droite */
    float: left;
    width: 30%;
    padding-right: 10px;
}

.dossier-oe-modele .img-responsive {
    width: 240px;
    height: 240px !important;
}

.dossier-oe-modele .modele-4-col img.media-object.img-noresponsive {
    /* Encarts de base carré par 4 */
    width: 100%;
    height: 100%;
}


/* -------------Fin  Images dossier-oe-modele ------------ */


/* -------------Début : Home outils éducatifs : encart guide écoute, portraits, fiche oeuvres, pieces participatives ----------------------*/

.dossier-oe-modele .oe-composant {
    float: left;
    width: 19.5%;
    border: 1px solid #ebebeb;
    padding: 10px;
    margin: 2px;
}


/* -------------FIN : Home outils éducatifs : encart guide écoute, portraits, fiche oeuvres, pieces participatives ----------------------*/


/* ------------- Début page dossier - Encart haut accroche avec image dossier + texte + date concert + oeuvres jouées -------------*/

.dossier-oe-modele .oe-accroche .rsItem div {
    /* Accroche de l'encart 2 */
    float: left;
    width: 65%;
    margin-top: -15px;
}

.dossier-oe-modele .modele-image-gauche-texte-droite {
    margin-top: 5px;
}

.dossier-oe-modele .modele-image-gauche-texte-droite .describe {
    /*						height:30px;*/
    height: auto;
}


/* ----------------- Tableaux ------------- */

.dossier-oe-modele #portal td,
.dossier-oe-modele #portal tr {
    border: 1px solid #b3d6fd;
}

.dossier-oe-modele td {
    color: #000;
    padding-left: 10px;
}


/* ############################## Fin Home outils éducatifs + page dossier outils éducatifs : http://digital.philharmoniedeparis.fr/outils-educatifs.aspx #################---- */


/* ############################## Début outils éducatifs + CONTENUS outils éducatifs : http://digital.philharmoniedeparis.fr/1044744-mille-et-une-nuits.aspx #################---- */


/* -------------- Début sur padding des pages contenus outils éducatifs-------------------*/

.content-oe-modele .panel-front.only-content,
.content-oe-modele .panel-front.content-img-dr,
.content-oe-modele .panel-front.content-img-gch {
    padding-top: 0;
}


/* -------------- Fin sur padding des pages contenus outils éducatifs-------------------*/


/* ------------- Début Titres (H1, H2, H3)+ Paragraphes et listes -  PAGES contenus outils EDUCATIFs -------------------- */

.content-oe-modele .only-content h2,
.content-oe-modele .content-img-dr h2,
.content-oe-modele .content-img-gch h2,
.content-oe-modele .oe-accroche h2,
.content-oe-modele .rubrique-oe h3,
.page-contenu h2,
.page-contenu h2 span {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-size: 1.5rem;
    padding: 5px 0 10px 0;
    background: none !important;
}

.content-oe-modele .only-content h3,
.content-oe-modele .content-img-dr h3,
.content-oe-modele .content-img-gch h3,
.content-oe-modele .oe-accroche h3,
.page-contenu h3:not(.template-title),
.page-contenu h3:not(.template-title) span {
    font-family: 'SourceSansPro', sans-serif;
    text-transform: uppercase;
    font-size: 1.25rem;
    line-height: 1.3;
}

.content-oe-modele .rubrique-oe h3 {
    font-size: 1.25rem;
    line-height: 1.3;
}

.content-oe-modele h4,
.page-contenu h4,
.page-contenu h4 span {
    font-family: 'SourceSansPro', sans-serif;
    font-size: 1.25rem;
    padding: 5px 0 5px 0;
    font-weight: 700;
}

.content-oe-modele .rubrique-oe h4 {
    font-family: "SourceSansPro";
    font-weight: 500;
    font-size: 1.143rem;
    padding-bottom: 5px;
}


/* Partie responsive concernant les titres */

@media screen and (min-width: 320px) and (max-width: 767px) {
    .dossier-oe-modele #portal h1,
    .content-oe-modele #portal h1 {
        font-size: 2rem;
    }
}


/* ------------- Fin niveau de Titres (H1, H2, H3)  PAGES contenus outils EDUCATIF -------------------- */


/* ------------- Début paragraphe  PAGES contenus outils éducatifs -------------------- */

.content-oe-modele .only-content p,
.content-oe-modele .content-img-dr p,
.content-oe-modele .content-img-gch p,
.content-oe-modele .only-content li,
.content-oe-modele .content-img-dr li,
.content-oe-modele .content-img-gch li,
.content-oe-modele .rubrique-oe li,
.content-oe-modele .rubrique-oe p,
.content-oe-modele .oe-accroche p {
    /*  				font-size: 1.125em;*/
    font-size: 1rem;
    margin-top: 0;
    margin-right: 20px;
}

.content-oe-modele .only-content p.categorie {
    font-size: .825rem;
    font-weight: 600;
}

.content-oe-modele .rubrique-oe b em,
b em,
strong em,
em strong,
i strong {
    /* Dès qu'on trouve des b ou strong avec i ou em, importance d'avoir les gras et italiques */
    font-style: italic;
    font-weight: bold;
}

.content-oe-modele .rubrique-oe li {
    padding-bottom: 5px;
}


/* ------------- Fin paragraphe + liste -  PAGES contenus outils éducatifs -------------------- */


/* ------------- Début LIENS DANS PAGES Contenus outils EDUCATIF ------------------------------ */

.content-oe-modele #portal a {
    /* Tous les liens des pages contenus dossiers éducatifs sont bleus*/
    color: #1D89DB;
}

.content-oe-modele #portal a:hover {
    /* Tous les liens des pages contenus dossiers éducatifs en hover sont soulignes*/
    text-decoration: underline;
}

.content-oe-modele a.btn-plus-bl {
    /* Couleurs du contenu des boutons en noir*/
    color: #000 !important;
}

.content-oe-modele #portal .rebond .rsItem a {
    /* Augmentation taille typo lien rebond vers les biographies*/
    font-size: 1.125em;
}

a.guide-contentOe:before {
    /* Pour les pages de contenus avec guides d'écoute, système ancre. AJout devant un picto guide ecoute*/
    content: url("images/picto-guide.jpg");
    padding-right: 10px;
}

a.guide-contentOe {
    font-size: 1.125em;
}

.content-oe-modele #portal .rubrique-oe a.popVideoExtrait {
    color: #000;
    background-color: rgba(0, 0, 0, 0.0470588);
}

.content-oe-modele .only-content a.play-oe:before,
.content-oe-modele .content-img-dr a.play-oe:before,
.content-oe-modele .content-img-gch a.play-oe:before,
.content-oe-modele .rubrique-oe a.play-oe:before {
    content: url("images/popVideoExtrait.png");
    padding-left: 5px;
}

.content-oe-modele .only-content a.play-oe:hover:after,
.content-oe-modele .content-img-dr a.play-oe:hover:after,
.content-oe-modele .content-img-gch a.play-oe:hover:after,
.content-oe-modele .rubrique-oe a.play-oe:hover:after {
    content: "(prochainement disponible)";
    padding-left: 5px;
    text-decoration: overline;
}

.content-oe-modele div.content-oe-fifty {
    width: 49.5%;
    float: left;
}

.content-oe-modele div.content-oe-fourty {
    width: 45%;
    float: left;
}

.content-oe-modele div.content-oe-sixty {
    width: 55%;
    float: left;
}

.content-oe-modele div.oe-fifty-hauteur p {
    height: 110px;
}

.content-oe-modele div.content-oe-thirty {
    width: 33%;
    float: left;
    margin-right: 0.3%;
}

.content-oe-modele div.content-oe-thirty:last {
    margin-right: none;
}


/* -------- Fin LIENS DANS PAGES Contenus outils EDUCATIF --------- */


/* -------- Début Image - figure PAGES Contenus outils EDUCATIF --------- */

.content-oe-modele .oe-accroche figure img {
    width: 100%;
    height: auto;
}

.content-oe-modele .only-content figure {
    padding-bottom: 10px;
}

.content-oe-modele .content-img-gch figure,
.content-oe-modele .content-img-dr figure,
.content-oe-modele .rubrique-oe figure {
    width: 300px;
    min-width: 250px;
    margin: 0 15px 10px 0px;
    clear: both;
}

.content-oe-modele .content-img-gch figure,
.content-oe-modele .rubrique-oe figure {
    /* Images ferrees à gauche dans les encarts contenus concert éducatif */
    float: left;
}

.content-oe-modele .content-img-dr figure {
    /* Images ferrees à droite dans les encarts contenus concert éducatif */
    float: right;
    margin-left: 10px;
}

.content-oe-modele .rubrique-oe,

/* Applat bleu pour les pistes péda. */

.dossier-oe-modele .rubrique-oe {
    /* Applat bleu pour les pistes péda. */
    background-color: #b3d6fd;
    margin-bottom: 2.5rem;
}

.content-oe-modele #portal .rubrique-oe,
.dossier-oe-modele #portal .rubrique-oe {
    margin-bottom: 2.5rem!important;
}


/* -------------Fin  Images entre  content-oe-modele ------------ */

.content-oe-modele article {
    /* Infos espacement pour tous les artciles */
    display: inline-block;
    margin-top: 0;
    width: 100%;
}


/* ---------------  Début Carroussel images frise dans page contenu concert éducatif : exemple : orfeo page contexte -------------- */

.content-oe-modele .rsCaption p {
    /* Correspond à la légende*/
    font-family: "SourceSansPro";
    font-size: 1em;
}

.content-oe-modele .rsCaption p span {
    /*Correspond aux crédits photos*/
    font-style: italic;
    font-size: 0.857em;
}

.content-oe-modele .rs-ImgCarousel-textualCarousel .rsGCaption {
    /* Modifier la largeur du bandeau gris du carroussel */
    padding: 7px 0 7px;
}

.content-oe-modele .rsDefaultInv .rsGCaption {
    bottom: 0;
}

.content-oe-modele #portal ul {
    margin-bottom: 5px;
}

.content-oe-modele ul.rsNav.rsBullets.bs-bullets {
    display: none;
}


/* ------------- Fin caroussel page contenu Outils éducatifs -------------- */


/* -------------- Début Tableau pages contenus outils éducatifs : carte identité oeuvre ------------- */

.content-oe-modele table,
.content-oe-modele tr,
.content-oe-modele td {
    border: 1px solid #b3d6fd;
}
/* gg 11/08/2022 : nouveaux modèles de tableaux */
.page-2021 tr,
.page-2021 td {
    border: 1px solid #ddd;
}
.page-2021 table,
.page-2021 tbody{
    border:0
}
.page-2021 table>tbody>tr,
.page-2021 table>tbody>tr>td.bckg-bleu {
	border-radius: .5rem .5rem 0 0;
    border:0
}
/* fin gg 11/08/2022 : nouveaux modèles de tableaux */

.content-oe-modele #portal table ul li,
.content-oe-modele #portal table ol li {
    font-size: 14px;
}

.content-oe-modele .rubrique-oe table,
.content-oe-modele .rubrique-oe tr,
.content-oe-modele .rubrique-oe td {
    border: 1px solid #fff;
}

.content-oe-modele td {
    color: #001b3b;
    padding-left: 10px;
    font-family: 'SourceSansPro', sans-serif;
}


/* Tableau carte identité de l'oeuvre (pour le nouveau modèle de page) - refonte 07/2022 GG */

.tableID .bckg-bleu {
    background-color: #b3d6fd;
    padding: 12px;
    border-radius: .5rem .5rem 0 0;
}

.tableID>tbody>tr {
    border-bottom: 1px solid #ccc;
}

.tableID td {
    font-family: 'SourceSansPro', sans-serif;
    padding: .5rem;
}


/* -------------- Fin Tableau pages contenus outils éducatifs : carte identité oeuvre ------------- */


/* --------------- Début CSS - N° Retour à la ligne --------------*/

.content-oe-modele .retour-ligne,
.dossier-oe-modele .retour-ligne,
.popVideoExtrait {
    white-space: nowrap;
}


/* --------------- Fin CSS - N° Retour à la ligne --------------*/


/* --------------- Début REBOND PAGE DOSSIER EDUCATIF CONTENT - Recherche capturée Guide ecoute, concert vidéo ------------- */

.content-oe-modele .rebond .rsItem ul li a img {
    width: 70px;
    height: auto;
    padding: 5px 10px 0 0;
    float: left;
}

.content-oe-modele .rebond .cim-short-CONTRAT_1 {
    /* Correspond aux contrats */
    display: none;
}

.content-oe-modele #portal .frame-ermes-searchcapturemultirender li:before {
    /* Petites puces bleues n'apparaîssent pas quand rechetrche capturée */
    content: none;
}

.content-oe-modele #portal .frame-ermes-searchcapturemultirender div.webframe-ermes-lastviewedresources-item {
    height: auto;
    width: 100%;
    border: none;
    line-height: 17px;
}

.content-oe-modele #portal .frame-ermes-searchcapturemultirender a {
    /* Couleurs des liens en bnoir pour recherche capturée */
    color: #001b3b;
}

.content-oe-modele #portal .frame-ermes-searchcapturemultirender h2 {
    /* H2 des recherches capturées - modification police...*/
    font-size: 1.475em;
}


/* adaptation des rebonds à la refonte 07/2022 GG */

.page-2021-2colonnes #zone-5 img.ermes-thumb-size-MEDIUM,
.content-oe-modele img.ermes-thumb-size-MEDIUM {
    /* tailles vignettes recherches capturées */
    min-width: 90px !important;
    min-height: 60px !important;
}

.page-2021-2colonnes #zone-5 .template-title,
.content-oe-modele #portal .template-title {
    font-size: .875rem;
    line-height: 17px;
    font-family: "SourceSansPro";
    font-weight: 500;
    color: #001b3b;
}

.page-2021-2colonnes #zone-5 .template-info,
.content-oe-modele .template-info {
    /*.template-info*/
    color: #001b3b;
    width: 100%;
    padding-left: 100px;
}

.content-oe-modele #portal .rebond .template-title,
.page-2021-2colonnes #zone-5 .rebond .template-title {
    font-size: .875rem;
    font-family: "SourceSansPro";
    text-transform: none;
}

.content-oe-modele #portal .rebond .template-info,
.page-2021-2colonnes #zone-5 .rebond .template-info {
    font-size: .825rem;
}

.content-oe-modele .webframe-ermes-lastviewedresources-item .template-auteur {
    margin-top: 0px;
    margin-bottom: 0px;
}

.content-oe-modele .notice_corps br {
    /* Suppression des espaces en trop dans recherche capturée pour condenser informations */
    display: none;
}

.content-oe-modele .footer-icon-container {
    /* Icone du flux RSS à cacher - valable pour tous les rebonds dossier educatif*/
    display: none;
}


/* ......... rebond extraits audios ........ */

.content-oe-modele .rebond .vignette_document {
    /* Ajout du style rebond pour rebond en audio - car pas la même présentation que guide écoute et extraits vidéo */
    padding-bottom: 20px;
    margin: 0 5px 10px 0;
}

.page-2021-2colonnes #zone-5 .rebond .rs-staticList .cim-short-contrat,
.page-2021-2colonnes #zone-5 .rs-staticList .cim-short-contrat,
.page-2021-2colonnes #zone-5 .rs-staticList .line,
.page-2021-2colonnes #zone-5 .rs-staticList .cim-short-duree-type-doc,
.page-2021-2colonnes .rebond .rs-staticList .template-resume,
.page-2021-2colonnes .rebond .rs-staticList .cim-short-genre,
.page-2021-2colonnes .webframe-ermes-lastviewedresources-item-shadow,
.page-2021-2colonnes .rebond .CONTRAT_1,
.page-2021-2colonnes .rebond h3.title::before,
.content-oe-modele .rebond .rs-staticList .cim-short-contrat,
.content-oe-modele .rs-staticList .cim-short-contrat,
.content-oe-modele .rs-staticList .line,
.content-oe-modele .rs-staticList .cim-short-duree-type-doc,
.content-oe-modele .rebond .rs-staticList .template-resume,
.content-oe-modele .rebond .rs-staticList .cim-short-genre,
.content-oe-modele .webframe-ermes-lastviewedresources-item-shadow,
.content-oe-modele .rebond .CONTRAT_1,
.content-oe-modele .rebond h3.title::before {
    /* Rebonds audio dans pages de contenus */
    display: none;
}


/* ......... Rebond dossier pedgagoqie dans page biographies ........... */

.content-oe-modele #portal p.template-resume {
    font-size: 1em;
    font-weight: normal;
    margin-top: 0;
    padding-left: 100px;
    line-height: 17px;
}


/* *********************************************************************** */


/* ENCART "extrait-mea" LISTE SIMPLE RECHERCHE CAPT., "écoutez l'oeuvre"   */

#portal .frame-ermes-searchcapturemultirender.extrait-mea div.webframe-ermes-lastviewedresources-item {
    border: 1px solid #dedede;
    padding: 10px;
    box-shadow: 0 4px 9px #ccc;
}

#portal .frame-ermes-searchcapturemultirender.extrait-mea div.webframe-ermes-lastviewedresources-item .vignette_document {
    padding: 0;
    margin-right: 1rem;
    margin-bottom: 0;
}

#portal .frame-ermes-searchcapturemultirender.extrait-mea div.webframe-ermes-lastviewedresources-item .vignette_document img.ermes-thumb {
    padding: 0;
    margin: 0;
    width: 150px;
}


/* -------------- FIN REBOND PAGES CONTENUS DOSSIER EDUCATIF ----------------- */


/* -------------Début Responsive Web HOME + LE DOSSIER ---------------------- */

@media screen and (min-width: 768px) and (max-width: 980px) {
    .dossier-oe-modele .modele-4-col img.media-object.img-noresponsive {
        /* Correspond aux 4 images de la page HOME des outils éducatifs*/
        width: 85%;
        height: 85%;
    }
    .dossier-oe-modele .modele-4-col .border {
        width: 85%;
    }
    .dossier-oe-modele a.tous {
        float: left;
    }
    .dossier-oe-modele .oe-composant {
        width: 30%;
    }
    .content-oe-modele div.content-oe-thirty {
        width: 100%;
        float: left;
        margin-bottom: 15px;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    .dossier-oe-modele figure {
        width: 100%;
    }
    .dossier-oe-modele .oe-accroche .rsItem div {
        width: 100%;
        margin-top: 10px;
    }
    .dossier-oe-modele .col-xs-12.col-sm-6.col-md-3.media {
        float: left;
        width: 48%;
    }
    .dossier-oe-modele .oe-composant {
        width: 45%;
    }
    .content-oe-modele div.content-oe-fifty {
        width: 100%;
        float: left;
    }
    .content-oe-modele div.content-oe-thirty {
        width: 100%;
        float: left;
        margin-bottom: 15px;
    }
}

@media screen and (min-width: 200px) and (max-width: 479px) {
    .dossier-oe-modele .oe-composant {
        width: 100%;
    }
}

@media screen and (min-width: 315px) and (max-width: 639px) {
    .dossier-oe-modele .oe-accroche .rsItem div {
        width: 100%;
        display: block;
    }
    .dossier-oe-modele .media-body {
        display: block;
    }
    .dossier-oe-modele .img-responsive {
        width: 180px;
        height: 180px !important;
    }
    .dossier-oe-modele figure {
        width: 100%;
    }
    .dossier-oe-modele .modele-image-gauche-texte-droite h3 {
        height: auto;
        font-size: 1em;
    }
    .dossier-oe-modele .modele-image-gauche-texte-droite .describe {
        display: none;
    }
    .dossier-oe-modele .modele-image-gauche-texte-droite .btn {
        margin: 0;
    }
    .dossier-oe-modele .modele-image-gauche-texte-droite p.evene {
        margin: 5px 12px 5px 0 !important;
    }
    .content-oe-modele div.content-oe-fifty {
        width: 100%;
        float: left;
    }
    .content-oe-modele div.content-oe-thirty {
        width: 100%;
        float: left;
        margin-bottom: 15px;
    }
}

@media screen and (min-width: 315px) and (max-width: 375px) {
    .dossier-oe-modele .img-responsive {
        width: 100%;
        height: 100% !important;
        margin-top: -20px;
    }
    .content-oe-modele .content-img-dr figure {
        margin: 0;
    }
}

@media screen and (min-width: 200px) and (max-width: 314px) {
    .dossier-oe-modele figure {
        width: 100%;
    }
    .dossier-oe-modele .oe-accroche .rsItem div {
        width: 100%;
    }
    .dossier-oe-modele .img-responsive {
        margin-top: -20px;
    }
    .dossier-oe-modele .modele-image-gauche-texte-droite .describe {
        height: auto;
    }
    .dossier-oe-modele .modele-image-gauche-texte-droite .btn {
        margin-top: 0;
    }
    .content-oe-modele .content-img-gch figure,
    .content-oe-modele .content-img-dr figure,
    .content-oe-modele .rubrique-oe figure {
        width: 100%;
        margin: 0;
    }
}


/* -------------Fin Responsive Web HOME + LE DOSSIER ---------------------- */


/* ---------- Début - Tableau par ordre alphabétique identique à CSS affichages détaillés - Page portraits ./portraits.aspx + page fiches oeuvres ./les-fiches-oeuvres.aspx -------- */

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    border-bottom: none !important;
    background-color: #FAF8F9;
    color: #001b3b !important;
    border: 1px solid;
}

.nav-tabs>li>a,
.nav-tabs>li>a:hover,
.nav-tabs>li>a:focus {
    background-color: #FFF;
    border-color: #001b3b;
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0px;
    color: #001b3b !important;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1.125em;
}

.nav>li>a:hover,
.nav>li>a:focus {
    outline: 0px solid #001b3b !important;
}


/* Bloc par 3 dans les pages du tableau  toutes lettres A B C par exemple ./les-fiches-oeuvres.aspx */

.oe-fiches-oeuvres-tab #myTabContent a {
    text-decoration: none;
    padding-left: 10px;
}

article.oe-fiches-oeuvres-tab article {
    width: 33%;
    display: inline-block;
    vertical-align: top;
}


/* Outils éducatifs - Portraits - Bloc avec image du compositeur + Nom Prénom (XXXX-XXX) */

div.block-image-compo {
    /*Bloc avec image lien + nom compositeur*/
    display: inline-block;
    width: 23%;
    padding: 5px 5px 5px 0;
    vertical-align: top;
}


/* Partie responsive de la partie portraits + fiches oeuvres */

@media screen and (min-width: 320px) and (max-width: 767px) {
    div.block-image-compo {
        /*Bloc avec image lien + nom compositeur*/
        width: 45%;
    }
    div.block-image-compo h3 {
        /* Correspond aux nom des compositeurs*/
        font-size: 12px;
    }
    .dossier-oe-modele .nav-tabs>li>a {
        padding: 5px 15px;
        font-size: 1em;
    }
    article.oe-fiches-oeuvres-tab article {
        width: 100%;
    }
}

@media screen and (min-width: 200px) and (max-width: 319px) {
    div.block-image-compo {
        /*Bloc avec image lien + nom compositeur*/
        width: 100%;
    }
}


/* --------------------------- Fin partie portraits + fiche oeuvre -----------------------------------------------*/


/* ############################## Fin outils éducatifs + CONTENUS outils éducatifs : http://digital.philharmoniedeparis.fr/1044744-mille-et-une-nuits.aspx #################---- */


/* ##############################  Début Partie Accordéon ############################# */

div.modele_6.model-html {
    border: 2px solid #b3d6fd;
    margin: 0;
}

div.modele_6.model-html .panel-model {
    border-color: #FAF8F9;
}

div.modele_6.model-html h4,
div.modele_6.model-html h3 {
    padding: 0;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-size: 1.071em;
    font-weight: normal;
    margin: 0;
}

div.modele_6.model-html p,
div.modele_6.model-html a,
div.modele_6.model-html ol,
div.modele_6.model-html li {
    /* Correspond à l'accordéon */
    font-size: 1.071em !important;
}

div.modele_6.model-html a {
    color: #1D89DB;
}

div.modele_6.model-html div.panel-body {
    padding-bottom: 0;
}

.listing-modele .panel-model>.panel-heading {
    /* Fond blanc sur lequel on peut trouver les titres des oeuvres */
    background-color: #FAF8F9;
}

.listing-modele .panel-model {
    /* Bordure blanche sur lequel on peut trouver les titres des oeuvres */
    border-color: #fff;
}

.listing-modele .panel-model>.panel-heading+.panel-collapse .panel-body {
    /* Partie ouevrte avec le contenu de l'accordéon */
    border-top: 1px solid #DDDDDD;
    background-color: #FAF8F9;
}


/* ##############################  Fin Partie Accordéon ############################# */


/* ############################# Début Affichage court #####################################*/

div.notice_courte div.actions {
    /* Bouton consulter notice courte - déplacé au niveau du texte */
    margin-left: 120px;
}

@media screen and (min-width: 200px) and (max-width: 767px) {
    div.notice_courte div.actions {
        margin-left: 0;
    }
}


/* ############################# Fin Affichage court #####################################*/


/* ############################################## Début Selection Anciennement Bibliographie - sélection thématique ################################################################### */


/* Tous les titres dans sélection thématique */

.bibliographie-modele p.sous-titre-h1 {
    /* Sous-titre : "une sélection de la Médiathèque" */
    font-size: 2em;
    margin-top: 5px;
}

.bibliographie-modele h2,
.bibliographie-modele h3,
.bibliographie-modele h4 {
    /* Tous les titres des sélections thématiques en noir */
    color: #001b3b;
}

.bibliographie-modele h2,
.bibliographie-modele .rebond h3,
.bibliographie-modele .rebond-biblio h3,
.bibliographie-modele h3 {
    text-transform: uppercase;
}

.bibliographie-modele h2 {
    font-size: 1.5;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
}

.bibliographie-modele h2.sous-titre-selection {
    text-transform: none !important;
    font-family: 'SourceSansPro', sans-serif;
    font-size: 1.5em;
    padding: 5px 0 10px 0px;
    font-weight: normal !important;
    background: none !important;
}


/*.bibliographie-modele .frame-ermes-searchcapturemultirender h2 span,  .bibliographie-modele .webframe-ermes-carousel h2, .bibliographie-modele h2, .bibliographie-modele .only-content h2 { /* Titre h2 de la bibliographie, c'est le titre que l'on remplit dans l'encart html
			font-size:1.5em;
			padding:15px 0 5px 0;
			background:none;
		}
		*/

.bibliographie-modele #portal .rebond h2,
.bibliographie-modele #portal .rebond-biblio h2 {
    /* Trait sur la droite du titre */
    /* background: url("images/h2.png") repeat-x scroll left center rgba(0, 0, 0, 0); */
    background: transparent;
    margin-bottom: 15px;
}

.bibliographie-modele h3,
.bibliographie-modele .rebond h3,
.bibliographie-modele .rebond-biblio h3 {
    /* Infos communes pour titre  */
    font-size: 1.071em;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    line-height: 1.15;
}

.bibliographie-modele .rebond h3,
.bibliographie-modele .rebond-biblio h3 {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    margin-top: -10px;
}

.bibliographie-modele h3.title::before {
    /* Autre trait séparateur qui a été enlevé */
    background-image: none !important;
}

.bibliographie-modele .rebond h3,
.bibliographie-modele .rebond-biblio h3 {
    /* Titre 3 des rebonds - celui fond bleu, celui fond blanc*/
    padding: 15px 0px 0px 0px;
}

.bibliographie-modele h4 {
    font-family: 'SourceSansPro', sans-serif;
    font-size: 1.438em;
    font-weight: 700;
}

.bibliographie-modele div.img-with-border div.col-xs-12.col-sm-6.col-md-3.media {
    border: 1px solid #ebebeb;
}


/* ------- Fin informations CSS des titres pour bibliographies ------- */


/* -------- Partie accroche avec image gauche et texte à droite ---------------------*/

.bibliographie-modele .content-img-gch figure {
    width: 300px;
    min-width: 250px;
    margin: 0 15px 10px 0px;
    float: left;
    clear: both;
}

.bibliographie-modele .content-img-gch p {
    font-size: 1.2em;
}


/* ----- Boutons des bibliographies TOUT VOIR - En savoir plus ------- */

.bibliographie-modele #portal a {
    color: #1D89DB;
}

.bibliographie-modele #portal a.btn,
.bibliographie-modele #portal .rebond-biblio .btn-default,
.content-modele #portal .btn-default,
.bibliographie-modele #portal .media-heading a,
.bibliographie-modele #portal .title a,
.bibliographie-modele #portal .rebond a.btn-plus {
    color: #000;
}


/* --- Information sur les paragraphes - bibliographies ----- */

.bibliographie-modele .footer-icon-container,
.bibliographie-modele a span.cms-icon-rss {
    /*Correspond à la div avec les icônes de type flux RSS qui est caché dans les recherches capturés... */
    display: none;
}


/* Petit trait séparateur des typologies au titre */


/*.bibliographie-modele .sur-titre:after, .bibliographie-modele #sur-titre-detail:after, .bibliographie-modele p.evene:after  {
			content: url("images/pp-trait-separateur-noir.png");
			display: block;
		}*/

.bibliographie-modele .rs-staticList p,
.bibliographie-modele p.template-parent {
    margin: 0;
}

.bibliograpie-modele .rebond-bleu p,
.bibliograpie-modele .rebond-blanc p {
    margin: 12px 0;
}

.bibliographie-modele p.selection-description {
    /*Correspond au paragraphe dans la sous catégorie dans recherche capturée - partie dite "description" après H2 */
    font-size: 1.3em;
    margin-top: -5px;
    border: none;
}

.bibliographie-modele p.template-resume {
    font-style: normal;
    font-size: 1em;
    line-height: 15px;
}

.bibliographie-modele p.template-auteur {
    /* template-auteur  : correspond aux noms auteurs pour partie guide d'écoute - UNI8C */
    font-family: "SourceSansPro";
    font-weight: 500;
}

.bibliographie-modele p.template-info,
p.info_triptyque_selection,
.bibliographie-modele ul.template-info li,
.bibliographie-modele p.describe,
.bibliographie-modele p.template-auteur {
    padding-bottom: 5px;
}

.bibliographie-modele .template-physicalDescription {
    /* Correspond dans résultat recherche capturée au nombre de pages pour livre, article ... */
    margin-bottom: 5px;
}

.bibliographie-modele .public-dest {
    /* Information à afficher dans les résultats de recherche mais pas dans les sélections */
    display: none;
}

.bibliographie-modele .frame .only-content {
    /* IMPORTANT : marge entre titre + résultats 	margin-top:-25px;*/
    /*margin-top:10px !important;*
			margin-bottom:2em !important;*/
}

.bibliographie-modele p.date,
.bibliographie-modele p.template-call-number {
    /* Exemple : Cote : 84.15 REV pour template-call-number */
    color: #808285;
}

.bibliographie-modele p.template-call-number {
    /* Pour mettre à la ligne les cotes */
    display: block;
}

.bibliographie-modele p.template-summary {
    /* Résumé fait par les documentalistes sur les documents - en italique */
    font-style: italic;
    display: initial;
}

.bibliographie-modele div.InstrumentTypeValue,
.bibliographie-modele li.desc-list-item,
.bibliographie-modele div.PlaceOfProductionValue,
.bibliographie-modele div.DateOfProductionValue,
.bibliographie-modele .template-info,
.bibliographie-modele .info_triptyque_selection {
    color: #000;
    font-weight: normal;
    font-family: SourceSansPro;
    font-size: 15px;
}

.bibliographie-modele div.InventoryNumberValue,
.bibliographie-modele div.DateOfProductionValue,
.bibliographie-modele p.template-subject,
.bibliographie-modele .cim-short-CONTRAT_1,
.bibliographie-modele .cim-short-genre,
.bibliographie-modele span.cim-short-duree-type-doc {
    /* Ne pas laisser les numéros inventaires apparaître dans la notice détaillée de la recherche capturée*/
    display: none;
}

.bibliographie-modele span.cim-short-duree-type-doc {
    display: block;
    /* affiche le trait*/
}


/* ---------------- Début Encart recherche capturée dans page bibliographie  ----------------*/

.bibliographie-modele div.webframe-ermes-lastviewedresources-item {
    /* Bordure grise claire autour de chaque résultat de la recherche captureé*/
    border: 1px solid #ebebeb;
}

.bibliographie-modele .notice_corps {
    /* Dans résultat recherche capturée, on met les résultats sur 80 % de la largeur pour image à gauche en float */
    width: 80%;
    float: left;
}

.bibliographie-modele .notice_corps br {
    /* Certains BR qui trainent, obligé de les cacher en display none */
    display: none;
}

.bibliographie-modele #portal .notice_corps a:hover {
    text-decoration: none;
}


/* ---------------- triptyque Encart recherche capturée dans page bibliographie  ----------------*/


/* -------------Titre h3 recherche capture ------------ */

.bibliographie-modele .only-content h3.title.template-title,
.bibliographie-modele .triptyque-lg-resume h3.title.template-title {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 18px;
    color: #000;
    padding-top: 1px;
}


/* -------------pour changer la couleur des titres dans l'affichage court ------------ */

.bibliographie-modele .template-title,
.bibliographie-modele .title_triptyque_selection {
    /*color:#7ab9ff !important; bleu clair*/
    color: #000 !important;
    font-weight: bolder !important;
}


/* -------------btn recherche capture ------------ */

.bibliographie-modele .bs-bullets .rsNavSelected button {
    background: none repeat scroll 0 0 #b3d6fd;
}

.bibliographie-modele .bs-bullets button,
.bibliographie-modele .bs-bullets button:hover {
    border-color: #999;
    border-radius: 10px;
    margin-top: 25px;
}


/*  On masque les éléments suivants dans les triptyques des sélections : catégorie, collation, etc. */

.bibliographie-modele .rs-slide3Items p.sur-titre,
.bibliographie-modele .rs-slide3Items p.template-physicalDescription,
.bibliographie-modele .rs-slide3Items p.template-call-number,
.bibliographie-modele .rs-slide3Items span.cim-short-duree-type-doc {
    display: none;
}


/*  On limite la hauteur du titre */

.bibliographie-modele .rs-slide3Items .div_gradient h3.title.template-title {
    max-height: 3.5em;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 0px;
}


/*  On limite la hauteur des mentions de responsabilité */

.bibliographie-modele .rs-slide3Items .div_gradient p.template-info {
    max-height: 2.5em;
    font-family: SourceSansPro;
    font-size: 15px;
    font-weight: normal;
    margin: 0px;
}

.bibliographie-modele .rs-slide3Items p.template-editeur {
    color: #808285;
    font-size: 14px;
}


/*  On floute le texte qui dépasse */

.bibliographie-modele .rs-slide3Items div.div_gradient {
    overflow: hidden;
}

.bibliographie-modele .rs-slide3Items div.gradient {
    background-color: transparent !important;
    display: block;
    position: relative;
    bottom: 0px;
    width: auto;
    height: 24px;
    text-align: right;
    background: url("images/gradient.png");
}

.bibliographie-modele .rs-slide3Items p.template-info
/* CC (26/09/2016) : Ligne à supprimer quand l'affichage en triptyque sera affiné */

{
    margin-bottom: 0px;
}

.bibliographie-modele .rs-slide3Items p.template-editeur {
    margin-top: 0.5em;
}


/* Hauteur d'encart plus grande pour les documents comportant des résumés longs (choisir le style "triptyque-lg-resume" dans l'encart) */

.bibliographie-modele .triptyque-lg-resume .rsVisibleNearbyWrap {
    height: 35em !important;
    width: 1055px;
}

.bibliographie-modele .triptyque-lg-resume .rsOverflow.grab-cursor {
    overflow: visible;
    width: 348.15px;
    height: 35em !important;
}

.bibliographie-modele .triptyque-lg-resume .rsOverflow {
    overflow: visible;
    width: 348.15px;
    height: 35em !important;
}


/* -----------Fin modifs CC 24/09/2016----------------------*/


/* ---------Affichage des oeuvres du Musée dans les sélections du Catalogue -------------*/


/* On masque la famille d'instruments*/

.bibliographie-modele #portal .slider-notice .InstrumentTypeValue,
.bibliographie-modele #portal .rs-staticList .InstrumentTypeValue {
    display: none;
}

.bibliographie-modele #portal .notice_corps .AuthorValue,
.bibliographie-modele #portal .notice_corps .PlaceOfProductionValue {
    color: #000000;
}


/* -------------selection-description ------------ */

.bibliographie-modele .selection-description {
    background: #F5F5f5;
    border: 1px solid;
    border-color: #FFFFFF;
    margin: 0 0 12px;
    padding: 5px;
    font-size: 20px;
    font-family: 'SourceSansPro';
}


/* -------------rendre plus visible la description ------------ */

.bibliographie-modele .rsVisibleNearbyWrap {
    height: 22em !important;
    width: 1055px;
}

.bibliographie-modele .rsOverflow.grab-cursor {
    overflow: visible;
    width: 348.15px;
    height: 22em !important;
}

.bibliographie-modele .rsOverflow {
    overflow: visible;
    width: 348.15px;
    height: 22em !important;
}


/* -------------separateur concerts videos ------------ */


/* .bibliographie-modele .line{
   			 content: url("images/pp-trait-separateur-noir.png");
   			 display: block;
			}*/

.bibliographie-modele .slider-notice {
    width: 200px !important;
}


/* --------- Flèches droites et gauches du slider---------*/

.bibliographie-modele .rsDefaultInv .rsArrowIcn {
    width: 32px;
    height: 100%;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
    position: absolute;
    cursor: pointer;
    outline: none !important;
}

.bibliographie-modele .rsDefaultInv.rsHor .rsArrowLeft .rsArrowIcn {
    background: url("images/arrow-left2.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.bibliographie-modele .rsDefaultInv.rsHor .rsArrowRight .rsArrowIcn {
    background: url("images/arrow-right2.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.bibliographie-modele .rsDefaultInv .rsArrowIcn {
    border-radius: none;
    height: 50px;
}


/* .bibliographie-modele button:focus, .accueil-modele .btn:focus {
		outline:none !important;
		} */


/* ---------------- Fin Encart recherche capturée dans page bibliographie  ----------------*/


/* -------------- Informations communes encarts droite rebond et rebond-biblio ------------ */

.bibliographie-modele .rebond .media-body,
.bibliographie-modele .rebond-biblio .media-body {
    margin: 14px;
}

.bibliographie-modele .rebond img,
.bibliographie-modele .rebond-biblio img {
    /* Image pour la partie des rebonds, en 100 % de largeur */
    width: 100%;
}


/* --------------  Début ENCART PARTAGE sur doite une question à la médiathèque avec fond gris -------------- */

.bibliographie-modele #portal .rebond {
    /* Encart partagé "une question à la médiathèque avec fond gris */
}

.bibliographie-modele #portal .rebond div#content-rebond {
    padding: 12px;
}


/* -------------- Fin ENCART PARTAGE sur doite une question à la médiathèque avec fond gris -------------- */


/* -------------- Début ENCART sur droite avec fond bleu ------------ */

.bibliographie-modele .rebond .bckg-bleu {
    /* Encarts class"rebond" pour tous ce qui concerne des liens vers nos sites - sinon, utiliser même encart mais avec class rebond-biblio */
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.bibliographie-modele #portal .rebond p {
    margin-bottom: 5px;
}

.bibliographie-modele .rebond p.describe {
    padding-bottom: 10px;
}


/* -------------- Fin Début ENCART sur droite avec fond bleu ---------- */


/* -------------- Début ENCART sur droite sans background  ------------ */

.bibliographie-modele #frame-7537 p.Biblio-selection {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-size: 2.5rem;
    margin-bottom: 0;
}

#frame-7537 div.frame-standard.panel.panel-front.webframe-ermes-carousel {
    background: none;
}

.bibliographie-modele div.border-gris {
    border: 1px solid #ebebeb;
    margin-bottom: 10px;
}


/* -------------- Fin ENCART sur droite sans background  ------------ */


/* -------------- Début ENCART Html en bas------------ */

.bibliographie-modele .thumbnail {
    margin-bottom: 10px;
}


/* Début du MENU DES BIBLIOGRAPHIES - non fixe */

.bibliographie-modele .menu nav ul li a {
    font-family: 'SourceSansPro', sans-serif;
}


/* Fin du MENU DES BIBLIOGRAPHIES - non fixe */


/* Début du MENU FIXE DES BIBLIOGRAPHIES - class de l'encart : .sommaire-fixe */

.bibliographie-modele .sommaire-fixe h3 {
    /*#menu-fixe-thematique */
    text-transform: uppercase;
    margin-top: 0;
    font-size: 1.143em;
}

.bibliographie-modele .sommaire-fixe {
    /*#menu-fixe-thematique */
    position: fixed;
    width: 300px;
    height: auto;
    right: 1%;
    top: 42%;
    margin-left: -200px;
    padding: 10px;
    background: #b3d6fd;
    border: 1px solid #b3d6fd;
    z-index: 1000003;
}

.bibliographie-modele .sommaire-fixe p {
    margin: 10px;
    margin-top: 15px;
}

.bibliographie-modele .sommaire-fixe a.retour {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: normal;
    background-color: #fff;
}

@media screen and (min-width: 200px) and (max-width: 1280px) {
    /* Menu sommaire fixe bibliographies / Responsive */
    .bibliographie-modele .sommaire-fixe {
        visibility: hidden;
    }
}

@media screen and (min-width: 200px) and (max-width: 990px) {
    /* Partie responsive pour les encarts à droite */
    .bibliographie-modele .rebond img,
    .bibliographie-modele .rebond-biblio img {
        width: 300px;
    }
    .bibliographie-modele div.bckg-bleu {
        width: 300px;
    }
    .bibliographie-modele #portal .rebond div.rsItem {
        background: none;
    }
    .bibliographie-modele .rebond-biblio div {
        width: 300px;
    }
}


/* ---------------- Fin menu fixe des bibliographies----------------- */


/* ############################################## FIN Bibliographie - sélection thématique ################################################################### */


/* ###############################  Début Exposition modèle ############################### */


/* ---- Début catégorie presentation exposition - */

p.presentation-expo,
p.presentation-portrait-facteur {
    /* Correspond à l'encart partage : toutes les expositions */
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-size: 2.857em !important;
    margin-bottom: 0;
}

@media screen and (min-width: 200px) and (max-width: 980px) {
    p.presentation-expo,
    p.presentation-portrait-facteur {
        font-size: 2em !important;
        margin: 0;
        line-height: 1.071em;
    }
}

#frame-13494 div.frame-standard.panel.panel-front.webframe-ermes-carousel {
    background: none;
}


/* ---- Fin catégorie presentation exposition - */


/* --- Début Niveaux de titre --*/

.exposition-modele h1.line,
.histoireinstru-modele h1.line {
    margin-bottom: 10px;
}

.exposition-modele p.sous-titre-expo {
    font-size: 2em;
    font-style: italic;
    margin-top: 5px;
}

.exposition-modele h2,
.histoireinstru-modele h2 {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-size: 1.5rem;
    background: none !important;
}

.exposition-modele h2.line,
.histoireinstru-modele h2.line {
    margin-bottom: 12px;
}


/* ------------ Début http://collectionsdumusee.philharmoniedeparis.fr/exposition-travelling-guitars-guitares-de-stars.aspx -------------- */

.exposition-modele article.travelling {
    height: 795px;
}

.exposition-modele article.travellingEspace {
    height: 900px;
}

.exposition-modele article.travelling figure {
    padding-bottom: 10px;
}

.exposition-modele article.travelling h2 {
    /* Pour travelling guitars : guitars de stars */
    margin: 0 0 10px 0;
    font-size: 1.17em;
}

@media screen and (min-width: 200px) and (max-width: 990px) {
    .exposition-modele article.travellingEspace,
    .exposition-modele article.travelling {
        height: auto;
    }
}


/* ------------ Fin http://collectionsdumusee.philharmoniedeparis.fr/exposition-travelling-guitars-guitares-de-stars.aspx -------------- */

.exposition-modele h3,
.exposition-modele h2.expo-lieu-musee,
.histoireinstru-modele h3 {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-size: 1.438em;
    padding: 5px 0 10px 0px;
    font-weight: normal;
}

.exposition-modele h2.expo-lieu-musee {
    text-transform: none;
}

.exposition-modele h4,
.histoireinstru-modele h4 {
    font-family: 'SourceSansPro', sans-serif;
    font-size: 1.071em;
    font-weight: 700;
    margin: 10px;
    margin-left: 0;
}

.exposition-modele h4 span.soundcite,
.histoireinstru-modele h4 span.soundcite {
    /* + de padding quand extrait audio en H4 */
    padding: 5px;
}

.exposition-modele div.modele_6.model-html .panel-body h4,
.histoireinstru-modele div.modele_6.model-html .panel-body h4 {
    padding: 0px 0 10px 0px;
}

.exposition-modele div.modele_6.model-html .panel-body h5,
.exposition-modele div.modele_6.model-html .panel-body h5 em {
    padding: 0px;
    font-size: 1.000em;
}

.exposition-modele h5,
.exposition-modele h5 em {
    font-family: "SourceSansPro";
    font-size: 1.125em;
    margin-bottom: 10px;
    font-weight: bold;
    padding: 10px 0px 0px 10px;
}


/* --- Fin Niveaux de titre --*/

.exposition-modele p,
.histoireinstru-modele p {
    font-size: 1.125em;
    margin-top: 0;
}


/* ---- Début ----- */

.exposition-modele #portal ul,
.histoireinstru-modele #portal ul,
.facteur-modele #portal ul {
    margin: 5px 0px;
}

.exposition-modele #portal .rsItem li,
.histoireinstru-modele #portal .rsItem li,
.facteur-modele #portal .rsItem li {
    font-size: 1.125em;
    list-style-image: url(images/puces.png);
    margin-left: 20px;
    padding: 1px 0px;
    font-family: 'SourceSansPro', 'Arial', 'Helvetica', sans-serif;
}

.exposition-modele #portal a,
.histoireinstru-modele #portal a,
.facteur-modele #portal a {
    color: #1D89DB;
}

.histoireinstru-modele #portal section.mosaique a {
    color: #fff;
}


/* ---- Fin ----- */


/* ----- Début ? pour definition historie instru ---*/

.histoireinstru-modele a.dfnGlossaire:after {
    content: "?";
    font-size: 0.6em;
    color: #fff;
    vertical-align: top;
    background-color: #1D89DB;
    padding: 0px 2px;
    margin-left: 2px;
    opacity: 0.7;
}


/* ---- Début - Dans accordéon, article avec img gauche, texte à droite --- */

.exposition-modele #portal article.gauche,
.exposition-modele #portal article.gauche img {
    float: left;
}

.exposition-modele #portal article.gauche p {
    padding: 10px;
}

.exposition-modele #portal article.gauche img {
    padding: 10px 10px 10px 0;
}


/* ---- Fin - Dans accordéon, article avec img gauche, texte à droite --- */


/* ------ Début Liens rebond --- */

.exposition-modele #portal a.btn,
.histoireinstru-modele #portal a.btn {
    background-color: #b3d6fd;
}


/* ----Fin Liens rebond --- */


/* -- Début Image rebond --*/


/*.exposition-modele .rebond-bleu .pull-left, .exposition-modele .rebond-blanc .pull-left,
			.histoireinstru-modele .rebond-bleu .pull-left, .histoireinstru-modele .rebond-blanc .pull-left,
			.listing-modele .rebond-bleu .pull-left, .listing-modele .rebond-blanc .pull-left	{
				float:none !important;
			}*/


/* ----- Fin rebond bleu ou blanc droite -----------*/


/* ----- Accordéon -----  */

.exposition-modele .panel-model,
.histoireinstru-modele .panel-model {
    border-color: #F5F5F5;
}

.exposition-modele div.modele_6.model-html figure,
.histoireinstru-modele div.modele_6.model-html figure {
    margin-bottom: 10px;
}


/* ---- Image à droite, image à gauche ------ */

.exposition-modele .content-img-dr figure,
.histoireinstru-modele .content-img-dr figure,
.facteur-modele .content-img-dr figure {
    float: right;
    margin: 0 0px 10px 15px;
}

.exposition-modele .content-img-gch figure,
.histoireinstru-modele .content-img-gch figure,
.facteur-modele .content-img-gch figure {
    float: left;
    margin: 0 15px 10px 0px;
}

.exposition-modele .content-img-dr figure,
.exposition-modele .content-img-gch figure,
.histoireinstru-modele .content-img-dr figure,
.histoireinstru-modele .content-img-gch figure,
.facteur-modele .content-img-dr figure,
.facteur-modele .content-img-gch figure {
    width: 300px;
    min-width: 250px;
    clear: both;
}


/* ---- Image à droite, image à gauche ------ */


/* ---- Applat bleu -----*/

.exposition-modele article.applat.bckg-bleu,
.histoireinstru-modele article.applat.bckg-bleu,
.facteur-modele article.applat.bckg-bleu {
    padding: 10px;
}


/* ----- Partie responsive exposition modèle ! -------------------------*/

@media screen and (min-width: 200px) and (max-width: 480px) {
    .exposition-modele .content-img-dr figure,
    .exposition-modele .content-img-gch figure,
    .histoireinstru-modele .content-img-dr figure,
    .histoireinstru-modele .content-img-gch figure,
    .facteur-modele .content-img-dr figure,
    .facteur-modele .content-img-gch figure {
        width: 100%;
        min-width: 100%;
    }
}


/* ----- Pour enlever le cadre gris de certaines images --------- */

.exposition-modele figure img.no-border {
    border: none;
}


/* ###############################  Fin Exposition modèle ############################### */


/* ############################### Facteur modèle ####################################### */

#frame-21567 div.frame-standard.panel.panel-front.webframe-ermes-carousel {
    background: none;
}


/* Type de page : #21567 encart partagé donc numéro unique*/

.facteur-modele figure img {
    border: none;
}

.facteur-modele .incontournable-rebond a.btn-default {
    color: #000000 !important;
}

.facteur-modele .incontournable-rebond h3 {
    font-size: 1.1em !important;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    line-height: 1.15;
    padding-top: 0 !important;
}


/* ############################ Fin de Facteur modèle ################################### */


/* ############################### Début encart du glossaire instrument  ####################### */


/* Navigation des onglets du tableau */

#portal .rsItem ul.nav.nav-tabs li {
    margin-left: 0;
    padding: 0;
}


/* --- Partie 1 : termes à définir -- */

#myTabContent div.TermesGlossaire {
    /* Div qui se place à gauche avec tous les termes à définir*/
    display: inline-block;
    width: 25%;
    margin-top: 20px;
    padding-left: 15px;
}

#myTabContent .TermesGlossaire h3 {
    /* Termes en H3 */
    padding: 5px 0px 0px 0px;
    font-family: "SourceSansPro";
    font-weight: 500;
    font-weight: normal;
    font-size: 1.075em;
}

#myTabContent .TermesGlossaire a {
    /* Lien dans les termes en h3*/
    text-decoration: none;
}

#myTabContent div.TermesGlossaire span {
    /* span qui correspond aux dates naissances mort des facteurs */
    display: block;
    font-size: 0.850em;
    color: #000;
    padding-top: 2px;
}


/* - Rendre visible quand lien actif--  */

#myTabContent .TermesGlossaire a.current,
#myTabContent .TermesGlossaire a.current span {
    border-left: 3px solid #7ab9ff;
    padding-left: 10px;
    color: #000;
    margin-left: -15px;
}


/* --- Partie 2 : Définition -- */

#myTabContent div.DefinitionGlossaire {
    /* Div qui englobe toutes les definitions, avec les article pour chaque définition */
    float: right;
    display: inline-block;
    width: 70%;
    padding-right: 10px;
}

#myTabContent div.DefinitionGlossaire article {
    /* Le container de la définition - definition cachée jusqu'à action target */
    display: none;
    padding: 0px 10px 0px 0px;
    border-left: 3px solid #7ab9ff;
    right: 5px;
    top: 27px;
    position: relative;
    background-color: #FAF8F9;
}

#myTabContent div.DefinitionGlossaire>article:first-child {
    display: inherit;
}

#myTabContent div.DefinitionGlossaire article:target {
    /* Apparition definition quand Target */
    display: block;
}

#myTabContent div.DefinitionGlossaire article * {
    padding-left: 10px;
}

#myTabContent div.DefinitionGlossaire sup {
    padding-left: 0px;
}


/*#myTabContent div.DefinitionGlossaire article div p {
				float: left;
				margin-right: 30px;
				margin-top: 0;
			}*/

#myTabContent .DefinitionGlossaire h3 {
    /* Correspond aux noms definitions niveau h3 */
    font-size: 1em;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
}

#myTabContent .DefinitionGlossaire p {
    font-size: 1em;
}


/* ---- partie responsive sur les tableaux */

@media screen and (min-width: 200px) and (max-width: 480px) {
    #myTabContent div.TermesGlossaire {
        width: 100%;
    }
    #myTabContent div.DefinitionGlossaire {
        width: 100%;
        float: none;
    }
}

.x-webkit *:focus,
*:focus {
    outline: 0px dotted black !important;
}


/* ############################################### FIN du glossaire instrument  ########################################## */


/* ############# Début encart chronologie / Class .chronologie au niveau de l'encart  /exposition-great-black-music-chronologie.aspx#################################### */


/* -------- Concerne contenus texte --------- */

#portal .chronologie li h2 {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-size: 1.438em;
    padding: 5px 0 10px 0;
    background: none;
}

#portal .chronologie li h2 span {
    background: none;
}

#portal .chronologie #slider li td h3 {
    font-family: "SourceSansPro";
    font-weight: 500;
    font-size: 1.143em;
}

#portal .chronologie #content p {
    font-size: 1.143em;
}


/* -----  Concerne les images ----- */

#portal .chronologie #slider {
    float: left;
    position: relative;
    overflow: auto;
    width: 870px;
    height: 550px;
    border: 2px solid #fff;
    background: #f7f7f7;
}


/* Version 660px large .slider660: exemple http://collectionsdumusee.philharmoniedeparis.fr/exposition-europunk.aspx*/

#portal .chronologie .slider660 {
    width: 690px !important;
    height: 510px !important;
}


/* ----- Fin version diaporama chronologie version 660 px large-------- */

#portal .chronologie #slider ul {
    position: absolute;
    list-style: none;
    top: 0;
    left: 0;
}

#portal .chronologie #slider li {
    float: left;
    width: 870px;
    height: 550px;
    padding: 15px;
    overflow: auto;
    margin-left: 0;
    margin-right: 0;
}

#portal .chronologie #slider li td * {
    font-family: "SourceSansPro";
}


/* ------ Fin partie images --------- */


/* ------------ Table ------------*/

.chronologie table {
    width: 100%;
}

.chronologie td {
    width: 30%;
    vertical-align: top;
}

.chronologie td:first-child {
    padding-right: 20px;
    width: 20%;
}

.chronologie thead tr td {
    border-bottom: solid 3px #b3d6fd;
    padding: 0px 0px 10px 0px;
    font-weight: bold;
}


/* ------- Pagination à la fin - avec date------- */

#portal .chronologie #pagination {
    float: left;
    list-style: none;
    margin: 15px 0 0 0px;
    width: 870px;
}

#portal .chronologie #pagination li {
    font-size: 0.857em;
    cursor: pointer;
    padding: 5px;
    margin: 0 4px 4px 0;
    background-color: #b3d6fd;
}

#portal .chronologie #pagination li:hover {
    opacity: 0.70;
    text-decoration: none !important;
    -webkit-transition: all 0.4s ease-in-out 0.1s;
    transition: all 0.4s ease-in-out 0.1s;
}

#portal .chronologie li.current {
    background: #333333;
    color: #FFF;
}


/* ----- Partie responsive ---- */

@media screen and (min-width: 480px) and (max-width: 768px) {
    #portal .chronologie #slider {
        width: 520px;
        height: 500px;
    }
    /* Version 660px large .slider660: exemple http://collectionsdumusee.philharmoniedeparis.fr/exposition-europunk.aspx*/
    #portal .chronologie .slider660 {
        width: 600px !important;
        height: 420px !important;
    }
    #portal .chronologie .slider660 li {
        width: 580px !important;
    }
    /* ----- Fin version diaporama chronologie version 660 px large-------- */
    #portal .chronologie #slider li {
        width: 520px;
        height: 500px;
    }
    #portal .chronologie .pagination {
        width: 520px;
    }
}

@media screen and (min-width: 200px) and (max-width: 479px) {
    #portal .chronologie #slider {
        width: 400px;
        height: 500px;
    }
    #portal .chronologie #slider li {
        width: 400px;
        height: 500px;
    }
    #portal .chronologie #pagination {
        width: 400px;
    }
    .chronologie td {
        width: 100% !important;
        display: inline;
    }
    .chronologie td:first-child {
        padding-right: 0;
    }
}


/* #############################  FIN  CHRONOlogie ########################################## */


/* #############################  Début Encart Accroche ########################################## */

.accroche figure {
    float: left;
    margin: 0 15px 5px 0;
    clear: both;
    max-width: 300px;
}

.accroche img {
    float: left;
    margin-bottom: 10px;
    border: none;
}

.accroche p {
    font-family: "SourceSansPro";
    font-weight: 500;
    font-size: 1.143em;
    margin-top: 0;
}

#portal .accroche ul li {
    list-style-image: url(images/puces.png);
    margin-left: 20px;
    padding: 1px 0px;
}

@media (min-width: 200px) and (max-width: 400px) {
    .accroche figure,
    .accroche figcaption {
        width: 100%;
    }
}


/* #############################  Fin Accroche ########################################## */


/* ############################# Début ENCART DROITE Rebond bleu, rebond blanc ################ */

.catalogue.rebond-bleu h2,
.catalogue.rebond-blanc h2 {
    /* background: url("images/h2.png") repeat-x scroll left center rgba(0, 0, 0, 0) !important; */
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    padding: 15px 0 5px 0;
}

.edutheque .rebond-bleu h2,
.edutheque .rebond-blanc h2 {
    background: none !important;
    padding: 0px !important;
}

.rebond-bleu h3,
.rebond-blanc h3 {
    font-size: 1.1em !important;
    font-family: 'Philharmonique', sans-serif;
    line-height: 1.15;
    text-transform: uppercase;
    padding-top: 0 !important;
}

.rebond-bleu h3.sans-sur-titre,
.rebond-blanc h3.sans-sur-titre {
    padding-top: 10px !important;
}


/* -- Début paragraphe rebond --*/

.rebond-bleu .media-body,
.rebond-blanc .media-body {
    margin: 14px;
    margin-bottom: 0;
    margin-top: 0;
}

.rebond-bleu p,
.rebond-blanc p {
    font-size: 1em !important;
    margin: 12px 0;
}

.rebond-bleu p.line,
.rebond-blanc p.line,
.rebond-bleu p.sur-titre,
.rebond-blanc p.sur-titre {
    padding-top: 10px;
    margin-top: 0 !important;
}

.rebond-bleu p.describe,
.rebond-blanc p.describe {
    height: auto;
}


/* lien - bouton call to action dans rebond */

#portal .rebond-blanc a.btn {
    color: #000;
}

.rebond-blanc div.border-gris {
    /* Rebond blanc, petit border gris autour */
    /* border: 1px solid #ebebeb !important; */
    margin-bottom: 10px !important;
}


/* -- Fin paragraphe rebond --*/


/* ------ Début image en 100% dans rebond - privilégier 350X350-------*/

.rebond-bleu img,
.rebond-bleu .media-body,
.rebond-blanc img,
.rebond-blanc .media-body {
    clear: both;
    border: none;
}

.rebond-bleu img {
    padding: 10px 10px 0px 10px;
}

.rebond-bleu img,
.rebond-blanc img {
    width: 100%;
    margin-bottom: 10px !important;
}


/* ------------  DIV Rebond bleu avec margin bottom en bas----------------- */

.rebond-bleu .bckg-bleu {
    margin-bottom: 10px;
    padding-bottom: 5px;
}


/* ------ Fin image en 100% dans rebond - privilégier 350X350-------*/

@media screen and (min-width: 200px) and (max-width: 980px) {
    .rebond-bleu .panel-body,
    .rebond-blanc .panel-body {
        width: 300px;
    }
    .rebond-bleu .panel-body {
        float: left;
    }
}


/* ############################# Fin ENCART DROITE Rebond bleu, rebond blanc ################ */


/* ############################# Début encart partie dédiée au modèle commun content-modele ##################################### */


/* --- Niveaux de titre ---- */

.content-modele h2 {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-size: 1.438em;
    padding: 5px 0 10px 0;
    background: none !important;
}

.content-modele #portal .frame-ermes-searchcapturemultirender h2,
.content-modele #portal .rebond h2,
.content-modele #portal .rebond-blanc h2,
.content-modele #portal .rebond-bleu h2,
.facteur-modele #portal .rebond-blanc h2,
.facteur-modele #portal .rebond-bleu h2 {
    /* H2 des recherches capturées - modification police...*/
    font-size: 1.475em;
    /* background: url("images/h2.png") repeat-x scroll left center rgba(0, 0, 0, 0) !important; */
    background: none;
    font-family: 'Philharmonique', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    padding: 0;
}

.catalogue.content-modele #portal .frame-ermes-searchcapturemultirender h2,
.catalogue.content-modele #portal .rebond h2,
.catalogue.content-modele #portal .rebond-blanc h2,
.catalogue.content-modele #portal .rebond-bleu h2,
.catalogue.facteur-modele #portal .rebond-blanc h2,
.catalogue.facteur-modele #portal .rebond-bleu h2 {
    /* background: url("images/h2.png") repeat-x scroll left center rgba(0, 0, 0, 0) !important; */
}

.content-modele h3 {
    font-family: 'SourceSansPro', sans-serif;
    font-size: 1.25rem;
    text-transform: uppercase;
}

.content-modele h4 {
    font-family: 'SourceSansPro', sans-serif;
    font-size: 1.25rem;
    padding: 5px 0 5px 0;
    font-weight: 700;
}

.musee.content-modele h3,
.musee.content-modele h4,
.musee.content-modele #portal .frame-ermes-searchcapturemultirender h2,
.musee.content-modele #portal .rebond h2,
.musee.content-modele #portal .rebond-blanc h2,
.musee.content-modele #portal .rebond-bleu h2,
.musee.facteur-modele #portal .rebond-blanc h2,
.musee.facteur-modele #portal .rebond-bleu h2 {
    background: none;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
}


/* Partie responsive concernant les titres */

@media screen and (min-width: 320px) and (max-width: 767px) {
    .content-modele #portal h1 {
        font-size: 2em;
    }
}


/* ------------- Fin niveau de Titres (H1, H2, H3)  PAGES contenus outils EDUCATIF -------------------- */


/* ------ Début padding content modele ------- */

.content-modele .panel-front.only-content,
.content-modele .panel-front.content-img-dr,
.content-modele .panel-front.content-img-gch {
    padding-top: 0;
}


/* --------- Début paragraphe + liste pour la base content modele --------------- */

.content-modele p,

/* Début content-modele : la base */

.content-modele #portal .rsItem li {
    /*			font-size: 1.125em;*/
    font-size: 1rem;
    margin-right: 20px;
}

.content-modele .only-content p,
.content-modele .content-img-dr p,
.content-modele .content-img-gch p {
    margin-top: 0;
}

.content-modele #portal .rsItem li {
    list-style-image: url(images/puces.png);
    margin-left: 20px;
    margin-top: 0;
    padding: 1px 0px;
    font-family: 'SourceSansPro', 'Arial', 'Helvetica', sans-serif;
}


/*-----Début LISTE avec carrés bleus ---------------------- */

.content-modele #portal .liste ol {
    /* Liste à numéro */
    padding: 0px 0px 10px 15px;
}

.content-modele #portal ul {
    margin-bottom: 5px;
}

.content-modele #portal ul.nav.nav-tabs,
.histoireinstru-modele #portal ul.nav.nav-tabs {
    margin-bottom: 0;
}

.content-modele #portal ol li {
    list-style-image: none;
    margin-left: 10px;
}


/* -------------Fin  LISTE numérotées avec carrés bleus ------------ */


/* ------------- Fin paragraphe + liste -  PAGES Modèle commun -------------------- */


/* ------------- Début LIENS DANS PAGES Modèle commun ------------------------------ */

.content-modele #portal a {
    /* Tous les liens des pages contenus dossiers éducatifs sont bleus*/
    color: #1D89DB;
}

.content-modele #portal a:hover {
    /* Tous les liens des pages contenus dossiers éducatifs en hover sont soulignes*/
    text-decoration: underline;
}

.content-modele a.btn-plus-bl {
    /* Couleurs du contenu des boutons en noir*/
    color: #000 !important;
}


/*.content-modele a.btn-default {   /* Couleurs du contenu des boutons en noir  Rend illisible les boutons du menu
				color:#000 !important;
			}*/


/* -------- Fin LIENS DANS PAGES content modele  --------- */


/* ---------  Infos tableaux --------------- */

.content-modele #portal td,
.content-modele #portal tr {
    border: 1px solid #b3d6fd;
}

.content-modele td {
    color: #000;
    padding-left: 10px;
}


/*-----Début titre du site------------------------- */


/*.listing-modele #portal div.frame-standard.panel.panel-front.webframe-ermes-carousel.titre-site,*/

.content-modele #portal div.frame-standard.panel.panel-front.webframe-ermes-carousel.titre-site,
.facteur-modele #portal div.frame-standard.panel.panel-front.webframe-ermes-carousel.titre-site {
    background: none;
}


/*.listing-modele #portal .titre-site p,*/

.content-modele #portal .titre-site p,
.facteur-modele #portal .titre-site p {
    font-family: 'Philharmonique', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 2.857em;
    margin-bottom: 0;
    text-align: center;
}

@media screen and (min-width: 200px) and (max-width: 980px) {
    /*.listing-modele #portal .titre-site p,*/
    .content-modele #portal .titre-site p,
    .facteur-modele #portal .titre-site p {
        font-size: 2em;
    }
}


/* -------------Fin  titre du site ------------ */


/* ------------- Début  Images content-modele ------------ */


/* Suppression bordure grise - Ajout ccecconi 20160609 */

.listing-modele figure img {
    border: none;
}


/* Fin Suppression bordure grise*/

.content-modele .content-img-gch figure,
.content-modele .content-img-dr figure {
    width: 300px;
    min-width: 250px;
    margin: 0 15px 10px 0px;
    clear: both;
}

.content-modele .content-img-gch figure {
    /* Images ferrees à gauche dans les encarts contenus concert éducatif */
    float: left;
}

.content-modele .content-img-dr figure {
    /* Images ferrees à droite dans les encarts contenus concert éducatif */
    float: right;
    margin-left: 10px;
}


/* -------- Partie responsive sur les images--------- */

@media (min-width: 200px) and (max-width: 400px) {
    .content-modele .content-img-dr figure {
        width: 100%;
        float: none;
        margin: 0;
    }
}


/* -------------Fin  Images entre  content-modele ------------ */

.content-modele article {
    /* Infos espacement pour tous les articles */
    display: inline-block;
    margin-top: 0;
    width: 100%;
}


/* --------------- Début REBOND PAGE - Recherche capturée Guide ecoute, concert vidéo ------------- */

.content-modele .rebond .rsItem ul li a img {
    width: 70px;
    height: auto;
    padding: 5px 10px 0 0;
    float: left;
}

.content-modele #portal .frame-ermes-searchcapturemultirender a {
    /* Bouton tout voir fond bleu écriture noire*/
    color: #000;
}

.content-modele img.ermes-thumb-size-MEDIUM {
    /* petite vignette des vidéos, guides écoutes dans les rebonds */
    min-width: 90px !important;
    min-height: 60px !important;
}


/* champs que l"on cache à l'affichage avec CSS pour les rebonds  */

.content-modele .rebond .rs-staticList .cim-short-contrat,
.content-modele .rs-staticList .cim-short-contrat,
.content-modele .rs-staticList .line,
.content-modele .rs-staticList .cim-short-duree-type-doc,
.content-modele .rebond .rs-staticList .template-resume,
.content-modele .rebond .rs-staticList .cim-short-genre,
.content-modele .webframe-ermes-lastviewedresources-item-shadow,
.content-modele .rebond .CONTRAT_1,
.content-modele .rebond h3.title::before,
.content-modele .rebond .rs-staticList br {
    display: none;
}

.content-modele #portal .template-title {
    font-size: 1.1em;
    line-height: 17px;
    font-family: "SourceSansPro";
    font-weight: 500;
    color: #000;
}

.content-modele .template-info {
    color: #000;
    width: 100%;
    padding-left: 100px;
}


/* -------------- FIN REBOND PAGES Content modele ----------------- */


/* ###################### Début Encart par 4 blanc ####################*/

.enc-4-blanc .encart-par-4-blanc h3 {
    padding-bottom: 5px;
    font-family: 'Philharmonique', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    color: #000;
    font-size: 1.1em;
}

.enc-4-blanc .encart-par-4-blanc p {
    margin: 5px 0 15px 0;
    font-size: 1em;
}

.enc-4-blanc .encart-par-4-blanc div {
    float: left;
    width: 240px;
    margin: 1px 1px 10px 1px;
    border: 1px solid #EBEBEB;
    background-color: #fff;
    height: 560px;
}

.enc-4-blanc .encart-par-4-blanc img {
    width: 100%;
    border: none;
}

.enc-4-blanc .encart-par-4-blanc div.div-content {
    padding: 8px;
    width: 97%;
    margin-top: 0;
    border: none;
    height: 270px;
}


/* ------- Partie responsive encart fond bleu ou blanc ----------- */

@media screen and (max-width: 480px) and (min-width: 200px) {
    .enc-4-blanc .encart-par-4-bleu div {
        width: 100%;
        height: auto;
    }
    .enc-4-blanc.encart-par-4-blanc div {
        width: 100%;
        height: auto;
        padding-bottom: 10px;
    }
    .enc-4-blanc.encart-par-4-blanc div.div-content {
        height: auto;
    }
}


/* ###################### Début Encart par 4 blanc ####################*/


/* ###################### Par 4 TOUTES LES EXPOSITIONS TEMPORAIRES  ####################*/

.modele-4-col.vignette-expo .media-body {
    height: 215px;
}

.dossier-oe-modele .modele-4-col.vignette-expo h3.media-heading {
    height: 65px;
}

.dossier-oe-modele .modele-4-col.vignette-expo h3.media-heading span {
    font-size: 0.820em !important;
    display: block;
}

.dossier-oe-modele .modele-4-col.model-html.vignette-expo div.col-xs-12.col-sm-6.col-md-3.media {
    height: 600px;
}

@media screen and (min-width: 980px) and (max-width: 990px) {
    .dossier-oe-modele .modele-4-col.model-html.vignette-expo div.col-xs-12.col-sm-6.col-md-3.media {
        height: 750px;
    }
}

@media screen and (min-width: 768px) and (max-width: 979px) {
    .dossier-oe-modele .modele-4-col.model-html.vignette-expo div.col-xs-12.col-sm-6.col-md-3.media {
        height: 660px;
    }
}

@media screen and (min-width: 650px) and (max-width: 767px) {
    .dossier-oe-modele .modele-4-col.model-html.vignette-expo div.col-xs-12.col-sm-6.col-md-3.media {
        height: 720px;
    }
}

@media screen and (min-width: 480px) and (max-width: 649px) {
    .dossier-oe-modele .modele-4-col.model-html.vignette-expo div.col-xs-12.col-sm-6.col-md-3.media {
        height: 610px;
    }
}

@media screen and (min-width: 150px) and (max-width: 479px) {
    .dossier-oe-modele .modele-4-col.model-html.vignette-expo div.col-xs-12.col-sm-6.col-md-3.media {
        height: auto;
    }
}


/* ###################### Par 4 TOUTES LES EXPOSITIONS TEMPORAIRES  ####################*/


/** Metascore modele **/

#frame-19486 div.frame-standard.panel.panel-front.webframe-ermes-carousel {
    background: none;
}

#frame-19486 p.presentation-oe,
.bandeau-metascore p.presentation-oe {
    font-family: 'Philharmonique', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 2.857em;
    margin-bottom: 0;
}

.metascore-modele #search-panel {
    display: none;
}


/*	.metascore-modele .panel{
	background: none;
}*/

.metascore-modele .navbar-header-after {
    font-family: 'Philharmonique', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 40px;
    /* font-weight: bold; */
    margin-left: 20px;
    margin-top: 10px;
}

.metascore-modele .panel-body {
    background: none;
}

.metascore-modele .rsItem h1 {
    color: red;
    font-size: 40px !important;
    text-transform: uppercase;
    background: none;
    /*background-color: transparent !important;*/
}

.metascore-modele.frame {
    margin: 0 0 10px !important;
}

.metascore-modele h3 {
    font-size: 1.429em;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    margin: 5px 0 0 0;
}

.metascore-modele h4 {
    font-size: 21px;
    font-weight: bold;
}


/*corps de texte*/


/*
.metascore-modele p{
	font-size: 1.125em;
}
*/

.metascore-modele nav.sommaireMS {
    width: 346px;
    padding: 0 25px 0 5px;
    font-family: 'Philharmonique', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 16px;
    /*font-weight:light;*/
}

.metascore-modele nav.sommaireMS header {
    background-color: #4d4d4d;
    padding: 9px 10px 9px 15px;
    color: #FFF;
    border-bottom: 2px solid #fff;
}

.metascore-modele #portal nav.sommaireMS ul li {
    list-style: none;
    margin-left: 0px;
    border-bottom: 2px solid #fff;
    background-color: #f5f5f5;
    padding: 9px 15px;
}

.metascore-modele #portal nav.sommaireMS ul li a {
    color: #000;
}

.metascore-modele #portal nav.sommaireMS ul li.current {
    background-color: #dfefff;
}

.metascore-modele #portal nav.sommaireMS ul li li {
    list-style: none;
    margin-left: 0px;
    border-bottom: 1px solid #fff;
    padding: 6px 15px;
    text-transform: none;
}

.metascore-modele #portal nav.sommaireMS ul li li a {
    color: #555;
}

.metascore-modele #portal nav.sommaireMS ul li li a:hover {
    color: #1D89DB;
}

.metascore-modele .selection-description {
    display: none;
}

.metascore-modele .content-img-dr figure {
    float: right;
    margin-left: 10px;
}

.metascore-modele .content-img-gch figure {
    float: left;
}

.metascore-modele #portal ul li {
    list-style-image: url(images/puces.png);
    margin-left: 20px;
}

.metascore-modele #portal ol li {
    list-style: decimal;
    /* !important;*/
}

.metascore-modele ol {
    margin-top: 0px;
    padding-top: 0px;
    padding-left: 14px;
}

.metascore-modele dl {}

.metascore-modele dt {
    font-family: "SourceSansPro";
    font-weight: 500;
}

.metascore-modele dt,
.metascore-modele dd {
    line-height: 1.5em;
}

.metascore-modele dd {
    margin: 0 0 15px 0;
}

.metascore-modele pre {
    font-family: Courier, monospace;
}


/*
.metascore-modele iframe:before{
	border: 5px solid #f5f5f5 !important;
	padding:20px;
	margin:250px !important;
	background-color: lime;
}
*/

.metascore-embed {
    border: 5px solid #f5f5f5;
}

.metascore-embed.survol {
    position: relative;
    border: 5px solid #b3d6fd;
    /*	border: 5px solid rgb(29, 137, 219);*/
    /*	border: 5px solid rgba(29, 137, 219, 0.6);*/
}


/* -----------------  Début Toutes les expo http://collectionsdumusee.philharmoniedeparis.fr/expositions-temporaires-du-musee-de-la-musique.aspxEXPO  ------------------ */

article.expo-en-cours {
    width: 49%;
    float: left;
}

article.expo-en-cours figure {
    float: left;
    width: 50%;
    padding-right: 10px;
}

article.expo-en-cours figure img {
    border: none;
}

article.expo-en-cours {
    width: 49%;
    float: left;
}

article.expo-en-cours a.btn-plus-bl {
    margin-left: 0;
}

@media screen and (min-width: 200px) and (max-width: 1024px) {
    article.expo-en-cours {
        width: 100%;
        float: left;
    }
    article.expo-en-cours figure {
        float: left;
        width: 25%;
        padding-right: 10px;
    }
}


/* ----------- Fin toutes les expos (sarah)----------- */


/* ------- Ajouter une marge en haut à certains encarts (pour Floriane, modèle des vidéos concerts)---------------------*/

.Marg-Top {
    margin-top: 30px;
}

@media screen and (min-width: 200px) and (max-width: 720px) {
    .Marg-Top {
        margin-top: 0;
    }
}


/* ----------------- Fin margin Top-------------------------- */


/* masonry */

.grid-item {
    width: 20%;
    margin: 1%;
}

.grid-item--width2 {
    width: 400px;
}


/* ************************************************************************************** */


/* classes pour masquer/afficher des éléments de PAD sur les autres instances (guillaume) */


/* **********************  ne pas effacer  ********************************************** */


/* ************************************************************************************** */


/*! éléments présents dans les sites PP à masquer dans PAD : */

.hideInPAD,
.hideInPAD .container {
    display: block!important;
}

.hideInPAD-inline {
    display: inline-block!important;
}


/*! éléments présents dans PAD et masqués dans les autres sites PP : */

.hideSaufPAD,
.hideSaufPAD-inline,
.hideSaufPAD .container {
    display: none!important
}

a#tous.conf-droite-pad {
    display: none;
}

a#tous.conf-droite-pp {
    display: inline;
}


/* encart ".listeSimple" (recherche capturee liste statique) : affichage des rebonds fiches d'oeuvres (guillaume) : */

body:not(.page-2021) .listeSimple .rs-staticList li {
    border-bottom: 1px solid #ddd;
}

.listeSimple .rs-staticList li:last-of-type {
    border-bottom: 0;
}


/* adaptation pour modele 2021-2colonnes 07/2022 GG */

.page-2021-2colonnes #zone-5 .listeSimple .webframe-ermes-lastviewedresources-item .vignette_document img.ermes-thumb,
.listeSimple .webframe-ermes-lastviewedresources-item .vignette_document img.ermes-thumb {
    width: 50px;
    min-width: 50px !important;
    min-height: 50px !important;
}

.listeSimple .webframe-ermes-lastviewedresources-item .notice_corps h3.template-title {
    font-family: "SourceSansPro", "SourceSansPro", sans-serif!important;
    padding-top: 8px;
    font-weight: normal!important;
    text-transform: none;
}

.page-2021-2colonnes .listeSimple .webframe-ermes-lastviewedresources-item .notice_corps h3.template-title {
    padding-top: 0;
}

.listeSimple .webframe-ermes-lastviewedresources-item .notice_corps p.template-resume,
.listeSimple .webframe-ermes-lastviewedresources-item .notice_corps p.page-cms {
    display: none;
}


/* encart "liste2niveaux" (recherche capturée liste statique) : affiche seulement image + titre + auteur principal*/

.liste2niveaux .notice_corps .template-resume,
.liste2niveaux .notice_corps .template-info,
.liste2niveaux .notice_corps .cim-short-genre {
    display: none;
}

.liste2niveaux .notice_corps .template-info:first-of-type {
    display: block;
}

.liste2niveaux .notice_corps .template-info:nth-of-type(2) {
    display: block;
}

.liste2niveaux .notice_corps .template-info:nth-of-type(2) li {
    display: none;
}

.liste2niveaux .notice_corps .template-info:nth-of-type(2) li:first-child,
.liste2niveaux .notice_corps .template-info:nth-of-type(2) li:nth-child(2) {
    display: block;
}


/* REBONDS EXTERNES */

.suggestion,
.suggestion li {
    position: relative;
}

.suggestion.rebond-ext li .webframe-ermes-lastviewedresources-item:after {
    content: url(images/icon-extlink-14px.png);
    display: block;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

div#page>div.container .btn.lien-externe::before {
    content: url(/ui/skins/MEDIA/images/icon-extlink-14px.png);
    display: inline-block;
    margin-right: 1rem;
}

div#page>div.container .btn.lien-externe-after::after {
    content: url(/ui/skins/MEDIA/images/icon-extlink-14px.png);
    display: inline-block;
    margin-left: 0.5em;
    margin-top: 2px;
}


/*/////// Style bouton avec icones Billets //////*/

a.cl-btn-ticket::before {
    content: url(/ui/skins/MEDIA/images/icon/picto-ticket.svg);
    display: inline-block;
    margin-right: 0.5em;
    width: 20px;
}

a.btn.btn-default {
    display: flex;
    align-items: center;
    width: fit-content;
    -o-width: fit-content;
    -ms-width: fit-content;
    -moz-width: fit-content;
    -webkit-width: fit-content;
}

.btn.btn-primary,
div:not(.panel-search-container) .btn.btn-default,
div:not(.panel-search-container) a.btn.btn-default {
    border-radius: 25px;
}

.panel-search-container #resultats a.btn.btn-default {
    border-radius: 0;
}


/* fin : REBONDS EXTERNES */


/**/

.fixedpanel {
    position: relative;
    top: 0px;
}


/* ************************************************************************************** */


/* Compte utilisateur (Catalogue, Digital, Collections) */


/* ************************************************************************************** */


/* **Panier utilisateur** */

#documents_memorises .btn-info.btn-xs .label_label {
    color: #000!important;
}


/* **Chargement lors de l'export** */

h2.modal-title {
    background: none repeat scroll 0 0 #ffffff;
}

.frame-ermes-myaccountprofile div.myaccount-rights {
    display: none!important;
}


/* ###################### Début - Par 4 TOUS LES DOSSIERS HISTOIRE INSTRUMENT - 24-11-17 Sarah ####################*/

.dossier-oe-modele .modele-4-col.vignette-expo.vignette-instru h3.media-heading {
    height: initial;
}

.modele-4-col.vignette-expo.vignette-instru .media-body {
    height: 270px;
}

.dossier-oe-modele .modele-4-col.model-html.vignette-expo.vignette-instru div.col-xs-12.col-sm-6.col-md-3.media {
    height: initial;
}

.modele-4-col.model-html.vignette-expo.vignette-instru .describe {
    height: 110px;
}

.modele-4-col.model-html.vignette-expo.vignette-instru .describe.longtexte {
    height: 95px;
}


/* modifications a cause des redacteurs de texte qui ecrivent de trop logues descriptions : */

.dossier-oe-modele .modele-4-col.vignette-expo.vignette-instru h3.media-heading {
    height: initial;
}

.modele-4-col.vignette-expo.vignette-instru .media-body {
    height: 320px;
}

.dossier-oe-modele .modele-4-col.model-html.vignette-expo.vignette-instru div.col-xs-12.col-sm-6.col-md-3.media {
    height: initial;
}

.modele-4-col.model-html.vignette-expo.vignette-instru .describe {
    height: auto;
}

.modele-4-col.model-html.vignette-expo.vignette-instru .describe.longtexte {
    height: auto;
}


/* \ fin : modifications a cause des redacteurs de texte qui ecrivent de trop logues descriptions : */


/* ###################### FIN - Par 4 TOUS LES DOSSIERS HISTOIRE INSTRUMENT - 24-11-17 Sarah ####################*/


/*.prochainement{

}
*/

.prochainement::before {
    content: "Prochainement disponible";
    display: block;
    padding-top: 50%;
    text-align: center;
    height: 100%;
    position: absolute;
    top: 0;
    left: 4px;
    width: 100%;
    z-index: 1;
    background-color: rgba(177, 174, 174, 0.7);
    width: calc(100% - 8px);
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
}


/*
.block-image-compo.prochainement::before {
    content:"Prochainement disponible";
	display: block;
	padding-top:50%;
	text-align: center;
    height: 100%;
	width: 100%;
    position: relative;
    top: 0;
    left: 4px;

    z-index: 1;
    background-color: rgba(177, 174, 174, 0.7);
    width: calc(100% - 8px);
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
}
*/


/* test ddenocq 20180910 <quote> <cite> et <blockquote> */

blockquote {
    font-style: italic
}

blockquote::before {
    content: "\00AB\00A0";
    font-style: normal;
}

blockquote:after {
    content: "\00A0\00BB";
    font-style: normal;
}

blockquote cite,
blockquote em,
blockquote i,
blockquote .regular {
    font-style: normal;
}

blockquote.exergue {
    text-align: right;
}

cite {
    font-style: italic;
}

cite em,
cite i,
cite .regular {
    font-style: normal;
}

figcaption i,
figcaption em,
figcaption q,
figcaption cite {
    font-style: normal;
}

q cite {
    font-style: normal;
}

q {
    font-style: italic;
}

q::before {
    content: "\00AB\00A0";
    font-style: normal;
}

q::after {
    content: "\00A0\00BB";
    font-style: normal;
}

q em,
q i,
q .regular {
    font-style: normal;
}

.regular cite,
.regular em,
.regular i,
.regular q {
    font-style: italic;
}


/* ---- */


/* lecteurs audio et video */

.embed-responsive {
    display: block;
    float: none;
    clear: both;
    max-height: 476px;
    overflow: hidden;
}

#player-tracklist {
    /*display: none;*/
    background-color: #FFF;
}

.concert_rec {
    float: none;
    clear: both;
}

.toto {
    display: none!important;
}

div#page>div.container {
    min-height: auto;
}


/* **************************************** */


/* ******** TYPE DE PAGE "CONTENU" ******** */


/* **************************************** */


/*
.page-contenu #page .frame :not(.btn){
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.page-contenu #page .frame:not(.frame-ermes-sommaire) .frame-standard {
    padding:.5rem;
}
*/


/* ********************************************* */


/* ********  MODELE de PAGE SELECTION   ******** */


/* ********************************************* */

#ext-gen1018 .menu-selectionsEN #menu-side.in,
.menu-selectionsEN #menu-side.in,
.menu-selectionsEN #menu-side {
    /*    display: none!important;*/
    position: static;
    width: 100%;
}

.page-selection #layout-2,
.page-selection-EN #layout-2 {
    padding-bottom: 2rem;
}

@supports (display:flex) {
    .page-selection #layout-2>.row,
    .page-selection-EN #layout-2>.row {
        display: flex;
    }
    .page-selection #layout-2 #zone-4,
    .page-selection-EN #layout-2 #zone-4 {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }
}

.page-selection #menu-side--trigger,
.page-selection-EN #menu-side--trigger {
    background: #B3D6FD;
    padding: .35rem 1.25rem;
    border-radius: 1rem;
    margin-top: 1rem;
}

.page-selection #menu-side--trigger:before,
.page-selection-EN #menu-side--trigger:before {
    content: "";
    display: inline-block;
    font-size: 1rem;
    width: .875rem;
    height: .875rem;
    background: url(https://pad.philharmoniedeparis.fr/ui/skins/MEDIA/images/filtre.png) no-repeat center;
    background-size: auto;
    background-size: contain;
    vertical-align: middle;
    margin-right: 1rem;
}


/*
.page-selection #page #portal .panel-heading h2,
.page-selection-EN #page #portal .panel-heading h2{
    margin-bottom: .5rem;
}
*/


/*
.page-selection #page #portal .panel-heading h3,
.page-selection #page #portal .panel-heading h4,
.page-selection #page #portal .frame-ermes-openfindselection .webframe-ermes-commonviewedresources .panel-body,
.page-selection-EN #page #portal .panel-heading h3,
.page-selection-EN #page #portal .panel-heading h4,
.page-selection-EN #page #portal .frame-ermes-openfindselection .webframe-ermes-commonviewedresources .panel-body{
    padding-left:.75rem;
}
*/

.page-selection #page .frame-ermes-openfindselection .rs-staticList>ul>li,
.page-selection-EN #page .frame-ermes-openfindselection .rs-staticList>ul>li {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.page-selection #page .frame-ermes-openfindselection .rs-staticList .vignette_container img.img-thumbnail,
.page-selection-EN #page .frame-ermes-openfindselection .rs-staticList .vignette_container img.img-thumbnail {
    margin-right: .5rem;
}


/*
.page-selection #page .frame-ermes-openfindselection .rs-staticList .notice_corps > a > *,
.page-selection-EN #page .frame-ermes-openfindselection .rs-staticList .notice_corps > a > *{
    padding: .25rem .5rem;
}
*/


/* ********* */


/* MENU SIDE */


/* Reset */

#menu-side,
#menu-side--body * {
    margin: 0;
    padding: 0;
}

#menu-side {
    background: #fff;
    display: block;
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(0);
    transition: transform .25s ease-out;
}

#menu-side.closed {
    transform: translateX(-100%);
}

#menu-side.in {
    box-shadow: 4px 0 9px rgba(0, 0, 0, .3);
    transform: translateX(0);
}

@media (min-width:555px) {
    #menu-side {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
    }
}

@media (min-width:992px) {
    #menu-side {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 940px;
        width: 90%;
    }
}

#menu-side--controls {
    width: 100%;
}

.layer-close--menu-side {
    display: none;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
}

.layer-close--menu-side.in {
    display: block;
}


/* Header menu side */

#menu-side--header {
    height: 5rem;
    display: flex;
    justify-content: space-between;
    background: #001b3b;
    position: sticky;
    top: 0;
    z-index: 10;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: 0 4px 9px rgba(0, 0, 0, .1);
}

#menu-side--body {
    padding: 2rem 1rem;
    background: #d4d9de;
}

@media (min-width: 768px) {
    #menu-side--header,
    #menu-side--body {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 992px) {
    #menu-side--body {
        background: #d4d9de;
        display: flex;
        /*        height: calc(100% - 80px);*/
    }
    #menu-side--body #zone-1 {
        flex: 3;
        margin-right: 1rem;
    }
    #menu-side--body #zone-1+div {
        flex: 2;
    }
}

#zone-2-niveau.inactif {
    opacity: .5;
}

#zone-2-niveau.actif {
    opacity: 1;
}

#menu-side--header .menu-side--fermer,
#menu-side--header .filtres-controls,
#menu-side--body #zone-valid .filtres-controls {
    display: flex;
    align-items: center;
}

#menu-side--header .menu-side--fermer a {
    display: flex;
    align-items: center;
}

#menu-side--header .menu-side--fermer figure {
    width: 36px;
    height: 36px;
    margin-right: 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, .8);
    border: 0;
    display: flex;
}

#menu-side--header .menu-side--fermer figure img {
    width: 18px;
    height: 18px;
    background: transparent;
    border: 0;
    margin: auto!important;
}

#menu-side--header .menu-side--fermer span {
    font-size: .875rem;
    text-transform: uppercase;
    color: #fff;
    display: none;
}

@media (min-width:7680px) {
    #menu-side--header .menu-side--fermer span {
        display: block;
    }
}

#menu-side--header .filtres-controls .btn-valid,
#menu-side--body #zone-valid .filtres-controls .btn-valid {
    font-size: .875rem;
    color: #001b3b;
    font-weight: 600;
    padding: .5rem 1.5rem;
    background-color: #fff;
    border: 1px solid #001b3b;
}

#menu-side--header .filtres-controls .btn-valid {
    border-radius: 1rem;
}

#menu-side--header .filtres-controls .btn-valid.inactif,
#menu-side--body #zone-valid .filtres-controls .btn-valid.inactif {
    opacity: .3;
    background-color: #fff;
    cursor: default;
}

#menu-side--header .filtres-controls .btn-valid.actif,
#menu-side--body #zone-valid .filtres-controls .btn-valid.actif {
    opacity: 1;
    background-color: #B3D6FD;
    cursor: pointer;
}


/* *************** */


/* CONTENU DU MENU */


/* sections */

#menu-side--body>[id^="zone-"].inactif>div {
    display: none;
}

#page #menu-side--body>#zone-valid>div.filtres-controls {
    display: flex;
}

#menu-side--body [id^="zone-"] {
    margin-bottom: 1.5rem;
}

#menu-side--body>[id^="zone-"] {
    margin-bottom: 2rem;
}


/* titres et corps de texte des sections */

#menu-side--body h2,
#menu-side--body h3,
#menu-side--body .menu-side--instruction {
    margin-bottom: 1rem;
}

#menu-side--body h2,
#menu-side--body h2 span {
    font-size: 1.25rem;
    line-height: 1.5;
    color: #001b3b;
    font-family: 'Philharmonique', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    background: none !important;
    border-top: 0;
    text-align: left;
}

#menu-side--body h2 span.decompte1,
#menu-side--body h2 span.decompte2 {
    color: #B3D6FD;
    font-weight: bold;
}

#menu-side--body h2 span.decompte1 {
    font-size: 1.5rem;
}

#menu-side--body h2 span.decompte2 {
    margin-right: 1rem;
}

#menu-side--body h3,
#menu-side--body h3 span {
    font-family: 'SourceSansPro', 'SourceSansPro', sans-serif;
    font-weight: 600;
    font-size: .875rem;
    text-transform: none;
    color: #000;
}

#menu-side--body li a,
#menu-side--body li button,
#menu-side--body .menu-side--instruction {
    color: #545454;
    font-size: .875rem;
    font-weight: normal;
}

[id^="zone-"].actif>.menu-side--instruction {
    display: none;
}


/* Gestion des grilles de filtres */

#menu-side [class*="grid-"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 0rem;
}

#menu-side [class*="grid-"]>* {
    flex: 0 0 auto;
    display: block;
    /* IE fix */
    width: calc(100% * 1 / 4 - 0rem);
    margin-left: 0rem;
}

#menu-side .grid-6>* {
    width: calc(100% * 1 / 5 - .2rem);
}

#menu-side .grid-6>.flexitem-double {
    width: calc(100% * 2 / 6 - 0rem);
}

#menu-side .grid-6>.flexitem-first {
    order: -1;
}

@media (min-width: 481px) and (max-width: 640px) {
    #menu-side .grid-6>* {
        width: calc(100% * 1 / 2 - 0rem);
    }
    #menu-side .grid-6>.flexitem-double {
        width: calc(100% - 0rem);
    }
}

@media (max-width: 480px) {
    #menu-side .grid-6>* {
        width: calc(100% - 0rem);
    }
    #menu-side .grid-6>.flexitem-double {
        width: calc(100% - 0rem);
    }
}


/* Apparence des filtres */

#menu-side .grid-6 li {
    border: 1px solid #B3D6FD;
    text-align: center;
    height: 2.25rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-right: .2rem;
    margin-bottom: .2rem;
}

#menu-side--body li a,
#menu-side--body li button,
#menu-side--body li a.inactif,
#menu-side--body li button.inactif {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #fff;
    border: 0;
}

#menu-side--body li a:hover,
#menu-side--body li button:hover,
#menu-side--body li a.actif,
#menu-side--body li button.actif,
#menu-side--body li a:focus,
#menu-side--body li button:focus {
    text-decoration: none;
    background: #B3D6FD;
}

#menu-side--body li a:hover span,
#menu-side--body li button:hover span,
#menu-side--body li a.actif span,
#menu-side--body li button.actif span,
#menu-side--body li a:focus span,
#menu-side--body li button:focus span {
    font-weight: 600;
    color: #000;
}

#menu-side--body li a,
#menu-side--body li button,
#menu-side--body li a span,
#menu-side--body li button span {
    line-height: 1;
}


/* Apparence des bouton radio */

#menu-side--body ul[class^="grid-"] li {
    position: relative;
}

#menu-side--body ul[class^="grid-"] li [type="radio"]:not(:checked),
#menu-side--body ul[class^="grid-"] li [type="radio"]:checked {
    position: absolute;
    left: 0;
    opacity: 0.01;
}

#menu-side--body ul[class^="grid-"] li [type="radio"]:not(:checked)+label,
#menu-side--body ul[class^="grid-"] li [type="radio"]:checked+label {
    position: relative;
    font-size: .875rem;
    color: #545454;
    line-height: 1;
    cursor: pointer;
    display: flex;
    width: 100%;
    font-weight: normal;
    justify-content: center;
    align-items: center;
}


/* radio aspect */

#menu-side--body ul[class^="grid-"] li [type="radio"]:disabled+label {
    color: #aaa;
}


/* MENU SIDE V2 dec2020 */

.home-selectionEN #menu-side {
    display: block;
    position: static!important;
    transform: translateX(0);
}

.home-selectionEN #menu-side #menu-side--header,
.home-selectionEN #menu-side .layer-close--menu-side,
.page-selection-EN #menu-side .filtres-controls--pageHome {
    display: none!important;
}


/* recapitulatif des choix */

.filtres-controls--pageHome {
    padding: 0 1rem;
    /*    opacity: .5;*/
}

.filtres-controls--pageHome.actif {
    opacity: 1;
}

.recap-wrap {
    line-height: 1;
    align-self: center;
    text-align: right;
    padding-right: 1rem;
    color: #fff;
    flex: 1;
}

.recap-wrap p {
    color: #fff;
    margin: .35rem;
}

.home-selectionEN .recap-wrap {
    text-align: left;
    color: #001b3b;
}

.home-selectionEN #menu-side .recap-wrap>p:first-of-type {
    margin-top: 0;
}

.home-selectionEN #menu-side .recap-wrap p {
    color: #001b3b;
    margin: .5rem 0;
}

#menu-side .recap .recap-sep {
    display: none!important;
}

#menu-side .recap> :before {
    content: "•";
    margin-right: .5rem;
}

.home-selectionEN #menu-side .recap :first-of-type:before {
    display: none;
}

.home-selectionEN #menu-side .recap-wrap.actif .recap .actif {
    display: inline!important;
}

.home-selectionEN #menu-side .recap-1 {
    margin-left: 0;
}

.recap-wrap p:first-of-type {
    font-family: 'Philharmonique', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    opacity: .5;
    display: none;
}

.home-selectionEN .recap-wrap p:first-of-type {
    display: block;
}

@media (min-width:768px) {}

#menu-side .recap {
    display: flex;
    flex-wrap: wrap;
    line-height: 1;
    justify-content: flex-end;
    text-align: right;
    align-items: center;
    color: #fff;
}

.home-selectionEN #menu-side .recap {
    justify-content: flex-start;
    text-align: left;
    align-items: center;
    color: #001b3b;
}

#menu-side .recap * {
    line-height: 1;
    margin: 0 .25rem;
    font-size: 12px;
}

.recap-wrap.activating .recap-0,
.recap-wrap.actif .recap-0 {
    display: none;
}

#menu-side .recap-2 {
    /*
	text-transform: uppercase;
	font-weight: 700;
*/
}

#menu-side .recap-3 {
    /*	font-style: oblique;*/
    margin-right: 0;
}

@media (min-width: 768px) {}

@media (min-width:992px) {
    .page-selection-EN #menu-side .filtres-controls--pageHome {
        display: block!important;
    }
    #menu-side--header .filtres-controls,
    #menu-side--header .recap-wrap.actif,
    #menu-side--header .recap-wrap {
        display: none!important
    }
    .recap-wrap {
        text-align: left;
        color: #001b3b;
    }
    #menu-side .recap {
        display: inline;
    }
    #menu-side .recap-wrap>p:first-of-type {
        display: block;
        margin-top: 0;
    }
    #menu-side .recap-wrap p {
        color: #001b3b;
        margin: .5rem 0;
    }
    #menu-side .recap :first-of-type:before {
        display: none;
    }
    #menu-side .recap-wrap.actif .recap .actif {
        display: inline!important;
    }
    #menu-side .recap-1 {
        margin-left: 0;
    }
    #menu-side .recap {
        justify-content: flex-start;
        text-align: left;
        align-items: center;
        color: #001b3b;
    }
    #menu-side .btn.btn-valid {
        margin-top: 1rem;
    }
}

#menu-side--body #zone-1,
#menu-side--body #zone-2-niveau,
#menu-side--body .filtres-controls {
    margin-bottom: 2rem;
    padding: 1rem;
    border-radius: 1rem;
    background: #fff;
}

#menu-side--body .yoyo-trigger {
    margin-bottom: 1rem;
    display: block;
    border-bottom: 1px solid #B6BEC7;
    padding-bottom: .5rem;
}

#menu-side--body .yoyo-trigger:hover,
#menu-side--body .yoyo-trigger:focus,
#menu-side--body .yoyo-trigger:focus-within,
#menu-side--body .yoyo-trigger:active,
#menu-side--body .yoyo-trigger.in {
    text-decoration: none;
    font-weight: 700;
    border-bottom-color: #001b3b;
}

#menu-side--body .yoyo-trigger,
#menu-side--body .yoyo-trigger span {
    font-family: 'Philharmonique', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1rem;
    color: #001b3b;
}

#menu-side [class*="grid-"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 0rem;
    justify-content: flex-start;
}

#menu-side .grid-6 li,
#menu-side .grid-liste li {
    border: 0;
    text-align: center;
    height: unset;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-right: .5rem;
    margin-bottom: .5rem;
    display: inline-block;
    width: auto;
    padding: 0;
    border-radius: 1rem;
}

#menu-side .grid-liste li:last-of-type {
    margin-right: 0;
}

#menu-side--body ul[class^="grid-"] li [type="radio"]:not(:checked)+label,
#menu-side--body ul[class^="grid-"] li [type="radio"]:visited+label,
#menu-side--body ul[class^="grid-"] li [type="radio"]:checked+label {
    background: transparent;
    border: 1px solid #001b3b;
    position: relative;
    font-size: .875rem;
    color: #001b3b;
    line-height: 1;
    cursor: pointer;
    display: flex;
    width: 100%;
    font-weight: normal;
    justify-content: center;
    align-items: center;
    font-size: .825rem;
    padding: .25rem 1rem;
    border-radius: 1rem;
}

#menu-side--body ul[class^="grid-"]>li>[type="radio"]:hover+label,
#menu-side--body ul[class^="grid-"]>li>[type="radio"]:focus+label {
    border: 1px solid #0095da;
    background: transparent;
    color: #0095da;
}

#menu-side--body ul[class^="grid-"]>li>[type="radio"]:checked+label,
#menu-side--body ul[class^="grid-"]>li>[type="radio"].actif+label {
    border: 1px solid #0095da;
    background: #0095da;
    color: #fff;
}

#menu-side--body ul[class^="grid-"] li li [type="radio"]:checked+label,
#menu-side--body ul[class^="grid-"] li li [type="radio"]:hover+label,
#menu-side--body ul[class^="grid-"] li li [type="radio"]:focus+label,
#menu-side--body ul[class^="grid-"] li li [type="radio"].actif+label {
    background: #f2f3ee;
}

#menu-side--body .grid-liste>li>ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-top: .25rem;
    align-items: stretch;
    background: #fff;
    box-shadow: 0 3px 8px #ccc;
    z-index: 2;
    width: 260px;
    padding: 12px .875rem;
    border-radius: 1rem;
}

#menu-side--body .grid-liste>li[aria-expanded="true"] {
    overflow: visible;
}

#menu-side--body .grid-liste>li[aria-expanded="false"] ul {
    display: none;
}

#menu-side--body .grid-liste>li[aria-expanded="true"] ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-top: .25rem;
    align-items: stretch;
    background: #fff;
    box-shadow: 0 3px 8px #ccc;
    z-index: 2;
    width: 260px;
    padding: 12px .875rem;
    border-radius: 1rem;
}

#menu-side--body .grid-liste>li[aria-haspopup="true"]>label:after {
    content: " ";
    margin-left: 1rem;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 6px solid #001b3b;
    border-right: 5px solid transparent;
    border-bottom: 0;
    border-left: 5px solid transparent;
}

#menu-side--body ul[class^="grid-"]>li[aria-haspopup="true"]>[type="radio"]:hover+label:after,
#menu-side--body ul[class^="grid-"]>li[aria-haspopup="true"]>[type="radio"]:focus+label:after {
    content: " ";
    margin-left: 1rem;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 6px solid #0095da;
    border-right: 5px solid transparent;
    border-bottom: 0;
    border-left: 5px solid transparent;
}

#menu-side--body .grid-liste>li[aria-haspopup="true"]>[type="radio"]:checked>label:after,
#menu-side--body .grid-liste>li[aria-expanded="true"]>label:after {
    content: " ";
    margin-left: 1rem;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 6px solid #fff;
    border-right: 5px solid transparent;
    border-bottom: 0;
    border-left: 5px solid transparent;
}

#menu-side--body .grid-liste>li>ul>li {
    margin-right: 0;
}

#menu-side--body ul[class^="grid-"] li[aria-haspopup="true"] li {
    border-radius: 0;
    margin-bottom: 0;
}

#menu-side--body ul[class^="grid-"] li[aria-haspopup="true"] label[for^="niveau-detail-"] {
    text-align: left;
    justify-content: flex-start;
    border: 0;
    border-bottom: 1px solid #c4c4c4;
    border-radius: 0;
    padding: .5rem 0 .5rem;
}

#menu-side--body ul[class^="grid-"] li[aria-haspopup="true"] li:last-of-type label[for^="niveau-detail-"] {
    border-bottom: 0;
}

#menu-side--body .grid-liste li li a {
    text-align: left;
    justify-content: flex-start;
}


/* bouton de validation des choix, apparaissant juste apres l'encart choix du niveau */

#menu-side .btn.btn-valid,
#menu-side .btn.btn-valid.actif {
    font-size: 1rem;
    font-weight: 500;
    background: #B3D6FD;
    color: #001b3b;
    padding: .25rem 1.5rem;
    border-radius: 1rem;
    border: 1px solid #B3D6FD;
    opacity: 1;
    cursor: pointer;
}

.home-selectionEN #menu-side .btn.btn-valid {
    margin-top: 1rem;
}

.home-selectionEN #menu-side .btn.btn-valid.actif {
    font-size: 1rem;
    font-weight: 500;
    background: #001b3b;
    color: #fff;
    padding: .25rem 1.5rem;
    border-radius: 1rem;
    border: 1px solid #001b3b;
    opacity: 1;
    cursor: pointer;
}

.home-selectionEN #menu-side .btn.btn-valid.inactif {
    border: 1px solid #001b3b;
    background: transparent;
    color: #001b3b;
    opacity: .5;
    cursor: not-allowed;
}

#menu-side .btn.btn-valid.inactif {
    border: 1px solid #B3D6FD;
    background: transparent;
    color: #B3D6FD;
    opacity: .5;
    cursor: not-allowed;
}


/* **************************************** */


/* ***** SOMMAIRE STICKY (EDUTHEQUE) ****** */


/* **************************************** */


/*
body[id^="ext-gen"] .main-float-menu {
    display: none;
}
*/

.float-frame-menu .text-info.glyphicon.glyphicon-repeat.gly-spin.spinner,
.float-frame-menu .text-info.glyphicon.glyphicon-repeat.gly-spin.spinner:before {
    font-size: 2rem;
}

.float-frame-menu .text-info.glyphicon.glyphicon-repeat.gly-spin.spinner {
    top: calc(50% - 1rem);
    left: calc(50% - 1rem);
}

.float-frame-menu.vue-affix.affix-top,
.float-frame-menu.vue-affix.affix-bottom {
    width: 100%!important;
    max-width: 320px;
    background: #f4f4f4;
    /* transition: all .5s ease-in-out; */
    box-shadow: 0 4px 9px #ccc;
}

.affix {
    overflow-y: auto;
    overflow-x: hidden;
    /* height: 95%; */
    width: 320px!important;
    top: 120px !important;
    /*    bottom: 0;*/
    box-shadow: 0 4px 9px #ccc;
    /*background: #f3f2ee!!important;*/
    background-color: #f4f4f4 !important;
    top: 50px !important;
    overflow-y: scroll;
    max-height: 85vh;
}

.affix[aria-expanded="false"] {
    bottom: unset;
}

#page .main-float-menu .menu-label {
    cursor: pointer;
}

#page .main-float-menu .menu-label.in:before,
#page .main-float-menu .menu-label:before {
    font-family: ermes-font-update;
    content: '\e85a';
    font-size: 2rem;
    display: inline-block;
    position: absolute;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    vertical-align: top;
    top: 0;
    right: 1rem;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transition: -webkit-transform .15s ease-in-out, -webkit-transform .15s ease-in-out;
    transition: transform .15s ease-in-out, -webkit-transform .15s ease-in-out;
    display: none;
}

#page .main-float-menu .menu-label.in:before {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin-left: .25rem;
    display: none;
}

#page .main-float-menu .menu-label h2 {
    font-size: 1.5rem !important;
    font-weight: 500;
    font-family: 'SourceSansPro', sans-serif;
    text-transform: none !important;
    color: #999999;
    background: transparent !important;
    padding: .25rem .5rem;
}

#page #portal .float-frame-menu {
    padding: .5rem;
    z-index: 9;
}

.float-frame-menu .menu-list a {
    padding: .2em .75em;
    font-size: .825rem;
}

#page #portal .frame-ermes-sommaire .frame-head a {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

#page #portal .frame-ermes-sommaire .head-H1 {
    display: none;
}

#page #portal .frame-ermes-sommaire .frame-head.head-H2 {
    border-top: 1px solid #FFF;
}

#page #portal .frame-ermes-sommaire .head-H2>a {
    text-transform: uppercase;
    font-family: SourceSansPro-SemiBold, sans-serif;
    padding: .5rem;
    color: #333;
}

#page #portal .frame-ermes-sommaire .float-frame-menu .head-H3>a {
    text-transform: none;
    padding-left: 1rem;
    color: #333;
    font-weight: 500;
}

#page #portal .frame-ermes-sommaire .float-frame-menu .head-H4>a {
    padding-left: 1.5rem;
    color: #555;
}

.float-frame-menu .menu-list a:hover,
.float-frame-menu .menu-list a:active,
#page .float-frame-menu .menu-list a.is-active,
.float-frame-menu .menu-list a:focus {
    background-color: #fff;
    color: #000;
    text-decoration: none;
}

#page .float-frame-menu .menu-list a.is-active {
    font-family: SourceSansPro-SemiBold, sans-serif;
}


/* Test - Sommaire Edutheque - après désactivation des classes affix-top, affix-bottom... "Maj" */

.float-frame-menu.vue-affix {
    overflow-x: hidden;
    box-shadow: 0 4px 9px #ccc;
    background-color: #f4f4f4 !important;
    overflow-y: scroll;
    max-height: 92vh;
}


/* *************************************** */


/* NAVIGATION PRINCIPALE CUSTOM     PAR PP */


/* *************************************** */


/* ******************************************************************** */


/* **************************   NAV -- CUSTOM  ************************ */


/* ******************************************************************** */

.nav--rubriques {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

#main-nav {
    margin: 0 auto;
}

@media (min-width:768px) {
    /* menus */
    #main-menu>li {
        text-align: center;
    }
    #main-menu>li>a {
        display: -ms-flexbox;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .sm-clean a.has-submenu {
        padding-right: 12px;
    }
    #main-menu>li>a::before {
        /* content: url(images/icon-extlink-14px.png); */
        margin-right: 1rem;
        max-height: 24px;
    }
    #main-menu.sm-clean>li>a .sub-arrow {
        position: static;
        margin-left: 1rem;
    }
}


/* sous menus */

.sm-clean ul a,
.sm-clean ul a:hover,
.sm-clean ul a:focus,
.sm-clean ul a:active,
.sm-clean ul a.highlighted {
    /*
    border: 0 !important;
    padding: 1rem;
    padding-right: 2rem;
    color: #555555;
        text-transform: none;
        font-weight: normal;
*/
}

.sm-clean a,
.sm-clean a:hover,
.sm-clean a:focus,
.sm-clean a:active {
    padding: 13px 20px;
    /* make room for the toggle button (sub indicator) */
    padding-right: 58px;
    color: #333 !important;
    text-transform: none;
    font-size: 16px;
    font-weight: normal;
    line-height: 17px;
    text-decoration: none;
}

#main-menu>li>a,
#main-menu>li>a:hover,
#main-menu>li>a:focus,
#main-menu>li>a:active {
    padding: 13px 20px;
    color: #000!important;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}

@media (min-width:768px) {
    #main-menu>li>a.highlighted,
    #main-menu>li>a:hover,
    #main-menu>li>a:focus,
    #main-menu>li>a:active {
        background: #333;
        color: #fff!important;
    }
    #main-menu>li.rechercheMusee>a.highlighted,
    #main-menu>li.rechercheMusee>a:hover,
    #main-menu>li.rechercheMusee>a:focus,
    #main-menu>li.rechercheMusee>a:active {
        background: url(/ui/skins/CIMU/images/icon-loupe-blanc.svg) no-repeat scroll center center #333;
        height: 43px;
        background-position-x: .75rem;
    }
    #main-menu>li>a.highlighted .sub-arrow,
    #main-menu>li>a:hover .sub-arrow,
    #main-menu>li>a:focus .sub-arrow,
    #main-menu>li>a:active .sub-arrow {
        border-color: #fff transparent transparent transparent;
    }
}

.sm-clean a.current {
    color: #D23600;
}

.sm-clean a.disabled {
    color: #bbbbbb;
}

.sm-clean a .sub-arrow {
    position: absolute;
    top: 50%;
    margin-top: -17px;
    left: auto;
    right: 4px;
    width: 34px;
    height: 34px;
    overflow: hidden;
    font: bold 16px/34px monospace !important;
    text-align: center;
    text-shadow: none;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0;
}

.sm-clean a .sub-arrow::before {
    content: '+';
}

.sm-clean a.highlighted .sub-arrow::before {
    content: '-';
}

.sm-clean>li:first-child>a,
.sm-clean>li:first-child> :not(ul) a {
    border-radius: 0;
}

.sm-clean>li:last-child>a,
.sm-clean>li:last-child>*:not(ul) a,
.sm-clean>li:last-child>ul,
.sm-clean>li:last-child>ul>li:last-child>a,
.sm-clean>li:last-child>ul>li:last-child>*:not(ul) a,
.sm-clean>li:last-child>ul>li:last-child>ul,
.sm-clean>li:last-child>ul>li:last-child>ul>li:last-child>a,
.sm-clean>li:last-child>ul>li:last-child>ul>li:last-child>*:not(ul) a,
.sm-clean>li:last-child>ul>li:last-child>ul>li:last-child>ul,
.sm-clean>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>a,
.sm-clean>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>*:not(ul) a,
.sm-clean>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul,
.sm-clean>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>a,
.sm-clean>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>*:not(ul) a,
.sm-clean>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul {
    border-radius: 0;
}

.sm-clean>li:last-child>a.highlighted,
.sm-clean>li:last-child>*:not(ul) a.highlighted,
.sm-clean>li:last-child>ul>li:last-child>a.highlighted,
.sm-clean>li:last-child>ul>li:last-child>*:not(ul) a.highlighted,
.sm-clean>li:last-child>ul>li:last-child>ul>li:last-child>a.highlighted,
.sm-clean>li:last-child>ul>li:last-child>ul>li:last-child>*:not(ul) a.highlighted,
.sm-clean>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>a.highlighted,
.sm-clean>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>*:not(ul) a.highlighted,
.sm-clean>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>a.highlighted,
.sm-clean>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>*:not(ul) a.highlighted {
    border-radius: 0;
}

.sm-clean li {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.sm-clean>li:first-child {
    border-top: 0;
}

.sm-clean ul {
    background: rgba(162, 162, 162, 0.1);
}

.sm-clean ul a,
.sm-clean ul a:hover,
.sm-clean ul a:focus,
.sm-clean ul a:active {
    font-size: 16px;
    border-left: 8px solid transparent;
}

.sm-clean ul ul a,
.sm-clean ul ul a:hover,
.sm-clean ul ul a:focus,
.sm-clean ul ul a:active {
    border-left: 16px solid transparent;
}

.sm-clean ul ul ul a,
.sm-clean ul ul ul a:hover,
.sm-clean ul ul ul a:focus,
.sm-clean ul ul ul a:active {
    border-left: 24px solid transparent;
}

.sm-clean ul ul ul ul a,
.sm-clean ul ul ul ul a:hover,
.sm-clean ul ul ul ul a:focus,
.sm-clean ul ul ul ul a:active {
    border-left: 32px solid transparent;
}

.sm-clean ul ul ul ul ul a,
.sm-clean ul ul ul ul ul a:hover,
.sm-clean ul ul ul ul ul a:focus,
.sm-clean ul ul ul ul ul a:active {
    border-left: 40px solid transparent;
}

.main-menu-btn {
    position: relative;
    display: block;
    padding: 0.815em 48px;
    height: 24px;
    overflow: hidden;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    color: #BBB1A3;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media (min-width: 768px) {
    /* Switch to desktop layout
  -----------------------------------------------
     These transform the menu tree from
     collapsible to desktop (navbar + dropdowns)
  -----------------------------------------------*/
    /* start... (it's not recommended editing these rules) */
    .sm-clean ul {
        position: absolute;
        width: 12em;
    }
    .sm-clean li {
        float: left;
    }
    .sm-clean.sm-rtl li {
        float: right;
    }
    .sm-clean ul li,
    .sm-clean.sm-rtl ul li,
    .sm-clean.sm-vertical li {
        float: none;
        border: 1px solid #FFF;
    }
    .sm-clean a {
        white-space: nowrap;
    }
    .sm-clean ul a,
    .sm-clean.sm-vertical a {
        white-space: normal;
    }
    .sm-clean .sm-nowrap>li>a,
    .sm-clean .sm-nowrap>li> :not(ul) a {
        white-space: nowrap;
    }
    /* ...end */
    .sm-clean {
        padding: 0 10px;
    }
    .sm-clean a,
    .sm-clean a:hover,
    .sm-clean a:focus,
    .sm-clean a:active,
    .sm-clean a.highlighted {
        padding: 12px 12px;
        color: #555555;
        border-radius: 0 !important;
    }
    .sm-clean a:hover,
    .sm-clean a:focus,
    .sm-clean a:active,
    .sm-clean a.highlighted {
        color: #D23600;
    }
    .sm-clean a.current {
        color: #D23600;
    }
    .sm-clean a.disabled {
        color: #bbbbbb;
    }
    .sm-clean a.has-submenu {
        padding-right: 24px;
    }
    .sm-clean a .sub-arrow {
        top: 50%;
        margin-top: -2px;
        right: 12px;
        width: 0;
        height: 0;
        border-width: 4px;
        border-style: solid dashed dashed dashed;
        border-color: #333 transparent transparent transparent;
        background: transparent;
        border-radius: 0;
    }
    .sm-clean a .sub-arrow::before {
        display: none;
    }
    .sm-clean li {
        border-top: 0;
    }
    .sm-clean>li>ul::before,
    .sm-clean>li>ul::after {
        position: absolute;
        top: -18px;
        left: 30px;
        width: 0;
        height: 0;
        overflow: hidden;
        border-width: 9px;
        border-style: dashed dashed solid dashed;
        border-color: transparent transparent #bbbbbb transparent;
    }
    .sm-clean>li>ul::after {
        top: -16px;
        left: 31px;
        border-width: 8px;
        border-color: transparent transparent #fff transparent;
    }
    .sm-clean ul {
        border: 1px solid #fff;
        padding: 5px 0;
        background: #F3F2EE;
        border-radius: 0!important;
        box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2);
        min-width: 100% !important;
        width: auto !important;
        max-width: unset !important;
    }
    .sm-clean ul ul {
        background: #FFF;
        width: 280px !important;
        border: 1px solid #ddd;
    }
    .sm-clean ul ul li {
        background: #FFF;
        padding: 1rem 1.5rem;
        font-size: .875rem;
        font-style: italic;
        color: #666;
        line-height: 1.6;
        letter-spacing: .02rem;
    }
    .sm-clean ul a,
    .sm-clean ul a:hover,
    .sm-clean ul a:focus,
    .sm-clean ul a:active,
    .sm-clean ul a.highlighted {
        border: 0 !important;
        padding: 1rem;
        color: #555555;
    }
    .sm-clean ul a:hover,
    .sm-clean ul a:focus,
    .sm-clean ul a:active,
    .sm-clean ul a.highlighted {
        background: #fff;
        color: #D23600;
    }
    .sm-clean ul a.current {
        color: #D23600;
    }
    .sm-clean ul a.disabled {
        background: #fff;
        color: #cccccc;
    }
    .sm-clean ul a.has-submenu {
        padding-right: 2rem;
    }
    .sm-clean ul a .sub-arrow {
        right: 8px;
        top: 50%;
        margin-top: -5px;
        border-width: 5px;
        border-style: dashed dashed dashed solid;
        border-color: transparent transparent transparent #555555;
        display: none;
    }
    .sm-clean .scroll-up,
    .sm-clean .scroll-down {
        position: absolute;
        display: none;
        visibility: hidden;
        overflow: hidden;
        background: #fff;
        height: 20px;
    }
    .sm-clean .scroll-up:hover,
    .sm-clean .scroll-down:hover {
        background: #eeeeee;
    }
    .sm-clean .scroll-up:hover .scroll-up-arrow {
        border-color: transparent transparent #D23600 transparent;
    }
    .sm-clean .scroll-down:hover .scroll-down-arrow {
        border-color: #D23600 transparent transparent transparent;
    }
    .sm-clean .scroll-up-arrow,
    .sm-clean .scroll-down-arrow {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -6px;
        width: 0;
        height: 0;
        overflow: hidden;
        border-width: 6px;
        border-style: dashed dashed solid dashed;
        border-color: transparent transparent #555555 transparent;
    }
    .sm-clean .scroll-down-arrow {
        top: 8px;
        border-style: solid dashed dashed dashed;
        border-color: #555555 transparent transparent transparent;
    }
    .sm-clean.sm-rtl a.has-submenu {
        padding-right: 12px;
        padding-left: 24px;
    }
    .sm-clean.sm-rtl a .sub-arrow {
        right: auto;
        left: 12px;
    }
    .sm-clean.sm-rtl.sm-vertical a.has-submenu {
        padding: 10px 20px;
    }
    .sm-clean.sm-rtl.sm-vertical a .sub-arrow {
        right: auto;
        left: 8px;
        border-style: dashed solid dashed dashed;
        border-color: transparent #555555 transparent transparent;
    }
    .sm-clean.sm-rtl>li>ul::before {
        left: auto;
        right: 30px;
    }
    .sm-clean.sm-rtl>li>ul::after {
        left: auto;
        right: 31px;
    }
    .sm-clean.sm-rtl ul a.has-submenu {
        padding: 10px 20px !important;
    }
    .sm-clean.sm-rtl ul a .sub-arrow {
        right: auto;
        left: 8px;
        border-style: dashed solid dashed dashed;
        border-color: transparent #555555 transparent transparent;
    }
    .sm-clean.sm-vertical {
        padding: 10px 0;
        border-radius: 0;
    }
    .sm-clean.sm-vertical a {
        padding: 10px 20px;
    }
    .sm-clean.sm-vertical a:hover,
    .sm-clean.sm-vertical a:focus,
    .sm-clean.sm-vertical a:active,
    .sm-clean.sm-vertical a.highlighted {
        background: #fff;
    }
    .sm-clean.sm-vertical a.disabled {
        background: #eeeeee;
    }
    .sm-clean.sm-vertical a .sub-arrow {
        right: 8px;
        top: 50%;
        margin-top: -5px;
        border-width: 5px;
        border-style: dashed dashed dashed solid;
        border-color: transparent transparent transparent #555555;
    }
    .sm-clean.sm-vertical>li>ul::before,
    .sm-clean.sm-vertical>li>ul::after {
        display: none;
    }
    .sm-clean.sm-vertical ul a {
        padding: 10px 20px;
    }
    .sm-clean.sm-vertical ul a:hover,
    .sm-clean.sm-vertical ul a:focus,
    .sm-clean.sm-vertical ul a:active,
    .sm-clean.sm-vertical ul a.highlighted {
        background: #eeeeee;
    }
    .sm-clean.sm-vertical ul a.disabled {
        background: #fff;
    }
}


/*# sourceMappingURL=sm-clean.css.map */


/* Mobile first layout SmartMenus Core CSS (it's not recommended editing these rules)
   You need this once per page no matter how many menu trees or different themes you use.
-------------------------------------------------------------------------------------------*/

.sm {
    box-sizing: border-box;
    position: relative;
    z-index: 9999;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.sm,
.sm ul,
.sm li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: normal;
    direction: ltr;
    text-align: left;
}

.sm-rtl,
.sm-rtl ul,
.sm-rtl li {
    direction: rtl;
    text-align: right;
}

.sm>li>h1,
.sm>li>h2,
.sm>li>h3,
.sm>li>h4,
.sm>li>h5,
.sm>li>h6 {
    margin: 0;
    padding: 0;
}

.sm ul {
    display: none;
}

.sm li,
.sm a {
    position: relative;
}

.sm a {
    display: block;
}

.sm a.disabled {
    cursor: default;
}

.sm::after {
    content: "";
    display: block;
    height: 0;
    font: 0px/0 serif;
    clear: both;
    overflow: hidden;
}

.sm *,
.sm *::before,
.sm *::after {
    box-sizing: inherit;
}

.main-nav:after {
    clear: both;
    content: "\00a0";
    display: block;
    height: 0;
    font: 0px/0 serif;
    overflow: hidden;
}

.nav-brand {
    /*          float: left;*/
    margin: 0;
}

.nav-brand a {
    display: block;
    padding: 12px 12px 12px 20px;
    color: #777;
    /*          font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    font-size: 22px;
    font-weight: normal;
    line-height: 17px;
    text-decoration: none;
}

#main-menu {
    clear: both;
    background: #FFF;
}

#main-menu>li {
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    border: 1px solid #000;
    border-bottom: 0;
}

#main-menu>li:last-of-type {
    border-bottom: 1px solid #000;
}

@media (min-width: 768px) {
    #main-menu {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    #main-menu>li {
        border: 1px solid #000;
        border-right: 0;
    }
    #main-menu>li:last-of-type {
        border-right: 1px solid #000;
    }
}


/* Mobile menu toggle button */

.main-menu-btn {
    /* float: right; */
    margin: 6px 10px;
    position: relative;
    display: inline-block;
    width: 100%;
    height: 29px;
    text-indent: 29px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.main-menu-labelo {
    position: absolute;
    top: 3px;
    left: 10px;
    color: #000;
}


/* hamburger icon */

.main-menu-btn-icon,
.main-menu-btn-icon:before,
.main-menu-btn-icon:after {
    position: absolute;
    top: 50%;
    left: 2px;
    height: 2px;
    width: 24px;
    background: #555;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}

.main-menu-btn-icon:before {
    content: '';
    top: -7px;
    left: 0;
}

.main-menu-btn-icon:after {
    content: '';
    top: 7px;
    left: 0;
}


/* x icon */

#main-menu-state:checked~.main-menu-btn .main-menu-btn-icon {
    height: 0;
    background: transparent;
}

#main-menu-state:checked~.main-menu-btn .main-menu-btn-icon:before {
    top: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#main-menu-state:checked~.main-menu-btn .main-menu-btn-icon:after {
    top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* hide menu state checkbox (keep it visible to screen readers) */

#main-menu-state {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}


/* hide the menu in mobile view */

#main-menu-state:not(:checked)~#main-menu {
    display: none;
}

#main-menu-state:checked~#main-menu {
    display: block;
}

@media (min-width: 768px) {
    /* hide the button in desktop view */
    .main-menu-btn {
        position: absolute;
        top: -99999px;
        display: none;
    }
    /* always show the menu in desktop view */
    #main-menu-state:not(:checked)~#main-menu {
        display: block;
    }
    /* always show the menu in desktop view */
    @supports (display:flex) {
        #main-menu-state:not(:checked)~#main-menu {
            display: flex;
        }
        #main-menu-state:not(:checked)~#main-menu li {
            flex: 1;
        }
    }
    nav.main-nav {
        margin-bottom: 4rem;
    }
    /* menus */
    #main-menu>li {
        text-align: center;
    }
    #main-menu>li>a {
        display: flex;
        justify-content: space-around;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    .sm-clean a.has-submenu {
        padding-right: 12px;
    }
    #main-menu.sm-clean>li>a .sub-arrow {
        position: static;
        margin-left: 1rem;
    }
    /* item rechercher (pour musée) */
    #main-menu>li.rechercheMusee {
        width: 75px;
        max-width: 75px;
    }
    #main-menu>li.rechercheMusee>a {
        background: url(/ui/skins/CIMU/images/icon-loupe-blanc.svg) no-repeat scroll center center #000;
        height: 43px;
        background-position-x: .75rem;
    }
    #main-menu>li.rechercheMusee>a>span:not(.sub-arrow) {
        display: none;
    }
    #main-menu>li.rechercheMusee>a>span.sub-arrow {
        margin-left: 2rem;
        border-color: #999 transparent transparent transparent;
    }
}

@media (max-width:767px) {
    nav.main-nav,
    .nav--rubriques {
        /* display: none; */
    }
}


/* Marges autour du titre "incontournable rebond" PAD------------*/

div.border-gris div.media-body.border h3,
div.border-gris div.media-body.border h2 {
    /* padding-top: 12px!important; */
}


/* Fin - Marges autour du titre "incontournable rebond" PAD-----------*/


/* encart intro */

.frame-standard.panel.panel-front.webframe-ermes-carousel.intro.center {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 2rem;
    text-align: center;
    font-weight: 600;
}


/* *************************************************************************** */


/* Modèle d'encart ermes/tinymce : mosaique 2020 img gauche - texte droite -- 2x2   */


/* *************************************************************************** */

.model-html[class*="modele_horiz-"] h2 {
    background: transparent;
    font-weight: 600;
    color: #666;
}

.model-html[class*="modele_horiz-"] .media {
    padding: 0;
    padding-right: 1rem;
}

.model-html[class*="modele_horiz-"] .media>a {
    display: flex;
    border-radius: 1rem;
    text-decoration: none;
    border: 1px solid #EAEDF0;
    padding: .5rem;
    position: relative;
}

.model-html[class*="modele_horiz-"] .media>a:hover,
.model-html[class*="modele_horiz-"] .media>a:focus,
.model-html[class*="modele_horiz-"] .media>a:focus-within,
.model-html[class*="modele_horiz-"] .media>a:active {
    background: #f3f2ee;
    /*    border:1px solid #ddd;*/
}

.model-html[class*="modele_horiz-"] .media>a.lien-externe:hover:after,
.model-html[class*="modele_horiz-"] .media>a.lien-externe:focus:after,
.model-html[class*="modele_horiz-"] .media>a.lien-externe:focus-within:after,
.model-html[class*="modele_horiz-"] .media>a.lien-externe:active:after {
    content: url(/ui/skins/MEDIA/images/icon-extlink-noir.png);
    position: absolute;
    right: .5rem;
    top: .5rem;
}
/* gg 05/08/2022 deplacement de width et height depuis img vers figure */
.model-html[class*="modele_horiz-"] .pull-left {
	display: flex;
    /*    margin-right: .75rem;*/
    margin-right: .25rem;
    border-radius: 1rem;
    overflow: hidden;
    flex-basis: 128px;
	width: 128px;
	height: 128px;
    /*    background: #b3d6fd;*/
    background: #f3f2ee;
}

.model-html[class*="modele_horiz-"] .media-object {
    object-fit: cover;
    /* width: 128px;
    height: 128px; */
	/* gg 30/09/2022 : correction width */
	width: 100%;
    border: 0;
    margin: 0;
}

.model-html[class*="modele_horiz-"] .media-body {
    flex: 1;
    margin-right: .5rem;
    padding-top: .5rem;
    padding-left: .5rem;
    border-radius: 1rem;
}

.modele_horiz-1col.model-html .media-body {
    max-width: 100%;
}


/* Christophe Leonardi migration syracuse : remove max-width 05/08/2022*/


/* .modele_horiz-2col.model-html .media-body {
    max-width: 300px;
} */

.model-html[class*="modele_horiz-"] .docType {
    line-height: 1;
    font-weight: 600;
    font-size: 12px;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    position: relative;
    margin-top: .25rem;
    color: #001b3b;
}
/* gg 05/08/2022 majuscule auto pour le type de document */
.model-html[class*="modele_horiz-"] .docType::first-letter {
    text-transform: uppercase;
}

.model-html[class*="modele_horiz-"] .docType::after {
    line-height: 1;
    height: 1px;
    width: 30px;
    position: absolute;
    background: #000;
    content: "";
    float: none;
    clear: both;
    display: block;
    bottom: 0;
}


/* Christophe Leonardi migration syracuse : add #page 05/08/2022 */

#page .model-html[class*="modele_horiz-"] .media-body h3.media-heading {
    padding: 0;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1rem;
    color: #001b3b;
}

.model-html[class*="modele_horiz-"] p.detail {
    line-height: 1;
    font-size: 13px;
    color: #777;
    margin-bottom: 0;
}


/* ******************************************************************** */


/* Modèle d'encart ermes/tinymce : mosaique d'images verticales masonry */


/* ******************************************************************** */

.mosaique-images-verticales .masonry-with-columns {
    columns: 6 200px;
    column-gap: 1rem;
}

.mosaique-images-verticales .masonry-with-columns>div {
    width: 150px;
    background: #ec985a;
    color: white;
    margin: 0 1rem 1rem 0;
    display: inline-block;
    width: 100%;
    /*    text-align: center;*/
    font-family: system-ui;
    font-weight: 900;
    font-size: 2rem;
    position: relative;
}

.mosaique-images-verticales .mosaiq-item .conteneur-texte {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.mosaique-images-verticales .mosaiq-item {
    border-radius: 16px;
    overflow: hidden;
}


/* modifs inspecteur */


/*
body {
	 margin: 0;
	 padding: 1rem;
}
*/

.mosaique-images-verticales .masonry-with-columns {
    columns: 6 200px;
    column-gap: 1rem;
}

.mosaique-images-verticales .masonry-with-columns>div {
    width: 150px;
    background: #ec985a;
    color: white;
    margin: 0 1rem 1rem 0;
    display: inline-block;
    width: 100%;
    /*    text-align: center;*/
    font-family: system-ui;
    font-weight: 900;
    font-size: 2rem;
    position: relative;
}

.mosaique-images-verticales .mosaiq-item .conteneur-texte {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-decoration: none;
    -webkit-transition: padding .3s ease-in-out;
    transition: padding .3s ease-in-out;
    /*! padding: .5rem; */
}

.mosaique-images-verticales .conteneur-texte .cadre {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-decoration: none;
    -webkit-transition: padding .3s ease-in-out;
    transition: padding .3s ease-in-out;
    position: relative;
    /*!    border: 1px solid rgba(255, 255, 255, .4);*/
    border: 0;
}

.mosaique-images-verticales .conteneur-texte .texte {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    background: rgba(255, 255, 255, .75);
    /*    height: 74px;*/
    height: 55px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    width: 100%;
    -webkit-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
    box-sizing: border-box;
    height: 0;
    background: rgba(0, 27, 59, .75);
}


/*
.mosaique-images-verticales .liste-fichesThema li.double .conteneur-texte .texte {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}
*/

.mosaique-images-verticales .mosaiq-item:hover .conteneur-texte .texte {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
}

.mosaique-images-verticales .conteneur-texte a .item-titre {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: .5px;
    color: #fff !important;
    margin-bottom: .5rem;
}

.mosaique-images-verticales .conteneur-texte span.descriptionFiche {
    font-family: 'SourceSansPro', SourceSansPro, arial, Helvetica, sans-serif;
    font-size: 14px;
    /*!    font-size: .825rem; */
    margin: 0;
    opacity: 0;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
    text-transform: none;
    color: #ddd !important;
    letter-spacing: normal;
    font-weight: normal;
    text-align: left;
}

.mosaique-images-verticales .mosaiq-item:hover .conteneur-texte span.descriptionFiche {
    opacity: 1;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    display: block;
    max-height: 200px;
}

.mosaique-images-verticales .mosaiq-item:hover .conteneur-texte span.descriptionFiche.item-lien {
    text-decoration: underline;
    font-size: .825rem;
    margin-top: 1rem;
}

.mosaique-images-verticales .conteneur-texte a {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: center;
    color: #000;
    font-family: 'SourceSansPro', SourceSansPro, arial, Helvetica, sans-serif;
    text-decoration: none;
    padding: 0 1rem;
    margin: 0;
    /*!    font-size: 16px;*/
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-transition: padding .3s ease-in-out;
    transition: padding .3s ease-in-out;
    height: 55px;
    font-family: 'Philharmonique', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .5px;
    max-height: 100%;
    color: #fff !important;
}

.mosaique-images-verticales .mosaiq-item:hover .conteneur-texte a {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0 1rem;
    /*!    padding: 0 .5rem;*/
}

.mosaique-images-verticales .conteneur-img img {
    -o-object-fit: cover;
    object-fit: cover;
    margin-bottom: 0;
    max-width: none;
    width: auto;
    min-width: 100%;
}

.mosaique-images-verticales .masonry-with-columns .mosaiq-item-petit {
    height: 250px;
}

.mosaique-images-verticales .masonry-with-columns .mosaiq-item-moyen {
    height: 320px;
}

.mosaique-images-verticales .masonry-with-columns .mosaiq-item-grand {
    height: 400px;
}

.mosaique-images-verticales .conteneur-img {
    display: flex;
    height: 100%;
}

.mosaique-images-verticales .conteneur-img img {
    -o-object-fit: cover;
    object-fit: cover;
    margin-bottom: 0;
    /* max-width: none; */
    /* width: auto; */
    min-width: 100%;
    /* height: 100%; */
}


/* fin : mosaique d'images verticales masonry */


/* ****************************************** */


/* *************************************************************** */


/* Modele d'encart ermes/tinymce : MOSAIQUE image haut - texte bas */


/* *************************************************************** */

.mosaique-imgHaut-txtBas ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: auto;
}

.mosaique-imgHaut-txtBas ul li {
    display: flex;
    justify-content: center;
    flex-basis: 100%;
    list-style: none;
    margin-bottom: 24px;
}

@media (min-width:480px) {
    .mosaique-imgHaut-txtBas ul li {
        flex-basis: 50%;
    }
}

@media (min-width:768px) {
    .mosaique-imgHaut-txtBas ul li {
        flex-basis: 33.333%;
    }
}

@media (min-width:992px) {
    .mosaique-imgHaut-txtBas ul li {
        flex-basis: 25%;
    }
}

.mosaique-imgHaut-txtBas li>a {
    display: flex;
    flex-direction: column;
    padding: .5rem;
    background: transparent;
    width: 100%;
}

.mosaique-imgHaut-txtBas li>a:hover {
    /*    background: #f3f2ee;*/
}

.mosaique-imgHaut-txtBas li>a * {
    margin: 0;
    padding: 0;
    border: 0;
}

.mosaique-imgHaut-txtBas .imgHaut {
    display: flex;
    height: 150px;
    border-radius: 1rem;
    overflow: hidden;
}

.mosaique-imgHaut-txtBas img {
    object-fit: cover;
    width: 100%;
}

.mosaique-imgHaut-txtBas .txtBas {
    padding: .825rem 0;
}

.mosaique-imgHaut-txtBas .txtBas p {
    font-size: 1rem;
    /*	font-weight: 600;*/
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    color: #001B3B;
}


/* **************************************************** */


/* ***********   MOSAIQUE 2022 "MOZAIK"   ************* */


/* **************************************************** */


/* exception pour edutheque 13/07/2022 GG */

.contenu .mozaik-wrap.container {
    max-width: 100%;
}


/* conteneur de la mozaik */

.mozaik-liste {
    display: flex;
    flex-wrap: wrap;
    justify-items: stretch;
    align-items: stretch;
}

.mozaik-item {
    flex-basis: 31%;
    border-radius: 1rem;
    border: 0;
    overflow: hidden;
    margin: .5rem;
    background: #fff;
    flex: 1 100%;
    /* flex-basis: 275px; */
    flex-grow: unset;
    flex-shrink: unset;
    border: 1px solid #EAEDF0;
    box-shadow: 0 3px 8px #ccc;
}

.mozaik-item:hover {
    border: 1px solid #aaa;
}

@media (min-width:556px) {
    .mozaik-item {
        flex-basis: calc(50% - 1rem);
    }
}

@media (min-width:992px) {
    .mozaik-item {
        flex-basis: calc(33% - 1rem);
    }
}

@media (min-width:1600px) {
    .mozaik-item {
        flex-basis: calc(25% - 1rem);
    }
}

.mozaik-item>a {
    margin: 0;
    background: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mozaik-item>a:hover,
.mozaik-item>a:focus,
.mozaik-item>a:hover *,
.mozaik-item>a:focus * {
    text-decoration: none;
}

.mozaik-item .texte {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mozaik-item .texte * {
    order: 2;
}
/* gg 05/08/2022 ordre element categorie et sous-categorie */
.mozaik-item .texte .categorie,
.mozaik-item .sous-categorie {
    order: 1;
}

.mozaik-item .texte {
    padding: 1rem;
}

.mozaik-item p {
    margin: 0 0 .5rem;
}

.mozaik-item.dark h3 {
    color: #fff;
}
/* gg 05/08/2022 ordre element categorie et sous-categorie */
.mozaik-item .categorie,
.mozaik-item .sous-categorie {
    font-size: .825rem;
    font-weight: 500;
    line-height: 1;
    color: #001b3b;
    margin-bottom: .5rem;
}
/* gg 05/08/2022 majuscule auto pour la categorie */
.mozaik-item .sous-categorie::first-letter,
.mozaik-item .categorie::first-letter {
    text-transform: uppercase;
}

.mozaik-item .categorie:after {
    content: "";
    display: block;
    width: 2rem;
    height: 1px;
    background: #001b3b;
    line-height: 1;
    margin-top: .5rem;
}

#page .mozaik-item .titre {
    font-family: 'Philharmonique', sans-serif;
    font-weight: 500;
    color: #001b3b;
    font-size: .95rem;
    line-height: 1.25;
    margin: 0;
}

.mozaik-item .sous-titre {
    color: #001b3b;
    opacity: .8;
    font-family: 'Philharmonique', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
}

.mozaik-item .description {
    color: #001b3b;
    font-size: .875rem;
}

@media (min-width:1200px) {
    .mozaik-item .description {
        font-size: .875rem;
    }
}

.mozaik-item .lieu,
.mozaik-item .date {
    color: #001b3b;
    font-size: .875rem;
    font-weight: 500;
    opacity: 1;
    margin: 0;
}

.mozaik-item .lieu:before {
    content: url(images/icon-geolocalisation.svg);
    margin-right: .5rem;
    vertical-align: sub;
}

.mozaik-item .date:before {
    content: url(images/icon-date.svg);
    margin-right: .5rem;
    vertical-align: sub;
}

.mozaik-item figure {
    height: 242px;
    -webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    order: 1;
}

.mozaik-item figure>img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 101%;
}


/* MOZAIK avec hauteur d'image variable (expos du musee) */

.mozaik-imageVariable .mozaik-item figure,
.mozaik-imageVariable .mozaik-item figure>img {
    height: auto;
}


/* MOZAIK sans image */

.mozaik-sansImage .mozaik-item figure {
    display: none;
}


/* MOZAIK avec infos au survol */

.mozaik-infoSurvol .mozaik-item>a {
    position: relative;
}

.mozaik-infoSurvol .mozaik-item .survol {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 27, 59, 0)), color-stop(99%, #001b3b));
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 27, 59, 0)), color-stop(99%, #001b3b));
    background: -o-linear-gradient(bottom, rgba(0, 27, 59, 0) 20%, #001b3b 99%);
    background: linear-gradient(to top, rgba(0, 27, 59, 0) 20%, #001b3b 99%);
    display: none;
}

.mozaik-infoSurvol .mozaik-item .survol,
.mozaik-infoSurvol .mozaik-item .survol * {
    color: #fff!important;
}

.mozaik-infoSurvol .mozaik-item .categorie,
.mozaik-infoSurvol .mozaik-item .btn {
    display: none;
}

.mozaik-infoSurvol .mozaik-item>a:focus .survol,
.mozaik-infoSurvol .mozaik-item>a:hover .survol {
    display: block;
}

.mozaik-infoSurvol .survol .lieu:before {
    content: url(images/icon-geolocalisation-blanc.svg);
    margin-right: .5rem;
    vertical-align: sub;
}

.mozaik-infoSurvol .survol .date:before {
    content: url(images/icon-date-blanc.svg);
    margin-right: .5rem;
    vertical-align: sub;
}


/* modifs guillaume 10 / 12 / 2020 */

body .cms-preview-mask-text-back {
    position: fixed;
    top: 50px;
    left: 0;
    width: 50px!important;
    height: 50px!important;
    z-index: 200000;
    background: rgba(255, 0, 0, .5)!important;
}

body .cms-preview-mask-text {
    position: fixed;
    top: 70px!important;
    left: 0px;
    width: 50px!important;
    padding: 0;
    text-align: center;
    font: 12px 'trebuchet ms', verdana, arial, sans-serif !important;
    color: #fff;
    background: none;
    z-index: 200000;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 50% 0 0;
    -moz-transform-origin: 50% 0 0;
    -o-transform-origin: 50% 0 0;
    transform-origin: 50% 0 0;
}


/* test affichage docu notice courte */

.template-datePubli,
.template-datePubliAloes {
    display: none;
}


/* ******************************************************************** */


/* ******************************************************************** */


/* REFONTE v2021 */


/* ******************************************************************** */


/* ******************************************************************** */


/* FONTS */

body.page-2021 #page h1,
body.page-2021 #page h1 *,
body.page-2021 #page h2,
body.page-2021 #page h2 *,
body.page-2021 #page .contenu h2,
body.page-2021 #page .contenu h2 *,
body.page-2021 #page h3,
body.page-2021 #page h3 * {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase!important;
    background-color: transparent;
}

body.page-2021 #page .contenu h2,
body.page-2021 #page .contenu h2 * {
    /* font-size: 1.5rem; */
    /* line-height: 1; */
    margin: 0;
    background: transparent;
}

body.page-2021 #page .contenu .panel>.panel-heading h2 body.page-2021 #page .contenu .panel-front>.x-panel-header span {
    background: transparent;
}

body.page-2021 .rebond-bleu h2,
body.page-2021 .rebond-blanc h2 {
    background: transparent!important;
}

body.page-2021 #page>.container h2,
#page>.container h2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.5rem;
    padding: 1rem 0;
    margin: 0;
	text-align:left;
}

body.page-2021 #page h2 * {
    font-size: inherit;
}

body.page-2021 #page #zone-5 h2,
body.page-2021 #page #zone-5 h2 *,
/* 01/08/2022 GG : alignement des pages anciennes sur ce modèle */
#page #zone-5 h2,
#page #zone-5 h2 * {
    font-size: 1.375rem;
    font-family: 'Philharmonique', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.29;
}

body.musee.page-2021 #page #zone-5 h2,
body.musee.page-2021 #page #zone-5 h2 * {
    font-size: 1.375rem;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.29;
}

body.page-2021 #page #zone-5 h2,
#page #zone-5 h2 {
    padding: 1rem 0;
    margin-bottom: 1rem;
    margin-top: 1rem;
    border-bottom: 1px solid #001B3B30;
}

body.page-2021 #page h3,
body.page-2021 #page h3 *,
/* 01/08/2022 GG : alignement des pages anciennes sur ce modèle */
#page h3,
#page h3 * {
	/* gg 13/09/2022 : reduction font-size */
    font-size: 1rem;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.25;
}

body.musee.page-2021 #page #zone-5 h3,
body.musee.page-2021 #page #zone-5 h3 * {
	/* gg 13/09/2022 : reduction font-size */
    font-size: .875rem;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1.25;
    padding: .5rem 0;
    margin: 0;
}

body.page-2021 #page h4,
body.page-2021 #page h4 *,
/* 01/08/2022 GG : alignement des pages anciennes sur ce modèle */
#page h4,
#page h4 * {
    font-family: 'SourceSansPro', sans-serif;
    text-transform: none;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 1rem;
}


/* ACCORDEON "DETAILS" */

details {
    border-bottom: 1px solid #001B3B30;
    margin-bottom: 0;
}

details[open=""],
details[open="open"],
details[open] {
    padding-bottom: 2rem;
}

summary {
    padding: 1.125rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

details summary:hover {
    cursor: pointer;
    background: #F5F6F7;
}

summary * {
    margin-top: 0;
    margin-bottom: 0;
}

summary p {
    font-size: 1.125rem;
    font-weight: 500;
}

details summary .icon.icon-right {
    transform: rotate(180deg);
}

details[open] summary .icon.icon-right {
    transform: rotate(270deg);
}

details> :not(summary) {
    /* padding-left:2rem; */
}

details li {
    font-size: .875rem;
    line-height: 1.5;
    margin-bottom: .875rem;
    list-style-type: disc;
}

details li::marker {
    color: #cd2453;
}


/* **************************************************************************** */


/* SIDEBAR bloc infos du concerts (infos / distrib / programme / bouton voir +) */

@supports (display:flex) {
    @media (max-width: 991px) {
        .content-oe-modele.bao-marseillaise #page > div.contenu #zone-5, body.b-a-o #page > div.contenu #zone-5, body.content-oe-modele[class*="bao-"] #page > div.contenu #zone-5 {
            border-radius: 0;
        }
        .content-oe-modele.bao-marseillaise #page>div.contenu #layout-3>.row,
        body.b-a-o #page>div.contenu #layout-3>.row,
        body.content-oe-modele[class*="bao-"] #page>div.contenu #layout-3>.row {
            /*
            -webkit-display: flex; -moz-display: flex; -o-display: flex; display: flex;
            flex-direction: column;
*/
        }
        .content-oe-modele.bao-marseillaise #page>div.contenu #zone-4,
        body.b-a-o #page>div.contenu #zone-4,
        body.content-oe-modele[class*="bao-"] #page>div.contenu #zone-4 {
            /*            order:2;*/
        }
    }
}

.content-oe-modele #page>div.contenu #zone-5 .frame.event-info {
    border-radius: 0;
    margin-bottom: 0 !important;
}

.event-info {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
}

#page>div.contenu .event-info .event-info {
    padding: 0 .5rem 1rem;
    margin: 0;
    border-bottom: 1px solid #d4d9de;
}

.event-info p,
.event-info span {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}

.event-info .public:first-letter {
    text-transform: capitalize;
}

@media (max-width:767px) {
    .event-info,
    .event-program {
        font-size: .875rem;
    }
}

.event-program {
    font-size: 1.125rem;
    line-height: 1.4;
    -webkit-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    transition: height 0.5s ease;
    overflow: hidden;
}


/*
.event-program-title {
    font-family: "Brewery No2 W06 Medium";
    font-weight: 500;
    font-size: 30px;
    margin-bottom: 20px;
}
*/

@media all and (max-width: 739px) {
    /*
    .event-program-title {
        font-size: 1.125rem;
    }
*/
}

.event-program .cycle-dates-item {
    /* font-family: "Brewery No2 W06 Regular"; */
    font-size: 1.125rem;
    line-height: 1.4;
}

@media all and (max-width: 767px) {
    .event-program .cycle-dates-item {
        font-size: 1rem;
    }
}

.event-program.collapsed {
    position: relative;
}

.event-program.collapsed:after {
    content: "";
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white));
    background: -o-linear-gradient(rgba(255, 255, 255, 0), white);
    background: linear-gradient(rgba(255, 255, 255, 0), white);
    width: 100%;
    height: 95px;
    position: absolute;
    bottom: 0;
}

.program-distrib,
.program-detail {
    padding-bottom: 1rem;
    border-bottom: 1px solid #D4D9DE;
}

#page .contenu .event-program .title {
    font-size: 28px;
    font-weight: 400;
    line-height: 1.29;
    margin: 1rem 0;
}

@media screen and (max-width: 767px) {
    .event-program .title {
        font-size: 1.125rem;
    }
}

.event-program .program-composer,
.event-program .distrib-title {
    font-weight: 500;
}

dl.program-block dt,
.event-program dl.program-block dt.program-composer,
.event-program dl.program-block dt.distrib-title {
    font-weight: 500;
    margin-top: 1rem;
}

dl.program-block dd,
.event-program dl.program-block dd.program-composer,
.event-program dl.program-block dd.distrib-title {
    font-weight: 400;
}

.event-program .program-oeuvreTitle {
    font-style: italic;
}

.event-program .program-comOeuvre,
.event-program .program-comStage {
    font-size: 15px;
}

@media (max-width: 739px) {
    .event-program {
        font-size: 1rem;
    }
}

.program-intermission {
    font-weight: 600;
    font-size: 1.125rem;
    text-transform: uppercase;
    opacity: 0.6;
    position: relative;
    text-align: center;
}

.program-intermission:before {
    border-bottom: 1px solid #667689;
    content: "";
    height: 1px;
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
}

.program-intermission span {
    background-color: white;
    padding: 0px 10px;
    position: relative;
}

@media all and (max-width: 739px) {
    .program-intermission {
        font-size: 0.75rem;
    }
}

.program-more-button {
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 2;
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #001b3b;
    width: 100%;
    padding-top: 1rem;
}

.program-more-button .icon {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-left: 1rem;
}

.program-more-button.collapsed .icon {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.program-more-button.hidden {
    display: none;
}


/* fin : infos concert */


/* CONTENU PAGE */

#page>div.contenu {
    margin-top: 0;
}

#page>div.contenu .layout.row {
    background-color: #d4d9de;
    padding-bottom: 2rem;
}


/* GESTION DU SYSTEME DE COLONNES ET ENCARTS D'ERMES */

div.contenu #portal {
    /* effacer aussi les premieres lignes de edutheque.css et master.css pour portal padding */
    padding-top: 0!important;
}

#page>div.contenu #portal .frame,
#page>.contenu>main>.searchContainer,
#page>.contenu>main>div>.searchContainer,
#page>.contenu .layout,
#page>.contenu [id^="layout-"],
#page>.contenu [id^="layout-"] .row,
.page-2021-1colonne #page>.contenu #zone-6 {
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
}

#page>div.contenu #portal .panel-front,
#page>.contenu>main>.searchContainer,
#page>.contenu>main>div>.searchContainer,
#page>.contenu [id^="layout-"] .row,
.page-2021-1colonne #page>.contenu #zone-6 {
    margin: 0 auto;
    max-width: 1170px;
    width: 100%;
}

.page-2021-1colonne #page>.contenu #layout-3 .row,
.page-2021-2colonnes #page>.contenu #layout-3 .row {
    margin-top: -110px;
}

@media (min-width: 768px) {
    #page>div.contenu #portal .panel-front,
    #page>.contenu>main>.searchContainer,
    #page>.contenu>main>div>.searchContainer,
    #page>.contenu [id^="layout-"] .row,
    .page-2021-1colonne #page>.contenu #zone-6 {
        width: 750px;
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    #page>div.contenu #portal .panel-front,
    #page>.contenu>main>.searchContainer,
    #page>.contenu>main>div>.searchContainer,
    #page>.contenu [id^="layout-"] .row,
    .page-2021-1colonne #page>.contenu #zone-6 {
        width: 970px;
        max-width: 100%;
    }
}
/* gg 11/08/2022 : correction template de page */
@media (min-width: 1200px) {
    #page>div.contenu #portal .panel-front,
    #page>.contenu>main>.searchContainer,
    #page>.contenu>main>div>.searchContainer,
    #page>.contenu [id^="layout-"] .row,
    .page-2021-1colonne #page>.contenu #zone-6,
    .page-2021-1colonne_mosaique #page>.contenu #zone-6{
        width: 1170px;
        max-width: 100%;
    }
}
@media (min-width: 1600px) {
    #page>div.contenu #portal .panel-front,
    #page>.contenu>main>.searchContainer,
    #page>.contenu>main>div>.searchContainer,
    #page>.contenu [id^="layout-"] .row,
    .page-2021-1colonne #page>.contenu #zone-6,
    .page-2021-1colonne_mosaique #page>.contenu #zone-6{
        width: 1600px;
        max-width: 100%;
    }
}
/* fin : gg 11/08/2022 : correction template de page */

/* @media (min-width: 1600px) {
    .metiers #page > div.contenu #portal .panel-front,
    .metiers #page > .contenu > main > .searchContainer,
    .metiers #page > .contenu > main > div > .searchContainer,
    .metiers #page > .contenu [id^="layout-"] .row,
    .metiers.page-2021-1colonne_mosaique #page > .contenu #zone-6
    {
        width: 1600px;
        max-width: 100%;
    }
	.metiers .container{
		width: 1600px;
		max-width: 100%;
	}
} */

#page>div.contenu .panel-front
/*,
#page > div.contenu .panel-selection */

{
    background: transparent;
    padding: 0;
}

#page>div.contenu figure img {
    border: 0;
    margin-bottom: 0;
}

.page-selection-EN #page>div.contenu .panel-front.filtres-matiere {
    padding: 0;
    margin: 0;
    height: 0;
}


/* FIL D'ARIANE 2021 */

.page-Recherche-PAD .contenu main #ariane,
.page-notice-PAD .contenu main #ariane,
body[class*="accueil-"] .contenu main #ariane,
.home .contenu main #ariane {
    visibility: hidden;
    display: none;
}

.contenu main #ariane {
    visibility: visible;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    position: absolute;
    z-index: 1;
}

#ariane * {
    line-height: 1;
}

@media (max-width:767px) {
    .listing #ariane .container {
        margin-top: 2.5rem;
        text-align: center;
    }
    .listing #page>div.contenu #portal .frame.hero .hero {
        padding-top: 8rem;
    }
}

.contenu main #ariane span,
.contenu main #ariane a:hover,
.contenu main #ariane a:focus {
    background: transparent;
    color: #eee;
    font-size: 11px;
    color: #fff;
    opacity: .9;
}

.contenu main #ariane a:hover,
.contenu main #ariane a:focus {
    text-decoration: underline;
}

.dossier-oe-modele.chant-travail-home .contenu main #ariane span,
.dossier-oe-modele.litte-orale-home .contenu main #ariane span,
.dossier-oe-modele.chant-travail-home .contenu main #ariane span,
.dossier-oe-modele.home-selectionEN .contenu main #ariane span,
.dossier-oe-modele.home-selectionEN .contenu main #ariane a:hover,
.dossier-oe-modele.home-selectionEN .contenu main #ariane a:focus {
    color: #fff;
}

.dossier-oe-modele .contenu main #ariane span,
.dossier-oe-modele .contenu main #ariane a:hover,
.dossier-oe-modele .contenu main #ariane a:focus {
    color: #001b3b;
}


/* ARIANE 2022 */

.page-Recherche-PAD .ariane-wrap,
.notice-PAD .ariane-wrap,
.page-notice-PAD .ariane-wrap,
.accueil-collections .ariane-wrap,
body[class*="accueil-"] .ariane-wrap,
.home .ariane-wrap {
    display: none;
}

.ariane-wrap {
    position: absolute;
    background: transparent;
    width: 100%;
    padding: .5rem 0;
    z-index: 1;
}

.ariane-wrap #ariane.container {
    margin: 0 auto;
    background: transparent;
}

.ariane-wrap #ariane.container * {
    background: transparent;
    color: #777;
    font-size: 12px;
}

.page-2021 .ariane-wrap #ariane.container * {
    color: #eee;
}


/* ZONE TITRE HERO */

body.page-2021 .frame.hero {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 27, 59, 0.4)), color-stop(99%, #001b3b));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

body.page-2021 #page>.contenu .frame.hero .panel-front {
    padding: 3rem 0 166px;
    margin: 0 auto -90px;
}

body.musee.page-2021 #portal .frame.hero .panel-front {
    margin: 0 auto -90px;
    width: 100%;
}

body.page-2021 #page>.contenu .frame.hero .panel-front .heroTexte *,
body.musee.page-2021 .frame.hero .panel-front .heroTexte * {
    color: #fff;
}

.page-2021 #page .hero .typeDoc,
.page-2021 #page .hero .typeDoc * {
    font-weight: bold;
    font-size: 14px !important;
    text-transform: none !important;
    font-family: 'SourceSansPro', SourceSansPro !important;
    color: #fff;
}

.page-2021 #page .hero .typeDoc::after {
    content: '';
    height: 1px;
    width: 40px;
    display: block;
    margin: 0px auto;
    margin-top: 0px;
    background-color: #fff;
    margin-top: 10px;
}


/* ZONE PAGE - GESTION DES MARGES EXTERIEURES */

.page-2021 #page>div.contenu .panel-front .page-2021.musee #page .panel-front {
    background: transparent;
    margin-right: auto;
    margin-left: auto;
}


/* ZONE CONTENU - GESTION DES COLONNES */

.page-2021-2colonnes #zone-4,
.page-2021-2colonnes #zone-5,
.page-2021-2colonnes #zone-6 {
    background: #fff;
    padding: 0;
    margin-bottom: 2rem;
    min-height: 0!important;
}


/* MODELE DE PAGE "2021 - 2 colonnes" */

.page-2021-2colonnes #zone-4 [id^="frame-"] .frame,
.page-2021-2colonnes #zone-5 [id^="frame-"] .frame {
    padding: 1rem;
}

.page-2021-2colonnes #zone-4 [id^="frame-"] .frame {
    padding: 1rem 2rem;
}

.page-2021 #zone-4 [id^="frame-"] .frame.sommaire {
    margin: 0 0 1rem!important;
    padding: 0;
}

.page-2021 #zone-4 [id^="frame-"] .panel-front,
.page-2021 #zone-5 [id^="frame-"] .panel-front {
    padding: 0;
}

.page-2021-2colonnes #zone-4 {
    overflow: hidden;
}

.page-2021-2colonnes #zone-4,
.page-2021-2colonnes #zone-5 {
    border-radius: 1rem;
}

@media(min-width:992px) {
    .page-2021-2colonnes #zone-4.col-md-9 {
        width: calc(75% - 1rem);
        margin-right: 1rem;
    }
    .page-2021-2colonnes #zone-4.col-md-8 {
        width: calc(66.66666666666666% - 1rem);
        margin-right: 1rem;
    }
}

.page-2021 #zone-4 [id^="frame-"] .panel-front.aplat,
.page-2021 #zone-5 [id^="frame-"] .panel-front.aplat {
    background-color: #EFEFEF;
    margin-right: 0;
    padding: 1rem;
    border-radius: .5rem;
}

.page-2021 #zone-4 [id^="frame-"] .panel-front.aplat .panel-heading h2,
.page-2021 #zone-5 [id^="frame-"] .panel-front.aplat .panel-heading h2 {
    margin-top: 0;
}


/* ***** ************** ***** */


/* ***** PAGE BAC V2021 ***** */


/* ***** ************** ***** */

.icon-resize-small::before {
    content: "";
    display: none;
}

.page-2021[class*="bac20"] .frame.hero {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 27, 59, 0.4)), color-stop(99%, #001b3b));
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 27, 59, 0.4)), color-stop(99%, #001b3b)), url(https://edutheque.philharmoniedeparis.fr/ui/skins/CIMU/images/photos-illus/clavier-ecouteurs-partition.jpg);
    background: -o-linear-gradient(top, rgba(0, 27, 59, 0.4) 0%, #001b3b 99%), url(https://edutheque.philharmoniedeparis.fr/ui/skins/CIMU/images/photos-illus/clavier-ecouteurs-partition.jpg);
    background: linear-gradient(to bottom, rgba(0, 27, 59, 0.4) 0%, #001b3b 99%), url(https://edutheque.philharmoniedeparis.fr/ui/skins/CIMU/images/photos-illus/clavier-ecouteurs-partition.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width:767px) {
    body.page-2021 #page h3,
    body.page-2021 #page h3 * {
        font-size: 1.375rem;
    }
    summary {
        padding: 2rem 0;
    }
    summary p {
        font-size: 1.125rem;
        font-weight: 500;
    }
    details summary .icon.icon-right {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
    }
}


/* LISTE HORIZONTALE : vignette à gauche texte à droite */

.list-horiz-item {
    list-style-type: none;
    margin-bottom: .5rem;
    /* border-radius: 1rem; */
}

.list-horiz-item a {
    display: flex;
    border: 1px solid #ddd;
    padding: 0.5rem;
    border-radius: 1rem;
}

[class*="bac20"] .list-horiz-item a {
    margin-left: 2rem;
}

.list-horiz-item figure {
    position: relative;
    height: 120px;
    width: 150px;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    min-width: 150px;
    max-width: 150px;
    padding: 0;
}

.list-horiz-item .lien-externe:before {
    content: "";
    display: none;
}

.list-horiz-item .lien-externe figure:before {
    content: "";
    display: block;
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    line-height: 1;
    width: 2rem;
    height: 2rem;
    box-sizing: border-box;
    background-image: url(/ui/skins/CIMU/images/icon-external-link-pastille.svg);
    background-size: contain;
}

@media screen and (max-width:767px) {
    .list-horiz-item .lien-externe figure:before {
        content: "";
        display: block;
        position: absolute;
        left: .5rem;
        bottom: .5rem;
        line-height: 1;
        width: 1.5rem;
        height: 1.5rem;
        box-sizing: border-box;
        background-image: url(/ui/skins/CIMU/images/icon-external-link-pastille.svg);
        background-size: contain;
    }
}

.list-horiz-item img {
    object-fit: cover;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

[class*="bac20"] .list-horiz-item figure {
    height: 100px;
    width: 100px;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    min-width: 100px;
    max-width: 100px;
}

[class*="bac20"] .list-horiz-item img {
    object-fit: cover;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

.list-horiz-item a:hover {
    background: #f4f5f6;
}

.list-horiz-text {
    margin-left: 1rem;
    border-radius: 1rem;
}

[class*="bac20"] .list-horiz-text {}

.list-horiz-text * {
    margin: 0 0 .5rem;
}

.list-horiz-text p {
    font-family: 'SourceSansPro', SourceSansPro, sans-serif;
}

.list-horiz-item a:hover,
.list-horiz-item a:hover p,
.list-horiz-item a:focus p {
    text-decoration: none;
}

.list-horiz-text p.docType {
    font-size: .825rem;
    font-weight: 500;
}

.list-horiz-text p.docType:after {
    content: "";
    width: 2rem;
    height: 1px;
    display: block;
    background: #001b3b;
    margin-top: .35rem;
}

body #page .list-horiz-text h3 {
    font-family: 'Philharmonique', sans-serif;
    font-size: .875rem;
    font-weight: 500;
    text-transform: uppercase;
}

.list-horiz-item a:hover h3,
.list-horiz-item a:hover h4 {
    text-decoration: underline;
}

.lien-externe .list-horiz-text h3:after {
    content: "";
    display: inline-block;
    width: .875rem;
    height: .825rem;
    line-height: 1;
    margin: 0 0 0 .25rem;
    background-image: url(/ui/skins/CIMU/images/icon-external-link.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
}

.lien-externe:hover .list-horiz-text h3:after,
.lien-externe:focus .list-horiz-text h3:after {
    content: "";
    display: inline-block;
    width: .875rem;
    height: .825rem;
    line-height: 1;
    margin: 0 0 0 .25rem;
    background-image: url(/ui/skins/CIMU/images/icon-external-link.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
}

.list-horiz-text h4 {
    font-size: 1rem;
    text-transform: uppercase;
    font-family: 'SourceSansPro', SourceSansPro, sans-serif;
}

@media (max-width:767px) {
    .list-horiz-item a {
        display: flex;
        margin-left: 0;
    }
    .list-horiz-item figure {
        height: 60px;
        width: 60px;
        border-radius: 1rem;
        overflow: hidden;
        display: flex;
        min-width: 60px;
        max-width: 60px;
    }
    .list-horiz-item img {
        object-fit: cover;
        width: 60px;
        min-width: 60px;
        max-width: 60px;
    }
    .list-horiz-text {
        padding: .25rem;
        margin-left: .5rem;
    }
    .lien-externe .list-horiz-text h3:after {
        content: "";
        display: inline-block;
        width: .825rem;
        height: .825rem;
        line-height: 1;
        margin: 0 0 0 .25rem;
        background-image: url(/ui/skins/CIMU/images/icon-external-link.svg);
        background-size: contain;
        opacity: 1;
    }
    .list-horiz-text h4 {
        font-size: .875rem;
        text-transform: uppercase;
    }
    .list-horiz-text p {
        font-size: .825rem;
    }
}


/* REBONDS SIDEBAR */

.page-2021.bac2021 #zone-5 a:not(.btn),
.page-2021 a.ext-link:not(.btn),
.page-2021 a.ext-link--pad:not(.btn),
.page-2021 a.ext-link--collecMusee:not(.btn),
.page-2021 a.ext-link--catalogue:not(.btn) {
    color: #1D5CFF;
    text-decoration: underline;
    line-height: 1.75;
}

.page-2021 a.ext-link:not(.btn):before,
.page-2021 a.ext-link--pad:not(.btn)::before,
.page-2021 a.ext-link--collecMusee:not(.btn)::before,
.page-2021 a.ext-link--catalogue:not(.btn)::before {
    content: "";
    display: none;
}

.page-2021 a.ext-link:not(.btn):after,
.page-2021 a.ext-link--pad:not(.btn)::after,
.page-2021 a.ext-link--collecMusee:not(.btn)::after,
.page-2021 a.ext-link--catalogue:not(.btn)::after {
    content: url(/ui/skins/MEDIA/images/icon-extlink-bleu.png);
    display: inline-block;
    margin-left: 1rem;
}


/*
a.ext-link:not(.btn)::before, a.ext-link--pad:not(.btn)::before, a.ext-link--collecMusee:not(.btn)::before, a.ext-link--catalogue:not(.btn)::before {
    content: url(/ui/skins/MEDIA/images/icon-extlink-bleu.png);
    display: inline-block;
    margin-right: 1rem;
}
*/


/* ********************************************************************** */


/* V2021 HEADER (logo, nom de site et navigation) - 06/2022 GG  */


/* ********************************************************************** */


/* ***************** */


/* ZONE TITRE + LOGO */

#page .brand-conteneur {
    padding: 1.75rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    text-indent: 0;
}

.edutheque #page .brand-conteneur {
    max-width: 100%;
    width: 1070px;
}


/* pour le nouveau header CATALOGUE 23/06/2022 : */

.adminGG.mediatheque #page .brand-conteneur.container::before,
.adminGG.mediatheque #page .brand-conteneur.container::after,
.musee #page .brand-conteneur.container::before,
.musee #page .brand-conteneur.container::after,
#page .brand-conteneur:before,
#page .brand-conteneur:after {
    display: none;
}

#page .brand-conteneur .logo {
    max-width: 250px;
}

#page .brand-conteneur h1 {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    text-indent: 0;
    max-width: 100%;
    /* width: 1600px; */
}


/* nouveau header CATALOGUE 23/06/2022 */

.adminGG.mediatheque #page .brand-conteneur h1 {
    width: unset;
    text-align: right;
    justify-content: flex-end;
}

#page .brand-conteneur h1,
#page .brand-conteneur h1 span {
    font-size: 2.5rem;
    text-transform: uppercase;
    color: #001B3B;
}

#page .brand-conteneur h1 a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    text-indent: 0;
    max-width: 100%;
    width: 1070px;
}

.musee #page .brand-conteneur>a>h1 {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    text-indent: 0;
    max-width: 100%;
    width: 100%;
}

#page .brand-conteneur>a>h2,
#page .brand-conteneur>a>h2 span {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 400;
    text-align: right;
    margin: 0;
    padding: 0;
}

@media (min-width: 1600px) {
    #page .brand-conteneur,
    .header-2021 .brand-conteneur h1,
    #page .brand-conteneur h1 a {
        width: 100%;
        max-width: 1600px;
    }
}

#page .brand-conteneur h1 a:hover,
#page .brand-conteneur h1 a:focus {
    color: #001B3B;
    opacity: .75;
}


/* *************** */


/* MAIN MENU ERMES */


/* *************** */

@media (max-width:767px) {
    .header-2021 #menu-panel {
        height: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        /*	    position: relative;*/
    }
    .header-2021 #menu-panel .navbar-inverse {
        display: none;
    }
}

.header-2021 .navbar-collapse.bs-navbar-collapse.collapsing,
.header-2021 .navbar-collapse.bs-navbar-collapse.in {
    position: fixed;
    z-index: 99;
    background: #fff;
    width: 100%;
    height: calc(100% - 80px)!important;
    left: 0;
    top: 80px;
}

@media (min-width:768px) {
    .header-2021 #menu-panel,
    .page-admin .header-2021 #menu-panel {
        position: static;
        -webkit-transition: top 0.35s ease-in-out;
        -o-transition: top 0.35s ease-in-out;
        transition: top 0.35s ease-in-out;
        background: #fff;
        border-top: 1px solid #dedede;
        border-bottom: 1px solid #dedede;
        width: 100%;
    }
    .header-2021 #menu-panel.menuCIMU__wrapper {
        -webkit-display: flex;
        -moz-display: flex;
        -o-display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        /* background: #f3f2ee;*/
        padding: 0;
        margin-bottom: 0;
        /* pour search over nav : */
        /* position: relative;*/
    }
    .header-2021 #menu-panel.menuCIMU__wrapper.container:before,
    .header-2021 #menu-panel.menuCIMU__wrapper.container:after {
        display: none;
        visibility: hidden;
    }
    .header-2021 #menu-panel.menuCIMU__wrapper .navbar-inverse {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
    .header-2021 .navbar-collapse.bs-navbar-collapse.collapsing,
    .header-2021 .navbar-collapse.bs-navbar-collapse.in {
        position: static;
    }
    #ermes_main_menu li.LEVEL1:first-child {
        border: medium none;
        flex: unset;
    }
}

@media (min-width:1200px) {
    .header-2021 #menu-panel.menuCIMU__wrapper.container {
        /*
        width: 100%;
		max-width: 1600px;
*/
        margin: 0 auto;
    }
}

.header-2021 #menu-panel.menuCIMU__wrapper .container {
    /* width: 100%; */
    margin: 0 auto;
}


/* @media (min-width: 1600px) {
	.header-2021 .brand-conteneur h1,
	.header-2021 #menu-panel.menuCIMU__wrapper .container {
		width: 100%;
		max-width: 1600px;
	}
} */

.header-2021 #menu-panel.menuCIMU__wrapper #menu-panel {
    background: none;
    border: 0;
    margin: 0;
    position: static;
    width: auto;
}

.header-2021 #menu-panel.menuCIMU__wrapper #menu-panel .panel-body {
    background-color: transparent;
    margin-top: 0;
    padding: 0;
}

.header-2021 #ermes_main_menu {
    position: static;
}

.header-2021 #ermes_main_menu:before,
.header-2021 #ermes_main_menu:after {
    display: none;
}

.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus,
#ermes_main_menu li.LEVEL1 a:hover {
    background: transparent;
}

#ermes_main_menu li.LEVEL1 li.LEVEL2 a:hover {
    background: transparent;
    color: #ffffff;
}


/* masquer temporairement l'onglet connexion du menu */


/*
.header-2021 #ermes_main_menu li.LEVEL1:last-child,
#ermes_main_menu li.LEVEL1::last-child > a:hover {
	background-color: transparent;
}
.header-2021 #ermes_main_menu li.LEVEL1:last-child a:before{
    content: url("images/icon-loupe-bleu.svg");
}
*/

.header-2021 #ermes_main_menu .LEVEL1 span {
    font-size: 0.875em;
    color: #001B3B;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
}

.header-2021 #ermes_main_menu .LEVEL1 {
    margin-right: 0;
    margin: 0;
    background-color: transparent;
    text-align: center;
    border: 0;
}

.header-2021 #ermes_main_menu li.LEVEL1 .caret {
    display: block;
    margin-left: .5rem;
}

.header-2021 #ermes_main_menu li.LEVEL1 .caret,
#ermes_main_menu li.LEVEL1 a:hover .caret {
    border-bottom-color: #001b3b;
    border-top-color: #001b3b;
}

.header-2021 #ermes_main_menu .LEVEL1>a {
    -webkit--webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -moz--webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    display: flex;
    -ms--webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    display: flex;
    -o--webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    justify-content: center;
    height: 100%;
}

.header-2021 #ermes_main_menu li.LEVEL2>a {
    color: #001b3b;
    background: #e9e9e9;
}

.header-2021 #ermes_main_menu .LEVEL1 span {
    font-size: .875rem;
    color: #001b3b;
}

.header-2021 #ermes_main_menu .intitule-home {
    display: none;
}

@media (min-width:768px) {
    .header-2021 #ermes_main_menu {
        position: static;
        /*        height: 90px;*/
        -webkit-display: flex;
        -moz-display: flex;
        -o-display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        justify-content: space-between;
    }
    /*
    .header-2021 #ermes_main_menu li.LEVEL1:last-child a span{
        display: none;
    }
*/
    #ermes_main_menu li.LEVEL1>a {
        padding: 1rem;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .header-2021 .navbar-header h1 {
        width: 162px;
        min-width: 162px;
    }
    .header-2021 .navbar-header .sous-titre span {
        font-size: 12px;
    }
    .header-2021 #ermes_main_menu .LEVEL1>a {
        padding: .75rem;
    }
    .header-2021 #ermes_main_menu .LEVEL1 span {
        font-size: .825rem;
    }
}

@media (min-width:1201px) {
    .header-2021 #ermes_main_menu .LEVEL1 span {
        font-size: 1rem;
    }
}


/* ajouts gestion des sous-menus 2021 */

.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .dropdown-menu {
    border: 0;
    border-top: 0;
    border-bottom: 1px solid #fff;
}

.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .dropdown-menu.LEVEL1 {
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
}

.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1:last-of-type .dropdown-menu.LEVEL1,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1.open:last-of-type .dropdown-menu.LEVEL1 {
    right: 0;
    left: unset;
}


/* .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .dropdown-menu.LEVEL1.Type{
    right: 0;
	left:unset;
    width: 570px;
    height: 335px;
    -webkit-box-shadow: 0 3px 8px rgba(0,0,0,.5);
            box-shadow: 0 3px 8px rgba(0,0,0,.5);
} */


/* .header-2021 #menu-panel.menuCIMU__wrapper .open > .dropdown-menu.LEVEL1 {
    right: 0;
    left: unset;
 } */

.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .dropdown-menu li {
    font-size: .875rem;
    background: #EBEDF0;
    border-bottom: 1px solid #fff;
}

.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .dropdown-menu li.LEVEL2.dropdown-submenu,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .dropdown-menu li.LEVEL3 {
    background: #F7F7F9;
    border-bottom: 0;
}

.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 a:visited,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 li.LEVEL2 a:visited {
    background: transparent;
}

.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 a:active,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 a:hover,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 a:focus {
    background: transparent;
}

@media (min-width:768px) {
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1>a:active,
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1>a:hover,
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1>a:focus {
        box-shadow: 0 -2px 0 0 #001b3b inset;
    }
}

.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 li.LEVEL2 a:focus,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 li.LEVEL2 a:active,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 li.LEVEL2 a:hover,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 li.LEVEL2:focus,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 li.LEVEL2:active,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 li.LEVEL2:hover,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 li.LEVEL3:focus,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 li.LEVEL3:active,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 li.LEVEL3:hover,
.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
    background: #fff;
}

.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 li.LEVEL2.menuCIMU-item__fiches:focus,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 li.LEVEL2.menuCIMU-item__fiches:hover,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 li.LEVEL2.menuCIMU-item__fiches>a:focus,
.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 li.LEVEL2.menuCIMU-item__fiches>a:hover {
    background: #F7F7F9;
}

.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .LEVEL2 span {
    font-size: 0.875rem;
    font-family: "SourceSansPro", "Arial", "Helvetica", sans-serif;
    text-transform: none;
    font-weight: 500;
}

.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu span.detail {
    display: block;
    font-style: italic;
    font-weight: 400;
    font-size: .825rem;
}

.header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .LEVEL3 span {
    padding-left: 1.25rem;
    line-height: 1;
    opacity: .7;
}

@supports (display:flex) {
    .header-2021 #menu-panel.menuCIMU__wrapper .open>.dropdown-menu.LEVEL1 {
        -webkit-display: flex;
        -moz-display: flex;
        -o-display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        /*        max-height: 350px;*/
        -ms-flex-wrap: wrap-reverse;
        -o-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    @media (min-width:768px) {
        .header-2021 #menu-panel.menuCIMU__wrapper .open>.dropdown-menu.LEVEL1 {
            -webkit-display: flex;
            -moz-display: flex;
            -o-display: flex;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            /*
            max-height: 350px;
            min-height: 336px;
*/
            -ms-flex-wrap: wrap-reverse;
            -o-flex-wrap: wrap-reverse;
            flex-wrap: wrap-reverse;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }
    }
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .dropdown-menu li {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-display: flex;
        -moz-display: flex;
        -o-display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .dropdown-menu li a {
        padding: 1rem 2rem;
        background: transparent;
        text-align: left;
    }
    .header-2021 #menu-panel.menuCIMU__wrapper .dropdown-menu.LEVEL2 {
        display: block;
        position: static;
    }
}

.header-2021 #ermes_main_menu li.LEVEL2>a::after {
    content: "";
    display: none;
}


/* fin 1/2 ajouts gestion des sous-menus 2021 */

@media (max-width:767px) {
    #nav-rich-menu,
    #ermes_main_menu {
        background-color: #fff;
        padding-top: 2rem;
        overflow-x: hidden;
    }
    .navbar-collapse.bs-navbar-collapse.collapsing,
    .navbar-collapse.bs-navbar-collapse.in {
        overflow: auto;
    }
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .dropdown-menu.LEVEL1 {
        margin: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: unset;
    }
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .dropdown-menu li {
        font-size: .875rem;
        /* background: #fff; */
        border-bottom: 1px solid #EBEDF0;
        max-width: 100%;
    }
    /*
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .dropdown-menu li.LEVEL2:last-of-type {
        background: #fff;
        border-top: 1px solid #EBEDF0;
    }
*/
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .dropdown-menu li a {
        text-align: center;
    }
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .LEVEL1,
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1:first-child {
        margin: .5rem;
        margin-left: .5rem;
    }
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .LEVEL1>a {
        padding: 1.5rem;
        border: solid 1px rgba(0, 27, 59, 0.15);
        border-radius: .5rem;
    }
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .LEVEL1>a,
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .LEVEL1>a>span {
        font-size: 1rem;
        font-family: 'Philharmonique', sans-serif;
        text-transform: uppercase;
        color: #001b3b;
        text-align: center;
    }
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .LEVEL1>a>span {
        display: inline-block;
        /*        margin: 0 auto;*/
        text-align: center;
        text-transform: uppercase;
    }
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .LEVEL1>a>span.caret {
        margin: 0;
        border: 0;
        opacity: 1;
    }
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .LEVEL1>a>span.caret:after {
        font-family: ermes-font-update;
        content: '\e85a';
        display: inline;
        position: absolute;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        vertical-align: top;
        right: .5rem;
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        -webkit-transition: -webkit-transform .15s ease-in-out, -webkit-transform .15s ease-in-out;
        transition: transform .15s ease-in-out, -webkit-transform .15s ease-in-out;
        font-size: 2rem;
        top: calc(50% - 10px);
    }
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .LEVEL1.open>a>span.caret:after {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .dropdown-menu .LEVEL3>a {
        padding: .75rem;
    }
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .LEVEL3 span {
        padding-left: 0;
    }
    /*
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1:last-child,
    #ermes_main_menu li.LEVEL1:last-child > a:hover {
        background: #b3d6fd;
        margin-top: 3rem;
    }
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1:last-child a span{
        display: block;
    }
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .LEVEL1:last-child > a > span{
        margin: 0 1.25rem;
    }

    .header-2021 #ermes_main_menu li.LEVEL1:last-child a::before {
        content: url("images/icon-loupe-dark.svg");
    }
*/
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .dropdown-menu li.LEVEL2.dropdown-submenu,
    .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .dropdown-menu li.LEVEL2:last-of-type {
        /* background: #fff; */
    }
}

@supports (display:flex) {
    @media (max-width: 767px) {
        .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1 > a {
            -webkit-display: flex;
            -moz-display: flex;
            -o-display: flex;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }
        /*
        .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu li.LEVEL1:nth-child(4) a span {
            margin: 0;
        }
        .header-2021 #ermes_main_menu li.LEVEL1:nth-child(4) a::before {
            content: url("images/icon-loupe.svg");
            display: inline;
            position: static;
            margin-right: 2rem;
        }
*/
    }
}


/* fin 2/2 ajouts gestion des sous-menus 2021 */


/* old // gestion des sous-menus façon "megamenu" */


/*
@media (min-width:768px){
    @supports (display:flex){
        .header-2021 #menu-panel.menuCIMU__wrapper #ermes_main_menu .LEVEL1.display-type-0.open .dropdown-menu.LEVEL1 {
            -webkit-display: flex; -moz-display: flex; -o-display: flex; display: flex;
            flex-direction: column;
            -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;
            height: 348px;
            left: unset;
            right: 0;
            width: 500px;
            box-sizing: border-box;
            justify-content: space-evenly;
            overflow: hidden;
            align-items: stretch;
            background: #EBEDF0;
        }

        .nav-MAIN-edtq #ermes_main_menu .LEVEL2.dropdown-submenu.open, .LEVEL2.dropdown-submenu {
            flex: 1;
            position: static;
            padding: 1.75rem 0;
            background: antiquewhite;
            box-sizing: border-box;
            display: block;
        }
        .nav-MAIN-edtq #ermes_main_menu .LEVEL2.dropdown-submenu:first-of-type {
            height: 120px;
        }
        .nav-MAIN-edtq #ermes_main_menu .LEVEL2.dropdown-submenu:nth-of-type(2) {
            height: 290px;
        }
        .nav-MAIN-edtq #ermes_main_menu .dropdown-menu.LEVEL2 {
            position: static;
            display: block !important;
        }
        .nav-MAIN-edtq #ermes_main_menu .LEVEL3.display-type-0 {
            max-width: 160px;
        }
        .nav-MAIN-edtq #ermes_main_menu .dropdown-menu.LEVEL1:after {
            display: block;
            content: " ";
            margin: 0;
            flex: 999 999 auto;
        }
    }
}
*/


/* déclencheur de la recherche depuis le menu MAIN d'ermes */

.header-2021 #ermes_main_menu .icon-loupe {
    display: inline-block;
    width: 16px;
    height: 18px;
    background: url(images/icon-loupe-bleu.svg) no-repeat center;
    background-size: contain;
    vertical-align: sub;
}

.header-2021 #ermes_main_menu .nav-Main--item-Search {
    /*    display: none;*/
}


/* ******************************************** */


/* PAGES résultats de recherche */


/* ******************************************** */

#page>div.contenu .mobile-navigation {
    background-color: #001b3b;
    margin-top: 2rem;
    display: none!important;
}

#page>div.contenu .mobile-navigation>.btn-group,
#page>div.contenu .mobile-navigation .btn {
    color: white;
    background-color: #001b3b;
}


/* intitulé de la recherche + facettes sélectionnées */

#page>.contenu #resultsContainer #criteres_recherche {
    padding-left: 0;
    padding-right: 0;
    float: none!important;
    clear: both;
    margin: 0;
}

#page>.contenu #resultsContainer #criteres_recherche>p:first-of-type {
    display: none
}

#page>.contenu #resultsContainer #criteres_recherche>ul>li:first-of-type {
    display: block;
    width: 100%;
    background-color: #001b3b;
    /*
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,27,59,0.4)), color-stop(99%, #001b3b));
    background: linear-gradient(to bottom, rgba(0,27,59,0.4) 0%, #001b3b 99%);
*/
    border: 0;
    padding: .25rem;
    margin-bottom: .75rem;
    text-align: center;
    color: #fff;
}

#page>.contenu #resultsContainer #criteres_recherche>ul>li:first-of-type a {
    opacity: 1;
    padding-top: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: unset;
    border: 0;
    background: transparent;
}

#page>.contenu #resultsContainer #criteres_recherche>ul>li:first-of-type a span {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase!important;
    font-weight: normal;
    font-size: 2rem;
    text-transform: none;
    color: #fff;
}

#page>.contenu #resultsContainer #resultats_recherche .search-icon-container .search-icon-container--icon {
    color: #ffffff75;
}

#page>.contenu #resultsContainer #criteres_recherche>ul>li:nth-of-type(2) {
    /*    margin-left: 20px;*/
}

#page>.contenu #resultsContainer #criteres_recherche>ul>li:nth-of-type(n+2) {
    display: inline-block;
    border: 0;
    margin-top: .25rem;
    margin-right: .325rem
}

#page>.contenu #resultsContainer #criteres_recherche>ul>li:nth-of-type(n+2) button.removeFacetFilter {
    background-color: #fff;
    padding: 0 .5rem;
    border: 1px solid #ccc!important;
    border-radius: 1rem;
}

#page>.contenu #resultsContainer #criteres_recherche>ul>li:nth-of-type(n+2) button.removeFacetFilter span {
    font-size: .825rem
}

#page>.contenu #resultsContainer #criteres_recherche>ul>li:nth-of-type(n+2) button.removeFacetFilter span.icon-remove {
    font-size: 1rem;
    margin-left: 1rem
}


/* *********************************************** */


/* navigation résultats + critères tri/affichage : */

.page-recherche #page>.contenu #criteres_recherche p,
.page-recherche #page>.contenu #description_resultats,
.page-recherche #page>.contenu .taille_page,
.page-Recherche-PAD #page>.contenu #criteres_recherche p,
.page-Recherche-PAD #page>.contenu #description_resultats,
.page-Recherche-PAD #page>.contenu .taille_page {
    padding: .5rem 0;
    margin: 0 1rem 0 0;
}

.page-recherche #page>.contenu .navigation-page,
.page-recherche #page>.contenu .criteres_tri,
.page-Recherche-PAD #page>.contenu .navigation-page,
.page-Recherche-PAD #page>.contenu .criteres_tri {
    position: static;
    display: inline-block!important;
    padding: 0 .5rem;
    margin: 0;
}

.page-recherche #page>.contenu .navigation-page .pagination-container.col-md-7,
.page-Recherche-PAD #page>.contenu .navigation-page .pagination-container.col-md-7 {
    width: auto;
}

.page-recherche #page>.contenu .pagination,
.page-Recherche-PAD #page>.contenu .pagination {
    border-bottom: 0;
    border-radius: 0;
}

#page>.contenu #resultsContainer #documents_memorises .navigation-page #description_resultats span,
#page>.contenu #resultsContainer #resultats_recherche .navigation-page #description_resultats span {
    font-weight: 500;
    font-size: .875rem;
    text-transform: uppercase
}

#page>.contenu #resultsContainer .pagination button.btn-link-like {
    padding: .5rem;
    color: #001b3b;
    font-size: 12px;
    border: 0;
}

#page>.contenu #resultsContainer .pagination>li:first-of-type button.btn-link-like,
#page>.contenu #resultsContainer .pagination button.btn-link-like.suivant {
    padding: 0;
    font-size: 2rem;
    line-height: 1;
}

#page>.contenu #resultsContainer .pagination button.btn-link-like:hover,
#page>.contenu #resultsContainer .pagination button.btn-link-like:focus,
#page>.contenu #resultsContainer .pagination button.btn-link-like:focus-within {
    background: rgba(0, 0, 0, 0.5);
    background: transparent;
    -webkit-box-shadow: 0 4px 0 #001b3b;
    box-shadow: 0 4px 0 #001b3b;
}

#page>.contenu #resultsContainer .pagination button.btn-link-like span {
    border-bottom: 0;
}

#page>.contenu #resultsContainer .pagination li {
    vertical-align: middle;
}

#page>.contenu #resultsContainer .pagination>.disabled button.btn-link-like:hover,
#page>.contenu #resultsContainer .pagination>.disabled button.btn-link-like:focus,
#page>.contenu #resultsContainer .pagination>.disabled button.btn-link-like:focus-within {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus,
#page>.contenu #resultsContainer .pagination li.disabled,
.pagination>li.disabled>button.btn-link-like {
    color: inherit;
    cursor: default;
    background-color: transparent;
    border: 0;
    opacity: .8;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#page>.contenu #resultsContainer .pagination>.active>a,
#page>.contenu #resultsContainer .pagination>.active>span,
#page>.contenu #resultsContainer .pagination>.active>a:hover,
#page>.contenu #resultsContainer .pagination>.active>span:hover,
#page>.contenu #resultsContainer .pagination>.active>a:focus,
#page>.contenu #resultsContainer .pagination>.active>span:focus {
    border-bottom: 0;
    color: #001b3b;
    font-size: 12px;
    padding: 0;
}

#page>.contenu #resultsContainer .pagination>.active>a:hover,
#page>.contenu #resultsContainer .pagination>.active>span:hover,
#page>.contenu #resultsContainer .pagination>.active>a:focus,
#page>.contenu #resultsContainer .pagination>.active>span:focus {
    background: rgba(0, 0, 0, 0.5);
    background: transparent;
    -webkit-box-shadow: 0 4px 0 #001b3b;
    box-shadow: 0 4px 0 #001b3b;
}

#page>.contenu #resultsContainer .pagination>.active>span,
#page>.contenu #resultsContainer .pagination>.active>span:hover,
#page>.contenu #resultsContainer .pagination>.active>span:focus {
    border-bottom: 0;
    color: #001b3b;
    font-size: 12px;
    padding: .5rem;
    background: rgba(0, 0, 0, 0.5);
    background: transparent;
    -webkit-box-shadow: 0 4px 0 #001b3b;
    box-shadow: 0 4px 0 #001b3b;
}


/*
#page > .contenu #resultsContainer #documents_memorises .navigation-page #description_resultats span.additional-infos,
#page > .contenu #resultsContainer #resultats_recherche .navigation-page #description_resultats span.additional-infos {
    display: inline-block;
    position: relative
}

#page > .contenu #resultsContainer #documents_memorises .navigation-page #description_resultats span.additional-infos::before,
#page > .contenu #resultsContainer #resultats_recherche .navigation-page #description_resultats span.additional-infos::before {
    content: "(";
    width: 1rem;
    display: inline-block;
    position: absolute;
    z-index: 22;
    background-color: #fff;
    text-align: right;
    left: -8px
}

#page > .contenu #resultsContainer #documents_memorises .navigation-page #description_resultats span.additional-infos::after,
#page > .contenu #resultsContainer #resultats_recherche .navigation-page #description_resultats span.additional-infos::after {
    content: ")"
}

#page > .contenu #resultsContainer #documents_memorises .navigation-page #description_resultats>span span:not(.additional-infos),
#page > .contenu #resultsContainer #resultats_recherche .navigation-page #description_resultats>span span:not(.additional-infos) {
    display: none
}


#page > .contenu #resultsContainer #documents_memorises .panel-search-container>.panel-body>#resultats+div.navigation .navigation-page #description_resultats>span span:not(.additional-infos),
#page > .contenu #resultsContainer #resultats_recherche .panel-search-container>.panel-body>#resultats+div.navigation .navigation-page #description_resultats>span span:not(.additional-infos) {
    display: inline-block;
    font-weight: 700
}
*/

#page>.contenu #resultsContainer .navigation .criteres_tri {
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding-right: 2.5rem;
    float: none!important;
    clear: both;
    min-height: 30px;
    -webkit-box-flex: 4;
    -ms-flex: 4;
    flex: 4
}

#page>.contenu #resultsContainer .navigation .icon-arrow-bottom::before {
    line-height: 1;
}

#page>.contenu #resultsContainer .navigation .criteres_tri:before {
    float: none!important;
    clear: both
}

#page>.contenu #resultsContainer .criteres_tri .displaymode-icon-container {
    margin-left: 1rem;
    margin-top: 0;
}

#page>.contenu #resultsContainer .select-all {
    display: none!important;
}


/* ajout bouton pour faire apparaitre les facettes sur mobile :*/

.navigation .criteres_tri .filterAside {
    display: inline-block;
    float: right;
}

#page>.contenu #resultsContainer .navigation .criteres_tri .filterAside {
    display: inline-block;
    float: right;
    padding: 0 .5rem 0 1rem;
}

#page>.contenu #resultsContainer .navigation .criteres_tri .filterAside .icon-filter:before {
    content: '\e81f';
    display: inline-block;
    font-family: 'ermes-font-base';
    font-style: normal;
    font-weight: normal;
    min-width: 1rem;
    font-size: 1rem;
    content: '\e81f';
    color: #001b3b;
    vertical-align: sub;
    margin-top: -2px;
}

@media (min-width:768px) {
    #page>.contenu #resultsContainer .navigation.hidden-xs .criteres_tri {
        display: none!important;
    }
}

@media (min-width:992px) {
    .page-recherche #page>.contenu .navigation,
    .page-Recherche-PAD #page>.contenu .navigation {
        -webkit-display: flex;
        -moz-display: flex;
        -o-display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 1.75rem 0 2.5rem;
    }
    .page-recherche #page>.contenu .pagination,
    .page-Recherche-PAD #page>.contenu .pagination {
        /*        border-bottom: 1px solid #001b3b;*/
    }
    #page>.contenu #resultsContainer .navigation .criteres_tri .searchList-btn>button {
        background-color: transparent;
        border: 1px solid #001b3b;
        border-radius: 1rem;
        padding: 0 2rem 0 1rem;
    }
    #page>.contenu .criteres_tri .sort-order {
        background-color: transparent;
    }
    #page>.contenu #resultsContainer .navigation .criteres_tri {
        padding-right: 0;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }
    #page>.contenu #resultsContainer .navigation .criteres_tri .filterAside {
        display: none;
    }
}

@media (max-width:991px) {
    #page>.contenu #resultsContainer #criteres_recherche>ul>li:first-of-type {
        padding: 2rem .25rem;
        margin-bottom: .25rem;
    }
    /* criteres recherche */
    #page>.contenu #resultsContainer #criteres_recherche>ul {
        margin-bottom: 1rem;
    }
    #page>.contenu #resultsContainer #criteres_recherche>ul>li:nth-of-type(2) {
        margin-right: .325rem;
    }
    .page-recherche #page>.contenu #criteres_recherche p,
    .page-recherche #page>.contenu #description_resultats,
    .page-recherche #page>.contenu .taille_page,
    .page-Recherche-PAD #page>.contenu #criteres_recherche p,
    .page-Recherche-PAD #page>.contenu #description_resultats,
    .page-Recherche-PAD #page>.contenu .taille_page {
        padding: .5rem 1.5rem;
        display: none;
        font-weight: bold;
        padding: .5rem;
        color: #001b3b;
        text-transform: uppercase;
        display: none;
    }
    /*! navigation résultats : */
    #page>.contenu #resultsContainer .navigation {
        margin: 0;
        background: #001b3b;
        margin-bottom: 2.5rem;
    }
    #page>.contenu #resultsContainer .navigation>.navigation-page.hidden-sm.hidden-xs {
        display: block!important;
        padding: 0;
        margin: .5rem 0;
    }
    #page>.contenu #resultsContainer .navigation>.navigation-page .pagination-container,
    #page>.contenu #resultsContainer .navigation>.navigation-page .pagination {
        width: 100%;
    }
    .pagination>li:first-of-type {
        float: left;
    }
    .pagination>li:last-of-type {
        float: right;
    }
    #page>.contenu #resultsContainer .pagination button.btn-link-like {
        padding: .5rem;
        color: #fff;
        font-size: 12px;
        border: 0;
    }
    #page>.contenu #resultsContainer .pagination>li:first-of-type button.btn-link-like,
    #page>.contenu #resultsContainer .pagination button.btn-link-like.suivant {
        padding: 0;
        font-size: 2rem;
        line-height: 1;
    }
    #page>.contenu #resultsContainer .pagination button.btn-link-like:hover,
    #page>.contenu #resultsContainer .pagination button.btn-link-like:focus,
    #page>.contenu #resultsContainer .pagination button.btn-link-like:focus-within {
        /*        background: rgba(255, 255, 255, 0.5);*/
        -webkit-box-shadow: 0 -3px 0 #fff inset;
        box-shadow: 0 -3px 0 #fff inset;
    }
    #page>.contenu #resultsContainer .pagination button.btn-link-like span {
        border-bottom: 0;
    }
    #page>.contenu #resultsContainer .pagination li {
        vertical-align: middle;
    }
    #page>.contenu #resultsContainer .pagination>.active>a,
    #page>.contenu #resultsContainer .pagination>.active>span,
    #page>.contenu #resultsContainer .pagination>.active>a:hover,
    #page>.contenu #resultsContainer .pagination>.active>span:hover,
    #page>.contenu #resultsContainer .pagination>.active>a:focus,
    #page>.contenu #resultsContainer .pagination>.active>span:focus {
        border-bottom: 0;
        color: #fff;
        font-size: 12px;
        padding: 0;
    }
    #page>.contenu #resultsContainer .pagination>.active>a:hover,
    #page>.contenu #resultsContainer .pagination>.active>span:hover,
    #page>.contenu #resultsContainer .pagination>.active>a:focus,
    #page>.contenu #resultsContainer .pagination>.active>span:focus {
        /*        background: rgba(255, 255, 255, 0.5);*/
        -webkit-box-shadow: 0 -3px 0 #fff inset;
        box-shadow: 0 -3px 0 #fff inset;
    }
    #page>.contenu #resultsContainer .pagination>.active>span,
    #page>.contenu #resultsContainer .pagination>.active>span:hover,
    #page>.contenu #resultsContainer .pagination>.active>span:focus {
        border-bottom: 0;
        color: #fff;
        font-size: 12px;
        padding: .5rem;
        /*        background: rgba(255, 255, 255, 0.5);*/
        -webkit-box-shadow: 0 -3px 0 #fff inset;
        box-shadow: 0 -3px 0 #fff inset;
    }
    /* criteres de tri */
    #page>.contenu #resultsContainer .navigation .criteres_tri {
        margin: 0;
        position: absolute;
        top: -2.5rem;
        right: .5rem;
        padding: 0;
    }
    #page>.contenu #resultsContainer .navigation .criteres_tri .sort-order {
        background-color: transparent;
        padding-left: 0;
        float: right!important;
    }
    #page>.contenu #resultsContainer .navigation .criteres_tri .sort-order .searchList-btn>button {
        background: transparent;
    }
    #page>.contenu #resultsContainer .navigation .criteres_tri .sort-order .searchList-btn span.labelSelect.sort {
        display: none;
    }
    .sort-order .icon-arrow-bottom {
        font-size: 1rem;
        position: absolute;
        top: 0;
    }
    #page>.contenu #resultsContainer .navigation .criteres_tri .sort-order .dropdown-toggle .icon-arrow-bottom::before {
        display: inline-block;
        font-family: 'ermes-font-base';
        font-style: normal;
        font-weight: normal;
        min-width: 1rem;
        font-size: 1rem;
        content: '\e81f';
        content: url(images/icon-sort.svg);
        color: #001b3b;
        vertical-align: middle;
    }
}

#page>.contenu #resultsContainer .navigation .criteres_tri .displaymode-icon-container .dropdown-menu,
#page>.contenu #resultsContainer .navigation .criteres_tri .sort-order .searchList-btn .dropdown-menu {
    left: unset;
    right: 0;
}

#page>.contenu #resultsContainer .navigation .criteres_tri .displaymode-icon-container .dropdown-menu li,
#page>.contenu #resultsContainer .navigation .criteres_tri .sort-order .searchList-btn .dropdown-menu li {
    background: #EBEDF0;
    color: #001b3b75;
    padding: 0;
    border-bottom: 1px solid #fff;
}

#page>.contenu #resultsContainer .navigation .criteres_tri .displaymode-icon-container .dropdown-menu li a,
#page>.contenu #resultsContainer .navigation .criteres_tri .sort-order .searchList-btn .dropdown-menu li a {
    padding: .5rem;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    color: #001b3b;
    text-decoration: none;
    background-color: #fff;
}

.displaymode-icon-container .active,
.siteRestriction-icon-container .active,
.pageSize-container .active,
.sort-order .active {
    background-color: #fff !important;
    color: #001b3b !important;
}


/* ************************************ */


/* RESULTATS RECHERCHE : ASIDE FACETTES */

.facetList.nav-pills.nav-stacked span {
    font-size: .875rem;
    line-height: 1;
}


/* ********************************** */


/* V2021 RESULTATS DE RECHERCHE */


/* ********************************** */


/* ************* */


/* NOTICE COURTE */

.page-Recherche-PAD #page>.contenu {
    background: #d4d9de;
}


/*.page-Recherche-PAD #page > .contenu #resultats_recherche,*/

#page>.contenu #resultsContainer #aside {
    background: #fff;
}

#page>.contenu #resultsContainer #aside .badge {
    color: #555;
}

#page>.contenu #resultsContainer #aside {
    border-radius: 1rem;
}

#page>.contenu #resultsContainer #resultats_recherche .panel-search-container .panel-heading,
#page>.contenu #resultsContainer #resultats_recherche .panel-search-container .panel-body {
    padding: 0;
    margin-top: 0;
}

#page>.contenu #resultsContainer #resultats_recherche .panel-search-container .panel-heading .search-icon-container {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

#page>.contenu #resultsContainer #criteres_recherche>ul>li:nth-of-type(n+2) button.removeFacetFilter {
    background-color: #fff;
    padding: .125rem 1.5rem;
    border: 1px solid #ccc !important;
    border-radius: 1rem;
}

#page>.contenu #resultsContainer #criteres_recherche>ul>li:nth-of-type(n+2) button.removeFacetFilter span {
    font-size: .825rem;
    color: #001b3b;
}

#page>.contenu #resultsContainer #criteres_recherche p,
#page>.contenu #resultsContainer #description_resultats,
#page>.contenu #resultsContainer .taille_page {
    font-weight: bold;
    font-size: .875rem;
    padding: .5rem 1.5rem;
    color: #001b3b;
    text-transform: uppercase;
}

#page>.contenu #resultsContainer #resultats_recherche .navigation-page #description_resultats span.additional-infos {
    color: #001b3b;
    opacity: .75;
    font-weight: normal;
}

#page>.contenu #resultsContainer .panel-search-container,
#page>.contenu #resultsContainer .panel-search-container #resultats>ul>li,
#page>.contenu #resultsContainer .panel-search-container #resultats>ul>li.on,
#page>.contenu #resultsContainer #documents_memorises,
#page>.contenu #resultsContainer #documents_memorises #resultats>ul>li,
#page>.contenu #resultsContainer #documents_memorises #resultats>ul>li.on {
    background: transparent;
    border: 0;
}

#page>.contenu #resultsContainer #documents_memorises #resultats>ul>li,
#page>.contenu #resultsContainer #documents_memorises #resultats>ul>li.on {
    margin-bottom: 1rem;
}

.edutheque#page>.contenu #resultsContainer #documents_memorises .search-icon-container.mobile {
    display: none!important;
}

#page>.contenu #resultsContainer #documents_memorises,
#page>.contenu #resultsContainer #options_document,
#page>.contenu #resultsContainer #documents_memorises .panel-front,
#page>.contenu #resultsContainer #options_document .panel-front {
    padding: 0;
}

@media (min-width:992px) {
    #page>.contenu #resultsContainer #documents_memorises,
    #page>.contenu #resultsContainer #options_document {
        padding: 0 1rem;
    }
}

#page>.contenu #resultsContainer #documents_memorises>.global_content>.panel-front>.panel-heading>h2,
#page>.contenu #resultsContainer #documents_memorises .intro {
    padding: 0;
    text-align: center;
}

#page>.contenu #resultsContainer #documents_memorises .intro {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
}

#page>.contenu #resultsContainer #aside #options_document h3,
#page>.contenu #resultsContainer #aside #options_document h3 span {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-size: 1.25rem;
}

#page>.contenu #resultsContainer #aside #options_document .btn-info {
    background: transparent;
    border-color: #001b3b;
    color: #001b3b;
    border-radius: 1rem;
    padding: 0 1rem;
    margin: 0 .5rem .5rem 0;
}

#page>.contenu #resultsContainer #aside #options_document .remove-label {
    padding: 0 .125rem;
}

#page>.contenu #resultsContainer #aside #options_document .vider_panier,
#page>.contenu #resultsContainer #aside #options_document .btn-dark {
    background: #001b3b;
    border-color: #001b3b;
    color: #fff;
    border-radius: 1rem;
    padding: .25rem 1.5rem;
}

#page>.contenu #resultsContainer #aside #options_document #user_labels {
    margin-bottom: 2rem;
}

#page>.contenu #resultsContainer #aside #options_document #user_labels>.input-group {
    overflow: hidden;
    border-radius: 1rem;
}

#page>.contenu #resultsContainer #aside #options_document #user_labels>.input-group #addLabelField {
    border-radius: 1rem 0 0 1rem;
}

#page>.contenu #resultsContainer #aside #options_document #user_labels>.input-group #confirm_addLabel {
    background: #001b3b;
    border-color: #001b3b;
    color: #fff;
}

@media (max-width:991px) {
    #page>.contenu #resultsContainer #resultats_recherche {
        background: transparent;
    }
    #page>.contenu #resultsContainer #criteres_recherche p,
    #page>.contenu #resultsContainer #description_resultats,
    #page>.contenu #resultsContainer .taille_page {
        display: none;
    }
    #page>.contenu #resultsContainer>main>.searchContainer #aside {
        width: 100%;
    }
}

#page>.contenu #resultsContainer #resultats .notice_corps {
    width: 100%;
    position: relative;
    padding: 0;
}

#page>.contenu #resultsContainer #resultats .notice_corps .media-body {
    background: #fff;
    border-radius: 0;
    padding: 1rem;
}

@media (min-width:768px) {
    #page>.contenu #resultsContainer #resultats .notice_corps .media-body {
        padding-right: 2.5rem;
        border-radius: 1rem;
        background: rgb(244, 244, 244);
        background: -moz-linear-gradient(-90deg, rgba(244, 244, 244, 1) 0%, rgba(244, 244, 244, 1) 2.5rem, rgba(255, 255, 255, 1) 2.5rem, rgba(255, 255, 255, 1) 100%);
        background: -webkit-linear-gradient(-90deg, rgba(244, 244, 244, 1) 0%, rgba(244, 244, 244, 1) 2.5rem, rgba(255, 255, 255, 1) 2.5rem, rgba(255, 255, 255, 1) 100%);
        background: linear-gradient(-90deg, rgba(244, 244, 244, 1) 0%, rgba(244, 244, 244, 1) 2.5rem, rgba(255, 255, 255, 1) 2.5rem, rgba(255, 255, 255, 1) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#f4f4f4", endColorstr="#ffffff", GradientType=1);
        border: 1px solid #ddd;
    }
}

#page>div.contenu .media,
#page>div.contenu .media .media {
    margin-top: 0;
    margin-bottom: 2rem;
}

#page>.contenu .notice_courte .notice_corps .media-body * {
    color: #001b3b;
}

#page>.contenu #resultsContainer #resultats .notice_corps .vignette_document {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
}

#page>.contenu #resultsContainer #resultats .notice_corps .vignette_document img.ermes-thumb {
    width: 100px !important;
    height: auto !important;
}

#page>.contenu #resultsContainer #resultats .notice_corps .line {
    font-size: 12px;
    font-weight: 700;
    color: #001b3b;
    line-height: 1;
    margin-bottom: .5rem;
}

#page>.contenu #resultsContainer #resultats .notice_corps .line:after {
    line-height: 1;
}

#page>.contenu .notice_courte .notice_corps .cim-short-duree-type-doc,
#page>.contenu .rs-staticList .notice_corps .cim-short-duree-type-doc {
    position: absolute;
    top: .5rem;
    left: .5rem;
    font-size: 11px;
    color: #fff;
    background: rgba(0, 27, 59, 0.85);
    width: auto;
    padding: 0 .25rem;
}

#page>.contenu #resultsContainer #resultats .notice_corps h3 {
    font-size: 1rem;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    margin-bottom: 10px;
}

#page>.contenu #resultsContainer #resultats .notice_corps .cim-short-genre {
    display: none;
}

#page>.contenu #resultsContainer #resultats .notice_corps .cim-short-genre.uni100 {
    display: block;
}

#page>.contenu #resultsContainer #resultats .notice_corps .template-resume {
    font-size: 1rem;
    font-family: 'SourceSansPro', sans-serif;
    font-weight: normal;
    line-height: 1.25;
    opacity: .7;
    margin-bottom: 10px;
}


/* "fait partie de..." : il faut changer la classe template-resume en partOfDoc */

#page>.contenu #resultsContainer #resultats .notice_corps .template-resume+.template-resume,
#page>.contenu #resultsContainer #resultats .notice_corps .partOfDoc {
    font-family: "sourceSansPro", sans-serif;
    opacity: .7;
    font-size: .875rem;
    margin-bottom: 10px;
}

#page>.contenu #resultsContainer #resultats .notice_corps .template-info {
    font-size: .875rem;
    line-height: 1.5;
}

#page>.contenu #resultsContainer #resultats .notice_corps .media-body p.page-cms {
    display: none;
}


/* notice courte avec mention "instruments du musée joués" - GG 23/05/2022 */

.notice_courte .objetdumuseelie,
.slider-notice .objetdumuseelie {
    margin-top: .5rem;
    margin-block: .5rem;
}

.objetdumuseelie936+.objetdumuseelie233 {
    display: none;
}

.objetdumuseelie>* {
    margin-bottom: .25rem;
}

.objetdumuseelie311 .objetdumuseelie-texte *,
.objetdumuseelie .objetdumuseelie-texte,
.notice_courte .objetdumuseelie311 *,
.notice_courte .objetdumuseelie span,
.slider-notice .objetdumuseelie311 *,
.slider-notice .objetdumuseelie span,
.objetdumuseelie li.desc-list-item,
.objetdumuseelie311 li,
.objetdumuseelie-texte li {
    color: #001b3b !important;
    font-size: .875rem !important;
    font-weight: normal;
    line-height: 1;
}

.objetdumuseelie311 li,
.objetdumuseelie-texte,
.objetdumuseelie .desc-list-title {
    padding-left: .5rem;
    position: relative;
}

.objetdumuseelie311 li,
.objetdumuseelie-texte li,
.objetdumuseelie li.desc-list-item {
    font-style: italic;
}

.objetdumuseelie .desc-list-item:before,
.objetdumuseelie311 li:before,
.objetdumuseelie-texte:before {
    content: "•";
    opacity: .65;
    position: absolute;
    left: 0;
}

.notice_courte .objetdumuseelie .intitule,
.slider-notice .objetdumuseelie .intitule,
.notice_courte .objetdumuseelie .intitule *,
.slider-notice .objetdumuseelie .intitule * {
    font-weight: 500;
}

.notice_courte .objetdumuseelie img,
.slider-notice .objetdumuseelie img {
    width: 1rem;
    margin-right: .25rem;
    opacity: .65;
}

.notice_courte .objetdumuseelie311 li,
.notice_courte .objetdumuseelie .title,
.slider-notice .objetdumuseelie311 li,
.slider-notice .objetdumuseelie .title {
    margin-right: .25rem;
    font-style: italic;
}

.objetdumuseelie .author {
    opacity: .65;
}

.notice_courte .objetdumuseelie .sep:before,
.slider-notice .objetdumuseelie .sep:before {
    content: "•";
    opacity: .65;
    margin: 0 .25rem;
}


/* fin : notice courte avec mention "instruments du musée joués" */


/* METADATA (panier etc) */

.anonyme #page>div.contenu #resultats .notice_courte .notice_metadata {
    display: none !important;
}

#page>div.contenu .notice-actions {
    padding: 0;
}

#page>div.contenu #resultats .notice_courte .notice_metadata {
    display: block !important;
    position: absolute;
    right: .25rem;
    top: 2.5rem;
    width: 2rem;
}

#page>div.contenu #resultats .notice_courte .notice_metadata *,
#page>div.contenu #resultats .notice_courte .notice_metadata :before {
    padding: 0;
    margin: 0;
    font-size: 1rem;
    line-height: 1;
    background: transparent;
    border: 0;
    color: #001b3b;
}

#page>div.contenu #resultats .notice_courte .notice_metadata li {
    margin-bottom: .5rem;
}

#page>div.contenu #resultats .notice_courte .notice_metadata .icon-basket:before {
    color: #0095DA;
}

#page>div.contenu #resultats .notice_courte .notice_metadata .icon-basket-empty:before {
    color: #001b3b;
}

#page>div.contenu #resultats .notice_courte .notice_metadata .btn-basket .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid #001b3b;
    border-right: 4px solid transparent;
    border-bottom: 0 dotted;
    border-left: 4px solid transparent;
    vertical-align: top;
    opacity: 1;
}

#page>div.contenu #resultats .notice_courte .notice_metadata .memoriser .dropdown-menu {
    padding: .5rem;
    background: #fff;
    box-shadow: 0 3px 8px #ccc;
}

#page>div.contenu #resultats .notice_courte .notice_metadata .memoriser .dropdown-menu li {
    display: block;
}

#page>div.contenu #resultats .notice_courte .notice_metadata .memoriser .dropdown-menu .basket-label.btn-link-like {
    padding: .35rem;
    margin: .125rem;
    font-size: .825rem;
}

#page>div.contenu #resultats .notice_courte .notice_metadata .memoriser .dropdown-menu .basket-label.btn-link-like:hover,
#page>div.contenu #resultats .notice_courte .notice_metadata .memoriser .dropdown-menu .basket-label.btn-link-like:focus {
    background: #f4f4f4;
}

@media (max-width:767px) {
    #page>.contenu #resultsContainer #resultats .notice_container {
        cursor: pointer;
        padding-bottom: 0;
    }
    #page>.contenu #resultsContainer #resultats .notice_corps .media-body {
        padding-bottom: 2.5rem;
        background: rgb(244, 244, 244);
        background: -moz-linear-gradient(0deg, rgba(244, 244, 244, 1) 0%, rgba(244, 244, 244, 1) 2.5rem, rgba(255, 255, 255, 1) 2.5rem, rgba(255, 255, 255, 1) 100%);
        background: -webkit-linear-gradient(0deg, rgba(244, 244, 244, 1) 0%, rgba(244, 244, 244, 1) 2.5rem, rgba(255, 255, 255, 1) 2.5rem, rgba(255, 255, 255, 1) 100%);
        background: linear-gradient(0deg, rgba(244, 244, 244, 1) 0%, rgba(244, 244, 244, 1) 2.5rem, rgba(255, 255, 255, 1) 2.5rem, rgba(255, 255, 255, 1) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#f4f4f4", endColorstr="#ffffff", GradientType=1);
    }
    #page>.contenu #resultsContainer #resultats .notice_corps .vignette_document {
        margin: .5rem;
    }
    #page>.contenu #resultsContainer #resultats .notice_corps .cim-short-duree-type-doc {
        top: .75rem;
        left: 1rem;
    }
}

@media (max-width:991px) {
    #page>div.contenu #resultats .notice_courte .notice_metadata #dropBasketList {
        position: absolute;
    }
}

#page>div.contenu #resultats .notice_courte .notice_metadata ul.metadata-actions>li>a,
#page>div.contenu #resultats .notice_courte .notice_metadata ul.metadata-actions>li>button,
#page>div.contenu #resultats .notice_courte .notice_metadata .memoriser>button,
#page>div.contenu #resultats .notice_courte .notice_metadata .modify-selection {
    height: 1rem;
    width: 2rem;
    margin-bottom: .25rem;
}


/* ICON SELECTION COURANTE */

#page>div.contenu #resultats .select {
    background-color: transparent;
    height: 1.5rem;
    width: 1rem;
    position: absolute;
    right: .75rem;
    top: .75rem;
}

#page>div.contenu #resultats .select input[type="checkbox"],
#page>div.contenu .ajouter_selection input[type="checkbox"] {
    float: none;
    height: 1rem;
    width: 1rem;
    margin: 0;
    position: relative;
    border-color: #fff;
    vertical-align: middle;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

#page>div.contenu #resultats .select .ermes-label {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1rem;
    height: 1.5rem;
    border-radius: 1rem;
    box-sizing: border-box;
    overflow: hidden;
    font-size: .0001rem;
    background: transparent;
    color: transparent;
    z-index: 1;
}

#page>div.contenu #resultats .select .ermes-label span {
    opacity: 0;
}

#page>div.contenu #resultats .select .ermes-label:after {
    position: absolute;
    left: calc(50% - 14px / 2);
    top: calc(50% - 12px / 2);
    content: "";
    background: url(images/icon-playlist-add.svg) no-repeat center;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    background-size: contain;
}

#page>div.contenu #resultats .select input:checked+.ermes-label:after {
    position: absolute;
    left: calc(50% - 14px / 2);
    top: calc(50% - 12px / 2);
    content: "";
    background: url(images/icon-playlist-added.svg) no-repeat center;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    background-size: contain;
}

@media (max-width:767px) {
    #page>.contenu #resultsContainer .panel-search-container,
    #page>.contenu #resultsContainer .panel-search-container #resultats>ul>li,
    #page>.contenu #resultsContainer .panel-search-container #resultats>ul>li.on {
        margin-bottom: 1.5rem;
    }
    #page>.contenu #resultsContainer #resultats .notice_corps {
        margin: 0;
    }
    #page>div.contenu #resultats .notice_courte .notice_metadata {
        width: auto;
        height: 2.5rem;
        margin: 0 0 0 1.5rem;
        background: #f4f4f4;
        padding: .5rem;
        bottom: 0;
        left: 0;
        top: unset;
    }
    #page>div.contenu #notice_longue .metadata-actions li,
    #page>div.contenu #document_actions .metadata-actions li,
    #page>div.contenu #resultats ul.metadata-actions li {
        display: inline-block;
    }
    #page>div.contenu #resultats .select.hidden-xs {
        background-color: transparent;
        height: 2.5rem;
        width: 2rem;
        position: absolute;
        left: 0;
        bottom: 0;
        top: unset;
        background: #f4f4f4;
        display: block !important;
    }
    #page>div.contenu #resultats .select input[type="checkbox"],
    #page>div.contenu .ajouter_selection input[type="checkbox"] {
        height: 100%;
        width: 100%;
        margin: 0;
        border-color: transparent;
    }
    #page>div.contenu #resultats .select .ermes-label {
        position: absolute;
        left: .5rem;
        top: .5rem;
        right: .5rem;
        bottom: .5rem;
        width: 1rem;
        height: 1.5rem;
        border-radius: 0;
        margin: 0;
    }
    #page>div.contenu #multi_selection_simple,
    #multi_selection {
        display: block!important;
    }
}


/*
#page > div.contenu #panel-selection-detail.sel_reduced {
	width: 2rem;
	height: 2rem;
	overflow: hidden;
    border: 1px solid #001b3b;
	background: #b3d6fd;
	 opacity:1;
	border-radius: 50%;
	margin: 0;
	padding: 0;
}
*/

#multi_selection_simple,
#multi_selection {
    bottom: 20px;
    right: 20px;
}

#page>div.contenu #panel-selection-detail.sel_reduced {
    width: 50px;
    height: 50px;
    overflow: hidden;
    background: rgba(0, 27, 59, 0.6);
    opacity: 1;
    border-radius: 50%;
    margin: 0;
    padding: 0;
}

#page>div.contenu #panel-selection-detail.sel_reduced:hover,
#page>div.contenu #panel-selection-detail.sel_reduced:focus {
    background: rgba(0, 27, 59, 0.85);
}

#page>div.contenu #panel-selection-detail.sel_reduced * {
    margin: 0 !important;
    padding: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    background: transparent;
}

#page>div.contenu #panel-selection-detail.sel_reduced button {
    color: transparent;
    font-size: 0.0001rem;
}

#page>div.contenu #panel-selection-detail.sel_reduced button:before {
    content: "";
    background: url(images/icon-playlist-see-blanc.svg) no-repeat center;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    cursor: pointer;
    background-size: contain;
}


/* *********************************************************************** */


/* *********************************************************************** */


/* *************** MENU CIMU (refonte du menu ermes) ********************* */


/* *********************************************************************** */


/* *********************************************************************** */

.header-edutheque #ermes_main_menu li.LEVEL1:last-child a::before {
    display: none!important;
}

.menuCIMU-item span.caret {
    opacity: 1;
}

.menuCIMU-item__fiches>a:hover {
    cursor: default;
}

.menuCIMU-item i.icon {
    margin-right: 1.5rem;
    font-style: normal!important;
}

.menuCIMU-item i.icon,
.menuCIMU-item.display-type-TEXTE>a>i.icon {
    display: none;
}

.menuCIMU-item.display-type-ICON_TEXTE>a>i.icon,
.menuCIMU-item.display-type-ICON>a>i.icon {
    display: inline-block;
    width: auto;
}

.menuCIMU-item.display-type-ICON>a>span {
    display: none;
}

@media (max-width:767px) {
    .menuCIMU-item.display-type-ICON>a>span {
        display: inline-block;
    }
    .nav-MAIN-edtq #ermes_main_menu .LEVEL1:last-child>a>span {
        margin: 0;
    }
}

.menuCIMU-item .glyphicon:before {
    content: url(/ui/skins/CIMU/images/icon-accueil.svg);
    color: #001b3b;
    font-size: 1rem;
    display: inline-block;
    vertical-align: text-top;
}

.menuCIMU-item__home .glyphicon:before {
    content: url(/ui/skins/CIMU/images/icon-accueil.svg);
    color: #001b3b;
    font-size: 1rem;
    display: inline-block;
    vertical-align: text-top;
}

.menuCIMU-item__search .glyphicon:before {
    content: url(/ui/skins/CIMU/images/icon-loupe22.svg);
    color: #001b3b;
    font-size: 1rem;
    display: inline-block;
    vertical-align: text-top;
}

.edutheque .menuCIMU-item__search .glyphicon:before {
    content: url(/ui/skins/CIMU/images/icon-loupe-bleu.svg);
    color: #001b3b;
    font-size: 1rem;
    display: inline-block;
    vertical-align: text-top;
}

.menuCIMU-item__aide .glyphicon:before {
    content: url(/ui/skins/CIMU/images/icon-question.svg);
    color: #001b3b;
    font-size: 1rem;
    display: inline-block;
    vertical-align: text-top;
}

@media (min-width:768px) {
    .menuCIMU-item.display-type-ICON i.icon {
        margin-right: 0;
        width: auto;
    }
    .menuCIMU-item.menuCIMU-item__search .glyphicon:before {
        color: #0095da;
    }
}


/*

.menuCIMU-item i.icon {
	margin-right: 1.5rem;
}
.menuCIMU-item i.icon,
.menuCIMU-item.display-type-TEXTE > a > i.icon {
	display: none;
}
.menuCIMU-item.display-type-ICON_TEXTE > a > i.icon,
.menuCIMU-item.display-type-ICON > a > i.icon {
	display: inline-block;
}
.menuCIMU-item.display-type-ICON > a > span {
	display: none;
}
@media (max-width:767px){
    .menuCIMU-item.display-type-ICON > a > span {
	    display: inline-block;
    }
}
.menuCIMU-item .glyphicon:before {
	color: #001b3b;
	font-size: 1rem;
	display: inline-block;
	vertical-align: text-top;
}
@media (min-width:768px){
    .menuCIMU-item.menuCIMU-item--search .glyphicon:before {
        color: #0095da;
    }
}

*/


/* ********************************************************************** */


/* ************************* MOSAIQUE 2021 ****************************** */


/* ********************************************************************** */


/* Mosaïque */

.page-2021 .mosaique {
    margin: 0;
}

.page-2021 .mosaique ul {
    padding: 0 !important;
    -webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 100%;
}

.page-2021 .mosaique li {
    -webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem;
    /* width: 220px; */
    /* -webkit-box-flex: 1; */
    -ms-flex: 1 20%;
    flex: 1 20%;
    /* flex: auto; */
    width: auto;
    /* min-width: 230px; */
}

.page-2021 .mosaique img {
    width: 100%;
    height: 220px;
    -o-object-fit: cover;
    object-fit: cover;
}

.page-2021 .mosaique .double {
    flex: 1 40%;
    /* min-width: 40%; */
}

.page-2021 .mosaique .prochainementDispo {
    display: none;
}

.page-2021 .mosaique .positionTop img {
    -o-object-position: top;
    object-position: top;
}

.page-2021 .mosaique .positionBottom img {
    -o-object-position: bottom;
    object-position: bottom;
}


/*
@media only screen and (max-width: 767px) {
	.page-2021 .mosaique li {
	-webkit-box-flex: 1;
		-ms-flex: 1 30%;
			flex: 1 30%;
	}

	.page-2021 .mosaique .double {
	-webkit-box-flex: 1;
		-ms-flex: 1 60%;
			flex: 1 60%;
	}
}

@media only screen and (max-width: 421px) {
	.page-2021 .mosaique li {
	-webkit-box-flex: 1;
		-ms-flex: 1 50%;
			flex: 1 50%;
	}

	.page-2021 .mosaique .double {
	-webkit-box-flex: 1;
		-ms-flex: 1 50%;
			flex: 1 50%;
	}
} */


/* Survol Vignettes */

.page-2021 .mosaique li {
    position: relative;
    overflow: hidden;
    border-radius: .5rem;
    box-shadow: 0 3px 8px #ccc;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    height: 285px;
}

.incontournables2021.page-2021 .mosaique li {
    height: 350px;
}

.page-2021 .mosaique a {
    background-color: rgba(255, 255, 255, 0.9);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    height: 56px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.page-2021 .mosaique p {
    position: absolute;
    color: white;
    top: 30px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    left: 10px;
    margin-right: 10px;
}

.page-2021 .mosaique p {
    color: #001b3b;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.page-2021 .mosaique h3 {
    position: absolute;
    top: 7px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    left: 10px;
    margin-top: 0;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0;
    text-align: left;
    font-size: .875rem;
    font-weight: normal;
    color: #000;
    line-height: 1.5;
}

.page-2021 #page .mosaique h3,
.page-2021 #page .mosaique h3 * {
    font-size: .825rem;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    color: #001b3b;
}

.page-2021 .mosaique h4 {
    color: white;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    margin-right: 10px;
    font-family: 'SourceSansPro-Light', 'SourceSansPro', SourceSansPro-Light, sans-serif;
    font-family: 'SourceSansPro', sans-serif;
    font-weight: 100;
    font-size: 13px;
    text-transform: uppercase;
    padding-left: 10px;
    padding-top: 13px;
}

.page-2021 .mosaique p.detail {
    color: rgba(255, 255, 255, 0) !important;
    padding-top: 1.5rem;
    font-size: .825rem!important;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    line-height: 1.2;
    margin: 0;
}

.page-2021 .mosaique li:hover p.detail {
    color: rgba(0, 0, 0, 0) !important;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.page-2021 .mosaique li:hover p.detail {
    color: rgba(0, 0, 0, 1) !important;
}

@media (min-width:768px) {
    .page-2021 .mosaique a {
        /* height: 2.5rem; */
    }
    .page-2021 #page .mosaique h3,
    .page-2021 #page .mosaique h3 * {
        font-size: 1rem;
        font-family: 'Philharmonique', sans-serif;
        text-transform: uppercase;
        color: #001b3b;
    }
    .page-2021 .mosaique p.detail {
        font-size: .875rem!important;
        line-height: 20px;
    }
}

.page-2021 .mosaique li:hover a {
    background-color: rgba(255, 255, 255, 0.77);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    height: 100%;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}


/* ******************* FIN : MOSAIQUE 2021 ****************************** */


/* ********************************************************************** */


/* ********************************************************************** */


/* ******************* REBOND BANDEAU BAS dE PAGE *********************** */


/* ********************************************************************** */

.rebond-bandeau {
    background: #d4d9de;
    padding-bottom: 2rem;
}

body.page-2021 #page .contenu .rebond-bandeau h2,
body.page-2021 #page .contenu .rebond-bandeau h2 * {
    text-align: center;
    margin: 1rem auto;
    font-size: 2.125rem;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
}

.rebond-bandeau .bloc-txtDroite-imgGauche {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.rebond-bandeau .bloc-txtDroite-imgGauche .bloc--image {
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    max-height: 300px;
}

.rebond-bandeau .bloc-txtDroite-imgGauche .bloc--image img {
    object-fit: cover;
    object-position: center;
}

.rebond-bandeau .bloc-txtDroite-imgGauche .bloc--texte {
    order: 2;
    padding: 1rem;
}

.rebond-bandeau .bloc-txtDroite-imgGauche .bloc--texte .categorie {
    font-weight: 600;
    font-size: .875rem;
}

#page .rebond-bandeau .bloc-txtDroite-imgGauche .bloc--texte h3,
#page .rebond-bandeau .bloc-txtDroite-imgGauche .bloc--texte h3 * {
    font-size: 1.5rem;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
}

.rebond-bandeau .bloc-txtDroite-imgGauche p {
    font-size: 1rem;
}

@media (max-width:599px) {
    .rebond-bandeau .bloc-txtDroite-imgGauche {
        flex-wrap: wrap;
    }
    .rebond-bandeau .bloc-txtDroite-imgGauche>* {
        flex: 1 100%;
    }
}

@media (min-width:768px) {
    #page .rebond-bandeau .bloc-txtDroite-imgGauche .bloc--texte h3,
    #page .rebond-bandeau .bloc-txtDroite-imgGauche .bloc--texte h3 * {
        font-size: 1.75rem;
        font-family: 'Philharmonique', sans-serif;
        text-transform: uppercase;
    }
}


/* ************************************************************** */


/* SLIDER horizontal avec overflows : sommaire de page horizontal */


/* ************************************************************** */

#page .menuHorizontal.fix {
    position: fixed;
    top: 0;
    max-width: 100%;
    width: 100%;
    background: #fff;
    height: 115px;
    padding: 0;
}

#page .menuHorizontal.fix .menuHorizontal.fix {
    position: static;
    margin: 0 auto;
}

#portal .menuHorizontal.fix .panel-body {
    padding: 0;
}

.page-2021-1colonne #zone-6 .panel-front.sommaire {
    border-bottom: 1px solid #d4d9de;
    padding: 0;
    border-radius: 1rem 1rem 0 0;
}

.Slider-wrapper {
    height: 115px;
    position: relative;
}

.Slider {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: white;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 40px;
    box-sizing: border-box;
    border-bottom: 1px solid #b5c0ce;
    /* box-shadow: 0 -1px 0 0 #b5c0ce inset; */
}

.Slider-wrapper.fixed .Slider {
    box-shadow: 0 -1px 0 0 #b5c0ce inset;
}

.Slider::-webkit-scrollbar {
    display: none;
}

.Slider-wrapper.fixed,
.fixed-elt-scroll.fixed.only-scrollup,
.scrollup .fixed-elt-scroll.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    max-width: 950px;
}
/* gg 11/08/2022 : ajustement sommaire sticky pour edutheque : */
.edutheque .Slider-wrapper.fixed,
.edutheque .fixed-elt-scroll.fixed.only-scrollup,
.edutheque .scrollup .fixed-elt-scroll.fixed {
    top: 80px;
}
/* fin : gg 11/08/2022 : ajustement sommaire sticky pour edutheque */

.page-2021-2colonnes #zone-4.col-md-9 .Slider-wrapper.fixed,
.page-2021-2colonnes #zone-4.col-md-9 .fixed-elt-scroll.fixed.only-scrollup,
.page-2021-2colonnes #zone-4.col-md-9 .scrollup .fixed-elt-scroll.fixed,
.page-2021-2colonnes #zone-4.col-md-8 .Slider-wrapper.fixed,
.page-2021-2colonnes #zone-4.col-md-8 .fixed-elt-scroll.fixed.only-scrollup,
.page-2021-2colonnes #zone-4.col-md-8 .scrollup .fixed-elt-scroll.fixed {
    width: 100%;
    max-width: 100%;
}

@media(min-width:768px) {
    .page-2021-1colonne #zone-6 .Slider-wrapper.fixed,
    .page-2021-1colonne #zone-6 .fixed-elt-scroll.fixed.only-scrollup,
    .page-2021-1colonne #zone-6 .scrollup .fixed-elt-scroll.fixed,
    .page-2021-2colonnes #zone-4.col-md-9 .Slider-wrapper.fixed,
    .page-2021-2colonnes #zone-4.col-md-9 .fixed-elt-scroll.fixed.only-scrollup,
    .page-2021-2colonnes #zone-4.col-md-9 .scrollup .fixed-elt-scroll.fixed,
    .page-2021-2colonnes #zone-4.col-md-8 .Slider-wrapper.fixed,
    .page-2021-2colonnes #zone-4.col-md-8 .fixed-elt-scroll.fixed.only-scrollup,
    .page-2021-2colonnes #zone-4.col-md-8 .scrollup .fixed-elt-scroll.fixed {
        width: 100%;
        max-width: 750px;
    }
	/* gg 11/08/2022 : ajustement sommaire sticky pour edutheque */
    .edutheque .Slider-wrapper.fixed,
    .edutheque .fixed-elt-scroll.fixed.only-scrollup,
    .edutheque .scrollup .fixed-elt-scroll.fixed {
        top: 131px;
    }
	/* fin : gg 11/08/2022 : ajustement sommaire sticky pour edutheque */

}


@media(min-width:992px) {
    .page-2021-1colonne #zone-6 .Slider-wrapper.fixed,
    .page-2021-1colonne #zone-6 .fixed-elt-scroll.fixed.only-scrollup,
    .page-2021-1colonne #zone-6 .scrollup .fixed-elt-scroll.fixed {
        width: 100%;
        max-width: 970px;
    }
    .page-2021-2colonnes #zone-4.col-md-9 .Slider-wrapper.fixed,
    .page-2021-2colonnes #zone-4.col-md-9 .fixed-elt-scroll.fixed.only-scrollup,
    .page-2021-2colonnes #zone-4.col-md-9 .scrollup .fixed-elt-scroll.fixed {
        width: 100%;
        max-width: calc((3 / 4 * 970px) - 1rem);
    }
    .page-2021-2colonnes #zone-4.col-md-8 .Slider-wrapper.fixed,
    .page-2021-2colonnes #zone-4.col-md-8 .fixed-elt-scroll.fixed.only-scrollup,
    .page-2021-2colonnes #zone-4.col-md-8 .scrollup .fixed-elt-scroll.fixed {
        width: 100%;
        max-width: calc((2 / 3 * 970px) - 1rem);
    }
}

@media(min-width:1200px) {
    .page-2021-1colonne #zone-6 .Slider-wrapper.fixed,
    .page-2021-1colonne #zone-6 .fixed-elt-scroll.fixed.only-scrollup,
    .page-2021-1colonne #zone-6 .scrollup .fixed-elt-scroll.fixed {
        width: 100%;
        max-width: 1170px;
    }
    .page-2021-2colonnes #zone-4.col-md-9 .Slider-wrapper.fixed,
    .page-2021-2colonnes #zone-4.col-md-9 .fixed-elt-scroll.fixed.only-scrollup,
    .page-2021-2colonnes #zone-4.col-md-9 .scrollup .fixed-elt-scroll.fixed {
        width: 100%;
        max-width: calc((3 / 4 * 1170px) - 1rem);
    }
    .page-2021-2colonnes #zone-4.col-md-8 .Slider-wrapper.fixed,
    .page-2021-2colonnes #zone-4.col-md-8 .fixed-elt-scroll.fixed.only-scrollup,
    .page-2021-2colonnes #zone-4.col-md-8 .scrollup .fixed-elt-scroll.fixed {
        width: 100%;
        max-width: calc((2 / 3 * 1170px) - 1rem);
    }
}

@media(min-width:1600px) {
    .page-2021-1colonne #zone-6 .Slider-wrapper.fixed,
    .page-2021-1colonne #zone-6 .fixed-elt-scroll.fixed.only-scrollup,
    .page-2021-1colonne #zone-6 .scrollup .fixed-elt-scroll.fixed {
        width: 100%;
        max-width: 1600px;
    }
    .page-2021-2colonnes #zone-4.col-md-9 .Slider-wrapper.fixed,
    .page-2021-2colonnes #zone-4.col-md-9 .fixed-elt-scroll.fixed.only-scrollup,
    .page-2021-2colonnes #zone-4.col-md-9 .scrollup .fixed-elt-scroll.fixed {
        width: 100%;
        max-width: calc((3 / 4 * 1600px) - 1rem);
    }
    .page-2021-2colonnes #zone-4.col-md-8 .Slider-wrapper.fixed,
    .page-2021-2colonnes #zone-4.col-md-8 .fixed-elt-scroll.fixed.only-scrollup,
    .page-2021-2colonnes #zone-4.col-md-8 .scrollup .fixed-elt-scroll.fixed {
        width: 100%;
        max-width: calc((2 / 3 * 1600px) - 1rem);
    }
}

.Slider-wrapper.static,
.fixed-elt-scroll.static.only-scrollup,
.scrollup .fixed-elt-scroll.static {
    position: relative;
}

.Slider-wrapper .Slider .Slider-item {
    padding: 0 3rem 0 0;
    text-transform: uppercase;
    font-size: 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: default;
}

body.page-2021 #page h3.Slider-item,
.Slider .Slider-item .Slider-link {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    font-family: 'SourceSansPro', sans-serif;
    margin: 0;
    height: 100%;
    display: block;
    white-space: nowrap;
    color: #001b3b;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.page-2021 #page h3.Slider-item {
    padding: 0 3rem 0 0;
}

.Slider-wrapper .filterContainer .custom-select {
    padding: 0 3rem 0 0;
}


/* Christophe Leonardi Migration Syracuse 05/08/2022 : text-transform */

.Slider-wrapper .filterContainer .custom-select>button:not(.btn) {
    background: transparent;
    border: 1px solid #001b3b;
    border-radius: 2rem;
    padding: 0 1rem;
    position: relative;
    display: flex;
    align-items: center;
    width: 200px;
    justify-content: space-between;
    cursor: pointer;
    text-transform: capitalize;
    line-height: 14px;
    height: 2rem;
}

.Slider-wrapper .select-selected::after {
    position: static;
    content: url(/ui/skins/CIMU/images/icon-left.svg);
    height: 17px;
    width: 10px;
    left: calc(100% - 2rem);
    transform: rotate(-90deg);
    transition: 0.2s ease transform;
    transform-origin: center;
    line-height: 14px;
}

.Slider-wrapper .select-arrow-active::after {
    transform: rotate(90deg);
    transition: 0.2s ease transform;
}

.Slider-wrapper .filterContainer label {
    font-family: var(--paragraph-font);
    color: var(--philharmonie-primary-color);
    text-align: left;
    font-weight: 400;
    font-size: 14px;
    text-transform: none;
    position: absolute;
    top: 1.25rem;
    padding-left: 1rem;
    opacity: .65;
}

.Slider-wrapper .select-items {
    border-radius: .5rem;
}

.select-items button:not(.btn)::first-letter {
    text-transform: uppercase;
}

.Slider-wrapper .select-selected {
    font-family: var(--paragraph-font);
    color: var(--philharmonie-primary-color);
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
}

.Slider .Slider-item .Slider-link>img {
    transform: rotate(-90deg);
    margin-left: 1rem;
    vertical-align: sub;
}

.Slider .Slider-item .Slider-link.active,
.Slider .Slider-item .Slider-link:hover {
    box-shadow: 0 -2px 0 0 #001B3B inset;
    text-decoration: none;
    color: #001B3B;
    font-family: 'SourceSansPro', sans-serif;
}

.Slider .Slider-item .Slider-link.active {
    font-weight: 500;
}

@media all and (max-width: 739px) {
    .Slider {
        z-index: 0;
    }
}

.Slider-controls {
    display: flex;
    /* position: relative; */
}

.Slider-controls .scroll-slider-button {
    height: 97%;
    padding: 0 5px;
    position: absolute;
    top: 0;
    background: white;
    z-index: 8;
    border: 0;
}

.Slider-controls .scroll-slider-button:focus {
    border: 1px solid white;
}

.Slider-controls .scroll-slider-button .icon {
    height: 25px;
    width: 28px;
}

.Slider-controls .scroll-slider-button.scroll-right-slider-button {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    right: 0;
}

.Slider-controls .scroll-slider-button.scroll-right-slider-button .icon {
    /* margin-bottom: -6px; */
}

.Slider-controls .scroll-slider-button.scroll-left-slider-button {
    left: 0;
}


/* ********************************************************************** */


/* ***************** Modeles de page 1 & 2 colonnes 2021 ***************** */


/* ********************************************************************** */


/* provisoire en attendant la refonte :*/


/* .page-2021:not(.edutheque) header > #search-panel{
	display: none;
} */

.page-2021:not(.edutheque) .img-overlay {
    display: none;
}
/* modif post migration 21/04/2023 GG */
.mediatheque.page-2021 .img-overlay,/* fin de la modif post migration 21/04/2023 GG */
.musee.page-2021 .img-overlay {
    display: block;
}


/* fin : provisoire en attendant la refonte :*/

.page-2021 .heroTexte {
    text-align: center;
}

.page-2021 #portal .heroTexte h1 {
    font-family: 'Philharmonique', sans-serif;
    font-size: 4rem;
    font-weight: normal;
    text-transform: uppercase;
}

@media all and (max-width: 767px) {
    body #portal h1,
    .page-2021 #portal .heroTexte h1 {
        font-size: 2.5rem;
    }
}

.page-2021 #portal .heroTexte .sousTitre {
    font-family: 'Philharmonique', sans-serif!important;
    text-transform: uppercase;
    max-width: 675px;
    margin-right: auto;
    margin-left: auto;
}

.page-2021 #portal .hero-vignette .heroTexte .sousTitre {
    margin-right: 0;
    margin-left: 0;
}

.page-2021 .heroTexte .chapo {
    font-family: 'SourceSansPro', sans-serif;
    text-transform: none;
    font-weight: 400;
    font-size: 1.5rem;
    max-width: 725px;
    margin-right: auto;
    margin-left: auto;
}

.page-2021 #page .hero-vignette .heroTexte .chapo {
    margin-right: 0;
    margin-left: 0;
}

@media (min-width:768px) {
    .page-2021 .hero-vignette .heroTexte {
        text-align: left;
    }
}


/* HERO : zone titre + vignette illustration */

.hero:not(.hero-vignette) .wrap-hero .wrap-img-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wrap-hero .wrap-img-text:before,
.wrap-hero .wrap-img-text:after {
    display: none;
}

#page>div.contenu #portal .hero .heroTexte {
    padding-bottom: 120px;
}

.page-2021-2colonnes #page>div.contenu #portal .hero .heroTexte,
.page-2021-1colonne #page>div.contenu #portal .hero .heroTexte {
    padding-bottom: 0;
}

hero figure.heroVignette {
    min-width: 250px;
}


/* test hero 2 */

body.b-a-o #page>div.contenu #portal .panel-front.hero {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.wrap-hero {
    z-index: 0;
    /*    padding: 3rem 0;*/
    position: relative;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    /* font-family: "Brewery No2 W06 Regular", Arial, Helvetica, sans-serif; */
}

.wrap-hero .overlay-gradient {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 27, 59, .4)), color-stop(99%, #001b3b));
    background-image: linear-gradient(to bottom, rgba(0, 27, 59, .4) 0%, #001b3b 99%);
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.wrap-hero .img-overlay {
    position: absolute;
    max-width: none;
    min-width: 100%;
    width: auto;
    min-height: 100%;
}

.hero-vignette .wrap-hero .img-overlay {
    -webkit-filter: blur(20px);
    filter: blur(20px);
}

.wrap-hero .wrap-img-text {
    z-index: 2;
    position: relative;
    color: white;
    /*    width: 100%;*/
    min-height: 400px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -webkit-box-pack: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    padding: 4rem 0;
}

.hero .wrap-hero .wrap-img-text {
    padding: 4rem 0 8rem;
}

.hero:not(.hero-vignette) .wrap-hero .wrap-img-text .heroVignette {
    display: none;
}

.hero:not(.hero-vignette) .wrap-hero .wrap-img-text .heroTexte {
    margin: 0 auto;
}

.hero:not(.hero-vignette) .heroTexte,
.hero:not(.hero-vignette) .heroTexte *,
#page>div.contenu #portal .hero:not(.hero-vignette) .heroTexte h1 {
    text-align: center;
}

@media (max-width:767px) {
    .hero-vignette .wrap-hero .img-overlay {
        -webkit-filter: blur(1px);
        filter: blur(1px);
    }
    .wrap-hero .wrap-img-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .wrap-hero .wrap-img-text .heroTexte {
        margin: 0 auto;
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .heroVignette {
        display: none;
    }
    .hero .heroTexte,
    .hero .heroTexte *,
    #page>div.contenu #portal .hero .heroTexte h1 {
        text-align: center;
    }
}

@media (min-width:768px) {
    .b-a-o #page #portal .hero .rsItem,
    .b-a-o #page>div.contenu #portal .hero .rsItem {
        display: flex;
        align-items: flex-end;
    }
    .b-a-o #page #portal .hero figure,
    .b-a-o #page>div.contenu #portal .hero figure {
        margin-right: 2rem;
        align-items: flex-end;
    }
    .b-a-o #page #portal .hero figure img,
    .b-a-o #page>div.contenu #portal .hero figure img {
        width: 250px;
    }
    #page #portal .hero.hero-vignette .heroTexte,
    #page #portal .hero.hero-vignette .heroTexte *,
    #page>div.contenu #portal .hero.hero-vignette .heroTexte,
    #page>div.contenu #portal .hero.hero-vignette .heroTexte *,
    #page>div.contenu #portal .hero .heroTexte h1 {
        text-align: left;
    }
    #page .hero.hero-vignette .hero .typeDoc::after {
        margin: 10px 0 0;
    }
    #page .hero:not(.hero-vignette) .hero .typeDoc::after {
        margin: 10px auto 0;
    }
}


/* fin : test hero 2 */

.b-a-o #page>div.contenu .only-content figure,
.content-oe-modele #page>div.contenu .only-content figure {
    padding-bottom: 0;
}

@media (max-width:319px) {
    body.b-a-o .iframe-responsive iframe,
    body[class*="bao-"] .iframe-responsive iframe,
    .bao-marseillaise .iframe-responsive iframe {
        height: 189px;
    }
}

@media (min-width:320px) and (max-width:379px) {
    body.b-a-o .iframe-responsive iframe,
    body[class*="bao-"] .iframe-responsive iframe,
    .bao-marseillaise .iframe-responsive iframe {
        height: 219px;
    }
}

@media (min-width:380px) and (max-width:544px) {
    body.b-a-o .iframe-responsive iframe,
    body[class*="bao-"] .iframe-responsive iframe,
    .bao-marseillaise .iframe-responsive iframe {
        height: 269px;
    }
}

@media (min-width:545px) and (max-width:645px) {
    body.b-a-o .iframe-responsive iframe,
    body[class*="bao-"] .iframe-responsive iframe,
    .bao-marseillaise .iframe-responsive iframe {
        height: 369px;
    }
}

@media (min-width:992px) and (max-width:1200px) {
    body.b-a-o .iframe-responsive iframe,
    body[class*="bao-"] .iframe-responsive iframe,
    .bao-marseillaise .iframe-responsive iframe {
        height: 369px;
    }
}

.bao-marseillaise #page .contenu h2,
.bao-marseillaise #page .contenu h2 span,
.bao-marseillaise .dossier-oe-modele #page .contenu h2,
.bao-marseillaise .dossier-oe-modele #page .contenu h2 span,
body.b-a-o #page .contenu h2,
body.b-a-o #page .contenu h2 span,
body.b-a-o .dossier-oe-modele #page .contenu h2,
body.b-a-o .dossier-oe-modele #page .contenu h2 span body[class*="bao-"] #page .contenu h2,
body[class*="bao-"] #page .contenu h2 span,
body[class*="bao-"] .dossier-oe-modele #page .contenu h2,
body[class*="bao-"] .dossier-oe-modele #page .contenu h2 span,
body.page-2021 #page .contenu h2,
body.page-2021 #page .contenu h2 *,
/* 01/08/2022 GG : alignement des pages anciennes sur ce modèle */
body.content-oe-modele #page .contenu h2,
body.content-oe-modele #page .contenu h2 *,
#page .contenu h2,
#page .contenu h2 * {
	/* gg 13/09/2022 : réduction font-size */
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 700;
    width: 100%;
    max-width: 970px;
    background: transparent;
    margin: .5rem 0;
}

@media (max-width:529px) {
    .bao-marseillaise #page>div.contenu .carte-horiz-big,
    body[class*="bao-"] #page>div.contenu .carte-horiz-big,
    body[class*="bao-"] #page>div.contenu .carte-horiz-big {
        height: auto;
        -webkit-box-shadow: 0 3px 8px #ccc;
        box-shadow: 0 3px 8px #ccc;
        padding: 0;
        max-width: 280px;
        margin: 0 auto 2rem;
    }
    #page>div.contenu .carte-horiz-big .bloc--image {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        width: 100%;
        height: 250px;
        overflow: hidden;
        -webkit-box-flex: unset;
        -ms-flex: unset;
        flex: unset;
    }
}

@media (min-width:530px) {
    .bao-marseillaise #page .carte-horiz-big,
    body.b-a-o #page .carte-horiz-big,
    body[class*="bao-"] #page .carte-horiz-big {
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row-reverse;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        padding: 0;
        margin-bottom: 2rem;
        border-radius: 1rem;
        background: #fff;
        overflow: hidden;
        height: 200px;
        width: 100%;
    }
}

.bao-marseillaise .carte-horiz-big,
body.b-a-o .carte-horiz-big,
body[class*="bao-"] .carte-horiz-big {
    /*	height: auto;*/
    -webkit-box-shadow: 0 3px 8px #ccc;
    box-shadow: 0 3px 8px #ccc;
}


/* .bao-marseillaise .carte-horiz-big .bloc--image img,
body.b-a-o .carte-horiz-big .bloc--image img,
body[class*="bao-"] .carte-horiz-big .bloc--image img {
	-o-object-position: top;
	   object-position: top;
} */

.bao-marseillaise .carte-horiz-big .bloc--texte,
body.b-a-o .carte-horiz-big .bloc--texte,
body[class*="bao-"] .carte-horiz-big .bloc--texte {
    padding: 1rem;
    width: 100%;
}

.bao-marseillaise .carte-horiz-big h3,
body.b-a-o .carte-horiz-big h3,
body[class*="bao-"] .carte-horiz-big h3 {
    font-weight: 500;
}

.bao-marseillaise .carte-horiz-big h3,
.bao-marseillaise .carte-horiz-big p,
body.b-a-o .carte-horiz-big h3,
body.b-a-o .carte-horiz-big p,
body[class*="bao-"] .carte-horiz-big h3,
body[class*="bao-"] .carte-horiz-big p {
    margin-bottom: .5rem;
    margin-top: 0;
}

.bao-marseillaise .carte-horiz-big .btn,
body.b-a-o .carte-horiz-big .btn,
body[class*="bao-"] .carte-horiz-big .btn {
    margin-top: .5rem;
}


/* ************************************************************ */


/* SIDEBAR bloc infos du concerts (infos / distrib / programme) */

@supports (display:flex) {
    @media (max-width: 991px) {
        .content-oe-modele.bao-marseillaise #page > div.contenu #zone-5, body.b-a-o #page > div.contenu #zone-5, body.content-oe-modele[class*="bao-"] #page > div.contenu #zone-5 {
            border-radius: 0;
        }
        .content-oe-modele.bao-marseillaise #page>div.contenu #layout-3>.row,
        body.b-a-o #page>div.contenu #layout-3>.row,
        body.content-oe-modele[class*="bao-"] #page>div.contenu #layout-3>.row {
            /*
            -webkit-display: flex; -moz-display: flex; -o-display: flex; display: flex;
            flex-direction: column;
*/
        }
        .content-oe-modele.bao-marseillaise #page>div.contenu #zone-4,
        body.b-a-o #page>div.contenu #zone-4,
        body.content-oe-modele[class*="bao-"] #page>div.contenu #zone-4 {
            /*            order:2;*/
        }
    }
}


/* ********************************************************************************************* */


/* ******************** GG 06/2022 ************************************************************* */


/* STRUCTURE DES PAGES selon MODELE DE PAGE 2021-1colonne/2021-2colonnes/2021-2colonnes-mosaiq + */


/* ********************************************************************************************* */


/* ********************************************************************************************* */


/* GESTION DU SYSTEME DE COLONNES ET ENCARTS D'ERMES */

.page-2021 #portal {
    padding-top: 0!important;
    padding-bottom: 0!important;
}

.page-2021 #page>div.container,
.page-2021 div[id^="zone-"] {
    padding: 0;
}

.page-2021 #zone-6 {
    margin-bottom: 0;
}

.page-2021 #page>div.container,
.page-2021 #page>div.container,

/* .page-2021 #readspeaker-container, */

.page-2021 #page #portal .frame,
.page-2021.page-Recherche-PAD #readspeaker-container,
.page-2021 #page.detailstatic #readspeaker-container,
.page-2021 #page .layout,
.page-2021 #page [id^="layout-"],
.page-2021 #page [id^="layout-"] .row,
.page-2021-1colonne #page #zone-6 {
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
}


/* body.page-2021 #page > div.container, */


/* body:not(.page-2021) #page > div.container, */

.page-2021 #page>div.container .container,
.page-2021 #portal .panel-front,
.page-Recherche-PAD #readspeaker-container,
.page-2021 #page.detailstatic #readspeaker-container,
.page-2021 #page [id^="layout-"] .row
/*,
.page-2021-1colonne_mosaique #page #zone-6*/

{
    margin: 0 auto;
    max-width: 1170px;
    width: 100%;
}

.page-2021 #portal .panel-front.encart-NoMarge {
    width: 100%
}


/* .page-2021-1colonne #page #layout-3 .row,
.page-2021-2colonnes #page #layout-3 .row {
    margin-top: -110px;
} */


/* MODELE DE PAGE 1 COLONNE 2021 */

.page-2021-1colonne #page #zone-4,
.page-2021-1colonne #page #zone-5 {
    padding: 0;
    min-height: 0!important;
}

.page-2021-1colonne #page #zone-6 {
    /* background: #fff;
    border-radius: 1rem; */
    padding: 0;
    /* overflow: hidden; */
}

.page-2021-1colonne #page #zone-6 .panel-front {
    background: #fff;
    padding: 2rem 2px;
}

@media (min-width:465px) {
    .page-2021-1colonne #page #zone-6 .panel-front {
        padding: 2rem;
    }
}

.page-2021 #zone-6>div:first-of-type .panel-front {
    border-radius: 1rem 1rem 0 0;
    overflow: hidden;
}

.page-2021 #zone-6>div:last-of-type .panel-front {
    border-radius: 0 0 1rem 1rem;
    overflow: hidden;
}

.page-2021-1colonne #page #zone-6 .panel-front.sommaire {
    padding: 0;
}

/* gg 11/08/2022 : correction template 2021 1 colonne */
/* encarts NOMARGE = pleine largeur de page */
.page-2021:not(.edutheque) .encart-NoMarge .img-overlay {
    display: block;
}
.edutheque .contenu .wrap-img-text.container{
	max-width: 100%;
}
.encart-NoMarge .heroTexte {
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
}

.encart-NoMarge .wrap-hero .heroTexte {
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
}

.encart-NoMarge .heroTexte>*:not(.btn) {
    color: #fff;
}

.encart-NoMarge .heroTexte .btn {
    font-family: 'SourceSansPro', sans-serif;
    margin: auto;
}
.encart-NoMarge .heroTexte .btn.btn-default {
    color:#001b3b;
}
/* fin : gg 11/08/2022 : correction template 2021 1 colonne */

/* MODELE DE PAGE 1 COLONNE 2022 */

.modele-2022-1-col #page .section-contenu.panel-front {
    background: #fff;
    margin: 0 auto;
    border: 0;
    /* padding: 1.5rem 4rem; */
    padding: 2rem;
}

@media (max-width:767px) {
    .modele-2022-1-col #page .section-contenu.panel-front {
        padding: .75rem 1.5rem;
    }
}


/* fin : MODELE DE PAGE 1 COLONNE 2022 */

@media (min-width: 768px) {
    /*     body.page-2021 #page>div.container, */
    /* body:not(.page-2021) #page > div.container, */
    .page-2021 #portal .panel-front,
    .page-2021.page-Recherche-PAD #readspeaker-container,
    .page-2021 #page.detailstatic #readspeaker-container,
    .page-2021 #page [id^="layout-"] .row/*,
	.page-2021-1colonne_mosaique #page #zone-6*/
    {
        width: 750px;
        max-width: 100%;
    }
    .page-2021 #page #portal .panel-front.encart-NoMarge {
        width: 100%;
        padding: 0;
    }
}

@media (min-width: 992px) {
    /*     body.page-2021 #page>div.container, */
    /* body:not(.page-2021) #page > div.container, */
    .page-2021 #portal .panel-front,
    .page-2021.modele-2022-1-col_texte #portal .panel-front,
    .page-2021.page-Recherche-PAD #readspeaker-container,
    .page-2021 #page.detailstatic #readspeaker-container,
    .page-2021 #page [id^="layout-"] .row/*,
	.page-2021-1colonne_mosaique #page #zone-6*/
    {
        width: 970px;
        max-width: 100%;
    }
    .page-2021 #page #portal .panel-front.encart-NoMarge {
        width: 100%;
        padding: 0;
    }
    .page-2021-1colonne_texte #portal .panel-front {
        width: 970px;
        max-width: 100%;
    }
}

@media (min-width: 1200px) {
    /*     body.page-2021 #page>div.container, */
    /* body:not(.page-2021) #page > div.container, */
    /* body:not(.page-fonds) #portal .panel-front, */
    .page-2021 #portal .panel-front,
    .page-2021.page-Recherche-PAD #readspeaker-container,
    .page-2021 #page.detailstatic #readspeaker-container,
    .page-2021 #page [id^="layout-"] .row/*,
	.page-2021-1colonne_mosaique #page #zone-6*/
    {
        width: 1170px;
        max-width: 100%;
    }
    .page-2021-1colonne_texte #portal .panel-front {
        width: 970px;
        max-width: 100%;
    }
    .page-2021 #page #portal .panel-front.encart-NoMarge {
        width: 100%;
        padding: 0;
    }
}

@media (min-width: 1600px) {
    /*     body.page-2021 #page>div.container, */
    .page-2021 .container,
    /* body:not(.page-2021) #page > div.container, */
    /* body:not(.page-fonds) #portal .panel-front, */
    .page-2021 #portal .panel-front,
    .page-2021.page-Recherche-PAD #readspeaker-container,
    .page-2021 #page.detailstatic #readspeaker-container,
    .page-2021 #page>div.container .container,
    .page-2021 #page [id^="layout-"] .row,
    .page-2021-1colonne_mosaique #page #zone-6 {
        width: 1600px;
        max-width: 100%;
    }
    .page-2021-1colonne_texte #portal .panel-front {
        width: 970px;
        max-width: 100%;
    }
	/* gg 11/08/2022 + 05/09/2022 : correction hero : */
    .page-2021 #page .frame.hero {
        background: transparent;
    }
	body.b-a-o #page #portal .panel-front.hero,
	body.b-a-o #page > div.contenu #portal .panel-front.hero,
	body[class*="page-2021-1colonne"] #page #portal .panel-front.hero,
	body[class*="page-2021-2colonnes"] #page #portal .panel-front.hero,
	.page-2021-1colonne_texte #portal .hero .hero {
		width: 100%;
		max-width: 1632px;
		border-radius: 1rem;
		overflow: hidden;
		margin-right: auto;
		margin-left:auto;
	}
	#page > div.contenu #portal .panel-front.hero,
	#page .frame.hero .panel-front,
	.page-2021 #page .frame.hero .panel-front,
    .page-2021 #portal .hero .hero {
        width: 100%;
		max-width: 1632px;
		border-radius: 1rem;
		overflow: hidden;
		margin-right: auto;
		margin-left:auto;
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 27, 59, 0.4)), color-stop(99%, #001b3b));
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
	}
	/* fin : gg 11/08/2022 + 05/09/2022 : correction hero : */
    .page-2021-1colonne_texte #portal .hero .wrap-img-text.container {
        width: 1200px;
        max-width: 100%;
    }
    .page-2021 #portal #zone-6 .panel-front.encart-NoMarge {
        width: 100%;
        max-width: 1600px;
        padding: 0;
    }
}

.page-2021 #page .panel-front {
    background: transparent;
    padding: 0;
}


/* ZONE TITRE HERO */

body.page-2021 #page .cms-inner-zone>div[id^="frame-"] {
    margin: 0 !important;
}

body.page-2021 .frame.hero {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 27, 59, 0.4)), color-stop(99%, #001b3b));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

body.page-2021 .frame-ermes-carousel.hero .hero,
body.page-2021 #page>.contenu .frame.hero .panel-front {
    padding: 3rem 0 166px;
    margin: 0 auto -90px;
    height: unset;
    min-height: unset;
}

body.page-2021 #portal .frame.hero .panel-front {
    margin: 0 auto -90px;
    margin-bottom: -90px!important;
    width: 100%;
}

body.page-2021 #page>.contenu .frame.hero .panel-front .heroTexte *,
body.page-2021 .frame.hero .panel-front .heroTexte * {
    color: #fff;
}

.page-2021 #page .hero .typeDoc,
.page-2021 #page .hero .typeDoc * {
    font-weight: bold;
    font-size: 1rem !important;
    text-transform: none !important;
    font-family: 'SourceSansPro', SourceSansPro !important;
    color: #fff;
}

.page-2021 #page .hero .typeDoc::after {
    content: '';
    height: 1px;
    width: 40px;
    display: block;
    margin: 0px auto;
    margin-top: 0px;
    background-color: #fff;
    margin-top: 10px;
}


/* ZONE PAGE - GESTION DES MARGES EXTERIEURES */

.page-2021 #page>div.contenu .panel-front .page-2021.musee #page .panel-front {
    background: transparent;
    margin-right: auto;
    margin-left: auto;
}


/* ZONE CONTENU - GESTION DES COLONNES */

.page-2021-2colonnes #zone-4,
.page-2021-2colonnes #zone-5,
.page-2021-2colonnes #zone-6 {
    background: #fff;
    padding: 0;
    margin-bottom: 2rem;
    min-height: 0!important;
}


/* MODELE DE PAGE "2021 - 2 colonnes" */

.page-2021-2colonnes #zone-4 [id^="frame-"] .frame,
.page-2021-2colonnes #zone-5 [id^="frame-"] .frame {
    padding: 1rem;
}

.page-2021-2colonnes #zone-4 [id^="frame-"] .frame {
    padding: 1rem 2rem;
}

.page-2021 #zone-4 [id^="frame-"] .frame.sommaire {
    margin: 0 0 1rem!important;
    padding: 0;
}

.page-2021 #zone-4 [id^="frame-"] .panel-front,
.page-2021 #zone-5 [id^="frame-"] .panel-front {
    padding: 0;
}

.page-2021-2colonnes #zone-4 {
    overflow: hidden;
}

.page-2021-2colonnes #zone-4,
.page-2021-2colonnes #zone-5 {
    border-radius: 1rem;
}

@media(min-width:992px) {
    .page-2021-2colonnes #zone-4.col-md-9 {
        width: calc(75% - 1rem);
        margin-right: 1rem;
    }
    .page-2021-2colonnes #zone-4.col-md-8 {
        width: calc(66.66666666666666% - 1rem);
        margin-right: 1rem;
    }
}

.page-2021 #zone-4 [id^="frame-"] .panel-front.aplat,
.page-2021 #zone-5 [id^="frame-"] .panel-front.aplat {
    background-color: #EFEFEF;
    margin-right: 0;
    padding: 1rem;
    border-radius: .5rem;
}

.page-2021 #zone-4 [id^="frame-"] .panel-front.aplat .panel-heading h2,
.page-2021 #zone-5 [id^="frame-"] .panel-front.aplat .panel-heading h2 {
    margin-top: 0;
}


/* ****************************************************************************** */


/* fin : MODELE DE PAGE 2021-1colonne/2colonnes/2-colonnes-mosaiq - 21/06/2022 GG */


/* ****************************************************************************** */


/* *************************************************************************** */


/* *********************** PAGE INCONTOURNABLES 2021 ************************* */


/* *************************************************************************** */

.incontournables2021 .mosaique img {
    height: 295px;
    /*
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
*/
    /* flex: 1; */
    /* max-width: 100%; */
}


/* *************************************************************************** */


/* *************************** PAGE INSTRUMENTS 2021 ************************* */


/* *************************************************************************** */

.instruments2021 .Slider-wrapper {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #b5c0ce;
    overflow: hidden;
}

.instruments2021 .Slider {
    /*	border-bottom: 1px solid #b5c0ce;*/
    flex: 1;
}

.instruments2021 .Slider-wrapper .pinned p,
.instruments2021 .Slider-wrapper .pinned span,
.instruments2021 .Slider-wrapper .pinned a {
    font-family: 'SourceSansPro', sans-serif;
    font-size: .825rem;
}

.instruments2021 .Slider-wrapper .pinned {
    font-family: 'SourceSansPro', sans-serif;
    font-size: .825rem;
    padding-left: 2rem;
    padding-right: 2rem;
    /*	border-bottom: 1px solid #b5c0ce;*/
    border-left: 1px solid #b5c0ce;
    background-color: white;
    align-self: stretch;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width:768px) {
    .instruments2021 .Slider-wrapper .pinned {
        flex: 1;
    }
}

@media (max-width:599px) {
    .instruments2021 .Slider-wrapper .pinned {
        display: none;
    }
}

.instruments2021 .Slider-wrapper .pinned>p {
    text-align: right;
}

.instruments2021 .Slider-wrapper .pinned>p>* {
    display: inline-block;
}

.instruments2021 .Slider-wrapper .pinned a {
    text-decoration: underline;
    margin-left: .5rem;
}

.instruments2021 .Slider-wrapper .pinned a span:first-of-type {
    text-transform: uppercase;
}

@media (min-width:992px) {
    .instruments2021 .Slider {
        /*
		width: calc(100% - 400px);
		min-width: 750px;
*/
        width: unset;
    }
}

.instruments2021 .Slider .Slider-item .Slider-link.active,
.instruments2021 .Slider .Slider-item .Slider-link:hover {
    border-bottom: 0;
    box-shadow: inset 0 -2px 0 #000;
}


/* *********************** */
/* Page Plan du site       */
/* *********************** */
/* gg 05/08/2022 modifications du css sitemap pour pouvoir l'appliquer au sitemap généré automatiquement */
.page-sitemap #portal h1 {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    text-align: center;
	font-size: 3.5rem;
}
.panel-front.Ermes-SiteMap .panel-heading h2,
.Ermes-SiteMap .panel-body h3 {
    display: none;
}
.Ermes-SiteMap .panel-body{
    background:#fff;
	border-radius: .5rem;
}
.Ermes-SiteMap div.list-group-item ul.list-group {
    margin-top: .5rem;
}

.Ermes-SiteMap .panel-body li {
    margin-left: 1rem;
}

.page-sitemap .list-group-item {
    border: 0;
}

.Ermes-SiteMap *,
.Ermes-SiteMap * span {
    color:#001b3b;
}
.Ermes-SiteMap a.root-menu {
    text-decoration: underline;
}
.Ermes-SiteMap .list-group-item>.root-menu {
    text-transform: none;
    font-weight: 500;
    font-size: 1.5rem;
    margin-top: 1rem;
}

.Ermes-SiteMap .list-group-item>a.root-menu>span {
    text-transform: none;
}

.Ermes-SiteMap .list-group-item>span.root-menu {
    text-transform: uppercase;
    font-family: 'Philharmonique', sans-serif;
}

.Ermes-SiteMap .list-group-item>.list-inline>li {
    margin-top: .5rem;
    display: block;
    padding: 0;
    list-style-type: none!important;
}
.Ermes-SiteMap li {
    list-style-type: none!important;
}
.Ermes-SiteMap .under-menu + * {
    display: none;
}
.Ermes-SiteMap .list-group-item>.list-inline>li>.root-menu,
.Ermes-SiteMap .list-group-item > .list-inline > li > .under-menu{
    text-transform: uppercase;
    font-size: 1.25rem;
    font-family: 'Philharmonique', sans-serif;
}

.Ermes-SiteMap .list-group-item>.list-inline>li>a.root-menu,
.Ermes-SiteMap .list-group-item > .list-inline > li > .under-menu,
.Ermes-SiteMap .list-group-item li a {
    text-decoration: underline;
    font-family: 'SourceSansPro', sans-serif;
    text-transform: none;
}


/* .Ermes-SiteMap .list-group-item ul.list-inline  > li > ul {
	display: none;
} */

/* *********************** */
/* CARTES : images + texte */
/* *********************** */

/* cartes ermes */

.contenu .modele-image-gauche-texte-droite .thumbnail {
    border-radius: 1rem;
}


/* cartes GG */

.card {
    border-radius: 1rem;
    border: 0;
    overflow: hidden;
    /* min-width: 242px;
    max-width: 242px;
    width: 242px; */
    margin: .5rem;
    background: #fff;
    /* min-width: 280px;
    max-width: 280px; */
    flex: 1;
}

.card.dark {
    background: #001b3b;
}

.card figure {
    height: 242px;
    -webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

.card figure>img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 101%;
}

.card .layer-over {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 27, 59, 0.75);
    color: #fff;
    -webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: none;
    /*
    background: -webkit-linear-gradient(bottom, rgba(0,27,59,0.75) 0%, rgba(0,27,59,0) 100%);
    background: -o-linear-gradient(bottom, rgba(0,27,59,0.75) 0%, rgba(0,27,59,0) 100%);
    background: linear-gradient(to top, rgba(0,27,59,0.75) 0%, rgba(0,27,59,0) 100%);
*/
}

.card .layer-over * {
    text-align: center;
}


/* cartes horrizontales */

@media(min-width:992px) {
    .card.horiz {
        -webkit-display: flex;
        -moz-display: flex;
        -o-display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        width: unset;
        max-width: 100%;
    }
    .card.horiz figure {
        width: 230px;
        max-width: 230px;
        min-width: 220px;
        height: 100%;
    }
}

@media(min-width:1200px) {
    .card.horiz figure {
        width: 255px;
        max-width: 255px;
        min-width: 255px;
        height: 100%;
    }
}


/* carte "accès limité, connectez vous" */

body.anonyme .card.layer-lock .btn.connected,
body.connecte .card.layer-lock .btn.btn-connexion {
    display: none;
}

body.connecte .card.layer-lock .btn.connected,
body.anonyme .card.layer-lock .layer-over,
body.anonyme .card.layer-lock .btn.btn-connexion {
    display: inline-block;
}

body.anonyme .card.layer-lock .layer-over {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

body.connecte .card.layer-lock .layer-over {
    display: none;
}

.card.layer-lock .layer-over {
    -webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.card.layer-lock .layer-over * {
    display: none;
}

.card.layer-lock .layer-over img:first-of-type {
    display: block;
}

.card.layer-lock .layer-over span:first-of-type {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    text-transform: uppercase;
}

.card.layer-lock .layer-over span:nth-of-type(2) {
    font-size: .875rem;
}

.card.layer-lock .layer-over span:nth-of-type(3) {
    font-size: .825rem;
}

.card.layer-lock:hover .layer-over *,
.card.layer-lock a:hover .layer-over *,
.card.layer-lock a:focus .layer-over *,
.card.layer-lock a:focus-within .layer-over *,
.card.layer-lock a:active .layer-over *,
.card.layer-lock:focus .layer-over *,
.card.layer-lock:focus-within .layer-over *,
.card.layer-lock:active .layer-over * {
    display: block;
}

.card.layer-lock:hover .layer-over img:first-of-type,
.card.layer-lock a:hover .layer-over img:first-of-type,
.card.layer-lock a:focus .layer-over img:first-of-type,
.card.layer-lock a:focus-within .layer-over img:first-of-type,
.card.layer-lock a:active .layer-over img:first-of-type,
.card.layer-lock:focus .layer-over img:first-of-type,
.card.layer-lock:focus-within .layer-over img:first-of-type,
.card.layer-lock:active .layer-over img:first-of-type {
    display: none;
}

.card .texte {
    padding: 1rem;
}

.card p {
    margin: 0 0 .5rem;
}

.card.dark p {
    color: #fff;
}

.card .categorie {
    font-size: .825rem;
    font-weight: 600;
    line-height: 1;
    color: #001b3b;
    margin-bottom: .5rem;
}

.categorie:after {
    content: "";
    display: block;
    width: 2rem;
    height: 1px;
    background: #001b3b;
    line-height: 1;
    margin-top: .5rem;
}

.card.dark .categorie:after {
    content: "";
    display: block;
    width: 2rem;
    height: 1px;
    background: #fff;
    line-height: 1;
    margin-top: .5rem;
}

.card .titre {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    color: #001b3b;
    font-size: 1.125rem;
    line-height: 1.25;
}

.card .sous-titre {
    color: #001b3b;
    opacity: .8;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
}

.musee .card .titre {
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    color: #001b3b;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
}

.musee .card .sous-titre {
    color: #001b3b;
    opacity: .8;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
}

.card.txtOverImg.full .sous-titre,
.card.txtOverImg.big .sous-titre {
    font-size: 1rem;
}

.card .description {
    color: #001b3b;
    font-size: .875rem;
    opacity: .8;
}

@media (min-width:1200px) {
    .card .description {
        font-size: .875rem;
    }
}

.card .lieu,
.card .date {
    color: #001b3b;
    font-size: .875rem;
    font-weight: 500;
    opacity: 1;
    margin: 0;
}

.card .lieu:before {
    content: url(images/icon-geolocalisation.svg);
    margin-right: .5rem;
    vertical-align: sub;
}

.card.dark .lieu:before,
.card.txtOverImg.full .lieu:before,
.card.txtOverImg.big .lieu:before {
    content: url(images/icon-geolocalisation-blanc.svg);
    margin-right: .5rem;
    vertical-align: sub;
}

.card .date:before {
    content: url(images/icon-date.svg);
    margin-right: .5rem;
    vertical-align: sub;
}

.card.dark .date:before,
.card.txtOverImg.full .date:before,
.card.txtOverImg.big .date:before {
    content: url(images/icon-date-blanc.svg);
    margin-right: 1rem;
    vertical-align: sub;
}

.card.dark .description {
    color: #b5c2d3;
    font-size: .825rem;
}

button:focus,
.btn:focus {
    /*	outline: none!important;*/
}


/* Carte texte sur l'image */

.card.txtOverImg {
    height: 484px;
    position: relative;
}

.card .layer-over {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 27, 59, .75);
    color: #fff;
    -webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: none;
}

.card.txtOverImg figure {
    height: 484px;
}

.card.txtOverImg.full figure figcaption {
    position: absolute;
    bottom: .25rem;
    left: .25rem;
    color: #ccc;
}

.card.txtOverImg .texte {
    position: absolute;
    bottom: 0;
    padding: 1rem;
    width: 100%;
    height: 100%;
    background: rgb(0, 27, 59);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 27, 59, 1)), to(rgba(0, 27, 59, .3)));
    background: -o-linear-gradient(bottom, rgba(0, 27, 59, 1) 0%, rgba(0, 27, 59, .3) 100%);
    background: linear-gradient(0deg, rgba(0, 27, 59, 1) 0%, rgba(0, 27, 59, .3) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#001b3b", endColorstr="#001b3b", GradientType=1);
    display: block;
}

@supports (display:flex) {
    .card.txtOverImg .texte {
        position: absolute;
        bottom: 0;
        padding: 2rem 1rem;
        width: 100%;
        height: 100%;
        background: rgb(0, 27, 59);
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 27, 59, 1)), to(rgba(0, 27, 59, .3)));
        background: -webkit-linear-gradient(0deg, rgba(0, 27, 59, 1) 0%, rgba(0, 27, 59, .3) 75%, rgba(0, 27, 59, .0) 100%);
        background: -o-linear-gradient(bottom, rgba(0, 27, 59, 1) 0%, rgba(0, 27, 59, .3) 75%, rgba(0, 27, 59, .0) 100%);
        background: linear-gradient(0deg, rgba(0, 27, 59, 1) 0%, rgba(0, 27, 59, .3) 75%, rgba(0, 27, 59, .0) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#001b3b", endColorstr="#001b3b", GradientType=1);
        -webkit-display: flex;
        -moz-display: flex;
        -o-display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
}

.card.txtOverImg.full .texte {
    padding: 2rem;
}

.card.txtOverImg.big .texte {
    padding: 4rem 2rem;
}

.card.txtOverImg .texte *,
.musee .card.txtOverImg .texte * {
    color: #fff;
}

.musee .card.txtOverImg .texte .btn.btn-default,
.musee .card.txtOverImg .texte .btn.btn-default * {
    color: #001b3b;
}

.card .texte>* {
    margin-bottom: .5rem;
}

.card.txtOverImg .categorie:after {
    content: "";
    background: #fff;
}

.card.txtOverImg.full {
    width: 100%;
    min-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    border-radius: 0;
}


/* conteneur de la carte plein ecran (ex : 1ere ligne des mosaiques homepage) */

.page-2021 #page>div.contenu #portal .panel-front.bloc-actu-1 {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 1600px;
}


/* 2021-12-21 Christophe patch hauteur lecteur conférence audio : En attente d'investigation sur le template (voir log sur git) */

iframe#frmPlayer {
    min-height: 200px;
}


/* Christophe 15/02/22 : Jaquettes directement imprimables depuis les notices longues */


/* Déplacement des règles css template velocity uni4cFull */

h1 span.titre_principal,
h1#titre-uni {
    display: block;
    position: relative;
    width: 100%;
    text-indent: 0;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    color: #000;
    font-size: 1.625rem!important;
    text-align: left;
    background-color: transparent;
    background-image: none;
    margin-bottom: 1rem;
}


/* end jaquettes print */

@media screen and (min-width:992px) {
    /* pour desktop, la carte "full" place le visuel à gauche et le texte à droite */
    .card.txtOverImg.full {
        display: flex;
        align-items: stretch;
    }
    .card.txtOverImg.full figure {
        flex: 3;
    }
    .card.txtOverImg.full .texte {
        position: static;
        flex: 2;
        background: #001B3B;
        justify-content: center;
    }
    .card.txtOverImg.full .texte>* {
        margin-bottom: .825rem;
    }
}

@media screen and (min-width:1600px) {
    .card.txtOverImg.full {
        border-radius: 1rem;
    }
    .page-2021 #page>div.contenu #portal .panel-front.bloc-actu-1 {
        margin: 1.5rem auto 0;
    }
}

.card.txtOverImg.full .titre,
.card.txtOverImg.big .titre {
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
}

@media screen and (max-width:767px) {
    .card.txtOverImg.full .titre,
    .card.txtOverImg.big .titre {
        font-size: 1.5rem;
    }
}


/* PAGE INCONTOURNABLE MOSAIQUE (tous sites) PROVISOIRE GG mai 2022 */

.incontournables .heroTexte {
    margin: 0 auto 3rem;
    max-width: 920px;
}

.incontournables #portal .heroTexte h1,
.incontournables #page>div.contenu #portal .heroTexte h1 {
    margin: 3rem 0 2rem;
}

.incontournables #page .heroTexte .chapo,
.incontournables #page>div.contenu .hero .heroTexte .chapo {
    color: #001b3b;
    text-align: center;
    font-family: 'SourceSansPro', sans-serif;
    text-transform: none;
    font-weight: 400;
    font-size: 1.5rem;
    max-width: 90%;
    margin-right: auto;
    margin-left: auto;
}

.incontournables #page .frame.pagesDecouverteMosaique {
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
}

.incontournables #page .nav--filtres,
.incontournables #page .mosaique {
    background: #fff;
    border-radius: 0;
    padding: 1rem;
}

.incontournables.pagesDecouverte .nav--filtres {
    margin: 0;
    border-bottom: 1px solid #ddd;
}

.incontournables .ou,
.incontournables .texte-filtrer-par,
.incontournables .label-filtrer-par {
    text-transform: uppercase;
    font-size: .875rem;
    font-weight: 500;
    margin: 0;
}

.incontournables.mosaique-modele #portal .mosaique li
/* ,
.accueil-modele #portal section.accueil-mosaique li,
.histoireinstru-modele #portal section.mosaique li*/

{
    border-radius: .5rem;
    margin: .5rem;
    overflow: hidden;
}

.incontournables.pagesDecouverte .mosaique img {
    height: 237px;
}

.incontournables.pagesDecouverte h3,
.incontournables.pagesDecouverte h3 * {
    font-size: 1rem;
    font-family: 'Philharmonique', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.25;
    color: #001b3b;
}