:root {
--grid-gap-large:3.750rem;
--grid-gap:1.875rem;
    
--font-primary: 'Work Sans', sans-serif;
--font-secondary: 'Cardo', serif;
--text-base-size: 1.250em;
--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,1.875rem);/*2rem > 1.875rem*/
--s3: clamp(1.95rem,1.61rem + 1.7vw,2.875rem);/*2.83rem > 2.875rem*/
--s4: clamp(2.44rem,1.83rem + 3.04vw,3.750rem);/*4rem > 3.750rem*/
--s5: clamp(3.05rem,2.04rem + 5.07vw,5rem);/*5.65rem > 5rem*/
--line-height: 1.5;
--line-height-small: calc(0.85*var(--ratio))
}
    
@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-14{font-size:.875rem}.size-16{font-size:1rem}.size-18{font-size:1.125rem}.size-20{font-size:1.25rem}.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-40{font-size:2.5rem}.size-50{font-size:3.125rem}
    
@font-face {font-family: 'Work Sans';font-style: normal;font-weight: 400;font-display: swap;src: url("/squelettes/fonts/work-sans_regular-bold_latin.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: 'Work Sans';font-style: normal;font-weight: 700;font-display: swap;src: url("/squelettes/fonts/work-sans_regular-bold_latin.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: 'Cardo';font-style: normal;font-weight: 400;font-display: swap;src: url("/squelettes/fonts/cardo_normal-regular_latin.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: 'Cardo';font-style: italic;font-weight: 400;font-display: swap;src: url("/squelettes/fonts/cardo_italic-regular_latin.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}

.color-white {color:white}
.color-black {color:black}
.color-ccc {color:#ccc}
.color-888 {color:#888}

.bg-color-white { background-color: white}
.bg-color-black { background-color: black}
.bg-color-black-opa-10 {background-color:rgb(0 0 0 / 0.10)}

.border-color-black {border-color:black}
.border-color-black-opa-10 {border-color:rgb(0 0 0 / 0.10)}
.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)}
.rounded-10 {border-radius:10px}
.rounded-15 {border-radius:15px}
.rounded-20 {border-radius:20px}
.rounded-30 {border-radius:30px}

.super-centered {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}
.mode-produit {mix-blend-mode:multiply}
.mode-noir-et-blanc {mix-blend-mode:luminosity}
    
.font-1 {font-family:var(--font-primary)}
.font-2 {font-family:var(--font-secondary)}
    
#cookie-bar.fixed {
max-width: 120rem;
margin-inline:auto;
right: 0;
background: black;
color: white;
padding:1.125rem .9375rem;
font-family: var(--font-secondary)}
    
.cb-msg {
display: block;
margin-bottom: .750rem;
font-size: 1rem}

#cookie-bar a {
vertical-align: middle;
line-height: 28px;
height: 30px}
    
#cookie-bar.fixed a {
padding: 0 0.625rem;
font-family: var(--font-primary)}
    
#cookie-bar.fixed a.cb-enable {
background: #48cb66;
border: 1px solid #48cb66;
font-size: .875rem;
color: black;
text-transform: uppercase}
    
#cookie-bar.fixed .cb-enable:hover {
background: #80ff95;
border-color: #80ff95}
    
#cookie-bar.fixed a.cb-disable,
#cookie-bar.fixed a.cb-policy {
background: none;
font-size: .750rem;
color: white}
    
#cookie-bar.fixed a.cb-disable {border: 1px solid rgb(255 255 255 / .2)}
#cookie-bar.fixed a.cb-policy {font-size: .625rem; color: #888}
    
/* 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 {outline: none}

.button:active,
.btn--primary:active,
.btn--secondary:active,
.btn--arrow: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%;margin: 0; border: none;border-top:1px solid currentColor}
.line {height: 1px}    

.btn--primary {line-height: 38px}
.btn--arrow {border-color: #ccc; height: 40px; width: 40px}

@keyframes arrow-animation-right {
    0%, 100% {opacity: 1;transform: translateX(0%)}
    50% {opacity: 0;transform: translateX(100%)}
    51% {opacity: 0;transform: translateX(-100%)}
	}

@keyframes arrow-animation-left {
    0%, 100% {opacity: 1;transform: translateX(0%)}
    50% {opacity: 0;transform: translateX(-100%)}
    51% {opacity: 0;transform: translateX(100%)}
	}

a:hover .arrow-right-anim {animation: arrow-animation-right .3s}

img {object-fit: cover}
sup{font-size: 60%!important}    
picture.bg-color-black img {opacity: .85}

    
/* ===================================================================
 *  HOME
 *
 * ------------------------------------------------------------------- */
.mainGrid {grid-template-columns: [left-gutter] 1fr [grid-content] minmax(10px, 1440px) [right-gutter] 1fr}
.mainGrid--full {grid-column: 1 / -1}
.mainGrid--content {grid-column: grid-content}

.colGrid_10 {grid-template-columns: repeat(10, minmax(10px, 1fr))}
.autoGrid {grid-auto-flow: column; grid-auto-columns: 1fr}

.grid-gap {grid-gap: var(--grid-gap)}
.grid-gap-large {grid-gap: var(--grid-gap-large)}
    
.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}

.dropdown-content {
z-index: 1;    
display: none;
background-color: #f9f9f9;
min-width: 180px}

.dropdown a[aria-current] {
background: var(--second-color);
color:var(--main-color)}
.dropdown-content a {padding-top: .35rem; padding-bottom: .35rem}
.dropdown-content a.on {color:var(--second-color)}

.home_seo h1, .creations h2 {font-size: var(--s2)}
.ss-creations h2 {font-size: var(--s3)}
.art_creations .art-chapo p {font-size: 1.125rem}

