:root {
    --line-height: 1.5;
    --grid-gap-large:3.750rem;
    --grid-gap-medium:1.875rem;
	--border-radius:60px
    }

a, .formulaire_spip [type="submit"]{transition: all .15s ease-in-out}
.scaleHover img {transition: all .25s ease-in-out}
a:hover .scaleHover img {transform: scale(1.05)}

.item a:hover,.submenu-item:hover {background: rgb(255 255 255 / 0.20)}
.submenu .menu-title:hover {background: rgb(0 0 0 / 0.20)}

.btn--primary:hover {background-color: black;color: var(--second-color)}
.btn--secondary:hover {background-color: white}
:is(.art-chapo, .art-text) a:hover {background-color: var(--main-color); color: white}
.next_prev a:hover {background-color:rgb(0 0 0 / .1)}

/* ===================================================================
 *  RUBRIQUE
 *  ARTICLE
 * ------------------------------------------------------------------- */
.mainGrid {grid-template-columns: .75fr repeat(12, minmax(10px, 1fr)) .75fr}

header .logo {grid-column: 2 / span 4}
.logo a {padding: .875rem 1rem; margin-left: -1rem}
.slogan {
grid-column: 6 / -6;
display: block;
font-size: var(--font-size-14);
letter-spacing: 2px;	
text-align: center;
color: var(--third-color)}
.slogan-side {display: none}
.sidebar .logo {padding: 2rem 1.650rem}
.main {padding-top: 90px}

.slider-header {
grid-row: 1;	
z-index: 1;
grid-column: 1 / span 1;
align-self: center;
background: none}
.slider-header .title {font-size: var(--s4); color: white}
.slider-bg, .slider-header {grid-column: 1 / span 1}
.slider-bg + .slider-bg {grid-column: 2 / span 1}
.slider-header .btn--primary {margin-top: 1.875rem}

.home_seo, .home_domaines {align-items: center}
.seo-header,.seo-picture, .seo-bg, .univers-bg, .zoom-content, .domaines-content, .domaines-bg {grid-row: 1}
.seo-header,.seo-picture, .zoom-content, .domaines-content {z-index: 1}
.seo-header {grid-column: 3 / span 6}
.seo-picture {grid-column: 10 / span 3}
.seo-bg, .univers-bg, .domaines-bg {display:block}
.seo-header h1 {margin-top: 0; margin-bottom: 1.875rem; font-size: var(--s4);font-weight: 400;line-height: var(--line-height-small)}
.seo-header p {margin-bottom: 0; max-width: 75%; line-height: var(--line-height-large)}
.seo-header .btn--primary {margin-bottom: 0}


.home_univers h2, .domaines-content h2 {font-size: var(--font-size-26)}
.home_univers h2 {margin-bottom: 2.5rem}

.home_univers {padding-top:7.5rem; padding-bottom: 7.5rem}
.home_domaines {padding-top:0; padding-bottom: 0}
.univers-content {z-index: 1; align-self: center}
.card-content {--column-count: 4}

.domaines-bg {height: 100%}

.zoom-content {grid-column: 2 / span 5; padding-bottom: 0}
.zoom-content h3 {margin-top: 3.750rem; margin-bottom: 3rem}
.zoom-content h3 a {font-size: var(--s4)}
.domaines-content {grid-column: span 5 / -2; padding: 3.750rem}
.domaines-content li a {padding-top:1.250rem; padding-bottom:1.250rem}

.row_actus :is(.rub-header, .rub-content) {grid-column: 4 / -4}
.row_actus .rub-content {grid-gap: 10%}

.rub-header,
.rub-content {grid-column: 3 / -3}
.rub-content {--column-count: 3}

