/* La barre latérale */ #header { background: var(--couleur-fond-sidebar) [url("(#CHEMIN{images/overlay.png})")];} #logo { padding-left: 60px; } #logo a { display: block; border: 0; } #logo #title { position: relative; color: #fff; font-weight: 500; font-size: 1em; line-height: 1em; } /* Le menu burger */ #headerToggle .toggle:before { background: rgba(128, 136, 144, 0.5) [url("(#CHEMIN{images/bars.svg})")] no-repeat center; background-size: 30%; } /* La navigation principale */ #nav span { position: relative; padding-left: 40px; line-height: 1.2em; text-wrap: balance;} #nav i { position: absolute; left: 0; top: 50%; transform: translate3d(0,-50%,0) ; } #nav ul li a.active, #nav ul li a:hover, #nav ul li a:active, #nav ul li a:focus { color: #fff;} #nav ul li a.active svg, #nav ul li a:hover svg, #nav ul li a:active svg, #nav ul li a:focus svg { fill: var(--couleur-emphase);} #nav svg { fill: var(--couleur-estompe);} /* Les pictos sociaux */ #header .sociaux { text-align: center; } #header .sociaux .socicon { font-size: 0.8em; color: var(--couleur-estompe); background-color: transparent !important; transition: color 0.2s;} #header a:hover .socicon, #header a:active .socicon, #header a:focus .socicon { color: #fff; } /* L'entête des pages */ #top { position: relative;} #top::before { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3);} #top .container { position: relative; z-index: 10; } #top header { color: #fff; text-align: center; text-shadow: 0 0 15px #000; } #top h1 { color: inherit; font-size: 2em; letter-spacing: -1px; } [(#REM) L'image d'entête : on affiche l'image sélectionnée dans le formulaire de configuration ou, à défaut, l'image du thème original ]#main > section.one { padding: 5em 0; background-color: #81918E; [background-image: url('(#FICHIER|image_reduire{2000}|extraire_attribut{src})');] [background-image: url("(#CHEMIN{images/banner.jpg})");] } .page_sommaire #main > section.one { padding: 10em 0; } #top a.suite { font-size: 1.5em; border: 0; } #top a.suite svg { transition: fill 0.2s, transform 0.2s; } #top a.suite:hover svg { fill: var(--couleur-emphase); transform: translate3d(0, 0.25em, 0); } /* Le contenu central */ [#main > section { background-image: url("(#CHEMIN{images/overlay.png})");}] #main > section.contenu { text-align: left;} /* Divers */ .container { max-width: 1000px;} .image img { margin: 0; } picture.adapt-img-wrapper { vertical-align: top;} li.item { margin: 0; padding: 0; box-shadow:none; } a { transition: color 0.2s; } svg { transition: fill 0.2s; } .spip_document .spip_doc_lien { border: 0; } /* boutons et icones */ .button:not(.primary) { background-color: transparent; border: 2px solid var(--couleur-bouton); color: var(--couleur-bouton) !important; } a.icone { border: 0; } /* Le portfolio */ ul.portfolio { display:flex;flex-wrap:wrap; justify-content:center; padding: 0; list-style: none; } ul.portfolio li { margin:0.5em; } ul.portfolio li a, ul.portfolio li a:hover, ul.portfolio li a:active, ul.portfolio li a:focus { text-decoration:none; } ul.portfolio li figure { margin:0; } ul.portfolio li small { font-size: 0.75em; } /* Les documents joints */ .documents_joints ul, .documents_joints li { padding: 0; list-style: none; } .documents_joints ul .spip_logo { float: left; margin: 0 1em 0 0; } .documents_joints .publication { font-size: 0.75em; } /* LA PAGINATION */ .pagination .pagination-items { list-style: none; display: flex; flex-direction: row; justify-content: center; } .pagination .pagination-item { margin: 0em; flex-basis: 7.5%; display: flex; align-items: center; color: var(--couleur-emphase); } .pagination .pagination_precedent_suivant .pagination-item { flex-basis: auto; } .pagination .pagination-item + .pagination-item { margin-left: 0.5em } .pagination .pagination-item-label { display:block; flex-basis: 100%; text-decoration: none; padding:.5em; text-align: center; } .pagination li .pagination-item-label { color: var(--couleur-emphase); border: 1px solid var(--couleur-emphase); transition: background 0.2s; } .pagination ul:not(.pagination_precedent_suivant) li.prev .pagination-item-label, .pagination ul:not(.pagination_precedent_suivant) li.next .pagination-item-label { color: inherit; background: inherit; border: inherit; } .pagination span.pagination-item-label.on, .pagination a.pagination-item-label:hover, .pagination a.pagination-item-label:focus, .pagination a.pagination-item-label:active { background: var(--couleur-emphase); color: #fff; text-decoration: none; } .pagination .disabled.tbc { visibility: inherit; } .pagination .disabled span.pagination-item-label { background: transparent; color: #999;} /* Les formulaires */ input[type="checkbox"] { margin:0 0.5em 0 0; opacity:1; -moz-appearance:checkbox; -webkit-appearance:checkbox; -ms-appearance:checkbox; appearance:checkbox; } /* Le formulaire de login */ #formulaire_login .editer_session .choix { display: flex; } #formulaire_login .editer_session label { margin: 0; } /* Le formulaire de contact */ #formulaire_contact fieldset { margin-top: 0;} #formulaire_contact label[for=infolettre] { display: flex; align-items: baseline;} /* Le formulaire de recherche */ #formulaire_recherche { margin: auto; max-width: 750px;} #formulaire_recherche, #formulaire_recherche input#recherche { text-align: center;} #formulaire_recherche input.submit { margin-top: 0.5em;} /* Reset des listes et menus*/ ul.menu-items, ul.liste-items, ul.breadcrumb-items { margin-bottom:0; list-style:none; } ul.menu-items > li.item, ul.breadcrumb-items > li.item { display:inline-block; } ul.liste-items a:link, ul.menu-items a:link, ul.breadcrumb-items a:link { text-decoration:none; } ul.liste-items a:link { display:block; } /* Les grilles */ ul.grille { margin-bottom: 30px; padding: 0; } ul.grille > li.item header {padding: 1em 0.5em; text-align: center; width: 310px;} ul.grille h3 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} @media (max-width: 767px) { ul.grille > li.item { max-width: 310px; margin: 0 auto 15px auto;} } @media (min-width: 768px) { ul.grille { display: grid; gap: 35px; grid-template: "a b c" auto "d b f" auto "d e f" auto "g h i" auto "j h l" auto "j k l" auto "m n o" auto "x n z" auto / 1fr 1fr 1fr } ul.grille > li:nth-of-type(1) { grid-area: a; } ul.grille > li:nth-of-type(2) { grid-area: b; } ul.grille > li:nth-of-type(3) { grid-area: c; } ul.grille > li:nth-of-type(4) { grid-area: d; } ul.grille > li:nth-of-type(5) { grid-area: e; } ul.grille > li:nth-of-type(6) { grid-area: f; } ul.grille > li:nth-of-type(7) { grid-area: g; } ul.grille > li:nth-of-type(8) { grid-area: h; } ul.grille > li:nth-of-type(9) { grid-area: i; } ul.grille > li:nth-of-type(10) { grid-area: j; } ul.grille > li:nth-of-type(11) { grid-area: k; } ul.grille > li:nth-of-type(12) { grid-area: l; } ul.grille > li:nth-of-type(13) { grid-area: m; } ul.grille > li:nth-of-type(14) { grid-area: n; } ul.grille > li:nth-of-type(15) { grid-area: o; } }