@import "polices/polices.css";

/* ################## Destinée au flux d'impression ############################## */

@media print {
    body {
        width: 100%;
        margin: 0;
        float: none;
    }
    header,
    #pdpmenu,
    .l-footer,
    form,
    .navbar,
    .facetList,
    .pagination-container,
    .criteres_tri,
    .navigation,
    mobile-navigation,
    .actions,
    #nav_connexe,
    .detail-icon-container,
    .thumbnail-wrapper,
    .offre-media-topo,
    .fichier-audio-video,
    #mobile-actions,
    .see_all_results,
    #aside,
    .select,
    .chronologie,
    .search-icon-container,
    #exportsList,
    .obtain-document-link,
    #contexte {
        display: none !important;
    }
    #resultats {
        /*background-color: red;*/
        margin: 0;
    }
    #resultats_detail {
        margin: 0;
        width: 100%;
    }
    .vignette_container {
        clear: both;
    }
    .media,
    .media-body {
        overflow: initial;
    }
    .more-actions {
        position: relative;
        margin-top: 10px;
        top: 0;
        right: 0;
    }
    .permalink {
        font-size: 0.8em;
    }
    .fichier-audio-video {
        display: none;
    }
    /* Outils éducatif */
    .oe-accroche img {
        max-width: 50% !important;
    }
    /*
    a:link:after {
        content: " (" attr(href) ") ";
    }*/
    a.definition {
        position: relative !important;
        display: inline !important;
        padding: 0 !important;
        left: 0 !important;
        border: none !important;
        float: none !important;
        font-size: inherit !important;
    }
    a.definition::before {
        content: '\00a0[';
    }
    a.definition::after {
        content: ']';
    }
    /*
     page-break-after: always; /* Always insert page break after this element */
    /*page-break-inside: avoid; /* Please don't break my page content up browser */
    /*expo*/
    .frame,
    .panel-model {
        page-break-inside: avoid;
    }
    h2 {
        page-break-after: avoid;
    }
    .collapse {
        display: block;
    }
    div.modele_6,
    .model-html,
    .panel-model,
    .panel-heading,
    .panel-collapse,
    .panel-body {
        border: 0;
    }
    .fleche-menu-droite {
        display: none;
    }
    /*
        article { page-break-before: always; }
    */
    /** {


    	background-color: red;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;



        height: auto;
        width:auto;
        clear: both;
        overflow: visible !important;
	}    */
}


/*/print*/


/*
  .notice_courte:hover{
      background-color:#b3d6fd;
      cursor:pointer;
  }
  */


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

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


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


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

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

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


/* ############# 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: 40px !important;
}


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


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


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

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

.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 {
    display: none;
}


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

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


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


/* ##################### Début - Généralités des balises #################### */

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

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

cite {
    font-weight: inherit;
    font-style: italic;
}

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-weight: bold;
    font-family: 'Source Sans Pro', arial, helvetica, sans-serif;
}

sup {
    vertical-align: middle;
    /* gg 11/08/2022 correction bug balise sup : */
    font-family: 'SourceSansPro', sans-serif!important;
    font-size: 75%!important;
}


/* gg 30/08/2022 : listes ul li dans les contenus texte */

.page-2021 #portal ul {
    margin-bottom: 1rem;
}


/* gg 06/09/2022 correction affichage des liste ul li */


/* .page-2021 #portal ul:not(.slick-dots):not(.with-puce):not(.wide-link),
.page-2021 #portal ul:not(.slick-dots):not(.with-puce):not(.wide-link) li:not(.slick-active) {
    list-style-type: disc;
    list-style-position: inside;
} */

#portal .only-content ul,
#portal .only-content li {
    list-style-type: disc;
    /* list-style-position: inside; */
    margin-left: .45rem;
}


/* fin : gg 06/09/2022 correction affichage des liste ul li */

#portal .rsSlide ul,
#portal .rsSlide li,
#portal .rs-staticList ul,
#portal .rs-staticList li {
    list-style-type: none;
}


/* fin gg 30/08/2022 : listes ul li dans les contenus texte */


/* 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;
}

figcaption {
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    color: #808080;
    padding: 5px 0 0 6px;
}


/* gg 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 29/08/2022 : correction légende d'images flottante sur le nouveau modèle 2022 */

a {
    /* Avoir toujours la main quand lien */
    cursor: pointer;
}

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


/* gg 10/08/2022 mise à niveau des liens de téléchargement */

a:not(.btn).lien-download,
a:not(.btn).download-link {
    text-decoration: underline!important;
    color: inherit!important;
}

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


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


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

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

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


/* 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;
    /* transition: all 0.2s ease-in-out 0.1s;*/
    transition: all 0.15s ease-in-out;
}

a.see-biography {
    /* 	Bouton depuis notice détaillée collections exemple doc/MUSEE/0158215/0129119-biographie-de-laurens-hammond.aspx */
    font-family: 'Source Sans Pro', '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: #000;
    /*margin: 10px 0px;*/
}


/* ########################### 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: #000000 !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 {
    background-color: #b3d6fd;
    padding: 12px;
} */

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

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

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


/* ############################ 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 SemiBold', sans-serif;
    text-transform: uppercase;
    color: #000;
    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 SemiBold', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1.125em;
}

.listing-modele h4 {
    font-family: 'Source Sans Pro', SourceSansPro, sans-serif;
    font-weight: 600;
    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;
}


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


/* ####################### 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: 'Source Sans Pro', SourceSansPro, sans-serif;
}

.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 .menu,
    /* En responsive, le menu de droite disparaît sous les modèles suivants ! */
    .histoireinstru-modele .menu,
    .fiche .menu,
    .content-modele .menu {
        display: none;
    }
}


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


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

.mediatheque .info {
    background-color: #ffbd6f;
    /*font-family: Source Sans Pro;, arial, helvetica, sans-serif*/
    font-family: 'Philharmonique SemiBold', sans-serif;
    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;
    transition: 0.3s;
    font-size: 15px;
    font-family: 'Source Sans Pro';
}


/* 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;
        transition: 0.3s;
        font-size: 15px;
        font-family: 'Source Sans Pro';
        /*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;
        transition: 0.3s;
        font-size: 15px;
        font-family: 'Source Sans Pro';
    }
}


/* ------- 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;
}


/* 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;
    transition: 0.3s;
    font-size: 15px;
    font-family: 'Source Sans Pro';
}


/* 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(http://drop.philharmoniedeparis.fr/homepage/catalogue/pictos/ressources_numeriques_6.png) 0px 35px no-repeat;
}

.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 -----*/


/* ######################################### 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: 'Philharmonique SemiBold', sans-serif;
    font-size: 1.438em;
    margin-bottom: 15px;
    padding-top: 5px;
    font-weight: normal;
    text-transform: uppercase;
}

.incontournable-modele h4 {
    font-family: 'Source Sans Pro', SourceSansPro, sans-serif;
}


/* -------- 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.btn,
.incontournable-accroche a.btn {
    color: #000;
}

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

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


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


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

.incontournable-modele p,
.incontournable-accroche li {
    font-size: 1.143em;
}

.incontournable-modele p.inc-chapo {
    /* L'accroche - EnricheFromCMS en gras */
    font-family: "Source Sans Pro", arial, helvetica, sans-serif;
}


/* 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: "Source Sans Pro", arial, helvetica, sans-serif;
    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:not(.uni4-short):last-of-type, */

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

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


/* 		.incontournable-modele #portal .incontournable-rebond h3 {
		    font-family:LinotypeBrewery-bold;
		    font-size:1.150em;
		    text-transform:uppercase;
		    margin-bottom:5px;
		    font-weight: normal;
		    color:#000;
		}
		 */