.page_article-compose article {background: white}
.page_article-compose .art-header {margin-top: 2.5rem; margin-bottom: 2.5rem}
.art-header {grid-column: 2 / span 5}
.art-logo {grid-column: 9 / span 5}
.art-header, .art-logo, .art-bg {
position: relative;
grid-row: 1}
.art-header,.art-logo {
z-index: 1;
align-self: center}
.art-bg {display: block; height: 100%}
.page_article-simple .art-header {grid-column: 5 / -5}
.art-content,
.next_prev nav,
.next_prev .title {grid-column: 4 / -4}
.art-album, .art-album + .art-content {margin-top: var(--grid-gap-large)}
.rang_1, .rang_2, .rang_3, .rang_6, .rang_7, .rang_8 {grid-column: span 4}
.rang_4, .rang_5 {grid-column: span 6}
.art-album img {width: 100%}
.card-logo .date {padding: var(--grid-gap) var(--grid-gap-medium)}
.art-logo,
.art-text picture,
.art-text {--border-radius: 80px}
.art-logo {margin-top: 0}
.art-text {
background: #ececec;	
border-top-right-radius: var(--border-radius);
border-bottom-left-radius:var(--border-radius);	
padding: 12.5%}
.page_article-simple .art-logo {border-top-right-radius:var(--border-radius)}
.page_article-simple .art-text {
border-top-right-radius:0;	
border-bottom-right-radius:var(--border-radius)}

:is(.rub-header, .art-header) h1 {font-size: var(--s4); font-weight: 400}
.rub-content :is(h2, h3) {margin-top: var(--grid-gap);font-size: var(--font-size-18);line-height: var(--line-height)}
.art-text h2 {font-size: var(--s3)}
.art-text h3 {font-size: var(--font-size-26)}
.seo-header h1, :is(.rub-header, .art-header) h1, .art-text h2, .rub-content :is(h2, h3) {hyphens: none}
.art-text :is(p, ul) {color: #444}
.rub-chapo p {max-width: 60%; margin-inline:auto}

.scrollToTop {
margin-top: var(--grid-gap);	
padding-right: 0}

.mentions {grid-column: 2 / span 8}
.social {
grid-column: span 4 / -2;
justify-content: flex-end}
.mentions,
.social {
display: flex;
align-items: center}
footer .brain {display: block}
.mentions div {margin-left: var(--grid-gap)}
.mentions {margin-top:0}

.formulaire_spip :is(input[type=email], input[type=text], select, textarea) {background-color: white}
.coordonnees .editer-groupe {grid-template-columns: 1fr 1fr}
.coordonnees :is(.statut, .adresse) {grid-column: span 2}

@media only screen and (min-width: 80rem) {
.home_univers h3 br {display: none}
}

@media only screen and (min-width: 120rem) {
.main, .navbar {max-width: 120rem; margin-inline:auto}
.navbar {right: calc(((100vw - 120rem) / 2 ) + 260px)}	
.sidebar {right: calc((100vw - 120rem) / 2); overflow: hidden}
.sidebar.close ~ .navbar {
right: calc((100vw - 120rem) / 2);
width: 120rem}
}

@media only screen and (max-width: 99.9375rem) {
.seo-header {grid-column: 2 / span 7}
.seo-picture {grid-column-end: span 4}
.seo-header h1 {font-size: var(--s3)}
.home_univers {padding-top:3.750rem; padding-bottom: 3.750rem}	
.domaines-content {grid-column-start: span 6}
.domaines-content {margin-top: 2.5rem;margin-bottom: 2.5rem;padding: 1.875rem}
.zoom-content h3 a {font-size: var(--s3)}	

.page_article-simple .art-header {grid-column: 4 / -4}		
.art-header {grid-column-end: span 6}
.rub-chapo p {max-width: 80%}
}

@media only screen and (max-width: 79.9375rem) {
:root {
	--grid-gap-large:3rem;
	--grid-gap-medium:1.5rem;
	--border-radius:35px
	}
.mainGrid {grid-template-columns: 1.875rem repeat(12, minmax(10px, 1fr)) 1.875rem}
	
.seo-picture {grid-column-start: 10}
.slider-header .title {font-size: var(--s3)}	
.row_actus :is(.rub-header, .rub-content),
.art-content,.next_prev nav,.next_prev .title {grid-column: 3 / -3}

:is(.rub-header, .art-header) h1 {font-size: var(--s3); font-weight: 700}
.rub-header, .rub-content {grid-column: 2 / -2}	
}

@media only screen and (max-width: 71.9375rem) {
.seo-header {grid-column: 2 / span 7}
.seo-header h1 {font-size: var(--s2);font-weight: bold}
.seo-header p {max-width: 100%}
}