:root {
    --ratio: 1.3;
    --line-height: 1.45;
    --grid-gap-large:.9375rem;
	--text-base-size: 1.125em
    }

.py4 {padding-top: 1.875rem;padding-bottom: 1.875rem}.pt4 {padding-top: 1.875rem}.pb4 {padding-bottom: 1.875rem}
.my4 {margin-top: 1.875rem;margin-bottom: 1.875rem}.mt4 {margin-top: 1.875rem}.mb4 {margin-bottom: 1.875rem}
.py3 {padding-top: .9375rem;padding-bottom: .9375rem}.pt3 {padding-top: .9375rem}.pb3 {padding-bottom: .9375rem}
.my3 {margin-top: .9375rem;margin-bottom: .9375rem}.mt3 {margin-top: .9375rem}.mb3 {margin-bottom: .9375rem}
.py2 {padding-top: .5rem;padding-bottom: .5rem}.pt2 {padding-top: .5rem}.pb2 {padding-bottom: .5rem}
.my2 {margin-top: .5rem;margin-bottom: .5rem}.mt2 {margin-top: .5rem}.mb2 {margin-bottom: .5rem}

#wrap {z-index: 20; background: white; transition: transform .4s cubic-bezier(.25, .1, .25, 1);}
#wrap:not(:target) {transform: translate3d(-100%, 0, 0);}
#wrap:target {transform: translate3d(0, 0, 0);}
#wrap:target #open,
#wrap:not(:target) #close {display: none}
#wrap:target #open {display: none}

.header {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width:100%}
.navBar {z-index: 15}
.header, .header .subNav {text-align: center}
.header .logo {margin-top: 1.875rem}
.header .subNav li {display: block}

.mainGrid {grid-template-columns: [left-gutter] 1.250rem [grid-content] calc(100% - 2.5rem) [right-gutter] 1.250rem}
.autoGrid {grid-auto-flow: row; grid-template-columns: repeat(2,1fr)}

.btn--primary {
line-height: 30px;
padding-left: 1.250rem;
padding-right: 1.250rem}

.dropbtn {
margin-top: .250rem;
margin-bottom: .250rem;
font-size: 1.250rem}
.dropbtn[aria-current] {background: #eee}

.page_sommaire,
.page_rubrique,
.page_article {padding-top: 48px}

.home_seo {padding-bottom: .9375rem}
.home_spectacles .detail {
margin-top: .9375rem;
margin-bottom: 0}
.home_spectacles.ss-creations h2 {margin-top: .250rem}

.rub--list-items {padding-top: 0;margin: 0}
.art-item {padding-top: 0}

.ss-creations h2 {
margin-top: .9375rem;
font-size: var(--s1)}	

:is(.rub-header, .art-header) h1,
.art-text h2,
.art-text h3 {
word-break: break-word;
hyphens: auto}
:is(.rub-header, .art-header) h1 {font-size: var(--s3)}
.art-text h2 {}   
.art-text h3 {} 
.art-text h4 {}
.art-text h5 {}
:is(.rub-header, .art-header) h1,
.art-text :is(h2, h3, h4, h5, h6) {line-height: var(--line-height-small)}
:is(.art-chapo, .rub-chapo) p {font-size: var(--s1)}
.art-content {margin-top: 2.5rem}
.art-text :is(p, ul, h2, h3, h4, h5, h6, .texteencadre-spip, blockquote, table) {margin-top: .875em}
.art-text .texteencadre-spip {padding: 0.9375rem;border-radius: 15px}

.precedent,.suivant {border: none}
.precedent + .suivant {margin-top: .5rem}

tr { 
display: flex; 
flex-direction: column}
td:first-child {padding-bottom: 0}
td:nth-child(2){margin-bottom: .5rem}
td {width: 100%}
 
.mentions {
margin-top: .5rem;
text-align: left}

.formulaire_spip legend {padding: 1.5rem .9375rem}
.formulaire_spip fieldset {
padding: 0;
border-right:0;
border-left: 0;
border-bottom: 0}

.coordonnees,
.demande .editer {margin-bottom: 0}
.demande .editer-groupe,
.coordonnees .editer {width: 100%;padding: 0}
.formulaire_spip select {width: 100%}

@media only screen and (max-width: 29.9375rem) {
.autoGrid {grid-auto-flow: row; grid-template-columns: 1fr}
}