*,::before,::after{box-sizing:border-box}*{margin:0}html,body{height:100%}html{scroll-behavior:smooth}body{line-height:1.5;-webkit-font-smoothing:antialiased}picture,video,canvas,svg{display:block;max-width:100%;margin:0;line-height:0}picture{max-width:inherit}img{display:inline-block;vertical-align:middle;max-width:100%;height:auto;object-fit: cover;line-height:0;font-style:italic;shape-margin:0.75rem;}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul{margin:0;padding:0;list-style:none}a{display:inline-block;text-decoration:none;color: black;line-height: var(--line-height)}#root,#__next{isolation:isolate}

:root {
--main-color : #d10c22;
--beige : #e3dcd9;
--jaune : #ffc227;
--jaune-light : #fffd77;
--fraise : #dc6e60;
--lilas : #9682ad;
--gris : #949494;
--vert : #75aca2;
--vert-prairie : #8fcb9b;
--bleu : #48b5be;
--bleu-e : #3e6bde;

--grid-gap-large:1.5rem;
--grid-gap-medium:1.125rem;
--grid-gap:.9375rem;
--grid-gap-small:.5rem;
    
--font-primary: 'Domine', serif;
--font-secondary: 'Oswald', sans-serif;
--text-base-size: 1em;
--body-line-height: 1.5em;

--font-size-80: 5rem;
--font-size-70: 4.375rem;
--font-size-60: 3.750rem;
--font-size-50: 3.125rem;
--font-size-40: 2.5rem;
--font-size-30: 1.875rem;
--font-size-26: 1.750rem;
--font-size-24: 1.5rem;
--font-size-20: 1.250rem;
--font-size-18: 1.125rem;
--font-size-16: 1rem;
--font-size-14: .875rem;
--font-size-12: .750rem;
--font-size-11: .6875rem;	

--ratio: 1.4;
--s0: clamp(1.125rem,1rem + 0vw,1rem);
--s1: clamp(1.375rem,1.19rem + 0.32vw,1.41rem);
--s2: clamp(1.625rem,1.39rem + 0.85vw,2rem);
--s3: clamp(2rem,1.61rem + 1.7vw,2.83rem);
--s4: clamp(2.5rem,1.83rem + 3.04vw,4rem);
--s5: clamp(3.0rem,2.04rem + 5.07vw,5.65rem);
--line-height: 1.4;
--line-height-small: calc(0.9*var(--ratio))}
    
@media (-webkit-device-pixel-ratio: 1.25) {:root{zoom: 0.8}}
@media (-webkit-device-pixel-ratio: 1.50) {:root{zoom: 0.666667}}

/* FONTS
/* -------------------------- */
@font-face {font-family: 'Domine';font-style: normal;font-weight: 400;src: url("/squelettes/fonts/domine-normal_400.woff2") format('woff2');font-display:swap}
@font-face {font-family: 'Oswald';font-style: normal;font-weight: 400;src: url("/squelettes/fonts/oswald-normal_400-600.woff2") format('woff2');font-display: swap}
@font-face {font-family: 'Oswald';font-style: normal;font-weight: 600;src: url("/squelettes/fonts/oswald-normal_400-600.woff2") format('woff2');font-display: swap}

body div#tarteaucitronRoot.tarteaucitronBeforeVisible:before{background:#000;opacity:.55}body div#tarteaucitronAlertBig:before{content:''}body div#tarteaucitronRoot div#tarteaucitronAlertBig{background:linear-gradient(180deg,#222 0%,black 100%);padding:.9375rem 0;font-family:var(--font-primary)}body div#tarteaucitronRoot span#tarteaucitronDisclaimerAlert{display:block;margin-bottom:.875rem;font-size:var(--s0);text-align:center;font-family:var(--font-primary)!important}body #tarteaucitronRoot .tarteaucitronAllow,body #tarteaucitronRoot .tarteaucitronDeny,body #tarteaucitronAlertBig #tarteaucitronCloseAlert{padding:8px 10px!important;margin:5px;border-radius:3px;font-size:14px!important;font-family:var(--font-secondary)!important;text-transform:uppercase;font-weight:700}body #tarteaucitronAlertBig #tarteaucitronPersonalize2{font-size:14px!important}body #tarteaucitronRoot .tarteaucitronAllow{background:#109838!important;box-shadow:0 0 7px #000}body #tarteaucitronRoot .tarteaucitronDeny{background:#ce1836!important}body #tarteaucitronAlertBig #tarteaucitronCloseAlert{background:none;border:1px solid rgb(255 255 255 / .3);padding:8px 10px 7px!important;color:#fff}

body {
min-height: 100vh;
background: #eee;
font:normal 400 var(--text-base-size) var(--font-primary);
line-height: var(--body-line-height);
color:black;
text-rendering: optimizeSpeed;
font-smooth: always;
-webkit-font-smoothing: antialiased}

