:root {
--main-color : #0e352e;
--second-color : #ffef93;
--pink-color : #fdb9cb;
--purple-color : #7d6afc;

--grid-gap:1.875rem;
    
--font-primary: 'League Gothic', sans-serif;
--font-secondary: 'Roboto Slab', serif;
--text-base-size: 1em;
--body-line-height: 1.5em;

--ratio: 1.4;
--s0: clamp(1rem,1rem + 0vw,1rem);
--s1: clamp(1.25rem,1.19rem + 0.32vw,1.41rem);
--s2: clamp(1.56rem,1.39rem + 0.85vw,2rem);
--s3: clamp(1.95rem,1.61rem + 1.7vw,2.83rem);
--s4: clamp(2.44rem,1.83rem + 3.04vw,4rem);
--s5: clamp(3.05rem,2.04rem + 5.07vw,5.65rem);
--line-height: 1.5;
--line-height-small: calc(0.8*var(--ratio))
}
    
@media only screen and (max-width: 39.9375rem) {
:root {
    --ratio: 1.3;
    --line-height: 1.5
    }
}

@media (-webkit-device-pixel-ratio: 1.25) {:root{zoom: 0.8}}
@media (-webkit-device-pixel-ratio: 1.50) {:root{zoom: 0.666667}}
    
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}

/*ROW FIXES
/* -------------------------- */
.max-width-1920{max-width:120rem;margin-left:auto;margin-right:auto}


/* FONTS
/* -------------------------- */
.size-11{font-size:.688rem}.size-12{font-size:.75rem}.size-13{font-size:.813rem}.size-14{font-size:.875rem}.size-16{font-size:1rem}.size-18{font-size:1.125rem}.size-20{font-size:1.25rem}.size-22{font-size:1.375rem}.size-24{font-size:1.5rem}.size-26{font-size:1.625rem}.size-28{font-size:1.75rem}.size-30{font-size:1.875rem}.size-35{font-size:2.1875rem}.size-40{font-size:2.5rem}.size-45{font-size:2.8125rem}.size-50{font-size:3.125rem}.size-55{font-size:3.4375rem}.size-60{font-size:3.75rem}.size-70{font-size:4.375rem}.size-80{font-size:5rem}.size-90{font-size:5.625rem}