.incontournable-modele #portal .incontournable-rebond li div {
    color: #444;
    font-size: .875rem;
}

.incontournable-modele #portal .img-thumbnail {
    margin-bottom: 17px;
}

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


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


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


/* ###################################  Début MOSAIQUE  ############################################## */


/* ------- Niveau de titre mosaique modele -----------  */

.mosaique-modele h2 {
    font-size: 1.7em;
    margin: 15px 0 25px 0;
}


/* ------- Début Niveau LI et liens pour carré avec image mosaique modele -----------  */

.mosaique-modele #portal li,
.accueil-modele #portal section.accueil-mosaique li,
.histoireinstru-modele #portal section.mosaique li {
    width: 237px;
    height: 237px;
    float: left;
    margin: 1px;
    list-style-image: none;
}

.mosaique-forme,
.mosaique-forme1,
.mosaique-forme2 {
    background-size: 237px;
}

.mosaique-forme a {
    margin-top: 192px;
    height: 45px;
}

.mosaique-forme1 a {
    margin-top: 179px;
    height: 58px;
    line-height: 20px;
}

.mosaique-forme2 a {
    margin-top: 164px;
    height: 72px;
    line-height: 20px;
}

.mosaique-forme a,
.mosaique-forme1 a,
.mosaique-forme2 a {
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 1.205em;
    text-transform: uppercase;
    position: absolute;
    width: 237px;
    text-decoration: none;
    padding: 13px 0 0 10px;
    overflow: hidden;
}

.mosaique-forme a:hover,
.mosaique-forme1 a:hover,
.mosaique-forme2 a:hover {
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 1.200em;
    text-transform: uppercase;
    position: absolute;
    width: 237px;
    height: 237px;
    margin: 0;
    padding-top: 40px;
    transition: all 0.5s ease;
}


/* ------- Fin  Niveau LI et liens pour carré avec image mosaique modele -----------  */


/* ------- Texte en span carré avec image mosaique modele -----------  */

.mosaique-forme span,
.mosaique-forme1 span {
    font-size: 0.700em;
    text-transform: none;
    line-height: 10px;
    font-family: 'Source Sans Pro';
}


/* ------- Texte paragrpahe avec fond noir span carré avec image mosaique modele -----------  */

.mosaique-modele #instru1,
.accueil-modele #instru1 {
    background-color: #000;
    opacity: 0.90;
}

.mosaique-modele #instru1 p,
.accueil-modele section.accueil-mosaique #instru1 p {
    text-transform: uppercase;
    color: #FFF;
    width: 237px;
    height: 237px;
    margin: 0 auto !important;
    font-size: 1.25em;
    padding: 25px;
}


/* ------- Début - Chaque image des carrés mosaique modele -----------  */


/* ------Les familles d'instruments : cordes, claviers,...------- */

.mosaique-modele #clavier,
.accueil-modele #clavier {
    background-image: url(http://drop.philharmoniedeparis.fr/homepage/musee/incontournables/incontournable-claviers.jpg);
}

.mosaique-modele #corde,
.accueil-modele #corde {
    background-image: url(http://drop.philharmoniedeparis.fr/homepage/musee/incontournables/incontournable-cordes.jpg);
}

.mosaique-modele #vent,
.accueil-modele #vent {
    background-image: url(http://drop.philharmoniedeparis.fr/homepage/musee/incontournables/incontournable-vents.jpg);
}

.mosaique-modele #percu,
.accueil-modele #percu {
    background-image: url(http://drop.philharmoniedeparis.fr/Homepage/musee/Incontournables/incontournable-percussions.jpg);
}

.mosaique-modele #electro,
.accueil-modele #electro {
    background-image: url(http://drop.philharmoniedeparis.fr/homepage/musee/incontournables/incontournable-instruments-electroniques.jpg);
}

.mosaique-modele #autreinstru,
.accueil-modele #autreinstru {
    background-image: url(http://drop.philharmoniedeparis.fr/homepage/musee/incontournables/incontournable-autres-instruments.jpg);
}

.mosaique-modele #art,
.accueil-modele #art {
    background-image: url(http://drop.philharmoniedeparis.fr/homepage/musee/incontournables/incontournable-oeuvres-art.jpg);
}


/* ------  Toutes les images carrées de chaque famille ------- */

.mosaique-modele #mosaique-baffo,
.histoireinstru-modele #mosaique-baffo {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000010900/160603_CMIM000023996_235X235.jpg);
}

.mosaique-modele #goujon,
.histoireinstru-modele #goujon {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000000200/CMIM000023622_230x230.jpg);
}

.mosaique-modele #ruc-task,
.histoireinstru-modele #ruc-task {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000006200/CMIM000023601_230x230.jpg);
}

.mosaique-modele #couchet,
.histoireinstru-modele #couchet {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000006300/CMIM00027405_230x230.jpg);
}

.mosaique-modele #tibaut,
.histoireinstru-modele #tibaut {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000004200/CMIM000023730_230x230.jpg);
}

.mosaique-modele #clav-lie,
.histoireinstru-modele #clav-lie {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000006100/CMIM000023532_230x230.jpg);
}

.mosaique-modele #lepante,
.histoireinstru-modele #lepante {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000004900/CMIM00023441_230x230.jpg);
}

.mosaique-modele #orgue-hammond,
.histoireinstru-modele #orgue-hammond {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000011100/158215_CMIM000029536_235x235.jpg);
}

.mosaique-modele #orgue,
.histoireinstru-modele #orgue {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000006700/CMIM000029263_230x230.jpg);
}

.mosaique-modele #erard44,
.histoireinstru-modele #erard44 {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000000700/CMIM000023073_230x230.jpg);
}

.mosaique-modele #pleyel42,
.histoireinstru-modele #pleyel42 {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000001500/CMIM000029106_230X230.jpg);
}

.mosaique-modele #task,
.histoireinstru-modele #task {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000006000/CMIM000024115_230x230.jpg);
}

.mosaique-modele #erard1802,
.histoireinstru-modele #erard1802 {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000003700/CMIM000027081_230x230.jpg);
}

.mosaique-modele #piano-carre,
.histoireinstru-modele #piano-carre {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000000400/CMIM00026174_230x230.jpg);
}

.mosaique-modele #piano-double,
.histoireinstru-modele #piano-double {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000004400/CMIM000030010_230x230.jpg);
}

.mosaique-modele #piano-organise,
.histoireinstru-modele #piano-organise {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000002300/CMIM000024196_230x230.jpg);
}

.mosaique-modele #lutheal,
.histoireinstru-modele #lutheal {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000003600/CMIM00029087_230x230.jpg);
}

.mosaique-modele #piano-pedalier,
.histoireinstru-modele #piano-pedalier {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000000100/CMIM000029345_230x230.jpg);
}

.mosaique-modele #regale,
.histoireinstru-modele #regale {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000005800/CMIM000024038_230x230.jpg);
}

.mosaique-modele #alto-berna,
.histoireinstru-modele #alto-berna {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000002400/CMIM000024696_230x230.jpg);
}

.mosaique-modele #koch,
.histoireinstru-modele #koch {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000004800/CMIM000019496_230x230.jpg);
}

.mosaique-modele #collichon,
.histoireinstru-modele #collichon {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000000300/CMIM00029357_230x230.jpg);
}

.mosaique-modele #voboam,
.histoireinstru-modele #voboam {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000000900/CMIM000023207_230x230.jpg);
}

.mosaique-modele #koto,
.histoireinstru-modele {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000005900/CMIM000024952_230x230.jpg);
}