.list-authors  {text-align: center}
.list-authors li a {
display: inline-block;
padding-left: .25rem;	
padding-right: .25rem;	
font-size:  2rem;
font-family: 'Mynerve', cursive;
letter-spacing: -.05em;
line-height: 1em}
.list-authors li a.active {background:  black; color: white}
.list-authors li:nth-child(2n) a {font-size: 1.750rem}
.list-authors li:nth-child(3n + 1) a {font-size: 1.5rem}
.list-authors li:nth-child(5n - 1) a {font-size: 2.50rem}

table {
width: 100%;
border-collapse: separate;
border-spacing: 0}

td {
width: 50%;
padding:.250rem 0;
line-height: 1.3em}

td:first-child {
font-family: var(--font-primary);
font-weight: 400;
font-size: 1.250rem;
text-transform: uppercase}


/* ARTICLE
/* ---------------------------------------------------------------- */
.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}

p, li, .texteencadre-spip {line-height: var(--line-height)}

.rub-header h1,
.art-header h1 {
font-size: var(--s4);
letter-spacing: -.0125em}   
.art-text h2 {font-size: var(--s2)} 
.art-text h3 {} 
.art-text h4 {}
.art-text h5 {}
.art-chapo p, .rub-chapo p {font-size: var(--s2)}

.art-text :is(h2, h3, h4, h5, h6) {
margin-top:2.5em;	
font-weight: 400;
text-transform: uppercase;
line-height: var(--line-height-small);
letter-spacing: -.0125em}

.art-text :is(p, ul) {font-family: var(--font-secondary)}


.art-text :is(p, ul, .texteencadre-spip, blockquote, table),
.art-text :is(h2, h3, h4, h5, p, ul, .texteencadre-spip, blockquote, table) + :is(p, ul):first-of-type {margin-top:1.25em}

.art-text :is(p, ul, .texteencadre-spip, blockquote, table) + h2:first-of-type {margin-top:2.5em}

.art-text :is(h2, p, ul):first-of-type, 
.art-text .texteencadre-spip :is(h2, h3, h4, h5, h6, p, ul):first-of-type,
/.art-text .texteencadre-spip :is(h2, h4, h5) + :is(p, ul) {margin-top:0}

.art-text .texteencadre-spip {
position: relative;
overflow: hidden;
padding:1.875rem;
margin: 1.5em 0;
border-radius: 20px;	
border:none;
background: #e5e5e5;
font-size: 1rem;
color: black}
    
.art-text .texteencadre-spip :is(h2, h3, h4, h5, h6) {
margin-top: 1em;	
line-height: 1.35em;
text-transform: uppercase;
font-weight: 700;	
font-size: var(--s0)}

.art-text .texteencadre-spip :is(ul, p) {
font-family: var(--font-primary);
font-size: 1rem;
color: black}

.art-text ul.spip {list-style-position:inside}
/*.art-text ul.spip li {margin-bottom: .250rem}*/
.art-text ul.spip li::marker {
content:"\002022";
font-size: 1.125rem;
color: black}

.art-text strong {color: var(--second-color)} 

.art-text blockquote.spip {
border-left: 2px solid #ddd;    
margin: 1em 0 0;
padding-left: 1.250rem;
font-style: italic}
    
.art-text blockquote strong {
display: inline-block;
padding: 0;
background: none;
border-radius:0;
margin-top: .9375rem;
font-weight: 400;	
font-size: .875rem;
font-style: normal}  

:is(.art-chapo, .art-text) a {color: black}
:is(.art-chapo, .art-text) a.btn--text {color: white}
.texteencadre-spip a {color: var(--main-color)}
 
.precedent {border-right: 0rem solid white}
.suivant {border-left: 0rem solid white}


/* 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 rgb(238 244 251);
padding: 1.5rem 1.250rem;
margin: 0 auto}
    
.formulaire_spip fieldset fieldset {
border: none;
border-top: 5px solid rgb(238 244 251);
border-bottom: 5px solid rgb(238 244 251);
padding: 0;
padding-bottom: 1.875rem;
margin-top: 3.750rem}

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

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

.formulaire_spip .editer label {
display: block;
margin-bottom: .5rem;
font-family: var(--font-secondary);
color: black;
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 {margin-bottom:5rem}
.coordonnees .editer {padding:0 .9375rem;width:50%}
.coordonnees :is(.statut, .adresse) {width:100%}

: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 .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(--main-color);
font-family:var(--font-primary);    
font-size: 1.250rem;
font-weight: 400;
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:.5rem;
font-size:.875rem;
color:black}

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

.reponse_formulaire {
background:black;
padding :1.875rem;
margin: 1.875rem 0;
font-size: 1.250rem;
line-height: 1.333em;
text-align: center;
color:white}

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

.reponse_formulaire p {margin-bottom:0}
.reponse_formulaire.reponse_formulaire_erreur p {color:white}

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

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

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


/* 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 {}
.plan ul.spip li ul.spip ul.spip {margin-bottom:0}

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

.plan h2 a {color: white}

.plan h3 a {
padding: .9375rem;
background:#eee;
font-size: var(--s0);
line-height: 1.3em;
font-weight: 700;
color:black}

.plan li ul li h3 a {
background:#f5f5f5;
padding-left: 1.875rem;	
font-size:var(--s0);
font-weight: 400}

/* SS-RUB */
.plan ul.spip li strong a  {
background:#eee;
padding:.9375rem;
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:.9375rem;
font-size:var(--font-size);
font-weight: 400;
text-transform: uppercase;
color: black}

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