:root {
    --line-height: 1.6750;
    --grid-gap-large:3.750rem;
    --grid-gap-medium:1.875rem;
    }

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.1)}
picture img {width: 100%}

.topnav a:hover,
.dropdown:hover .dropbtn {color: var(--main-color)}
.topnav a.on, .dropbtn.on {background: #e5e5e5; border-radius: 4px}
.topnav a.eshop:hover {background: linear-gradient(to left, #da1e92, var(--main-color))}
.dropdown:hover .dropdown-content {display: block}
.topnav a:hover.logo {background-color: white}
.dropdown-content a {padding: var(--grid-gap-small) var(--grid-gap)}
.dropdown-content a:hover {color: var(--main-color)}
.dropdown-content a.on {background-color: #e5e5e5}

.btn--primary:hover, .btns a:hover {background-color: black; color: white; border-color: black}
.btns a:hover span {color: lightcoral}
.btn--secondary:hover {background-color: rgb(0 0 0 / .2)}
.btn--secondary.light:hover {background-color: rgb(255 255 255 / .2)}
:is(.art-chapo, .art-text) a:hover {background-color: var(--main-color); color: white}
.next_prev nav a:hover {background-color:rgb(0 0 0 / .05)}

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

.page_sommaire, .page_article, .page_rubrique {padding-top: 150px}
header {top: 35px; background: white}
.supHeader {background: black}
.supHeader .content {height: 35px}

@keyframes add-shadow {to {box-shadow: 0 0 15px -5px rgba(0,0,0,.15)}}
@keyframes adjust-width {to {width: 80px}}
@supports (animation-timeline: scroll()) {
	header {animation: add-shadow linear both;}
	.logo img {animation: adjust-width linear both}

	header, .logo img {
		animation-timeline: scroll();
		animation-range: 0 200px;
	}
}

header .logo{
z-index: 5;
grid-column: 7 / -7;
text-align: center}
header .logo a {display: inline-block; padding: var(--grid-gap-small)}
.topnav {
grid-column: 2 / -2;
align-items: center;
justify-content: space-between;
background: white}
.topnav a.logoPhone {display: none}
header .logo, .topnav {grid-row: 1}
.navLeft, .navRight {display: flex}
.topnav a,
.dropdown .dropbtn {
display: block;
padding: var(--grid-gap-small) var(--grid-gap);
text-align: center;
line-height: 1.25em}
.topnav .icon {display: none}
.topnav a.eshop {background: linear-gradient(to left, #000, #222); color: white}

.main-carousel {margin-top: 0}
.main-carousel .carousel-cell {
position: relative;
border-top-left-radius: 100px;	
border-bottom-right-radius: 100px}
.main-carousel .carousel-cell .content {
position: absolute;
z-index: 1;	
left:0;
bottom:0;
padding:var(--grid-gap-large);	
background: none}
.main-carousel .carousel-cell .content p {
font-size: var(--s4);
line-height: 1em;	
letter-spacing: -1px}
:is(.main-carousel, .footer) .carousel-cell br {display: inherit}
:is(.main-carousel, .footer) .carousel-cell .content strong {display: block;font-size: var(--s5);font-weight: 400}
:is(.main-carousel, .footer) .carousel-cell .content i {color: var(--main-color)}
:is(.main-carousel, .footer) .carousel-cell .content span {margin-top: var(--grid-gap-medium)}

.tshirts-carousel .carousel-cell {
width: calc((100% - (2 * var(--grid-gap-large))) / 3);
margin-right: var(--grid-gap-large)}

.home-seo {background: white}
.home-seo h1 {font-size: var(--s3)}
.home-seo .fucking {
grid-row: 2;
grid-column: 2 / span 8}
.home-seo .content {
z-index: 5;	
grid-column: 9 / span 4;
align-self: center}
.home-seo .content,
.home-seo .visuel {grid-row: 1}
.home-seo picture.visuel img {height: 100%}
.home-seo :is(h1, p, .btn--secondary){color: white}

.page_sommaire .fail {margin-top: -15%; mix-blend-mode: multiply}
.fail {grid-template-columns: 2fr 1fr 1fr}
.fail .jaune {grid-row: span 2;grid-column: span 1}
.fail .title {font-size:var(--s5)}
.fail .square .title {font-size:var(--s3); bottom: 2.5rem}

.list-videos, .list-design {--count-column: 3}

.row_actus {
position: relative;
display: flex;
flex-direction: column;
justify-content: center}
.row_actus :is(h2, .h2) {
position: absolute;
top:var(--grid-gap-large);	
left:53.36%}
.card--actus {
display: flex;
align-items: flex-end;
justify-content: space-between}
.card--actus > * {flex:0 1 calc(50% - var(--grid-gap-medium))} 
.card-content--zoom :is(h3, .h3) {font-size: var(--s4)}

.footer {background: var(--beige) url(/squelettes/design/crane.webp) no-repeat left top / auto 100%}
.footer .designer {
grid-column: 4 / -4;
border-top-left-radius: 100px;	
border-bottom-right-radius: 100px;
border-width: 15px}
.footer .left {grid-column: 2 / span 6; text-align: left}
.footer .right {grid-column: span 6 / -2; text-align: right;display: flex;flex-direction: column}
.footer .carousel-cell .content, .footer .right {padding-top: 130px}
.footer .carousel-cell .fucking {position: absolute; left: 115px; top: 0}
.footer .carousel-cell .content p {font-size: var(--s3)}
.footer .carousel-cell .content strong {font-size: var(--s4)}
.designer .skater {display: block;position: absolute;right: var(--grid-gap);top: var(--grid-gap);opacity: .4}

.mentions {margin-top: auto}

.searchBar {
flex-direction: row;
align-items: center}
.searchBar > div,
.searchBar form {
margin-left: var(--grid-gap);
margin-top: 0}

:is(.page_rubrique, .page_article) header {box-shadow: 0 0 100px rgb(0 0 0 / .15)}
.rub-header, .art-header {margin-top: var(--grid-gap-large); padding-top: var(--grid-gap-large)}
.rub-header, .rub-chapo, .art-header, .art-chapo, .art-content, .art-designer, .next_prev {grid-column: 4 / -4}
.t-shirt .art-logo {--count-column: 2}
.t-shirt .art-album.large {--count-column:4}
.t-shirt .art-album.large + .art-album.large {--count-column:2}
.t-shirt .back {display: none}

:is(.rub-header, .art-header) h1,
.art-text h2 {hyphens:none}
:is(.rub-header, .art-header) h1 {font-size: var(--s5)}
.art-text, .rub-chapo p, .art-chapo p, .scrollToTop, .next_prev nav, .art-designer, .art-designer .content, .art-chapo .payment, .art-chapo .btn--highlight {max-width: 75%; margin-inline:auto}
.art-img, .art-album.small {width: 133.333%; margin-left:-16.666%}
:is(.rub-chapo, .art-chapo) p {font-size: var(--s1)}
.t-shirt p, p, h5, li, .texteencadre-spip {font-size: var(--s0)}

.art-designer :is(.content, .scrollToTop) {padding-left: 0;padding-right: 0}

aside {grid-column: span 3 / -3; position: sticky; top: 90px; align-self: start}
.col_aside :is(.art-content, .next_prev) {grid-column: 3 / span 6}
.col_aside :is(.art-text, .scrollToTop, .next_prev nav) {max-width: inherit}
.col_aside :is(.art-img, .art-album.small) {width: 100%; margin-left:0}

.coordonnees .editer-groupe {grid-template-columns: 1fr 1fr}
.coordonnees :is(.statut, .adresse) {grid-column: span 2}

@media only screen and (max-width: 99.9375rem) {
.home-seo .content {grid-column-end: span 5}
.art-text, .rub-chapo p, .art-chapo p, .scrollToTop, .next_prev nav, .art-designer, .art-designer .content, .art-chapo .payment, .art-chapo .btn--highlight {max-width: 85%}
.art-img, .art-album.small {width: 117.647%;margin-left: -8.8235%;}
aside {grid-column: span 4 / -2}
.col_aside :is(.art-content, .next_prev) {grid-column: 2 / span 7}	
}

@media only screen and (max-width: 79.9375rem) {
:root {
	--grid-gap-large:2.875rem;
	--grid-gap-medium:1.5rem;
	}
.mainGrid {grid-template-columns: 1.875rem repeat(12, minmax(10px, 1fr)) 1.875rem}

.home-seo .content {grid-column: 8 / span 6}
.card-content--zoom :is(h3, .h3) {font-size: var(--s3)}	
.fail .autoGrid {--min-column-size: 16rem}
.fail .square .title {font-size: var(--s2);bottom: var(--grid-gap-medium)}	
.card--actus :is(h3, .h3) a {font-size: var(--font-size-18)}
.card--actus > * {flex:0 1 calc(50% - var(--grid-gap))} 
.footer .designer {grid-column: 2 / -2}
	
.rub-header, .rub-chapo, .art-header, .art-chapo, .art-content, .art-designer, .next_prev {grid-column: 3 / -3}	
:is(.rub-header, .art-header) h1 {font-size: var(--s4)}
.art-text h2 {font-size: var(--s3)}
.art-text h3 {font-size: var(--s2)}
	
}