.mosaique-modele #lacote,
.histoireinstru-modele #lacote {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000002700/CMIM000019190_230x230.jpg);
}

.mosaique-modele #grobert,
.histoireinstru-modele #grobert {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000005200/CMIM00015061_230x230.jpg);
}

.mosaique-modele #lambert,
.histoireinstru-modele #lambert {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000002900/CMIM000018286_230x230.jpg);
}

.mosaique-modele #angelico,
.histoireinstru-modele #angelico {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000006600/CMIM000027785_230x230.jpg);
}

.mosaique-modele #bouchet,
.histoireinstru-modele #bouchet {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000001800/CMIM000027117_230x230.jpg);
}

.mosaique-modele #gretsch,
.histoireinstru-modele #gretsch {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000001300/CMIM000023382_230x230.jpg);
}

.mosaique-modele #rickenbacker,
.histoireinstru-modele #rickenbacker {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000004000/CMIM000018378_230x230.jpg);
}

.mosaique-modele #flying,
.histoireinstru-modele #flying {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000002500/CMIM000019344_230x230.jpg);
}

.mosaique-modele #harpe-erard,
.histoireinstru-modele #harpe-erard {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000004300/CMIM00027445_230x230.jpg);
}

.mosaique-modele #chromatique.histoireinstru-modele #chromatique {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000004500/CMIM00028034_230x230.jpg);
}

.mosaique-modele #jacobacci,
.histoireinstru-modele #jacobacci {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000001200/CMIM000023376_230x230.jpg);
}

.mosaique-modele #telecaster,
.histoireinstru-modele #telecaster {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000003900/CMIM000019332_230x230.jpg);
}

.mosaique-modele #ngomgi,
.histoireinstru-modele #ngomgi {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000007700/CMIM000023085_230x230.jpg);
}

.mosaique-modele #biwa,
.histoireinstru-modele #biwa {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000007600/CMIM000027620_230x230.jpg);
}

.mosaique-modele #hoffmann,
.histoireinstru-modele #hoffmann {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000005400/CMIM000019662_230x230.jpg);
}

.mosaique-modele #tar,
.histoireinstru-modele #tar {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000003200/CMIM000018434_230x230.jpg);
}

.mosaique-modele #charango,
.histoireinstru-modele #charango {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000001100/CMIM000027467_230x230.jpg);
}

.mosaique-modele #ud,
.histoireinstru-modele #ud {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000003100/CMIM00027471_230x230.jpg);
}

.mosaique-modele #jocob,
.histoireinstru-modele #jocob {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000000500/CMFM000000500_230x230.jpg);
}

.mosaique-modele #sanxian,
.histoireinstru-modele #sanxian {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000007200/CMIM000027611_230x230.jpg);
}

.mosaique-modele #sitar,
.histoireinstru-modele #sitar {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000007500/CMIM000018980_230x230.jpg);
}

.mosaique-modele #octobasse,
.histoireinstru-modele #octobasse {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000005300/CMIM000015244_230x230.jpg);
}

.mosaique-modele #bin,
.histoireinstru-modele #bin {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000003500/CMIM000029119_230x230.jpg);
}

.mosaique-modele #theorbe,
.histoireinstru-modele #theorbe {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000005500/CMIM000019498_230x230.jpg);
}

.mosaique-modele #ukulele,
.histoireinstru-modele #ukulele {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000002000/CMIM000019377_230x230.jpg);
}

.mosaique-modele #sorud,
.histoireinstru-modele #sorud {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000003300/CMIM00018618_230X230.jpg);
}

.mosaique-modele #vihuela,
.histoireinstru-modele #vihuela {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000003400/CMIM000018504_230x230.jpg);
}

.mosaique-modele #violon-campagne,
.histoireinstru-modele #violon-campagne {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000008700/CMIM000032551_230x230.jpg);
}

.mosaique-modele #hel,
.histoireinstru-modele #hel {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000002600/CMIM000023595_230x230.jpg);
}

.mosaique-modele #alard,
.histoireinstru-modele #alard {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000001700/CMIM000013647_230x230.jpg);
}

.mosaique-modele #davidoff,
.histoireinstru-modele #davidoff {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000000600/CMIM000013634_230x230.jpg);
}

.mosaique-modele #guarneri,
.histoireinstru-modele #guarneri {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000001900/CMIM000013697_230x230.jpg);
}

.mosaique-modele #violoncelle-campagne,
.histoireinstru-modele #violoncelle-campagne {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000008600/CMIM000032565_230x230.jpg);
}

.mosaique-modele #stroviols,
.histoireinstru-modele #stroviols {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000006800/CMIM00032083_230x230.jpg);
}

.mosaique-modele #hohner,
.histoireinstru-modele #hohner {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000006400/CMIM000_230x230.jpg);
}

.mosaique-modele #basset,
.histoireinstru-modele #basset {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000002800/CMIM000011034_230x230.jpg);
}

.mosaique-modele #raoux,
.histoireinstru-modele #raoux {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000001600/CMIM000020066_230x230.jpg);
}

.mosaique-modele #millereau,
.histoireinstru-modele #millereau {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000006500/CMIM00027998_230x230.jpg);
}

.mosaique-modele #bouquin,
.histoireinstru-modele #bouquin {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000004600/CMIM00015045_235x235.jpg);
}

.mosaique-modele #bouquin-la,
.histoireinstru-modele #bouquin-la {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000005000/CMIM000011035_230x230.jpg);
}

.mosaique-modele #flute-colonne,
.histoireinstru-modele #flute-colonne {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000005600/CMIM00015042_230x230.jpg);
}

.mosaique-modele #flute-traversiere,
.histoireinstru-modele #flute-traversiere {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000005100/CMIM000013393_230x230.jpg);
}

.mosaique-modele #leblanc,
.histoireinstru-modele #leblanc {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000002100/CMIM000027648_230x230.jpg);
}

.mosaique-modele #sax,
.histoireinstru-modele #sax {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000002200/CMIM00027647_230x230.jpg);
}

.mosaique-modele #coeffet,
.histoireinstru-modele #coeffet {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000003000/CMIM000029918_230x230.jpg);
}

.mosaique-modele #gamelan,
.histoireinstru-modele #gamelan {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000000800/CMIM00015875_230x230.jpg);
}

.mosaique-modele #marimba,
.histoireinstru-modele #marimba {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000003800/CMIM00023631_230x230.jpg);
}

.mosaique-modele #steel-band,
.histoireinstru-modele #steel-band {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000007000/CMIM000032281_230x230.jpg);
}

.mosaique-modele #tabla,
.histoireinstru-modele #tabla {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000007100/CMIM000027637_230x230.jpg);
}

.mosaique-modele #bulup,
.histoireinstru-modele #bulup {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000007800/CMIM000023338_230x230.jpg);
}

.mosaique-modele #gugu,
.histoireinstru-modele #gugu {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000007300/CMIM000018290_230x230.jpg);
}

.mosaique-modele #nfunkula,
.histoireinstru-modele #nfunkula {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000007400/CMIM000015518_230x230.jpg);
}

.mosaique-modele #timbale,
.histoireinstru-modele #timbale {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000007900/CMIM000023431_230x230.jpg);
}

.mosaique-modele #martenot,
.histoireinstru-modele #martenot {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000005700/CMIM000015258_230x230.jpg);
}

.mosaique-modele #theremin,
.histoireinstru-modele #theremin {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000001000/CMIM00022696_230x230.jpg);
}

.mosaique-modele #synthe-ems,
.histoireinstru-modele #synthe-ems {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000006900/CMIM000032092_235x235.jpg);
}