@font-face {font-family: 'League Gothic';font-style: normal;font-weight: 400;font-display: swap;src: local('League Gothic'), url("/squelettes/fonts/league-gothic.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face {font-family: 'Roboto Slab';font-style: normal;font-weight: 400;font-display: swap;src: local('Roboto Slab'), url("/squelettes/fonts/roboto-slab-regular.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

.main-color {color:var(--main-color)}
.second-color {color:var(--second-color)}
.color-white {color:white}
.color-black {color:black}
.color-purple { color: var(--purple-color)}
.color-pink { color: var(--pink-color)}
.color-666 {color:#666}
.color-999 {color:#999}

.bg-color-white { background-color: white}
.bg-color-black { background-color: black}
.bg-main-color { background-color: var(--main-color)}
.bg-second-color { background-color: var(--second-color)}
.bg-color-purple { background-color: var(--purple-color)}
.bg-color-pink { background-color: var(--pink-color)}

.border-color-black {border-color:black}
.border-color-white {border-color:white}
.border-color-white-opa-10 {border-color:rgb(255 255 255 / 0.10)}
.border-color-white-opa-30 {border-color:rgb(255 255 255 / 0.30)}
.border-main-color {border-color:var(--main-color)}
.border-width-1 {border-width:1px}
.border-width-3 {border-width:3px}
.border-width-10 {border-width:10px}

.super-centered {display: grid;place-items:center}
.vertical-centered {top: 50%; transform: translateY(-50%)}
.text-shadow {text-shadow: 1px 0 3px rgb(0 0 0 / 0.10), 1px 0 4px rgb(0 0 0 / 0.20)}
.box-shadow {box-shadow: 0 0px 25px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.1)}
.mode-normal {mix-blend-mode:normal}
.produit {mix-blend-mode:multiply}
.noir-et-blanc {mix-blend-mode:luminosity}
    
.font-1 {font-family:var(--font-primary)}
.font-2 {font-family:var(--font-secondary)}
.line-height-large {line-height: 1.65em}
    
body div#tarteaucitronRoot.tarteaucitronBeforeVisible:before {background: black; 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-secondary) !important}
body #tarteaucitronRoot .tarteaucitronAllow,
body #tarteaucitronRoot .tarteaucitronDeny,
body #tarteaucitronAlertBig #tarteaucitronCloseAlert{
padding: 8px 10px !important;
margin: 5px;	
border-radius: 3px;	
font-family: var(--font-primary)!important;
text-transform: uppercase}
body #tarteaucitronRoot .tarteaucitronAllow {background: #00c176!important;box-shadow: 0px 0 7px rgb(0 0 0 / .25);}
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: white}
    
/* DEFAULT
/* -------------------------- */
.transition {transition: all .2s ease-in-out}
    
@media only screen and (min-width: 64rem) {
    .scaleHover img {transition: all .25s ease-in-out}
    a:hover .scaleHover img {transform: scale(1.025)}
}

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 {outline: none}

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

input::-webkit-input-placeholder {color: #ccc}
input::-moz-placeholder {color: #ccc}
input:-ms-input-placeholder {color: #ccc}
input::placeholder {color: #ccc}

hr {
width: 100%;
border: none;
border-top:1px solid rgba(255,255,255,.1)    }

.btn--primary,
.btn--secondary {
min-width: 200px;
border-radius: 5px}
        
.btn--primary {line-height: 50px}
.btn--secondary {line-height: 48px}
    
@media only screen and (min-width: 64rem) {
    .btn--primary:hover {
    background-color: var(--pink-color);
    color: var(--main-color)}
    .btn--secondary:hover {border-color: var(--pink-color)}
    .link {
    background-image: linear-gradient(var(--second-color),var(--second-color));
    background-size: 0 100%;
    background-repeat: no-repeat;
    transition: .25s}
    .link:hover {background-size: 100% 100%}
    .link.color-pink {background-image: linear-gradient(#ff2a00,#ff2a00)}
}

@media only screen and (max-width: 99.9375rem) {
    .btn--primary,
    .btn--secondary {
    min-width: 140px;
    padding-left: 1.250rem;
    padding-right: 1.250rem}
}
@media only screen and (max-width: 71.9375rem) {
    .btn--primary,
    .btn--secondary {margin-top: .9375rem}
    .btn--primary.reserver{margin-top: 0}
}

img {object-fit: cover}
sup{font-size: 60%!important}    

    
/* ===================================================================
 *  HOME
 *
 * ------------------------------------------------------------------- */
.wrapper {grid-template-columns: [leftGutter] 1fr [mainGutter] 18fr [rightGutter] 1fr}
.mainGutter {grid-column: mainGutter}
.grid-gap {grid-gap: var(--grid-gap)}
.grid.column_2 {grid-template-columns:repeat(2, minmax(10px, 1fr))}
.grid.column_6 {grid-template-columns:repeat(6, minmax(10px, 1fr))}
.grid.column_12 {grid-template-columns:repeat(12, minmax(10px, 1fr))}
.grid.column_20 {grid-template-columns:repeat(20, minmax(10px, 1fr))}
    
.error {
max-width: 45em;
height: 100vh
}

.error .arrow_btn {width:180px}
.error .supTitle::after {
content: '';
position: absolute;
height: 3px;
width: 50px;
left: 0;
right: 0;
top: 0;
margin: 0 auto;
background: black}
    
.logo {width: 200px}
    
@media only screen and (min-width: 64rem) {
    .mainNav {border-radius: 5px}
    .nav-item a {line-height: 50px}
    .nav-item a[aria-current] {text-decoration: underline}
    li.nav-item:last-child a {color: rgb(0 0 0 / .45)}
    li.nav-item a:hover {color: black}
    li.nav-item:last-child {border-left:1px solid white}
    li.nav-item:last-child a {color:#999}
    .page_sommaire .mainNav {background-color: var(--main-color)}
    .page_sommaire li.nav-item:not(:last-child) a {color: var(--second-color)}
    .page_sommaire .nav-item a:hover,    
    .page_sommaire li.nav-item:not(:last-child) a:hover {color: var(--pink-color)}
    .page_sommaire .btn--primary.reserver {
    background-color: var(--second-color);
    margin-top: 0;    
    color: var(--main-color)}
    .page_sommaire .btn--primary.reserver:hover {background-color: var(--pink-color)}
    .page_sommaire li.nav-item a {color: white}    
    .page_sommaire li.nav-item:last-child {border-color: rgb(255 255 255 / .1)}
}
    
.home_header :is(.header, .title) {grid-column: 1 / span 2}
.home_header picture {grid-column: 2 / span 1}    
.home_header picture img {height: 100%}    
.home_header :is(.header, .title, picture) {grid-row: 1}
    
.home_header .h1,
.home_blocs .content--2 h2,
.home_volauvent h2 {font-size: 9.375rem;}
    
.home_header .h2 {font-size: 5.625rem;}
    
.home_picture {
margin-top:-16.5%;
margin-left:calc((50% - 390px) / 2)
}

.home_picture_suite picture {width: 50%}
    
.home_picture_suite {margin-top:-16.5%}
.page_rubrique .home_picture_suite {margin-top:-24%}
    
.home_seo .content {grid-column: 7 / span 4}

.home_blocs .content--1 {
grid-column: 1 / span 3;
grid-row:1 / span 2}
    
.home_blocs .content--2 {
grid-column: 4 / span 6;
grid-row:2 / span 4}  
    
.home_blocs .content--3 {
grid-column: 10 / span 3;
grid-row:2 / span 2} 
    
.home_blocs .content--4 {
grid-column: 2 / span 2;
grid-row:4 / span 3}
    
.home_bolo .content {grid-column: 5 / span 5} 
.home_bolo picture {grid-column: 8 / span 4} 
.home_bolo :is(.content, picture) {grid-row: 1}  
.home_bolo cite {font-style: normal}
 
:is(.home_blocs, .home_volauvent) :is(picture, img) {height: 100%; width: 100%}

.home_volauvent > * {grid-row: 1} 
.home_volauvent picture {grid-column: 1 / -1}
    
.home_volauvent .list ul {
display: flex;
border-right: 1px solid white;
list-style: none} 
.home_volauvent .list li {
flex: 1 0 16.66667%;
padding: .5rem .975rem;
border-left: 1px solid white}
        
.home_carousel h2 {
font-size: var(--s4);
line-height: 1em}
    
.home_carousel h2 strong {
display: block;
margin-top: 0.375em;
font-family: var(--font-secondary);
font-weight: 400;
font-size:var(--s1);
text-transform: none;
line-height: 1.4em}
    
.row_zoom .content {grid-column: 8 / span 4}
.row_zoom :is(.typo, .main-picture) {
grid-column: 2 / span 5;
grid-row: 1} 
    
.row_zoom .picture {
transform: translateY(-50%);
grid-column: 8 / span 3}
    
.row_zoom :is(h2, .h2) {
writing-mode:vertical-lr;
right: -2.125rem;
top: -.625rem;
font-size: 15.625rem}
   
.row_actus :is(h4, .h4) {
margin-top: -3.75rem;
font-size: 15.625rem}
    
.row_actus :is(h4, .h4) strong {
display: block;
margin-top: -0.25em;
margin-bottom: 0.25em;
font-weight: 400;
font-size: .5em;
line-height: var(--line-height-small)}
    
@media only screen and (min-width: 48rem) {
    footer {
    background-repeat: no-repeat;
    background-image: url(/squelettes/design/cochon.webp);
    background-position: right center;
    background-size: 485px 430px}
}

@media only screen and (max-width: 99.9375rem) {
    .logo {width:140px}
    .home_header .h1, .home_blocs .content--2 h2, .home_volauvent h2 {font-size: 7.375rem}
    .home_header .h2 {font-size: 4.625rem}
    .home_seo .content {grid-column: 7 / span 5}
    .home_bolo .content {grid-column: 5 / span 7}
    .home_notes .content {margin-top: 0}
    .home_picture_suite {margin-bottom: 1.875rem}        
    .row_zoom .content {grid-column: 8 / span 5}
    .row_zoom :is(h2, .h2),
    .row_actus :is(h4, .h4){font-size: 12rem}
    .row_actus :is(h4, .h4) {margin-top: -2.75rem}
}

@media only screen and (max-width: 89.9375rem) {
    .home_header .content {
    align-self: end;
    margin-bottom: 3.750rem}
    .home_seo .content {padding-top: 0}
    .home_picture {
    margin-top: 1.875rem;
    margin-left: calc((50% - 292px) / 2)}
    .home_picture picture { width: 75%}
    .home_volauvent .list {
    padding: 0;
    font-size: 1.125rem}
    .home_notes .content {
    padding-top: 2.875rem;
    padding-bottom: 2.875rem}
    .home_notes h2 {font-size: var(--s5)}
    .row_zoom :is(.typo, .main-picture) {grid-column: 1 / span 6}
}

@media only screen and (max-width: 79.9375rem) {
    .logo {width:inherit}
    .home_header .h1, .home_blocs .content--2 h2, .home_volauvent h2 {font-size: var(--s5)}
    .home_header .h2 {font-size: var(--s4)}
    .home_seo .content {grid-column: 7 / span 6}
    .home_blocs :is(.content--1, .content--3, .content--4) h2 {font-size: var(--s3)}
    .home_bolo blockquote {font-size: var(--s1)}
    .home_notes {padding-top: 0}
    .row_zoom {padding-top: 1.875rem}
    .row_zoom > div {
    padding-top: 1.875rem;
    padding-bottom: 3.75rem}
    .horizontal-card_4col {padding-bottom: 0}
    .footer {padding-top: 0}
    .abonnement {margin-bottom: 3.750rem}
}

@media only screen and (max-width: 71.9375rem) {
    .wrapper {grid-template-columns: [leftGutter] 1.875rem [mainGutter] 1fr [rightGutter] 1.875rem}
    .nav-item {
    padding-left: .625rem;
    padding-right: .625rem}
    .home_bolo picture {grid-column: 6 / span 5}
    .home_volauvent .list li {
    padding-top: 0;
    padding-bottom: 0}
    .home_volauvent h2 {margin-bottom: .5rem}
    .row_zoom :is(h2, .h2),
    .row_actus :is(h4, .h4){font-size: 10rem}
    .row_actus :is(h4, .h4) {margin-top: -2.250rem}
}

@media only screen and (max-width: 63.9375rem) {
    #wrap {z-index: 20; background: var(--second-color); 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.wrapper {grid-template-columns: [mainGutter] 1fr }
    .header {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width:100%}
    .logo {
    width: inherit;
    margin-inline:auto}
    .navBar {z-index: 15}
    .header nav {
    padding-left: .9375rem;
    padding-right: .9375rem;
    border-bottom: none;
    text-align: center}
    .mainNav {
    width: 100%;
    margin-top: .9375rem;
    margin-bottom: .9375rem}
    .nav-item {
    display: block;
    padding-left: 0;
    padding-right: 0}
    .nav-item.xmd-show {display: none}
    .nav-item a {
    padding-top: .9375rem;
    padding-bottom: .9375rem;
    font-size: 1.875rem}
    .nav-item a[aria-current] {background-color: rgba(0,0,0,.075)}
    .btn--primary.reserver, .btn--primary.contact, .btn--primary.cadeaux {
    margin: .375rem;
    border: 1px solid var(--main-color);
    min-width: 230px;
    font-size: 1.875rem;
    line-height: 60px}
	.btn--primary.cadeaux {border: 1px solid var(--pink-color)}
	.home_header .h1 {margin: 0; line-height: .95em}
    .home_header .mainGutter {padding-right: 0}
    .home_seo .content {
    grid-column: 3 / span 8;
    padding-bottom: 3.750rem}
    .home_blocs :is(.content--1, .content--3, .content--4) h2 {font-size: var(--s2)}
    .home_bolo .content {
    grid-column: 5 / span 8;
    margin-bottom: 0}
    .home_bolo cite {margin-top: .9375rem}
    .home_volauvent h3 {font-size:1rem}
    .home_volauvent .list {
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
    font-size:.875rem} 
    .row_zoom :is(h2, .h2),
    .row_actus :is(h4, .h4) {font-size: 8rem}
    .row_actus :is(h4, .h4) {margin-top: -1.875rem}
    .row_zoom :is(h2, .h2) {
    right: -1.25rem;
    top: -0.375rem}
    .row_zoom :is(h3, .h3) {font-size: var(--s4)}
    .row_zoom p {margin-top: .9375rem}
    .mentions li:first-child {display: block}
    .mentions li:not(:last-child) {margin-right: .9375rem}
}

@media only screen and (max-width: 47.9375rem) {
    .horizontal-card_4col {margin-bottom:  1.875rem}
    .home_blocs :is(.content--1, .content--2, .content--3, .content--4) {grid-column: 3 / span 8}
    .home_blocs :is(.content--1, .content--2, .content--3, .content--4) {grid-row: inherit}
    .home_blocs :is(.content--1, .content--2, .content--3, .content--4) picture {height: 300px}
    .home_blocs :is(.content--1, .content--2, .content--3, .content--4) h2 {padding-left: .9375rem;padding-right: .9375rem}
    .home_blocs .content--2 h2 br {display: none}
    .home_blocs :is(.content--1, .content--3, .content--4) h2 {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    margin-top: 0;
    transform: translateY(-50%);
    top: 50%;
    font-size: var(--s5);
    color: white}
    .home_blocs .content--2 {padding: 0}
    .home_bolo {
    padding-top: 1.875rem;
    padding-bottom: 1.875rem}
    .home_bolo .content {
    grid-column: 1 / -1;
    text-align: center;
    align-self: center}
    .home_bolo picture {
    grid-column: 3 / -2;
    opacity:.65}
    .home_carousel h3 {
    padding-top: .9375rem;
    padding-bottom: .9375rem}
    .slick-slider {margin-top: 1.875rem}
    .row_actus .horizontal-card_4col {margin-top: 1.875rem}
    .row_zoom :is(h2, .h2),
    .row_actus :is(h4, .h4) {font-size: 6rem}
    .row_actus :is(h4, .h4) {margin-top: -1.5rem}
    .row_zoom {padding-top: 0}
    .row_zoom > div {padding-bottom: 1.875rem}
}

@media only screen and (max-width: 39.9375rem) {
    .grid.column_12 {grid-template-columns:1fr}
    .wrapper {grid-template-columns: [leftGutter] .9375rem [mainGutter] 1fr [rightGutter] .9375rem}
    .home_header .btn--secondary {border-color: white; color: white}
    .home_header :is(.h1, .h2) {color: var(--second-color)}
    .home_header picture {grid-column: 1 / -1}
    .home_seo {padding-top: 1.875rem}
    .home_seo .content {padding-bottom: 1.875rem}
    .home_seo h1 {font-size: var(--s3);line-height: var(--line-height-small)}
    .home_blocs :is(.content--1, .content--2, .content--3, .content--4) {grid-column: 1}
    .home_blocs :is(.content--1, .content--2, .content--3, .content--4) picture {height: 225px}
    .home_volauvent > div {padding-top: 1.875rem;padding-bottom: 1.875rem}
    .home_notes .content {padding: 1.875rem}
    .home_picture, .home_picture_suite {margin-top: .9375rem;margin-bottom: -20%}
    :is(.home_picture, .home_picture_suite) picture {width: 80%;margin-inline:auto;opacity: .65}
    .home_seo .content p,
    .home_notes,
    .home_notes p {margin-top:.9375rem}
    .row_zoom :is(.typo, .main-picture, .content) {grid-column: 1 / span 1}
    .row_zoom :is(h2, .h2) {
    writing-mode: inherit;
    left: 0;
    right: 0;
    top: -.9375rem;
    text-align: center}
    .row_zoom :is(h3, .h3) {margin-top: 1.875rem}
    .row_zoom :is(h4, .h4) {margin-top: .9375rem}
    .footer > div {
    padding-top: 1.875rem;
    padding-bottom: 1.875rem}
    .footer .formulaire_spip [type="submit"] {
    width:100%;
    margin-left: 0;
    margin-top: .9375rem}
    .footer .tel {width:100%}
    footer .col-content {padding-right: 0}
    footer .contact {margin-top: 1.875rem}
    footer .col-content li {margin: 0}
    footer .col-content li a {
    padding-top: .250rem;
    padding-bottom: .250rem}
    footer .col-content p {
    margin-top: .250rem;
    line-height:2.250em}
    .abonnement {margin-bottom: 1.875rem}
    .mentions {
    margin-bottom: 0;
    padding-bottom: .9375rem}
    .mentions ul {
    padding-top: .9375rem;
    margin-top: .9375rem;
    border-top: 1px solid rgba(255,255,255,.1)}
    .mentions li {display: block}
    .mentions li:first-child {margin-bottom: .375rem}
    .mentions a {padding: .375rem 0}
}

@media only screen and (max-width: 29.9375rem) {
    #close {padding-right: .9375rem}
    .nav-item a {
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: 1.375rem}
    .logo, 
    .btn--primary.reserver,.btn--primary.contact,.btn--primary.cadeaux{
    min-width: 190px;
    font-size: 1.375rem;
    line-height: 50px}
}


/* ===================================================================
 *  RUBRIQUE
 *  ARTICLE
 * ------------------------------------------------------------------- */
.rub-content {grid-column: span 12}
    
.page_rubrique :is(picture, picture img) {height: 100%}
    
.rub-header h1, .h1 {font-size: 9.375rem}

:is(.rub-header, .art-header) h1 {font-size: 7rem} 
:is(.rub-header, .art-header) h1 strong {
display: block;
font-weight: 400;
font-size: 5rem;
line-height: 1.15em;
color: #ff98b3}

.art-list a {
padding-top: .875rem;
padding-bottom: .875rem}
    
.art-list a:hover {padding-left: .5rem}
.art-list a:hover svg {color: var(--pink-color)}
    
.line {width: 1px;height: 50px}   

.horizontal-card_4col {grid-template-columns:repeat(4, minmax(10px, 1fr))}
.horizontal-card_3col {grid-template-columns:repeat(3, minmax(10px, 1fr))}

.card-content h2 strong {
display: block;
color: #ff98b3;
font-weight: 400}    
    
@media only screen and (min-width: 80rem) {
    .rub-header,
    .art-header {
    min-height: calc(90vh - 140px);
    align-content: end}
    .page_article.simple .art-header {
    min-height: inherit;
    align-content: start}
}

@media only screen and (max-width: 99.9375rem) {
    .compositions h1 {font-size: 4rem}
}

@media only screen and (max-width: 79.9375rem) {
    .compositions :is(.mainContent, .home_picture_suite) {margin-bottom: 0}
    .compositions .mainContent {padding-top: 1.875rem;}
    .card-content {padding: .9375rem}
    .main-card {padding: 0}
    .main-card .horizontal-card_3col {margin-bottom: 0}
    }

@media only screen and (max-width: 71.9375rem) {
    :is(.rub-header, .art-header) h1, .h1 {font-size: 5rem}
    :is(.rub-header, .art-header) h1 strong {font-size: 3rem}
    }

@media only screen and (max-width: 63.9375rem) {
    .page_sommaire,
    .page_rubrique,
    .page_article {padding-top: 54px}
    .compositions :is(.mainContent, .content) {
    padding-top: 1.875rem;
    padding-bottom: 1.875rem}
    .compositions .content {padding-bottom: 1rem}
    .main-card h2 {font-size: var(--s2); line-height:1em}
    .art-list {margin-top: 1.875rem}
    .page_rubrique :is(picture, picture img) {height: auto}
    :is(.rub-header, .art-header) h1, .h1 {
    margin-top: 1.875rem;
    margin-bottom: 1.875rem}
}

@media only screen and (max-width: 47.9375rem) {
    .horizontal-card_4col,
    .horizontal-card_3col {grid-template-columns:repeat(2, minmax(10px, 1fr))}
    :is(.rub-header, .art-header, .compositions) h1,
    :is(.rub-header, .art-header) h1 strong,
    .h1 {
    line-height: var(--line-height-small);
    font-size: var(--s4)}
    :is(.rub-header, .art-header) h1 strong {display: inline}
    .h2 {font-size: var(--s3)}
    .h3 {font-size: var(--s2)}
}

@media only screen and (max-width: 39.9375rem) {
    .rub-content {
    padding-top: 1.875rem;
    margin-top: 1.875rem}
    .rub-logo-survol {margin-top: 0}
    .rub-texte {padding: 1.875rem .9375rem}
    .main-card .horizontal-card_3col {
        margin-top: 1.875rem;
        padding-bottom: 1.875rem}
}

    
/* ARTICLE
/* ---------------------------------------------------------------- */
.art-content  {grid-column: 7 / span 5} 
.art-album  {grid-column: span 5}

@media only screen and (min-width: 64rem) {
.art-album  {
position: sticky;
top: 1.875rem;
align-self: start
}    
}
   
    
.breadcrumb li::before {
position: absolute;
content: ">";
left: -.250rem}  
.breadcrumb li:first-child::before {content: ""}
.breadcrumb strong {font-weight: 400}

.breadcrumb .cut {
max-width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;}
    
.art-album picture + picture {
margin-top: 3.750rem;
margin-left: 40%;
width: 40%}
    
.art-album picture + picture + picture {
margin-left: 10%;
width: 60%} 
    
.article_chapo p,
.article_text :is(p, li, h2, h3, h4),
.texteencadre-spip,
p {line-height: var(--line-height)}

.article_text h2 {font-size: var(--s4)}   
.article_text h3 {font-size: var(--s3)} 
.article_text h4,
.row_zoom :is(h4, .h4) {font-size: var(--s2)}

.article_text h2,
.row_zoom :is(h4, .h4) {
font-weight: 400;
text-transform: uppercase;
line-height: var(--line-height-small);
color: var(--main-color)}
    
.article_text :is(h3, h4) {
font-weight: 400;
line-height: var(--line-height-small);
color: var(--main-color)}

.article_text :is(p, ul) {font-family: 'Roboto Slab', serif}

.article_chapo p,
.article_text :is(p, ul, h2, h3, h4, .texteencadre-spip, blockquote, table, .cs_blocs) {margin-top:1em}

.article_chapo p:first-of-type,
.article_text h2:first-of-type,
.article_text .texteencadre-spip :is(h2, h3, h4):first-of-type,
.article_text .cs_blocs :is(h2, h3, h4, .texteencadre-spip, blockquote, table, .cs_blocs):first-of-type {margin-top:0}
    
.article_text p img {margin-top: 1.125rem}    

.article_text .texteencadre-spip {
position: relative;
overflow: hidden;
padding:1.125rem;
margin: 1.5em 0;
border:none;
border-radius: 10px;
border-top-left-radius: 0;
font-family: var(--font-secondary);
font-size: 1rem;
font-weight: 400;
color: black;
background: var(--pink-color)}
    
.article_text .texteencadre-spip :is(h2, h3, h4, h5, strong) {
font-family: var(--font-primary);
line-height: 1.35em;
text-transform:uppercase;
font-size: var(--s1)}

.article_text .texteencadre-spip :is(ul, p) {
font-size: 1rem;
color: black}

.article_text ul.spip {list-style:none}
.article_text ul.spip li {
position:relative;
padding-left: 18px}

.article_text ul.spip li::after {
position:absolute;
content:"\002022";
font-size: 1.250rem;
left: 0;
top:-1px;
color: black}
    
:is(.article_chapo, .article_text) strong {font-weight: 400}
.article_text i {font-style: normal}

.article_text strong {
padding: 0 .250rem;
background-color: rgb(255 239 147 / .75);
border-radius: 3px;
color:var(--main-color)}

.article_text .texteencadre-spip strong {
padding: 0;
background: none} 

.article_text blockquote.spip {
border-left: 3px solid var(--purple-color);    
margin: 1em 0 0;
padding-left: .9375rem}
    
.article_text blockquote p {color: #666}  
.article_text blockquote i {color: black}  
    
.article_text blockquote strong {
position: relative;
display: inline-block;
padding: 0;
background: none;
border-radius:0;
margin-top: .9375rem;
padding-left: .9375rem;
font-family:var(--font-primary);
font-size: 1rem;
text-transform: uppercase;
line-height: 1em;
color: var(--purple-color)}  
    
.article_text blockquote strong::before {
position: absolute;
content: "_";
left: 0;
top: 5px;
font-size: 1rem;
line-height: 0}  

.article_text a {color: var(--purple-color)}
.article_chapo a {color: var(--second-color)}
.texteencadre-spip a {color: var(--main-color)}
    
:is(.article_chapo, .article_text) a {transition: all .2s ease-in-out}

.article_text a:hover {background-color: rgb(14 53 46 / .15);color: black}
.article_text a:active {background-color: rgb(14 53 46 / .5)}
.article_chapo a:hover {background-color: rgb(255 255 255 / .2);color: currentColor}
.article_chapo a:active {background-color: rgb(255 255 255 / .5)}
:is(.article_chapo, .article_text) a:is(:hover, :focus) {outline: none}

:is(.article_chapo, .article_text) a.btn--text {color: white}
:is(.article_chapo, .article_text) a:hover.btn--text {background-color: var(--main-color)}

.btn--text-list a {
flex: 1 0 150px;
margin-top: .9375rem;
margin-left: .5rem;
margin-right: .5rem}    
 
.next_prev a:hover svg {margin: 0}
.precedent {border-right: 0rem solid white}
.suivant {border-left: 0rem solid white}
.next_prev strong {font-weight: 400}

.article_text .cs_blocs + .cs_blocs {margin-top: .250rem}
.article_text .cs_blocs h3 {
padding: 0;
margin: 0;
font-size:var(--s2);
text-transform: uppercase
}
.article_text .cs_blocs a {
display: block;
padding: .5rem;
border-radius: 5px;
font-weight: 400;    
color: white;
text-decoration: none
}

.article_text :is(.blocs_titre, .blocs_replie) {background: var(--purple-color) no-repeat right .75rem center / 16px 16px}

.article_text .blocs_titre {background-image: url(/squelettes/design/s-delete-white.svg)}
.article_text .blocs_replie {background-image: url(/squelettes/design/s-add-white.svg)}

.article_text .blocs_destination {
padding-top: .9375rem;
padding-bottom: .9375rem    
}

.article_text .cs_blocs h4 {margin-bottom:.5em}

.iframe {background: #eee}
.iframe-container { 
position: relative; 
overflow: hidden; 
padding-top: 56.25%;
min-height: 1000px}

.iframe-resp { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
border: 0 }

table {
overflow-x: auto;
margin: 0;
padding: 0;
border-spacing: 0;
font-family: var(--font-secondary);
font-size: .875rem;    
line-height: 1.35em
}

.table { display: block;}

tbody,
thead {display: block}
tr {display: flex}
th {
vertical-align: top;
font-family: var(--font-primary);
font-size: 1.125rem;
text-transform: uppercase;
font-weight: 400}

th,td {
padding:.575rem;
text-align: center;
line-height: 1.3em}

th,
td {flex: 1 1 10%}
th:first-child,
td:first-child {
flex-basis: 35%;
text-align: left}
th:nth-child(2),
td:nth-child(2) {flex-basis: 15%}

tr:last-child th,
tr:last-child td {border-bottom: none}

.row_even {background: #eee}
.row_first {background: var(--second-color)}
    
@media only screen and (max-width: 71.9375rem) {
    .art-main .mainGutter {
    grid-gap: 3.750rem;
    padding: 0}
    .art-content  {grid-column: 7 / span 6} 
    .art-album  {grid-column: span 6}
}

@media only screen and (max-width: 63.9375rem) {
    .art-main .mainGutter {grid-gap: 0}
    .art-album,
    .art-content  {grid-column: 2 / -2}
	.art-album {
	grid-row: 2;
	margin-top: 1.875rem}
    .rubrique_chapo,
    .article_chapo,
    .art-main {
    margin-top: 1.875rem;
    margin-bottom: 1.875rem}
    .art-album picture + picture,
    .next_prev {margin-top: 1.875rem}
    .page_article.simple .article_text {margin-top: 0}
    .iframe {padding-top: 1.875rem;padding-bottom: 1.875rem;}
}

@media only screen and (max-width: 39.9375rem) {
    .art-album,
    .art-content {grid-column: span 1}
    .precedent,
    .suivant {border: none}
    .precedent + .suivant {margin-top: .5rem}
}


/* CH?? - FORMULAIRE
/* ---------------------------------------------------------------------------------- */
.formulaire_spip {
display: block;
max-width:75rem;
margin: 0 auto;
text-align: left;}

.formulaire_spip ul {list-style: none;}
.formulaire_spip label .obligatoire {color: black}

.formulaire_spip fieldset {
position: relative;
width: 100%;
height: 100%;
background: none;
border: 10px solid rgba(0,0,0,.05);
padding: 1.5rem 1.250rem;
margin: 0 auto}
    
.formulaire_spip fieldset fieldset {
border: none;
border-top: 5px solid rgba(0,0,0,.05);
border-bottom: 5px solid rgba(0,0,0,.05);
padding: 0;
padding-bottom: 1.875rem;
margin-top: 3.750rem}

.formulaire_spip legend {
display: inline-block;
padding:0 1.875rem;
font-size: 1.875rem;
font-weight: 400;
text-align: center;
text-transform: uppercase;
color: black}

.formulaire_spip fieldset fieldset legend {margin-bottom: 1.875rem}

.formulaire_spip .editer label {
display: block;
margin-bottom: .5rem;
color: black;
font-family:var(--font-secondary); 
font-weight: 400;
line-height: 1.1em}
    
.formulaire_spip .choix {
display: flex;
margin-top: .5rem}
    
.formulaire_spip .choix label {
padding-left: .9375rem;
line-height: 1.45em}
.formulaire_spip fieldset .explication,
.formulaire_spip .saisie_date {text-align: center}

.coordonnees .editer {
padding:0 .9375rem;
width:50%}

.coordonnees .statut label {display:block}
.coordonnees :is(.statut, .adresse) {width:100%}

.coordonnees {
padding-top:2.5rem;
padding-bottom:2.5rem}

:is(.coordonnees, .demande) .editer {
margin-bottom: 1.875rem;
line-height:0}

.demande .editer-groupe {
padding-left:.9375rem;
padding-right:.9375rem}

.formulaire_spip :is(input[type=email], input[type=text], select, textarea) {
width: 100%;
padding:.5rem;
background-color: #eee;
height: 50px;
border:none;
border-radius: 3px;
font-family:var(--font-secondary);
font-size: 1.125rem;
line-height: 1.5em}

.formulaire_spip textarea {min-height: 300px;}

.formulaire_spip input.date {margin-top: .5rem}

.formulaire_spip .boutons {
width: 100%;
max-width: 260px;
margin: 0 auto;
padding: 0 .9375rem;
text-align: center}

.formulaire_spip [type="submit"] {
cursor: pointer;
min-width: 190px;
height: 50px;
line-height: 50px;
border: none;
border-radius: 5px;
background: var(--second-color);
font-family: var(--font-primary);
font-size: 1.250rem;
font-weight: 400;
text-transform: uppercase;
color: var(--main-color);
transition: all .1s ease-in-out}

.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:.5rem;
font-size:.875rem;
color:black}

.formulaire_spip p.explication {
margin-top: 0;
margin-bottom:.9375rem}

.reponse_formulaire {
background:var(--pink-color);
padding :1.875rem;
margin: 1.875rem 0;
font-size: 1.250rem;
line-height: 1.333em;
text-align: center;
color:var(--main-color)}

.reponse_formulaire.reponse_formulaire_erreur {
background:#ff5252;
color:white}

.reponse_formulaire p {margin:0 !important}
.reponse_formulaire.reponse_formulaire_erreur p {color:white}

.erreur_message {
display: inline-block;
font-size: .875rem;
line-height: 1.5em;
color:#ff5252}

.erreur_message em {
font-style: normal;
color:black}

.statut .erreur_message {
display: block;
margin-bottom: .250rem;
margin-top: -.5rem}

.erreur_message + input[type=text] {border: 1px solid #ff5252}

@media only screen and (min-width: 48rem) {
    .coordonnees .editer-groupe {
    display: flex;
    flex-wrap: wrap}
}

@media only screen and (max-width: 63.9375rem) {
    .formulaire_spip fieldset {padding: 1rem .9375rem}
}

@media only screen and (max-width: 47.9375rem) {
    .coordonnees .editer {width: 100%}
    .formulaire_spip select {width: 50%}
}

@media only screen and (max-width: 39.9375rem) {
    .formulaire_spip legend {
    padding: .9375rem .750rem;
    font-size: 1.250rem}
    .formulaire_spip fieldset {
    padding: 1rem 0;
    border-right:0;
    border-left: 0;
    border-bottom: 0}
    .coordonnees {padding-bottom:0}
    :is(.coordonnees, .demande) .editer {margin-bottom:0}
    .demande .editer-groupe,
    .coordonnees .editer {padding: 0}
    .formulaire_spip select {width: 100%}
}


/* SCROLL TO TOP
/* -------------------------------------------------------------------- */

/* CH?? - PLAN DU SITE
/* ---------------------------------------------------------------------------------- */
.plan a {
display: block;
text-decoration: none;
color: black}

.plan ul.spip  {
list-style:none;
margin-bottom:1.5rem}
.plan ul.spip li ul.spip ul.spip {margin-bottom:0}

/* RUB */
.plan h2 a {
padding: .9375rem;
background:var(--main-color);
font-family: var(--font-primary);
font-size: var(--s2);
text-transform: uppercase;
line-height: 1.3em;
font-weight: 400;
color:var(--second-color)}

/* ARTICLE */
.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: .5rem .5rem .5rem 1.875rem;
font-family: var(--font-secondary);
font-size: var(--font-size);
color: black}

.plan ul.spip li > a strong {font-weight: 400}