.spip-admin-float {font-family: arial}

#cookie-bar.fixed {
max-width: 120rem;
margin-inline:auto;
right: 0;
background: var(--main-color);
color: black;
padding:1.125rem .9375rem}
    
.cb-msg {
display: block;
margin-bottom: .750rem;
font-size: 1.125rem}
    
#cookie-bar.fixed a {padding: 0.125rem 0.625rem} 
#cookie-bar.fixed a.cb-enable {
border: 1px solid #007700;
font-size: .875rem;
text-transform: uppercase;
letter-spacing: .5px}   
#cookie-bar.fixed .cb-enable:hover {border-color: #009900}
#cookie-bar.fixed a.cb-disable,
#cookie-bar.fixed a.cb-policy {background: none;font-size: .875rem;color: black}
#cookie-bar.fixed a.cb-disable {border: 1px solid rgb(0 0 0 / .25)}
#cookie-bar.fixed a.cb-policy {font-size: .750rem}
    
/* DEFAULT
/* -------------------------- */
button,
.button {
-webkit-appearance: none;
border-radius: 0;
text-align: inherit;
background: none;
box-shadow: none;
padding: 0;
cursor: pointer;
border: none;
color: inherit;
font: inherit}

button:focus,
.button:focus,
input:focus,
select:focus {outline: none}

:is(.button, .btn--primary, .btn--secondary, .btn--acheter):active {transform: scale(.95)}

.btn--primary,
.btn--acheter,
.btn--highlight {
vertical-align: middle;
padding-left: var(--grid-gap-medium);	
padding-right: var(--grid-gap-medium);
font-family: var(--font-secondary);
font-size: var(--font-size-16);
font-weight: 600;
text-transform: uppercase;
text-align: center;	
line-height: 48px;	
color: black;
border: 1px solid currentColor}

.btn--highlight {
margin-top: var(--grid-gap-medium);
padding: var(--grid-gap);		
background: var(--jaune-light);
border: none;
font-size: var(--s1)}

.btn--secondary {
border-bottom: 3px solid currentColor;
font-family: var(--font-secondary);	
font-size: var(--font-size-12);
text-transform: uppercase;
font-weight: 600;	
color: black}

.payment {margin-top:var(--grid-gap-large)}
:is(.art-chapo, .art-text) a.btn--acheter {
display: flex;
justify-content: center;
align-items: center;
background: black;	
font-size: var(--font-size-24);
line-height: 65px;	
color: white;
text-decoration: none;
border: none}
.btn--acheter svg {margin-right: var(--grid-gap)}
.btn--acheter.disabled {
background: #bbb;	
line-height: 65px;	
color: black}
.price, .oldprice {
font-family: var(--font-secondary);	
font-size: var(--s3);
text-transform: uppercase;
line-height: var(--line-height-small)}
.price {
display: flex;
justify-content:center;
align-items: center;	
padding: var(--grid-gap);	
background: #eee}
.oldprice {
margin-left: var(--grid-gap-small);	
font-size: var(--s1);	
text-decoration: line-through;
font-weight: 400;	
color: #999}

input::placeholder {color: rgb(0 0 0 / .4)}

hr {width: 100%;border: none;border-top:1px solid rgba(0,0,0,.15)}
sup {font-size: 60%!important}    
.scaleHover {overflow: hidden}

    
/* ===================================================================
 *  HOME
 *
 * ------------------------------------------------------------------- */
.max-width-1920 {max-width:120rem; margin-inline:auto; background-color:white}
.mainGrid, .autoGrid, .countGrid {display: grid}

.mainGrid {grid-template-columns: 1.5rem repeat(12, minmax(10px, 1fr)) 1.5rem}
.autoGrid {--min-column-size:10px;grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size),  100%), 1fr))}
.countGrid {grid-template-columns: repeat(var(--count-column), 1fr)}

.error {display: grid;	place-items:center;	max-width: 45em;margin-inline:auto;height: 100vh;padding: var(--grid-gap-large);text-align: center}.error h1 {font-weight: 400}.error .supTitle {position: relative;display: block;margin-bottom: var(--grid-gap-medium);padding-top: var(--grid-gap);	font-family: var(--font-secondary);font-size: var(--font-size-14);	font-weight: 600;text-transform: uppercase;letter-spacing: 1px}.error .supTitle::after {content: '';position: absolute;height: 3px;width: 50px;left: 0;right: 0;top: 0;margin-inline:auto;background: var(--main-color)}.error .title {font-size: var(--s4)}.error .title strong {display: block;margin-top: var(--grid-gap-small);		margin-bottom: var(--grid-gap-medium);font-size: var(--s2);font-weight: 400;	line-height: var(--line-height)}.error .arrow_btn {display: flex;justify-content: space-between;align-items: center;padding:var(--grid-gap);margin-inline:auto;margin-top: var(--grid-gap-medium);width:180px;font-family: var(--font-secondary);font-size: var(--font-size-14);font-weight: 600;text-transform: uppercase;letter-spacing: 1px;	color: white;background: var(--main-color)}