.mosaique-modele #synthe-mod,
.histoireinstru-modele #synthe-mod {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000008500/CMIM000022677_230x230.jpg);
}

.mosaique-modele #fender,
.histoireinstru-modele #fender {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000001400/CMIM00023768_230x230.jpg);
}

.mosaique-modele #baschet,
.histoireinstru-modele #baschet {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000004700/CMIM000022799_230x230.jpg);
}

.mosaique-modele #harmo-verre,
.histoireinstru-modele #harmo-verre {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000004100/CMIM00029744_230x230.jpg);
}

.mosaique-modele #paganini,
.histoireinstru-modele #paganini {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000008000/CMIM000022737_230x230.jpg);
}

.mosaique-modele #nattier,
.histoireinstru-modele #nattier {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000008100/CMIM000023708_230x230.jpg);
}

.mosaique-modele #flute,
.histoireinstru-modele #flute {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000008200/CMIM000023153_230x230.jpg);
}

.mosaique-modele #faure,
.histoireinstru-modele #faure {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000008300/CMIM000021216_235x235.jpg);
}

.mosaique-modele #beethov,
.histoireinstru-modele #beethov {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000008400/CMIM000029211_230x230.jpg);
}

.mosaique-modele #kora,
.histoireinstru-modele #kora {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000008900/CMIM000027607_230x230.jpg);
}

.mosaique-modele #kundi,
.histoireinstru-modele #kundi {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000009000/CMIM000018287_230x230.jpg);
}

.mosaique-modele #saung-gaunk,
.histoireinstru-modele #saung-gaunk {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000009100/CMIM000023217_230x230.jpg);
}

.mosaique-modele #stratocaster,
.histoireinstru-modele #stratocaster {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000009200/CMIM000019352_230x230.jpg);
}

.mosaique-modele #pochette,
.histoireinstru-modele #pochette {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000009300/CMIM000015210_230x230.jpg);
}

.mosaique-modele #contrebasse-trois-cordes,
.histoireinstru-modele #contrebasse-trois-cordes {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000009400/CMIM000026139_230x230.jpg);
}

.mosaique-modele #viola-arpa,
.histoireinstru-modele #viola-arpa {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000009500/CMIM000013530_230x230.jpg);
}

.mosaique-modele #station-informatique,
.histoireinstru-modele #station-informatique {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000008800/CMIM000022682_230x230.jpg);
}

.mosaique-modele #atelier-jubal,
.histoireinstru-modele #atelier-jubal {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000009600/CMIM000023707_230x230.jpg);
}

.mosaique-modele #violon-oltzscher,
.histoireinstru-modele #violon-oltzscher {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000009700/1029554_230x230.jpg);
}

.mosaique-modele #sarod,
.histoireinstru-modele #sarod {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000009900/158479_CMIM000020000_230x230.jpg);
}

.mosaique-modele #pique-kamanche,
.histoireinstru-modele #pique-kamanche {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000009800/161244_CMIM000019574_230x230.jpg);
}

.mosaique-modele #clavioline,
.histoireinstru-modele #clavioline {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000010000/160198_CMIM000022719_230x230.jpg);
}

.mosaique-modele #ondioline,
.histoireinstru-modele #ondioline {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000010100/156680_CMIM000015140_230X230.jpg);
}

.mosaique-modele #violon-electronique,
.histoireinstru-modele #violon-electronique {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000010200/130489_CMIM000022671_230x230.jpg);
}

.mosaique-modele #mosaique-hemsch,
.histoireinstru-modele #mosaique-hemsch {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000010400/162244_CMIM000023877_235x235.jpg);
}

.mosaique-modele #mosaique-virginale,
.histoireinstru-modele #mosaique-virginale {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000010300/130260_CMIM000023481_235x235.jpg);
}

.mosaique-modele #mosaique-cistre,
.histoireinstru-modele #mosaique-cistre {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000010800/160997_CMIM000015102_235x235.jpg);
}

.mosaique-modele #mosaique-kemence,
.histoireinstru-modele #mosaique-kemence {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000010700/157913_CMIM000019955_235x235.jpg);
}

.mosaique-modele #mosaique-viele-morin,
.histoireinstru-modele #mosaique-viele-morin {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000010500/939669_CMIM000029578_235x235.jpg);
}

.mosaique-modele #mosaique-viele-sarangi,
.histoireinstru-modele #mosaique-viele-sarangi {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000010600/157490_CMIM000019959_235x235.jpg);
}

.mosaique-modele #django,
.histoireinstru-modele #django {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000011000/160626_CMIM000015188_235x235.jpg);
}

.mosaique-modele #mosaique-grabner,
.histoireinstru-modele #mosaique-grabner {
    background-image: url(http://drop.philharmoniedeparis.fr/CMFM/CMFM000011200/157921_CMIM000028069_350.jpg);
}


/* ------- Fin - Chaque image des carrés mosaique modele -----------  */


/* ###################################  fin MOSAIQUE  ############################################## */


/* ############################### 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: 1.1em;
    position: fixed;
    left: 50%;
    z-index: 99999;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    text-decoration: none !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    line-height: 22px;
    cursor: context-menu;
}
.definition .close{
    position: absolute;
    top: 10px;
    right: 10px;
}
.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; */
    color:#CD2453 !important;
}

.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 #########################*/

.panel-front.only-content a.popVideoExtrait,
.panel-front.content-img-gch a.popVideoExtrait,
.panel-front.content-img-dr a.popVideoExtrait {
    border-radius: 6px;
    /* padding: 0 5px 0 5px; */
    display: inline-block;
    cursor: pointer;
    /* 			background: rgba(0,0,0,.1);
 */
}

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

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

.dossier-oe-modele h3 {
    font-family: 'Philharmonique SemiBold', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1.071em;
}

.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: 'Philharmonique SemiBold', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
}

.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 {
    list-style-image: url(images/puces.png);
    margin-left: 20px;
}

.content-oe-modele .rubrique-oe 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;
}


/* ----------------- 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 {
    font-family: 'Philharmonique SemiBold', sans-serif;
    font-size: 1.438em;
    padding: 5px 0 10px 0;
    background: none !important;
    text-transform: uppercase;
}

.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 {
    font-family: 'Source Sans Pro', SourceSansPro, sans-serif;
    font-weight: 600;
    font-size: 1.22em;
}

.content-oe-modele .rubrique-oe h3 {
    font-size: 1.22em;
}

.content-oe-modele h4 {
    font-family: 'Source Sans Pro', SourceSansPro, sans-serif;
    font-weight: 600;
    font-size: 1.22em;
    padding: 5px 0 5px 0;
}

.content-oe-modele .rubrique-oe h4 {
    font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
    font-size: 1.143em;
    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: 2em;
    }
}


/* ------------- 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;
    margin-top: 0;
    margin-right: 20px;
}

.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.oe-fifty-hauteur p {
    height: 110px;
}


/* -------- 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. */
    background-color: #b3d6fd;
}


/* -------------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: "Source Sans Pro";
    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;
    /*
                    position: static;
                    margin-bottom: 1rem;
                    float: none;
                    clear: both;
                    display: block;
*/
}


/*
                .royalSlider {
                    height: 500px;
                }
*/

.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-radius: 0;
    border: 0
}

/* etraore - amelioration mise en forme tableau */
tbody:first-of-type tr:first-child td:last-child {border-radius: 0 5px 0 0;}
tbody:first-of-type tr:last-child td:first-child {border-radius: 0 0 0 5px;}


