/* DEBUT MODIFICATION CSS */ /* changement sur tout le site / police de caractère */ * { font-family: "Roboto", "Segoe UI","Verdana", "Arial"; } /* police de caractère des éléments paragraphes*/ p, .element-text, .element-text *, p *{ font-family: Garamond, Arial; } /* debut-------------------------------------------------- */ /* enlever la bordure pointillé des liens sur toutes les pages */ a{ border: 0; text-decoration: underline; } ul.navigation a , footer .links a { text-decoration: none; } /* fin------------------------------------------- */ /* taille du content et centrage*/ #content{ width: 80%; display: block; margin: auto; float: none; } /* * Enlève la boite bleue génante lorqu'on clique sur le content */ #content:focus{ outline:0; } /* debut----------------------------------------------------------- */ /* redimension générale */ #home #primary{ margin: 0 !important; padding: 0 !important; } #home #content{ padding: 0; height: auto; margin: auto; } #wrap{ max-width: 100%; padding:0; } /* fin--------------------------------------------------------------- */ /* debut-------------------------------------------------------------- */ /** * background sur toutes les pages , couleurs, image... */ body #wrap{ background-image: url(../logos_img/img/FondFooter.PNG); background-position: bottom; background-size: 100%; background-repeat: no-repeat; } body{ background-color: #fef2df !important; } #home #wrap{ padding-bottom: 9em; } footer{ background-color: #fce6c2; } /* page d'accueil image en fond */ /* */ /* #home #wrap{ */ /* background-image: url(../logos_img/img/accueil1.png); */ /* background-position: center; */ /* background-size: cover; */ /* background-repeat: no-repeat; */ /* */ /* } */ /*debut dans stage 2018 les lignes suivantes etaient actives-------------------------------------------------------------------*/ /* /**background sur toutes les pages, couleurs, image...il faut enlever #home devant le #wrap*/ /*page d'accueil avec image en fond*/ /*#home #wrap{ background-image: url(../logos_img/img/testFond5.jpg); background-position: right; background-size: cover; background-repeat: no-repeat; min-height: 100vh; }*/ /*dans stage2018 la ligne suivante etait en commentaire*/ /*body { background-color: #fef2df !important}; }*/ /*dans stage 2018 les lignes suivantes etaient actives*/ /*#home #wrap{ padding-bottom: 9em; }*/ /*dans stage 2018 lligne suivante etait en commentaire*/ /*footer{ background-color: #fce6c2; }*/ /*fin --------------------------------------- */ /* fin--------------------------------------------------------------------- */ /** * PAGE D'ACCUEIL : boites, placement, couleur */ /* debut-------------------------------------------------------------------------------------------------------------- */ /* page d'accueil boites, contenu recents sur la droite et sous boites en dessous pour les contenus en avant */ #home #primary > *, #home #secondary > *{ background-color: rgba(255, 255, 255, 0.7); padding: 1em; display: inline-block; margin : 10px; max-width: 100%; } /*stage 2018 les lignes suivantes etaient actives*/ /* #home #primary .homepage-text { margin: auto; margin-top: 150px; color: white; background-color: transparent;*/ /*la ligne suivante etait en commentaire dans stage 2018*/ /*background-clip: text;*/ /*stage 2018 les lignes suivantes etaient actives*/ /*} #home #primary .homepage-text h1{ font-size: 50px; } #home #primary .homepage-text h3 { font-size: 25px; } @media screen and (max-width: 500px){ #home #primary .homepage-text h1 { font-size: 40px; } #home #primary .homepage-text h3 { font-size: 20px; } } */ #home #primary img{ max-width: 100%; } #home #primary .homepage-text img{ width: 100%; height: auto; } /* enlève tout ce qui n'est pas dans une div car le texte de page d'accueil se retrouve par defaut avec des balises vides */ #home #primary > *:not(div){ display: none; } #home #content{ display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; } #home #primary{ flex-shrink: 1; flex-grow: 1; flex-basis: 70%; } #home #secondary{ flex-shrink: 1; flex-grow: 1; flex-basis: 28%; padding: 0 !important; } #home #primary{ display: flex !important; flex-flow: row wrap; } #home #featured-item, #home #featured-collection, #home #featured-exhibit{ flex-shrink: 1; flex-grow: 1; flex-basis: 30%; min-width: 200px; } /* fin----------------------------------------------------------- */ /* debut----------------------------------------------------------------------- */ /* correction de bug image contenus récents, l'image pouvait déborder en longueur */ #primary div.record a.image, #secondary div.record a.image{ max-width: 200px; height: auto; max-height: 100px; float: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #primary div.record a.image img, #secondary div.record a.image img{ max-width: 200px; object-fit: contain; max-height: 100px; } /*dans stage 2018 les lignes suivantes etaient actives*/ /* #home #search-container {*/ /*dans stage 2018 les 2 lignes suivantes etaient en commentaire*/ /*position: relative; top: 20em;*/ /*dans stage2018 la ligne etait active*/ /*margin-top: 50px; }*/ /* fin------------------------------------------------------------------------------- */ /* paragraphes dans les boite de l'accueil (valable pour les contenus en avant et les ajoutés recemments)*/ #home div.record p{ line-height: 20px; text-align: justify; } /* debut---------------------------------------------------------------------------------------------- */ /* Tout le bloc sert à changer le texte des titres de contenus en avant de la page d'accueil */ /* #home #primary div[id^=featured] > h2{ */ /* display: none; */ /* } */ /* #home #primary div[id^=featured]:before{ */ /* font-size: 24px; */ /* font-weight: 700; */ /* color: black; */ /* } */ /* #home #primary div[id^=featured] .record{ */ /* margin-top: 5px; */ /* } */ /* #home #primary div#featured-exhibit:before{ */ /* content: "Expositions"; */ /* */ /* } */ /* div#featured-collection:before{ */ /* content: "Collection mise en avant" */ /* } */ /* */ /* div#featured-item:before{ */ /* content: "Site de la semaine"; */ /* } */ /* fin -------------------------------------------------------------------------------------------------- */ /* fin page d'accueil */ /* ---------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------- ---------------------------------- Page parcourir les contenus-------------------- ---------------------------------------------------------------------------------- */ /* debut ------------------------------------------------------------------ */ /* image à droite */ /* div.item.hentry { padding-bottom: 0; } div.item.hentry .item-meta .item-img{ margin-bottom: 0; float: right; position: relative; top: -3em; } div.hentry h2{ vertical-align : top; } */ .items.browse .item-meta .item-description{ text-align: justify; } /* fin-------------------------------------------------------------------- */ /** * Page de recherche : * pour les images (rétrecir et limiter) */ /* retrecit le #content des pages de recherche, recherche avancée et recherche par mot-clé */ body.browse:not(.map) #content, body.advanced-search #content, body.tags #content { width: 50%; } /* recherche avancée, cacher certains champs */ .items.advanced-search #primary-nav #search-container, .items.advanced-search #advanced-search-form .field:nth-of-type(3), .items.advanced-search #advanced-search-form .field:nth-of-type(5), .items.advanced-search #advanced-search-form .field:nth-of-type(6), .items.advanced-search #advanced-search-form .field:nth-of-type(7), .items.advanced-search #advanced-search-form .field:nth-of-type(9) { display: none; } /*dans stage 2018 les lignes suivantes sont absentes si elles sont activées un ascenseur apparait dans restreindre à des champs particuliers quand on clique sur ajouter un champ*/ /*.items.advanced-search .inputs *{ font-size: 12px; line-height: 12px; } .items.advanced-search .inputs { width: 60% !important; float: none; margin: auto; height: 1em; } .items.advanced-search #search-narrow-by-fields .inputs{ width: 100% !important; } #advanced-search-form .field label, #advanced-search-form .field .label{ margin: 0; margin-bottom: 1em; width: 100%; } .items.advanced-search #advanced-search-form .field{ padding: 5px; } .items.advanced-search .two.columns.alpha{ width: 100%; }*/ /* fin page recherche -------------------------------------------------------------------------------------------------------------------- */ /** * * * Page item * * */ /* Tous les titres des champs dans une page item et tous les sous textes, pour les mettre en ligne */ .element-set .element h3, .element-set .element-text{ display: inline-block; } /*stage 2018 les lignes suivantes etaient actives*/ /*pactols sujets sur 1 ligne par sujet*/ /*.element-set #ageferprovence-item-type-metadata-pactols-sujets .element-text { width: 48%; vertical-align: middle; position: relative; bottom: 1.4em; }*/ /*pactols sujets pour avoir sur une meme ligne le terme et son ark et que le terme sur les lignes suivantes ne revienne pas completement a gauche mais sous la premiere ligne */ /*.element-set #ageferprovence-item-type-metadata-pactols-sujets .element-text:nth-of-type(odd) { padding-left: 8.3em; } @media screen and (max-width: 1000px){ .element-set #ageferprovence-item-type-metadata-pactols-sujets .element-text { position: static; } .element-set #ageferprovence-item-type-metadata-pactols-sujets .element-text:nth-of-type(odd) { padding-left: 0; } } .element-set #ageferprovence-item-type-metadata-pactols-sujets h3 { width: 100%; } */ /**/ .item.show h3, .item.show h2{ font-size: 16px; line-height: 20px; margin-bottom: 5px; } /* Pour mettre les deux points après le titre */ .item.show .element h3:after, .item.show .element h2:after { content: " :"; } /* certains champs sont dans un paragraphe */ .item.show .element-text p { margin: 0; } /* jusitifer la description (et la présentation du site) */ #sites-mdivaux-item-type-metadata-presentation-du-site .element-text, #dublin-core-description .element-text { text-align: justify; } /* mettre un point-virgule entre les champs en ligne */ .item.show .element-set > div > .element-text > *:after { content: ";"; } /* enlève le point virgule sur le dernier élément des champs en ligne */ .item.show .element-set > div > .element-text:last-of-type > *:after { content: ""; } /* corrige le fond blanc des icones google maps sur la page item*/ #geolocation img{ background-color: transparent !important; } div#geolocation{ margin-bottom: 1em; float: right; } /* debut formats de sortie -------------------------------- */ /* formats de sortie en ligne (xml- atom ect ...)*/ #item-output-formats li{ display: inline-block; } ul#output-format-list{ padding-left: 0; margin-top: 0; } /* insère le tube entre chaque élément */ #item-output-formats li:after{ content: " | "; } /* enlève le tube après le dernier élément */ #item-output-formats li:last-of-type:after { content: ""; } /* fin formats ---------------------------------------- */ /* enlève les cases vides du tableau item-relation */ #item-relations-display-item-relations tr:nth-child(n+2) td:first-child{ display: none; } /* place le texte sur la moitié de la page et la carte et les images sur l'autre */ .item.show #content > .element-text:first-of-type { width: 48%; float: right; } .item.show .element-set > div{ width: 48%; } .item.show .item-file img{ max-width: 100%; /*dans stage 2018 la ligne suivante est active*/ /*height: auto !important;*/ } /*dans stage 2018 les lignes suivantes sont actives*/ /* .item.show .item-pagination.navigation{ width: 100% } .item.show .youtube-embed{ height: 25vw; } @media screen and (max-width: 867px){ .item.show .youtube-embed{ height: 50vw; } } */ /* fin page item-------------------------------------------------------------------------------------------------------------------- */ /* * * CAROUSEL page item * */ .jcarousel-wrapper a{ cursor: pointer; -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; } .jcarousel, .jcarousel ul{ height: 100%; display: table; } .jcarousel .carousel-item{ float: none; display: table-cell; height: 100%; vertical-align: middle; } .jcarousel .item-file{ height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .jcarousel img{ max-height: 70vh; } .jcarousel-pagination{ position: static; /* -webkit-transform: none; */ margin: auto; display: table; } .jcarousel .titre{ min-height: 3em; } /* fin carousel------------------------------------------------------------- */ /* tous les items-files qui ne contiennent pas image dans le nom de classe (pdf, txt...) */ .item-file:not([class*="image"]) *{ max-height: 10em; } /*dans stage 2018 les lignes suivantes sont actives*/ /* tous les items-files qui ne contiennent pas image dans le nom de classe (pdf, txt...) */ /* .item-file:not([class*="image"]) *{ display: inline-block; max-height: 10em; width: 5em !important; } .item-file.application-pdf { width: 5em; display: inline-block; margin: 5px; } .item-file.application-pdf :before{ content: "pdf associé"; font-family: Roboto; font-size: 12px; font-weight: bold; } */ /* les titres en dessous de chaque fichier associé à l'item */ .item-file h4{ font-size: 12px; } /* ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------- page carte -- géolocalisation -- geolocation ------------------- */ /* ---------------------------------------------------------------------------------------------------- */ /* * corrige le responsive de la page carte: */ select, textarea, input{ max-width: 100%; } /* dimension les lignes de la */ div#map-links ul{ line-height: 15px; } div#map-links ul li{ line-height: 20px; margin-bottom: 0; } /* image de la bulle d'info, pour que cela ne déborde pas */ .gm-style-iw img { max-height: 150px !important; max-width: 100% !important; } /* fin geolocalisation--------------------------------------------------------------------------------------- */ /* * * * Redimension de la page générale * * */ #search-form{ height: 2em; margin-bottom:0; } /* redimensionne le nav*/ #primary-nav{ width: 20%; float: none; display: inline-block; vertical-align: top; } /** * * * * Redimension résultats solr search * - limiter avec un scroll + rendre responsive * * * */ #solr-facets ul{ margin: 0; /* permet d'afficher la barre de scroll seulement quand necessaire*/ overflow: auto; padding-left: 15px; font-size: 12px; /* pour que la hauteur fasse 10 lignes */ max-height : 200px; list-style-type: none; } #solr-facets li{ line-height: 20px; /* Taille d'une ligne , important pour le max height de ul*/ } /* titres des facettes */ #solr-facets strong { border-bottom: solid 1px grey; display: block; margin-bottom: 10px; font-size: 15px; -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; height: 20px; } #solr-facets span { display: inline-block; } .facet-value{ border-bottom: none; } #solr-facets{ display: inline-block; float: none; vertical-align: top; width: 14em; padding-left: 1em; } #solr-facets h2{ font-size: 15px; } #solr-results{ margin-left: 10px; display: inline-block; vertical-align: top; width: calc(90% - 14em); font-size: 14px; } #num-found{ font-size: 20px; } .result .gallery div{ display: inline-block; width: 10%; height: auto; overflow: hidden; margin: 5px; padding: 5px; border: solid 1px black; } .result .gallery div a { border-bottom: none; } .result .gallery div img{ width: 100%; height: 100%; object-fit: scale-down; } /** * classes javascripts (solr) */ /* facettes "afficher plus"*/ div.more{ font-size: 12px; cursor: pointer; font-weight: bold; margin: 5px; } div.more:hover{ text-decoration: underline; } /* fin solr------------------------------------------------------------------------- */ /* * * * * navigation - navbar * * */ /* * correction menu mobile */ div.menu-button.button{ max-width: 100%; margin: 0; } /* barre de recherche arrondie*/ div#search-container input#query { border-radius: 15px; } #search-container button{ border-radius: 0 15px 15px 0; border: outer solid 1px black; } /* Deux différentes navbar */ /* ------------------------------------------------------------------------------------------------- début navabr colonne*/ /* NAV BAR COLONNE */ /* li.nav-item{ */ /* background-color: rgba(240, 240, 240, 0.9) !important; */ /* border-radius: 10px; */ /* margin-bottom: 10px; */ /* box-shadow: 2px 2px 2px black; */ /* } */ /* li.nav-item:hover{ */ /* background-color: white !important; */ /* } */ /* li.nav-item a{ */ /* border: 0! important; */ /* } */ /* .nav-menu{ */ /* border: 0 !important; */ /* } */ /* #primary-nav{ */ /* margin-left: 1em; */ /* } */ /* @media screen and (min-width: 767px){ */ /* ul.navigation.nav-menu{ */ /* display: block !important; */ /* } */ /* } */ /* #content{ */ /* display: inline-block !important; */ /* width: 75%; */ /* margin: 0 !important; */ /* } */ /* --------------------------------------------------------------------------------------------------fin navbar colonne - début navbar ligne */ /* NAV BAR LIGNE + barre de recherche au milieu */ #primary-nav{ margin: 0; width: 100%; display: block; } ul.navigation.nav-menu{ height: 1em; background-color: #fafafa; height: auto; display: flex; flex-flow: row wrap; font-size: 15px; border-bottom: solid 1px #ccc; } ul.navigation.nav-menu li.nav-item{ vertical-align: top; height: 100%; width: auto !important; background-color: #fafafa !important; } ul.navigation.nav-menu li.nav-item a:hover, ul.navigation.nav-menu li.nav-item.active a{ color: orange !important; } ul.navigation.nav-menu li.nav-item a { text-align: center; width: auto; border: solid 1px #ccc; word-break: keep-all; padding-top: 5px !important; padding-bottom: 5px !important; } ul.navigation.nav-menu li.nav-item:last-child a { border-right: solid 2px #ccc; } /* enleve le symbole fleche devant les items du menu */ #primary-nav ul.navigation > li a:before{ content:""; } /* redimmensionne la barre de recherche sur toutes les pages */ #search-container{ width: 30em; margin: auto; margin-top: 1em; } /* cache la deuxieme barre dans la page solr search */ #solr-search-form{ display: none; } /* ----------------------------------------------------------------- */ /* ----------------mettre navbar ligne au milieu sans bordures------------ */ /* ----------------------------------------------------------------- */ ul.navigation.nav-menu{ justify-content: center; border: 0; } ul.navigation.nav-menu li a { border: 0 !important; color: #603416; font-weight: bold !important; } /* ----------------------------------------------------------------- */ ul.navigation.nav-menu li a:hover{ font-weight: bold !important; } /* corrige le bug qui faisait que le menu mobile faisait disparaitre le menu une fois la fenetre agrandie de nouveau */ @media screen and (min-width: 767px){ ul.navigation.nav-menu{ display: flex !important; } } /* ------------------------------------------------------------------------------------------------------ fin navbar ligne */ /* header - BANDEAU - bannière*/ header { border: none; background-position: left top !important; /* background-attachment: fixed; */ /* ---- mettre le logo du site au milieu du header verticalement */ display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; position: relative; } /*dans stage 2018*/ /*---- mettre le logo du site au milieu du header verticalement */ /*display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; position: relative; height: 50px; } */ /*pour hiscant */ header{ height: 254px; height: calc(100vw / 1922 * 254); background-size: contain !important; } /* icones dans le header (.header-icons est le conteneur)*/ header .header-icons{ position: absolute; bottom: 5px; height: 40px; width:100%; z-index: 1000; } .header-icons img{ box-sizing: border-box; max-height: 90%; float: right; margin: 0 15px; } .shareMenu{ background-color: white; position: absolute; top: 45px; right: 5px; display: none; overflow: hidden; max-width: 220px; height: auto; border-radius: 10px; padding: 5px; box-shadow: 1px 1px 1px black; } .shareMenu div{ height: auto; width: 200px; margin-bottom: 5px; background-color: rgb(209, 208, 208); box-shadow: 1px 1px 1px black; border-radius: 10px; padding: 5px; cursor: pointer; } .shareMenu a { text-decoration: none; } .shareMenu h6{ margin: 0; font-size: 13px; font-weight: bold; font-style: normal; color: grey; text-align: center; width: 80%; } .shareMenu img{ width: auto; max-width: 50px; height: auto; max-height: 1.5em; } /* logo du site dans le header*/ /* pour enlever le débordement du logo du header sur la navbar, enlever l'instruction "top: 50px;" */ #site-title{ max-height: 150px; /*dans stage 2018 max-height: 100%;*/ z-index: 10; position: relative; bottom: 5px; padding: 0; /* top: 50px; */ } #site-title img{ max-height: 150px; width: 22vw; margin-left: 5vw; } /*dans stage 2018 pour image du site-title*/ /* #site-title img{ max-height: 200%; width: 22vw;*/ /*dans stage 2018 la ligne suivante etait en commentaire*/ /*margin-left: 5vw;*/ /*height: 50px; object-fit: contain; margin-top: 10px; position: relative; top: 0px; } */ .shareMenuFleche{ float: right; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; } /* fin header ------------------------------------------------------------------------------------------- */ #wrap{ min-height: calc(100vh - 10em) } /* ----------------footer - pied de page-------------------------- */ footer{ /* couleur du texte */ color: black; /* intensité du gras sur le texte */ font-weight: 550; border-top: none; padding: 10px; /* box-shadow: 0 -2px 2px -1px black; */ padding: 0; } footer p { float: none; margin: 0; width : -moz-max-content; width : max-content; width: -webkit-max-content; width: -o-max-content; width: -ms-max-content; padding-left: 1em; } div#footer-text a{ border:0; } div#footer-text div.footer-logos{ /*le flex permet de bien répartir les logos et cela reste responsive*/ display: flex; justify-content: space-around; flex-flow: row wrap; align-items: center; } /* si cette ligne est utilisée, reparti différement les logos du footer (chaque boite fera la même longueur) */ #footer-text .footer-logos span { flex: 1 0 auto; /* width: 30%; */ } #footer-text .footer-logos a { display: table; margin: auto !important; vertical-align: middle; } div#footer-text img{ /*les marges autour des logos évitent qu'ils ne se touchent*/ margin-left: 0.5em; margin-right: 0.5em; margin-top: 10px; margin-bottom: 10px; /*ci-dessous, dimensions imposées aux logos*/ max-height: calc(6em); max-width: calc(12em); object-fit: scale-down; vertical-align: middle; } @media screen and (max-width: 768px){ #footer-text .footer-logos span { box-sizing: border-box; flex: none; width: auto; height: auto; max-width: 30%; } div#footer-text img{ /* box-sizing: border-box; */ height: 100%; width: 100%; max-height: 4em; max-width: 90%; } } /* Correspond au paragraphe "Fièrement propulsé par Omeka" */ #footer-text p:last-of-type{ margin-left: auto; margin-bottom: 0; display: table; width: auto; display: none; } #home #footer-text p:last-of-type{ display: table; } /* liens du footer */ #footer-text .links{ margin-bottom: 1em; display: flex; flex-flow: row wrap; justify-content: center; } #footer-text .links a{ margin-left: 3em; margin-right: 3em; color: #603416; font-weight: bold; } #footer-text .links a:hover{ color: orange; } /* fin footer -------------------------------------------------------------------------------------- */ /* * Page exposition : justification du texte * */ #exhibit-blocks > .layout-file-text > p, #exhibit-blocks > .layout-text > p { font-weight: normal; font-size: 15px; line-height: 20px; text-align: justify; } /*modification VBD 7 06 2018*/ #exhibit-blocks > .layout-text .Texte> p { font-weight: normal; font-size: 15px; line-height: 20px; text-align: justify; } /*fin de modification*/ /*dans stage 2018 */ /* * Page exposition : justification du texte #exhibit-blocks > .layout-text > p { font-weight: normal; font-size: 15px; line-height: 20px; text-align: justify; } */ /*--------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* formulaire de contact retreci en largeur*/ #contact-form { width: 60%; margin: auto; } /*modification VBD 13 juin 2018 reduction du send*/ #contact-form #send { width: auto; } /*modification VBD 13 juin 2018*/ @media screen and (max-width: 800px){ #contact-form { width: 100%; } } /* -------------------------------------------------------------------------------------------------------------------- */ /** * * * MEDIA SCREENS * */ @media screen and (max-width: 1000px){ #content{ width: 100%; } } /*dans stage 2018*/ /* @media screen and (max-width: 1000px){ #content{ width: 100%; padding: 1em; } } */ @media screen and (max-width: 768px){ #primary-nav{ width: 100%; } #primary-nav ul{ width:100%; padding:0; margin: 0 !important; } #solr-search-form{ display: none; } #content{ width: 100% !important; padding: 1em; } div#geolocation{ float: none !important; width: auto !important; } /*dans stage 2018*/ /* .item.show #content > .element-text:first-of-type { width: 100%; float: none; } .item.show #content > div{ width: 100%; } */ #site-title{ top:0; } #search-container{ width: 80% !important; } /* header du site, pour le réduire quand la page est petite, pour hiscant */ header{ height: 100px; background-size: 280% 100% !important; } header .header-icons{ height: 30px; } header #site-title img{ width: 200px; max-width: 100%; } } @media screen and (max-width: 500px){ h1,h2,h3{ font-size: 20px; } #solr-results{ width: 100%; } #solr-facets{ width: 80%; } #solr-facets strong{ background-color: lightblue; height: 2em; line-height: 2em; padding-left: 1em; } #solr-facets strong:after{ display: block; position: relative; top: -2em; content: url("../images/white_arrow_ie.png"); text-align: right; padding-right: 2em; color: white; width :100%; height: 100% } header #site-title{ position: absolute; top: 0; } }