.page_sommaire, .page_article, .page_rubrique {padding-top: 90px}
header, .supHeader, .t-shirt .back {position: fixed; top: 30px; left: 0; right: 0; z-index: 50}
.supHeader {top:0;background: var(--main-color)}
.supHeader .content, .t-shirt .back {display: flex; height: 30px; align-items: center;justify-content: center; font-size: .875rem; color: white}

header .logo a  {display: none}
.topnav {
grid-column: 1 / -1;
position: relative;
display: flex;
background-color: black}
.topnav a,
.dropdown .dropbtn {
padding: var(--grid-gap);
font-family: var(--font-secondary);
font-weight: 600;	
text-transform: uppercase}
.topnav .icon {display: none;padding: .875rem}
.dropdown {overflow: hidden}
.dropbtn svg {
display: none;
color: #666;	
margin-right: .5rem;	
transition: .2s}
.dropdown.show .dropbtn svg {transform: rotate(90deg); color: white}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1}
.topnav .dropdown-content a {
display: block;
font-family: var(--font-primary);
text-transform: none;
font-weight: 400;	
text-align: left;
color: black}
.dropdown.show .dropdown-content {display: block}
.topnav a, .dropdown .dropbtn {display: none}	
.topnav a.logoPhone {display:block;;padding: .250rem var(--grid-gap-small) 0}
.topnav.responsive a.logoPhone {position: absolute;left: 0;top: 0}
.topnav .icon {display: block; margin-left: auto; color: white}
.topnav.responsive .icon {position: absolute;right: 0;top: 0}
.topnav.responsive {flex-direction: column; padding-top: 60px}
.topnav.responsive a,
.topnav.responsive .dropbtn svg {display: block}
.topnav.responsive a {color: white}
.topnav.responsive a.on {background-color: #666}
.topnav.responsive .dropdown .dropbtn {
display: flex;
width: 100%;	
justify-content: space-between;
align-items: center;
color: white}
.topnav.responsive .dropdown .dropbtn.on,
.topnav.responsive :is(.navLeft, .navRight) > a.on {
background-color: #222;
color: var(--main-color)}
.topnav.responsive .dropdown-content {
position: relative;
background-color: #555;	
box-shadow: none}

.annonce {
display: block;
background: black;
color: white}
.annonce p {
padding: var(--grid-gap);	
font-size: var(--font-size-12);	
text-align: center;
color: white}
.annonce span {
display: block;
text-decoration: underline;
text-underline-position: under}

.main-carousel {margin-top: var(--grid-gap-large)}
.main-carousel {grid-column: 2 / -2}
.main-carousel .carousel-cell {
display: grid;
place-items:center;
overflow: hidden;
border-top-left-radius: 50px;	
border-bottom-right-radius: 50px;
margin-right: var(--grid-gap-medium);	
width: 100%}
.main-carousel .carousel-cell .content {
background: var(--main-color);		
padding:var(--grid-gap)}
:is(.main-carousel, .footer) .carousel-cell .content p {
display: block;
font-family: var(--font-secondary);	
font-size: var(--s2);
text-transform: uppercase;
line-height: 1.15em;
color: white}
:is(.main-carousel, .footer) .carousel-cell br {display: none}
:is(.main-carousel, .footer) .carousel-cell .content strong {
font-weight: 600;	
line-height: 1em}
:is(.main-carousel, .footer) .carousel-cell .content i {
font-style: normal;
color: black}
:is(.main-carousel, .footer) .carousel-cell .content span {
display: inline-block;
margin-top: var(--grid-gap-small);
padding: var(--grid-gap-small);
border-radius: 3px;	
background: black;
font-family: var(--font-primary);	
font-size:var(--font-size-12);
text-transform: none;
line-height: var(--line-height-small);	
color: white}

.row_tshirts .header {grid-column: 2 / -2}
.tshirts-carousel {grid-column: 2 / -2}
.tshirts-carousel .carousel-cell {
margin-right: var(--grid-gap);
width: 100%}
.tshirts-carousel picture {
--border-radius:50px;			
border-top-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
margin-bottom: var(--grid-gap);	
overflow: hidden}
.tshirts-carousel .flickity-button,
.tshirts-carousel .flickity-button:hover {background: rgb(0 0 0 / .2)}
:is(.tshirts-carousel, .card, .art-album, .art-logo) picture {background-color: #d1d6da}

.slick-prev, .slick-next {border-radius: 0}
.slick-prev{left: 0}
.slick-next {right:0}
.slick-dots li button:before {font-size: 45px; color: black}
.slick-dots li.slick-active button:before {opacity: 1;color: black}

.flickity-button,
.flickity-button:hover {background: transparent}
.flickity-button-icon {fill: white}
.flickity-button:disabled {display: none}
.carousel-cell-image {
display: block;
max-height: 100%;
margin: 0 auto;
max-width: 100%;
opacity: 0;
-webkit-transition: opacity 0.4s;
        transition: opacity 0.4s}
.carousel-cell-image.flickity-lazyloaded,
.carousel-cell-image.flickity-lazyerror {opacity: 1}
.flickity-viewport {transition: height 0.2s}

.home-seo {
background: var(--beige);
margin-top: calc(2 * var(--grid-gap-large))}
.home-seo .visuel {grid-column: 1 / -1}
.home-seo .fucking {grid-column: 3 / -3; margin-top:-25%}
.home-seo .fucking img {width: auto}
.home-seo .content {grid-column: 2 / -2}
.home-seo .content {
padding-top: var(--grid-gap-large);
padding-bottom: var(--grid-gap-large)}
.home-seo .btn--secondary {margin-top: var(--grid-gap-medium)}

.home-seo h1 {
font-family: var(--font-secondary);
font-size: var(--s2);	
font-weight: 600;
text-transform: uppercase;
line-height: var(--line-height-small)}
.home-seo p {
margin-top: var(--grid-gap-medium);	
font-size: var(--font-size-14)}

.fail {
display: grid;
grid-template-columns: 1fr 1fr}
.fail .square {position: relative}
.fail .jaune {
grid-row: span 1;	
grid-column: span 2}
.jaune {background: var(--jaune)}
.fraise {background: var(--fraise)}
.lilas {background: var(--lilas)}
.gris {background: var(--gris)}
.vert {background: var(--vert)}
.bleu {background: var(--bleu)}
:is(.fail, .collection) img {mix-blend-mode: multiply; width: 100%}
:is(.fail, .collection) .title {
position: absolute;
z-index: 5;
left: var(--grid-gap-medium);
bottom: var(--grid-gap-medium);
font-family: var(--font-secondary);	
font-size:var(--s4);
line-height: var(--line-height-small);
color: white}
:is(.fail, .collection) .square .title {
left: var(--grid-gap-medium);
font-size:var(--s2);	
text-transform: uppercase}

.row_videos {background: var(--beige)}
.row_tshirts, .row_videos {padding-top: var(--grid-gap-large); padding-bottom: var(--grid-gap-large)}
.row_videos :is(.header, .list-videos) {grid-column: 2 / -2}
.container-iframe {position: relative;overflow: hidden;width: 100%;padding-top: 62.5%}
.responsive-iframe {position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%}
:is(.row_tshirts, .row_videos) .header {
display: flex;
justify-content: space-between;
margin-bottom: var(--grid-gap-large)}
:is(.row_tshirts, .row_videos) h2 {
font-family: var(--font-secondary);	
font-size:var(--font-size-30);
text-transform: uppercase}
.row_tshirts h2 {font-size:var(--s3); font-weight: 700}
.row_videos h3 {
margin-top: var(--grid-gap);	
font-size:var(--font-size-16)}
.row_tshirts h3 {
margin-top: var(--grid-gap-small);	
font-size:var(--font-size-18);
line-height: var(--line-height-small)}
.row_tshirts span {
font-family:var(--font-secondary);
text-transform: uppercase;
font-weight: 600}
.row_tshirts .descriptif {font-size:var(--font-size-12)}
.row_tshirts .css {font-size:var(--font-size-18)}
.list-videos {gap:var(--grid-gap-large)}

.row_zoom_actus {
--min-column-size: 32rem;	
background: var(--jaune-light)}
.card--zoom {
position: relative;
background: black}
.card-link--zoom {
color: white}
.card-content--zoom {
z-index: 1;
position: absolute;
left: 0;right: 0;bottom: 0;
padding: var(--grid-gap-large)}
.card-link--zoom,
.card-logo--zoom,
.card-logo--zoom img {height: 100%}
.card-logo--zoom img {opacity: .55}
.card-content--zoom :is(h3, .h3) {
font-family: var(--font-primary);	
font-size: var(--s3);
line-height: var(--line-height-small)}

.row_actus {padding: var(--grid-gap-large)}
.card--actus + .card--actus {margin-top: var(--grid-gap-large)}
.row_zoom_actus a :is(h2, .h2),
.row_zoom_actus :is(h2, .h2) a {
display: inline-block;
margin-bottom: var(--grid-gap);
font-family: var(--font-secondary);
font-size: var(--font-size-20);	
text-transform: uppercase;
font-weight: 400}
.row_zoom_actus a :is(h2, .h2) {margin-bottom: 0}
.card-logo--actus picture,
.card-picture {
--border-radius:25px;			
border-top-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius)}
.card--actus :is(h3, .h3) a {
font-size: var(--font-size-24);
line-height: var(--line-height-small)}
.card--actus .date {
margin-top: var(--grid-gap-small);	
padding:0 var(--grid-gap-small); 	
background: white;	
line-height: 1.875rem;
border-radius: .9375rem}
.card--actus .btn--secondary {margin-top: var(--grid-gap-small)}

.footer {
padding-top: var(--grid-gap-large);	
padding-bottom: var(--grid-gap-large);
background-color: var(--beige)}
.footer hr {grid-column: 2 / -2; margin-bottom: var(--grid-gap-large); margin-top: var(--grid-gap-large)}
.footer .designer {
grid-column: 2 / -2;
position: relative;
margin-top: var(--grid-gap-large);
margin-bottom: var(--grid-gap-large);	
padding: var(--grid-gap-medium);	
color: white;
text-align: center}
.designer > * {position: relative; z-index: 1}
.designer .gradient {
position: absolute;
z-index: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-top-left-radius: 50px;	
border-bottom-right-radius: 50px;	
mix-blend-mode: darken;
background: linear-gradient(to left, #da1e92, var(--main-color))}
.designer .skater {display: none}
.designer .title {
font-family: var(--font-secondary);	
font-size: var(--s3);
font-weight: 600;	
text-transform: uppercase;
line-height: 1.15em}
.designer p {margin-top: var(--grid-gap)}
.designer .btn--primary {margin-top: var(--grid-gap-medium); color: white}
.footer :is(.left, .right) {grid-column: 2 / -2; position: relative; text-align: center}
.footer .right {padding-top: var(--grid-gap-large)}
.footer .carousel-cell .fucking {margin-top: var(--grid-gap);margin-bottom: var(--grid-gap)}
.footer .carousel-cell .content p {color: black}
.footer .carousel-cell .content i {color: var(--main-color)}
.footer .carousel-cell .content span {
margin-top: var(--grid-gap);
padding: 0;
background: none;
color: black}
.footer nav a {
font-family: var(--font-secondary);
text-transform: uppercase;
line-height: var(--line-height-small)}
.footer .social {font-size: var(--font-size-24)}
.footer .social svg {display: inline-block; margin-left:var(--grid-gap-small)}
.footer .contact {margin-top: var(--grid-gap-medium)}
.mentions {
margin-top:var(--grid-gap);
font-size: var(--font-size-12);
line-height: var(--line-height)}

/* ARTICLE
/* ---------------------------------------------------------------- */
::selection {
background: rgb(18 21 108 / .5);	
color:white}

:is(.page_rubrique, .page_article) header {grid-column: 1 / -1}
.rub-header, .art-header {margin-top: var(--grid-gap-large)}

:is(.rub-header, .art-header) h1, .art-text :is(h1, h2, h3, h4, h5) {font-family: var(--font-secondary)}
h1, h2, h3, h4, h5 {font-weight: 400}
p, h5, li, .texteencadre-spip {line-height: var(--line-height)}

.rub-header, .rub-chapo, .rub-content, .art-header, .art-chapo, .art-content, .art-designer {grid-column: 2 / -2}
.rub-chapo, .art-chapo {border-top: 1px solid #ddd}
.art-logo, .art-album.large {grid-column: 1 / -1}
.t-shirt .art-logo {--count-column: 1}
:is(.art-header, .art-chapo, .art-logo) + .art-content {padding-top: var(--grid-gap-large)}
.art-album {margin-top: var(--grid-gap-large); margin-bottom: var(--grid-gap-large)}
.art-album.large + .art-album.large {margin-top: calc(var(--grid-gap-small) - var(--grid-gap-large))}

@media only screen and (max-width: 36rem) {.art-album {--min-column-size: 18rem}}
	
.t-shirt .art-chapo {margin-top: 0;margin-bottom:var(--grid-gap-medium); border-top: none}
.t-shirt .art-content {padding-top:0}
.t-shirt .art-album {grid-template-columns: repeat(var(--count-column), 1fr)}
.t-shirt .art-album.large {--count-column:2}
.t-shirt .art-album.large + .art-album.large {--count-column:1}
.t-shirt .back {
top:inherit;
bottom: 0;
height: 50px;
background: white;
box-shadow: 0 0 15px 5px rgba(0,0,0,.15);	
font-family: var(--font-secondary);
font-size: 1rem;	
font-weight: 700;	
text-transform: uppercase;
color: black}
.back svg {margin-right: var(--grid-gap-small)}

.page_tshirts .rub-content > div {
--min-column-size:10px;	
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr))}

.page_tshirts .rub-content > div,
.rub-content {
--min-column-size: 22rem;
grid-gap: var(--grid-gap-large);
padding-bottom: var(--grid-gap-large)}

.rub-header,
.art-header {text-align: center}
.date, .mots {
display: inline-block;
margin-bottom: var(--grid-gap);	
font-family: var(--font-secondary);
font-size: var(--font-size-12);
letter-spacing: .025em;
font-weight: 600;
line-height: var(--line-height-small);	
text-transform: uppercase}
.art-header :is(.date, .mots) {
margin-top: var(--grid-gap-large);
margin-bottom: 0;
font-size: var(--font-size-14);
font-weight: 400;		
color: #666}
.art-header .mots {
margin-top: var(--grid-gap-large);	
padding: var(--grid-gap);
border-radius: 25px;	
background: linear-gradient(to left, #da1e92, var(--main-color));
color: white}
.collection {
margin-bottom: var(--grid-gap);
font-size: var(--s0);
line-height: var(--line-height-small)}
.collection, .editions {
margin-top: var(--grid-gap);
font-size: var(--font-size-14);
line-height: var(--line-height-small)}

.art-designer {
margin-top: var(--grid-gap-medium);	
margin-bottom: var(--grid-gap-large);	
border: 2px solid black;
border-radius: 10px;
text-align: center}
.art-designer .content {
padding: var(--grid-gap-medium);
text-align: left}
.art-designer > img {
margin-top: var(--grid-gap-medium);		
width: 200px;
height: 200px;
border-radius: 50%}
.art-designer h2 {
padding-top: var(--grid-gap-medium);
padding-bottom: var(--grid-gap-medium);
border-bottom: 2px solid black;	
font-family: var(--font-secondary);
font-size: var(--s4);	
text-transform: uppercase;
text-align: center;	
line-height: var(--line-height-small)}
.art-designer ul {
margin-top: var(--grid-gap-medium);
padding-top: var(--grid-gap-medium);
border-top: 2px dashed #ddd}
.art-designer :is(h3, strong) {
font-family: var(--font-secondary);
font-size: var(--font-size-16);	
font-weight: 600;	
text-transform: uppercase}
.art-designer h3 {
padding: var(--grid-gap);
background: var(--bleu-e);
font-size: var(--font-size-20);
font-weight: 400;
color: white;	
line-height: var(--line-height-small)}
.art-designer a {
text-decoration: underline;
text-underline-offset: 0.1em}
.list-design {
--count-column:2;
background: #d1d6da}
.art-designer .scrollToTop {
margin-top: 0;
margin-bottom: 0;
padding: var(--grid-gap-small) var(--grid-gap)}

.rub-chapo, .art-chapo {
padding-top: var(--grid-gap-large);
margin-top: var(--grid-gap-large)}
.rub-content, .art-logo {margin-top: var(--grid-gap-large)}
.art-logo img {width: 100%}

.searchBar {
grid-column: 2 / -2;	
display: flex;
flex-direction: column;	
margin-top: var(--grid-gap-large)}
.searchBar span {
display: inline-block;
font-family: var(--font-secondary);	
text-transform: uppercase;
font-weight: 600}
.searchBar > div {
margin-top: var(--grid-gap-small);	
margin-left: 0}
.searchBar select {	
width: 100%;	
background: white;
padding: .5rem;
border: 1px solid black;
font-size: var(--font-size-14);
color: black}
.searchBar select[disabled] {
border: 1px solid rgb(255 255 255 / .3);
color: rgb(255 255 255 / .5)}
.searchBar select:active {background: #e5e5e5}
.searchBar select[disabled]:active {background: inherit}

.card {line-height: 0}
.card .h2 {
font-family: var(--font-primary);	
font-size:var(--font-size-20);
font-weight: 400;
line-height: var(--line-height-small);	
text-transform: none}	
.card .h2.tshirt {
font-family: var(--font-secondary);
font-weight: 600;	
text-transform: uppercase}	
.card .h2 a {line-height: var(--line-height-small)}	
.card .author {
font-size: var(--font-size-14);
color: #666;
line-height: var(--line-height)}	
.card-picture {
overflow: hidden;
margin-bottom: var(--grid-gap)}
.card .date {margin-bottom: var(--grid-gap-small);color:#888}

:is(.rub-header, .art-header) h1,
.art-text h2 {hyphens: auto}

:is(.rub-header, .art-header) h1 {font-size: var(--s3); line-height: 1.15em} 
.art-text h2 {font-size: var(--s3); line-height: 1.2em}   
.art-text h3 {font-size: var(--s2); line-height: 1.35em} 
.art-text h4 {font-size: var(--s1); line-height: 1.35em} 
.art-text h5 {font-size: var(--s0)} 
:is(.rub-header, .art-header) h1,
.art-text h2 {font-weight: 600; text-transform: uppercase}   

.art-text :is(p, ul) {color: #444}
:is(.art-chapo, .art-text) strong {color: var(--main-color); font-weight: 400}
.art-text i {font-style: normal;color: black}

.art-text :is(p, ul, blockquote, > div, .texteencadre-spip, .art-album, .btn--text) + :is(h2, h3, h4, h5) {margin-top: 1.25em}
.art-text :is(p, ul, h2, h3, h4, h5, .texteencadre-spip, blockquote, table, > div) {margin-bottom:.5em}
.art-img {margin:var(--grid-gap-medium) auto}    
.art-album {grid-gap:var(--grid-gap-small)}    

.art-text .texteencadre-spip {
position: relative;
overflow: hidden;
padding:var(--grid-gap-medium);
margin: 0;
border:none;
border-radius: 20px;
border-top-left-radius: 0;	
color: white;
background:linear-gradient(to left, #da1e92, var(--main-color))}

.art-text > div {margin: 1.5em 0}

.art-text .texteencadre-spip :is(h2, h3, h4, h5) {line-height: 1.35em;font-size: var(--s1)}
.art-text .texteencadre-spip :is(ul, p) {color: white}

.art-text ul.spip {
padding-left:0;
list-style-position:inside}
.art-text ul.spip li {margin-bottom: .125rem}
.art-text ul.spip li::marker {
content:"\002022";
font-size: 1.125rem;
color: black}
.art-text .texteencadre-spip ul.spip li::marker {color: white}

.art-text blockquote.spip {
padding-left: var(--grid-gap-medium);
margin: var(--grid-gap-medium);
margin-left: 0;	
border-left: 5px solid var(--main-color);
color: black}
.art-text blockquote.spip p {color: black}  

.art-text :is(.texteencadre-spip, blockquote) :is(p, ul):last-child {margin-bottom: 0}  

:is(.art-chapo, .art-text) a {color: black; text-decoration: underline; text-decoration-color: var(--main-color);text-underline-offset: 0.1em;} 
:is(.art-chapo, .art-text) a:active {background-color: rgb(205 203 146 / .5)}
:is(.art-chapo, .art-text) a:is(:hover, :focus) {outline: none}

.art-text .btn--text {margin-top: var(--grid-gap-medium); text-align: center}
.art-text .btn--primary {text-decoration: none}
.art-text .btn--primary:hover {background-color: black}

.scrollToTop {
margin-top: var(--grid-gap-large);
margin-bottom: var(--grid-gap-large);
text-align: right}
.scrollToTop a {
text-decoration: underline;
font-size: var(--font-size-12);
font-family: var(--font-secondary);
font-weight: 600;	
text-transform: uppercase;
color: black}

aside {
grid-column: 2 / -2;
padding-top: var(--grid-gap-large);
padding-bottom: var(--grid-gap-large);
container-type: inline-size;
container-name: sidebar}

.collection {--count-column: 2}
.col_aside .art-chapo + .art-content,
.col_aside .art-chapo + .art-content + aside{margin-top: var(--grid-gap-large)}
.collection .square {position: relative}
aside .collection .square .title {
left: var(--grid-gap);
bottom: var(--grid-gap);
font-size: var(--font-size-20);
font-weight: 600}

@container sidebar (min-width: 380px) {
	.collection {--count-column: 3}
	aside .collection .square .title {font-size: var(--font-size-16)}
}

aside .btns {
--min-column-size:11rem;
grid-gap: var(--grid-gap);
margin-bottom: var(--grid-gap-medium)}
.btns a {
padding: var(--grid-gap-small) var(--grid-gap);
border: 1px solid black;
font-family: var(--font-secondary);	
font-size: var(--font-size-20);	
text-align: center;	
text-transform: uppercase}
.btns span {
display: block;
font-family: var(--font-primary);		
font-size: var(--font-size-12);
text-transform: none;
color: #666}

.next_prev {padding-bottom: var(--grid-gap-large)}
.next_prev {grid-column: 2 / -2}
.next_prev strong {
display: block;
margin-bottom: var(--grid-gap-small);
font-family: var(--font-secondary);		
font-size: var(--font-size-12);
font-weight: 600;
text-transform: uppercase;
line-height: var(--line-height-small)}
.next_prev nav {
--min-column-size: 16rem;
grid-column: 2 / -2;	
grid-gap: var(--grid-gap)}
.next_prev nav a {
padding: var(--grid-gap);
border: 3px solid var(--beige);
border-radius: 20px;	
font-size: var(--font-size-20);
line-height: 1.25em}
.next_prev :is(.precedent, .precedent-vide) {border-top-left-radius: 0}
.next_prev :is(.suivant, .suivant-vide) {border-top-right-radius: 0; text-align: right}

@media only screen and (min-width: 52.375rem) {.precedent-vide, .suivant-vide {border-radius: 20px;background: rgb(0 0 0 / .1)}}

/* CH?? - FORMULAIRE
/* ---------------------------------------------------------------------------------- */
.formulaire_spip{display:block;max-width:75rem;margin:0 auto;text-align:left}.formulaire_spip fieldset{position:relative;width:100%;height:100%;background:none;border:none;border-top:10px solid var(--beige);padding:0;padding-top:var(--grid-gap-medium)}.formulaire_spip legend{display:block;padding:0 var(--grid-gap-medium);margin-inline:auto;font-family:var(--font-secondary);font-size:var(--font-size-24);font-weight:600;text-transform:uppercase;text-align:center}.formulaire_spip .editer label{display:block;margin-bottom:.75rem;line-height:1.1em}.coordonnees{margin-bottom:var(--grid-gap-large)}.coordonnees .editer-groupe{display:grid;grid-template-columns:1fr;grid-gap:var(--grid-gap-medium)}.formulaire_spip :is(input[type=email],input[type=text],select,textarea){width:100%;padding:.5rem;background-color:#f5f5f5;height:60px;border:none;border-radius:5px;font-size:var(--font-size-20);line-height:var(--line-height)}.formulaire_spip textarea{min-height:300px}.formulaire_spip .boutons{text-align:center}.formulaire_spip [type="submit"]{cursor:pointer;width:100%;height:60px;line-height:60px;border:none;border-radius:5px;background:var(--main-color);font-size:var(--font-size-24);font-family:var(--font-secondary);font-weight:600;text-transform:uppercase;color:#FFF}.formulaire_spip [type="submit"]:hover,.formulaire_spip [type="submit"]:focus{outline:none}.formulaire_spip [type="submit"]:active{transform:scale(0.97)}.formulaire_spip .explication p,.formulaire_spip p.explication{margin-top:var(--grid-gap-small);margin-bottom:var(--grid-gap-medium);font-size:var(--font-size-12)}.reponse_formulaire{background:#00c176;padding:1.875rem;margin:1.875rem 0;font-size:1.25rem;line-height:1.333em;text-align:center;color:#000}.reponse_formulaire.reponse_formulaire_erreur{background:#ce1836;color:#fff}.reponse_formulaire p{margin-bottom:0}.reponse_formulaire.reponse_formulaire_ok p,.reponse_formulaire.reponse_formulaire_erreur p{margin-bottom: 0;color:#fff}.erreur_message{display:inline-block;font-size:.875rem;line-height:1.5em;color:#ff5252}.statut .erreur_message{display:block;margin-bottom:.25rem;margin-top:-.5rem}.erreur_message + input[type=text]{border:1px solid #ff5252}

.art-text .texteencadre-spip + div {margin-top: var(--grid-gap-large)}
.formulaire_spip fieldset fieldset {border: none; padding: 0}
.portfolio{margin-top:var(--grid-gap-large)}
.texteencadre-spip .formulaire_spip [type="submit"] {background: black;margin-top: var(--grid-gap)}
.texteencadre-spip .formulaire_spip input[type=email] {background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .45);color: white}
.texteencadre-spip > div {max-width: 380px; margin-inline:auto; margin-top: var(--grid-gap-medium)}
.texteencadre-spip .reponse_formulaire {margin-bottom: 0}
.texteencadre-spip input::placeholder {color: rgb(255 255 255 / .55)}


/* CH?? - PLAN DU SITE
/* ---------------------------------------------------------------------------------- */
.plan a {display: block}.plan ul.spip  {list-style:none;margin-bottom:1.5rem}.plan ul.spip li ul.spip ul.spip {margin-bottom:0}.plan h2 {padding: var(--grid-gap-medium);background:var(--beige);font-family: var(--font-secondary);font-size: var(--s1);text-transform: uppercase;letter-spacing: 1px;	line-height: 1.3em;font-weight: 700;color:var(--main-color)}.plan h2 a {color: var(--main-color)}.plan h3 a {padding: .9375rem;background:#eee;font-size: var(--s1);line-height: 1.3em;font-weight: 700}.plan ul.spip li strong a  {background:#eee;padding:var(--grid-gap);font-size:var(--font-size);font-weight: 400;color: black}.plan ul.spip ul.spip li strong a  {background: none;border-bottom:1px solid rgba(0,0,0,.1);padding:var(--grid-gap);font-size:var(--font-size);font-weight: 400;text-transform: uppercase}.plan ul.spip li {border-bottom:1px solid rgba(0,0,0,.1)}.plan ul.spip li:last-child {border-bottom: none}.plan ul.spip > li > a {padding: var(--grid-gap) var(--grid-gap) var(--grid-gap) var(--grid-gap-medium);font-size: var(--font-size);font-family: var(--font-primary)}