/* 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: #000;
    padding-left: 10px;
}


/* -------------- 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: #000;
}

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

.content-oe-modele img.ermes-thumb-size-MEDIUM {
    /* tailles vignettes recherches capturées */
    min-width: 90px !important;
    min-height: 100% !important;
    border-radius: 16px;
}

.content-oe-modele #portal .template-title {
    font-size: 1.1em;
    line-height: 17px;
    font-family: "Source Sans Pro", arial, helvetica, sans-serif;
    color: #000;
}

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

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

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


/* -------------- 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%;
    }
}

@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%;
    }
}

@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;
    }
}

@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: #000 !important;
    border: 1px solid !important;
}

.nav-tabs>li>a,
.nav-tabs>li>a:hover,
.nav-tabs>li>a:focus {
    background-color: #FFF;
    border-color: #000;
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0px;
    color: #000 !important;
    font-family: 'Source Sans Pro', SourceSansPro, sans-serif;
    font-weight: normal;
    font-size: 1.125em;
}

.nav>li>a:hover,
.nav>li>a:focus {
    outline: 0px solid black !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 ############################# */

.modele_6 h3 {
    padding: 0;
}

.modele_6 .fleche-menu-droite {
    padding: 0;
    margin-top: 7px;
    ;
}


/*
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 SemiBold', sans-serif;
    font-size: 1.071em;
    text-transform: uppercase;
    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 {
    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 {
    background-color: #FAF8F9;
}

.listing-modele .panel-model {
    border-color: #fff;
}

.listing-modele .panel-model>.panel-heading+.panel-collapse .panel-body {
    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 h2,
.bibliographie-modele h3,
.bibliographie-modele h4 {
    /* Tous les titres des sélections thématiques en noir */
    color: #000;
}

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

.bibliographie-modele h2.sous-titre-selection {
    text-transform: none !important;
    font-family: 'Source Sans Pro', SourceSansPro, sans-serif;
    font-size: 1.438em;
    padding: 5px 0 10px 0px;
    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);
    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: 'Source Sans Pro', SourceSansPro, sans-serif;
    font-weight: normal;
    line-height: 1.15;
}

.bibliographie-modele .rebond h3,
.bibliographie-modele .rebond-biblio h3 {
    font-family: 'Source Sans Pro', SourceSansPro, sans-serif;
    font-weight: 600;
    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: 'Source Sans Pro', SourceSansPro, sans-serif;
    font-size: 1.438em;
}


/* ------- 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;
}

.bibliographie-modele .sur-titre:after,
.bibliographie-modele #sur-titre-detail:after,
.bibliographie-modele p.evene:after {
    /* Petit trait séparateur des typologies au titre */
    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.2em;
    margin-top: -5px;
    /*background:none;*/
    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: "Source Sans Pro", arial, helvetica, sans-serif;
}

.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: bold;
}

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


/* ---------------- 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: 'Source Sans Pro', SourceSansPro, sans-serif;
    text-transform: inherit;
    font-weight: 600;
    font-size: 18px;
    color: #000;
    padding-top: 1px;
}


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

.template-title,
.title_triptyque_selection {
    /*color:#7ab9ff !important; bleu clair*/
    color: #000 !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;
}


/* ------------modification affichage triptyque - CC 24/09/2016 - Test plans et monographies--------------- */


/*  On affiche le titre et les mentions de responsabilité tronqués dans les sélections ayant le style triptyque uniquement */


/*

	.bibliographie-modele .rs-slide3Items h3.template-title,
	.bibliographie-modele .rs-slide3Items p.template-info {
	display:none;
	}


	.bibliographie-modele .rs-slide3Items p.title_triptyque_selection {
	display:block;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: normal;
	margin-bottom: 0px;
	}

	.bibliographie-modele .rs-slide3Items p.info_triptyque_selection {
	display:block;
	font-weight: normal;
	margin:0px;
	}

	.bibliographie-modele .rs-slide3Items p.template-editeur{
    color: #808285;
	font-size: 14px;
	/*margin-bottom:0px;
	}
	.bibliographie-modele .rs-slide3Items p.template-call-number {
	/*margin-top:0px;
	display:none;
	}
	*/


/*.bibliographie-modele .rs-slide3Items img.ermes-thumb-size-MEDIUM {

    max-height: 80px !important;
	}*/


/*  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 {
    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: Source Sans Pro;
    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----------------------*/


/* -------------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: 'Source Sans Pro', SourceSansPro, sans-serif;
}


/* -------------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 {
    text-transform: uppercase;
    font-family: 'Philharmonique SemiBold', sans-serif;
    font-size: 2.5em;
    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 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: 'Source Sans Pro', SourceSansPro, sans-serif;
    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 {
    /* Correspond à l'encart partage : toutes les expositions */
    text-transform: uppercase;
    font-family: 'Philharmonique SemiBold', sans-serif;
    font-size: 2.857em !important;
    margin-bottom: 0;
}

@media screen and (min-width: 200px) and (max-width: 980px) {
    p.presentation-expo {
        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 SemiBold', sans-serif;
    font-size: 1.438em;
    background: none !important;
    text-transform: uppercase;
}

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

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

.exposition-modele h2.expo-lieu-musee {
    font-family: 'Source Sans Pro', SourceSansPro, sans-serif;
    text-transform: none;
}

.exposition-modele h4,
.histoireinstru-modele h4 {
    font-family: 'Philharmonique Regular', sans-serif;
    font-size: 1.071em;
    text-transform: uppercase;
    font-weight: normal;
    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: "Source Sans Pro";
    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 {
    margin: 5px 0px;
    border-radius: 16px;
    overflow: hidden;
}

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

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

.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;
    /* Ony Brunella - bleue plus foncé pour contraste (WCAG)*/
    /* background-color: #0E436C; */
    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 {
    float: right;
    margin: 0 0px 10px 15px;
}

.exposition-modele .content-img-gch figure,
.histoireinstru-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 {
    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 {
    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 {
        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 ############################### */


/* ############################### 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: "Source Sans Pro", arial, helvetica, sans-serif;
    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 Regular', 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 Regular', sans-serif;
    font-size: 1.438em;
    padding: 5px 0 10px 0;
    text-transform: uppercase;
    background: none;
}

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

#portal .chronologie #slider li td h3 {
    font-family: "Source Sans Pro", arial, helvetica, sans-serif;
    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: "Source Sans Pro";
}


/* ------ 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;
    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: "Source Sans Pro", arial, helvetica, sans-serif;
    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 ################ */

.rebond-bleu h2,
.rebond-blanc h2 {
    background: url("images/h2.png") repeat-x scroll left center rgba(0, 0, 0, 0) !important;
    font-family: 'Source Sans Pro', SourceSansPro, sans-serif;
    padding: 15px 0 5px 0;
}

.rebond-bleu h3,
.rebond-blanc h3 {
    font-size: 1.1em !important;
    font-family: 'Philharmonique SemiBold', sans-serif;
    line-height: 1.15;
    text-transform: uppercase;
    padding-top: 0 !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;
    border-radius: 16px;
}

.rebond-blanc div:not(.rsItem)>div.border-gris {
    border-radius: 0 0 16px 16px;
}

.rebond-blanc div.rsItem>div>a .media-object {
    border-radius: 16px 16px 0 0;
}


/* -- 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,
.rebond-blanc img {
    width: 100% !important;
    margin-bottom: 0 !important;
}

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


/* ------------  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 SemiBold', sans-serif;
    font-size: 1.438em;
    padding: 5px 0 10px 0;
    background: none !important;
    text-transform: uppercase;
}

.content-modele #portal .frame-ermes-searchcapturemultirender h2,
.content-modele #portal .rebond h2,
.content-modele #portal .rebond-blanc h2,
.content-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;
    font-family: 'Source Sans Pro', SourceSansPro, sans-serif;
    padding: 0;
}

.content-modele h3 {
    font-family: 'Source Sans Pro', SourceSansPro, sans-serif;
    font-size: 1.22em;
}

.content-modele h4 {
    font-family: 'Source Sans Pro', SourceSansPro, sans-serif;
    font-size: 1.22em;
    padding: 5px 0 5px 0;
    font-weight: normal;
}


/* 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;
    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: 'Source Sans Pro', '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 ------------------------------ */
a.dfn{
    text-decoration: underline !important;
    /*color:black !important;
    text-decoration: underline !important;
    font-style: italic !important;*/
}

.popVideoExtrait {
    color: #CD2453 !important;
}

.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 botons 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 {
    background: none;
}

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

@media screen and (min-width: 200px) and (max-width: 980px) {
    .listing-modele #portal .titre-site p,
    .content-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 artciles */
    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 vigfnette 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: "Source Sans Pro", arial, helvetica, sans-serif;
    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 SemiBold', sans-serif;
    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 {
    text-transform: uppercase;
    font-family: 'Philharmonique SemiBold', sans-serif;
    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 SemiBold', sans-serif;
    font-size: 40px;
    /* font-weight: bold; */
    margin-left: 20px;
    margin-top: 10px;
    text-transform: uppercase;
}

.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;
    text-transform: uppercase;
    font-family: 'Philharmonique SemiBold', sans-serif;
    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;
    text-transform: uppercase;
    /*    font-family: 'LinotypeBrewery';*/
    font-family: 'Philharmonique SemiBold', sans-serif;
    font-size: 15px;
    /*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 .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-weight: bold;
    font-family: 'Source Sans Pro', arial, helvetica, sans-serif;
}

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


/* -----------------  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;
}


/* 24-02-2025 Modif Mhamed */

blockquote,
q {
  font-style: normal;
}

blockquote::before,
q::before {
  content: "\00AB\00A0";
  font-style: normal;
}

blockquote::after,
q::after {
  content: "\00A0\00BB";
  font-style: normal;
}

cite {
  font-style: italic;
}

blockquote i,
blockquote em,
blockquote cite,
q i,
q em,
q cite {
  font-style: italic;
}

blockquote.exergue {
  text-align: right;
}



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


/* Modèle d'encart mosaique img gauche - texte droite -- 2x2 */


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

.modele_horiz-2col.model-html h2 {
    background: transparent;
    font-weight: 600;
    color: #666;
}

.modele_horiz-2col.model-html .media {
    padding: 0;
}


/* gg 05/08/2022 deplacement de width et height depuis img vers figure */

.modele_horiz-2col.model-html .pull-left {
    margin-right: .75rem;
    border-radius: 1rem;
    overflow: hidden;
    background: #b3d6fd;
    width: 128px;
    height: 128px;
}

.modele_horiz-2col.model-html .media-object {
    object-fit: cover;
    /* width: 128px;
    height: 128px; */
    border: 0;
    margin: 0;
}


/* Christophe Leonardi migration syracuse : remove max-width 05/08/2022 */

.modele_horiz-2col.model-html .media-body {
    /* padding: 0 1rem 0 0; */
    /* max-width: 300px; */
    margin-right: 1rem;
    padding-top: .5rem;
}

.modele_horiz-2col.model-html .docType {
    line-height: 1;
    font-weight: 600;
    font-size: 12px;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    position: relative;
    margin-top: .25rem;
    color: #001b3b;
}

.modele_horiz-2col.model-html .docType::after {
    line-height: 1;
    height: 1px;
    width: 30px;
    position: absolute;
    background: #000;
    content: "";
    float: none;
    clear: both;
    display: block;
    bottom: 0;
}

.modele_horiz-2col.model-html .media-body h3.media-heading {
    padding: 0;
    font-family: 'Philharmonique SemiBold', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1rem;
    color: #001b3b;
}

.modele_horiz-2col.model-html p.detail {
    line-height: 1;
    font-size: 13px;
    color: #777;
    margin-bottom: 0;
}


/* FIN ::: Modèle d'encart mosaique img gauche - texte droite -- 2x2 */


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


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


/* FIX en urgence pour affichage des pieces participatives sur modele de page "page-2021-2colonnes" (sept 2021) */


/* ***************** 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; */
}


/* fin : provisoire en attendant la refonte :*/

.page-2021 .heroTexte {
    text-align: center;
}

.page-2021 #portal .heroTexte h1 {
    font-family: 'Philharmonique SemiBold', sans-serif;
    text-transform: uppercase;
    font-size: 3.25rem;
}

.page-2021 .heroTexte .sousTitre,
.page-2021 .heroTexte .chapo {
    font-family: 'Source Sans Pro', SourceSansPro, sans-serif;
}

@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;*/
}

hero figure.heroVignette {
    min-width: 250px;
}


/* test hero 2 */


/* en attendant la vraie refonte */

body.b-a-o #page>div.contenu #portal .panel-front.hero {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

body:not(.home) #page .hero .panel-body,
body:not(.home) #page .hero .panel-footer,
body:not(.home) #page .hero .panel-heading {
    padding-left: 0!important;
    padding-right: 0!important;
}

.page-2021-2colonnes.b-a-o .frame-ermes-carousel.hero .hero {
    padding: 0;
}

.page-2021-2colonnes.b-a-o #ariane {
    width: 100%;
    display: block;
    max-width: 100%;
}

.page-2021-2colonnes.b-a-o #ariane span,
.page-2021-2colonnes.b-a-o #ariane span a {
    color: #777;
}

.page-2021-2colonnes.b-a-o #layout-3 {
    background: #FFF;
    padding: 1rem;
}

.page-2021-2colonnes.b-a-o div#zone-5 {
    background: #F3F2ee;
}


/* fin : en attendant la vraie refonte */


/* GG 09/08/2022 : alignement du hero du nouveau template 2021 sur edutheque, musee, etc */

.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) {
    .page-2021 #portal .heroTexte h1 {
        font-size: 2.5rem;
    }
}

.page-2021 #portal .heroTexte .sousTitre {
    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 .hero-vignette .heroTexte .chapo {
    margin-right: 0;
    margin-left: 0;
}

@media (min-width:768px) {
    .page-2021 .hero-vignette .heroTexte {
        text-align: left;
    }
}


/* fin : GG 09/08/2022 : alignement du hero du nouveau template 2021 sur edutheque, musee, etc */

.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: 3rem 1rem 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;
    }
    .heroVignette {
        display: none;
    }
    .hero .heroTexte,
    .hero .heroTexte *,
    #page>div.contenu #portal .hero .heroTexte h1 {
        text-align: center;
    }
}

@media (min-width:768px) {
    /* gg 11/08/2022 : correction hero */
    .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 .frame-ermes-carousel.hero.hero-vignette .hero .panel-body .heroTexte {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    #page .hero.hero-vignette .hero .typeDoc::after {
        margin: 10px 0 0;
    }
    #page .hero:not(.hero-vignette) .hero .typeDoc::after {
        margin: 10px auto 0;
    }
    /* fin : gg 11/08/2022 : correction hero */
}


/* 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 {
    font-size: 2.5rem;
    text-transform: none;
    font-weight: 500;
    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 {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        padding: 0;
        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;*/
        }
    }
}


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


/* FIN : Modeles de page 1 & 2 colonnes 2021 (fix en urgence pour affichage des pieces participatives sur modele de page "page-2021-2colonnes") (sept 2021) */


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


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


/* ***** bloc grosse liste images + texte  ******* */


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

.carte-horiz-big {
    -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-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1rem 2rem 4rem;
    width: 100%;
    margin-bottom: 2rem;
    border-radius: 1rem;
    overflow: hidden;
}

@media (max-width:767px) {
    .frame .carte-horiz-big {
        height: 500px;
        display: block;
        padding: 0;
        width: 80%;
        border-radius: 1rem;
        overflow: hidden;
        margin: 0 auto 2rem;
        background: #fff;
    }
    @supports (display:flex) {
        .frame .carte-horiz-big {
            -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-align: center;
            -ms-flex-align: center;
            align-items: center;
            height: unset;
        }
    }
    .frame .carte-horiz-big .bloc--texte {
        padding: 1rem;
    }
    .frame .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; */
    }
    .bao-marseillaise #page>div.contenu .carte-horiz-big .bloc--image {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 80%;
    }
}

.carte-horiz-big .bloc--texte {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    padding: 0;
}

.frame .carte-horiz-big .bloc--texte {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
    padding: 1rem;
}

.carte-horiz-big h2 {
    font-family: 'Philharmonique SemiBold', sans-serif;
    font-size: 1.35rem;
    text-transform: uppercase;
    color: #001b3b;
    font-weight: 700;
    background: transparent;
}

.carte-horiz-big .bloc--image {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    width: 80%;
}

.frame .carte-horiz-big .bloc--image {
    flex: 1;
    width: unset;
}

.carte-horiz-big .bloc--image img {
    position: static;
    -o-object-fit: cover;
    object-fit: cover;
    min-width: 100%;
    height: 100%;
    margin: 0;
}


/*}*/

@media (min-width:768px) {
    .carte-horiz-big {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        padding: 0;
        border-radius: 1rem;
        background: #fff;
        overflow: hidden;
    }
    .carte-horiz-big .bloc--texte {
        padding: 2rem;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        background: #fff;
    }
    .carte-horiz-big .bloc--image {
        position: relative;
        -webkit-display: flex;
        -moz-display: flex;
        -o-display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .bloc-txtG-imgD .bloc--texte {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
    .bloc-txtG-imgD .bloc--image {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }
    .bloc-txtD-imgG .bloc--texte {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }
    .bloc-txtD-imgG .bloc--image {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
    .carte-horiz-big .bloc--image img {
        position: static;
        -o-object-fit: cover;
        object-fit: cover;
        min-width: 100%;
        margin: 0;
    }
}

.carte-horiz-big>* {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}


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


/* ***** FIN : bloc grosse liste images + texte  ******* */


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


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


/* 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;
}

.model-html[class*="modele_horiz-"] .pull-left {
    /*    margin-right: .75rem;*/
    margin-right: .25rem;
    border-radius: 1rem;
    overflow: hidden;
    flex-basis: 128px;
    /*    background: #b3d6fd;*/
    background: #f3f2ee;
}

.model-html[class*="modele_horiz-"] .media-object {
    object-fit: cover;
    width: 128px;
    height: 128px;
    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%;
}


/* gg 05/08/2022 suppr maxwidth du conteneur */

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

.model-html[class*="modele_horiz-"] .media-body h3.media-heading {
    padding: 0;
    font-family: 'Philharmonique SemiBold', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1rem;
    color: #001b3b;
}

.model-html[class*="modele_horiz-"] p.detail {
    line-height: 1;
    font-size: 13px;
    color: #777;
    margin-bottom: 0;
}


/*/////// 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;
    /* margin: 1em auto 0; */
}

div:not(.panel-search-container) a.btn.btn-default {
    border-radius: 25px;
}


/* .panel-search-container #resultats a.btn.btn-default {
    border-radius: 0;
} */

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;
}

body.colloque-model .colloque-mode-emploi.cl-colloque-infos {
    display: block;
}


/* 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;
}


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


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


/* ******* REFONTE 2022 GG 03/05/22 ****** */


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


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


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


/* 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;
    z-index: 99999;
}

#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: 71px;
    width: 100%;
    z-index: 10;
    /* max-width: 950px; */
}

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

@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;
}

.Slider-wrapper .filterContainer .custom-select>button:not(.btn) {
    background: transparent;
    border: 1px solid #001b3b;
    border-radius: 2rem;
    padding: .25rem 1rem;
    position: relative;
    display: flex;
    align-items: center;
    width: 200px;
    justify-content: space-between;
    cursor: pointer;
}

.Slider-wrapper .select-selected::after {
    position: static;
    content: url(/ui/skins/CIMU/images/icon-left.svg);
    height: 21px;
    width: 10px;
    left: calc(100% - 2rem);
    transform: rotate(-90deg);
    transition: 0.2s ease transform;
    /*! top: .75rem; */
    display: flex;
    margin-left: 1rem;
    transform-origin: center;
}

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

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


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


/* ***********   MOSAIQUE 2022 "MOZAIK" 21/06/22 GG *** */


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


/* 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;
}

.mozaik-item .titre {
    font-family: 'Philharmonique', sans-serif;
    font-weight: 600;
    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;
}


/* ***************** GG 21/06/2022 - 15/07/2022 *************** */


/* 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 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;
}


/* STRUCTURE DES PAGES selon modele de page 2021 + */


/* GESTION DU SYSTEME DE COLONNES ET ENCARTS D'ERMES */

body[class*="page-2021-"] #portal {
    padding-top: 0!important;
    padding-bottom: 0!important;
}

body[class*="page-2021-"] #page>div.container,
body[class*="page-2021-"] div[id^="zone-"] {
    padding: 0;
}

body[class*="page-2021-"] #zone-6 {
    margin-bottom: 0;
}

body[class*="page-2021-"] #page>div.container,
body[class*="page-2021-"] #page>div.container,

/* body[class*="page-2021-"] #readspeaker-container, */

body[class*="page-2021-"] #page #portal .frame,
body[class*="page-2021-"].page-Recherche-PAD #readspeaker-container,
body[class*="page-2021-"] #page.detailstatic #readspeaker-container,
body[class*="page-2021-"] #page .layout,
body[class*="page-2021-"] #page [id^="layout-"],
body[class*="page-2021-"] #page [id^="layout-"] .row,
.page-2021-1colonne #page #zone-6 {
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
}


/* bodybody[class*="page-2021-"] #page > div.container, */


/* body:not(.page-2021) #page > div.container, */

body[class*="page-2021-"] #page>div.container .container,
body[class*="page-2021-"] #portal .panel-front,
body[class*="page-2021-"].page-Recherche-PAD #readspeaker-container,
body[class*="page-2021-"] #page.detailstatic #readspeaker-container,
body[class*="page-2021-"] #page [id^="layout-"] .row
/*,
.page-2021-1colonne_mosaique #page #zone-6*/

{
    margin: 0 auto;
    max-width: 1170px;
    width: 100%;
}

body[class*="page-2021-1colonne"] #portal .frame-ermes-carousel.hero .hero,
body[class*="page-2021-2colonnes"] #portal .frame-ermes-carousel.hero .hero {
    padding: 0;
    margin-bottom: -90px;
}

body[class*="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;
} */


/* AJUSTEMENTS POUR PAD DES MODELES DE PAGE 1 COLONNE 2021 ( contenu et mosaique) / 2 colonnes 2021 - GG 23/06/2022 */

body[class*="page-2021-1colonne"] #page #portal .cms-inner-zone>div[id^="frame-"],
body[class*="page-2021-2colonne"] #page #portal .cms-inner-zone>div[id^="frame-"] {
    margin: 0;
    margin-top: 0;
    margin-bottom: 0;
}

body[class*="page-2021-1colonne"] #page>div.contenu .panel-front.hero,
body[class*="page-2021-1colonne"] #page #portal .panel-front.hero,
body[class*="page-2021-2colonne"] #page>div.contenu .panel-front.hero,
body[class*="page-2021-2colonne"] #page #portal .panel-front.hero {
    background: transparent;
    margin-right: 0;
    margin-left: 0;
    width: 100%;
    height: unset;
    min-height: i, set;
}


/* fin des ajustements pour pad des modeles de page 2021 */


/* 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;
    }
}

body[class*="page-2021-"] #zone-6>div:first-of-type .panel-front {
    border-radius: 1rem 1rem 0 0;
    overflow: hidden;
}

body[class*="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;
}

.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 2021 */

@media (min-width: 768px) {
    /*     bodybody[class*="page-2021-"] #page>div.container, */
    /* body:not(.page-2021) #page > div.container, */
    body[class*="page-2021-"] #portal .panel-front,
    body[class*="page-2021-"].page-Recherche-PAD #readspeaker-container,
    body[class*="page-2021-"] #page.detailstatic #readspeaker-container,
    body[class*="page-2021-"] #page [id^="layout-"] .row/*,
	.page-2021-1colonne_mosaique #page #zone-6*/
    {
        width: 750px;
        max-width: 100%;
    }
    body[class*="page-2021-"] #page #portal .panel-front.encart-NoMarge {
        width: 100%;
        padding: 0;
    }
}

@media (min-width: 992px) {
    /*     bodybody[class*="page-2021-"] #page>div.container, */
    /* body:not(.page-2021) #page > div.container, */
    body[class*="page-2021-"] #portal .panel-front,
    .page-2021.modele-2022-1-col_texte #portal .panel-front,
    body[class*="page-2021-"].page-Recherche-PAD #readspeaker-container,
    body[class*="page-2021-"] #page.detailstatic #readspeaker-container,
    body[class*="page-2021-"] #page [id^="layout-"] .row/*,
	.page-2021-1colonne_mosaique #page #zone-6*/
    {
        width: 970px;
        max-width: 100%;
    }
    body[class*="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) {
    /*     bodybody[class*="page-2021-"] #page>div.container, */
    /* body:not(.page-2021) #page > div.container, */
    /* body:not(.page-fonds) #portal .panel-front, */
    body[class*="page-2021-"] #portal .panel-front,
    body[class*="page-2021-"].page-Recherche-PAD #readspeaker-container,
    body[class*="page-2021-"] #page.detailstatic #readspeaker-container,
    body[class*="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%;
    }
    body[class*="page-2021-"] #page #portal .panel-front.encart-NoMarge {
        width: 100%;
        padding: 0;
    }
}

@media (min-width: 1600px) {
    /*     bodybody[class*="page-2021-"] #page>div.container, */
    body[class*="page-2021-"] .container,
    /* body:not(.page-2021) #page > div.container, */
    /* body:not(.page-fonds) #portal .panel-front, */
    body[class*="page-2021-"] #portal .panel-front,
    body[class*="page-2021-"].page-Recherche-PAD #readspeaker-container,
    body[class*="page-2021-"] #page.detailstatic #readspeaker-container,
    body[class*="page-2021-"] #page>div.container .container,
    body[class*="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%;
    }
    body[class*="page-2021-"] .frame.hero {
        background: transparent;
    }
    /* gg 11/08/2022 : correction 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;
    }
    /* fin : gg 11/08/2022 : correction hero : */
    .page-2021-1colonne_texte #portal .hero .wrap-img-text.container {
        width: 1200px;
        max-width: 100%;
    }
    body[class*="page-2021-"] #portal #zone-6 .panel-front.encart-NoMarge {
        width: 100%;
        max-width: 1600px;
        padding: 0;
    }
}

body[class*="page-2021-"] #page .panel-front {
    /*! background: transparent; */
    /*! padding: 0; */
}


/* ZONE TITRE HERO */

bodybody[class*="page-2021-"] #page .cms-inner-zone>div[id^="frame-"] {
    margin: 0 !important;
}

bodybody[class*="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;
}

bodybody[class*="page-2021-"] .frame-ermes-carousel.hero .hero,
bodybody[class*="page-2021-"] #page>.contenu .frame.hero .panel-front {
    /*! padding: 3rem 0 166px; */
    margin: 0 auto -90px;
    height: unset;
    min-height: unset;
}

bodybody[class*="page-2021-"] #portal .frame.hero .panel-front {
    /*! margin: 0 auto -90px; */
    /*! margin-bottom: -90px!important; */
    width: 100%;
}

bodybody[class*="page-2021-"] #page>.contenu .frame.hero .panel-front .heroTexte *,
bodybody[class*="page-2021-"] .frame.hero .panel-front .heroTexte * {
    color: #fff;
}

body[class*="page-2021-"] #page .hero .typeDoc,
body[class*="page-2021-"] #page .hero .typeDoc * {
    font-weight: bold;
    font-size: 14px !important;
    text-transform: none !important;
    font-family: 'Source Sans Pro', SourceSansPro !important;
    color: #fff;
}

body[class*="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 */

body[class*="page-2021-"] #page>div.contenu .panel-front,
body[class*="page-2021-"] #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-5 {
    margin-top: 1rem;
}

#zone-5 * {
    text-align: left;
}

.page-2021-2colonnes #zone-4 [id^="frame-"] .frame {
    padding: 1rem 2rem;
}

body[class*="page-2021-"] #zone-4 [id^="frame-"] .frame.sommaire {
    margin: 0 0 1rem!important;
    padding: 0;
}

body[class*="page-2021-"] #zone-4 [id^="frame-"] .panel-front,
body[class*="page-2021-"] #zone-5 [id^="frame-"] .panel-front {
    padding: 0;
}

.page-2021-2colonnes #zone-4,
.page-2021-2colonnes #zone-5 {
    border-radius: 1rem;
    overflow: hidden;
}

@media(min-width:992px) {
    .page-2021-2colonnes #zone-4.col-md-9 {
        width: calc(66% - 1rem);
        margin-right: 1rem;
    }
    .page-2021-2colonnes #zone-4.col-md-8 {
        width: calc(66.66666666666666% - 1rem);
        margin-right: 1rem;
    }
}

body[class*="page-2021-"] #zone-4 [id^="frame-"] .panel-front.aplat,
body[class*="page-2021-"] #zone-5 [id^="frame-"] .panel-front.aplat {
    background-color: #EFEFEF;
    margin-right: 0;
    padding: 1rem;
    border-radius: .5rem;
}

body[class*="page-2021-"] #zone-4 [id^="frame-"] .panel-front.aplat .panel-heading h2,
body[class*="page-2021-"] #zone-5 [id^="frame-"] .panel-front.aplat .panel-heading h2 {
    margin-top: 0;
}


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


/* bouton retour haut page PP  - GG 24/06/2022  */


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

.retourTop {
    display: none;
}

#backtotop {
    background: url(/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: 999;
}

#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(/ui/skins/CIMU/images/backtotop2x.png) no-repeat center center;
        background-size: 50px;
    }
}


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


/* 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;
} */


/* Migration Syracuse 08092022 Christophe : Patch pour création de skip link en urgence, attente d'intégration en xslt */

.skiplink {
    position: absolute;
    z-index: 999999999999999999;
}

.tablink:focus {
    width: 140px;
    text-align: center;
    top: 0;
    left: 0;
    padding: 0 0 6px 0;
}