:root {
--main-color : #b24349;
--second-color : #575757;
--second-light-color : #a09fa2;
--third-color : #cdcb92;

--grid-gap-large:3.750rem;
--grid-gap:1.875rem;
    
--font-primary: 'Nunito Sans', sans-serif;
--font-secondary: 'Cardo', serif;
--text-base-size: 1.125em;
--body-line-height: 1.5em;

--ratio: 1.4;
--s0: clamp(1.125rem,1rem + 0vw,1rem);
--s1: clamp(1.375rem,1.19rem + 0.32vw,1.5rem);
--s2: clamp(1.625rem,1.39rem + 0.85vw,2rem);
--s3: clamp(2rem,1.61rem + 1.7vw,3rem);
--s4: clamp(2.5rem,1.83rem + 3.04vw,4rem);
--s5: clamp(3.0rem,2.04rem + 5.07vw,5.5rem);
--line-height: 1.5;
--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}}
    
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-28{font-size:1.75rem}.size-30{font-size:1.875rem}.size-40{font-size:2.5rem}.size-50{font-size:3.125rem}.size-60{font-size:3.75rem}
    
@font-face {font-family: 'Nunito Sans';font-style: normal;font-weight: 400;font-display: swap;src:url("/squelettes/fonts/nunito-sans_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: 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}

.main-color {color:var(--main-color)}
.second-color {color:var(--second-color)}
.color-white {color:white}
.color-black {color:black}
.color-ccc {color:#ccc}

.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-third-color { background-color: var(--third-color)}
.bg-light-gray { background-color: #f3f3f3}
.gradient-color-gray {background: linear-gradient(to right, var(--second-color), var(--second-light-color))}

.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)}
.border-main-color {border-color:var(--main-color)}
.rounded-10 {border-radius:10px}
.rounded-15 {border-radius:15px}
.rounded-20 {border-radius:20px}
.rounded-30 {border-radius:30px}

.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}
.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)}
    
body div#tarteaucitronRoot.tarteaucitronBeforeVisible:before {background: black; opacity: .75}
body div#tarteaucitronAlertBig:before {content: ''} 
body div#tarteaucitronRoot div#tarteaucitronAlertBig {
width: 55%;
background: linear-gradient(180deg, #666 0%, #575757 100%);	
border-radius: 10px;
padding: 1.875rem .9375rem;
font-family: var(--font-primary)}
body div#tarteaucitronRoot span#tarteaucitronDisclaimerAlert {
font-size: 1.5rem;	
font-family: var(--font-secondary) !important}
body #tarteaucitronRoot .tarteaucitronAllow,
body #tarteaucitronRoot .tarteaucitronDeny,
body #tarteaucitronAlertBig #tarteaucitronCloseAlert{
padding: 8px 10px !important;
border-radius: 3px;	
font-family: var(--font-primary)!important;	
text-transform:uppercase}
body #tarteaucitronRoot .tarteaucitronAllow {background: #00660A!important;box-shadow: 0px 0 7px rgb(0 0 0 / .25);}
body #tarteaucitronRoot .tarteaucitronDeny {background: #890000 !important}
body #tarteaucitronAlertBig #tarteaucitronCloseAlert {
background: none;
border:1px solid rgb(255 255 255 / .3);	
margin-bottom: 0 !important;
padding: 8px 10px 7px !important;	
color: white}


/* 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 {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 {line-height: 35px}
.btn--secondary {line-height: 33px}
.btn--more {border-bottom: 2px dotted var(--main-color)}
.btn--more.color-white {border-bottom-color: white}

img {object-fit: cover}
sup{font-size: 60%!important}    
.texteencadre-spip + iframe {margin-top: 3.750rem}
    
/* ===================================================================
 *  HOME
 *
 * ------------------------------------------------------------------- */
.mainGrid {grid-template-columns: 6rem repeat(12, minmax(10px, 1fr)) 6rem}
.full {grid-column: 1 / -1}
.mainGrid > .content {grid-column: 2 / -2}
.mainGrid > .half {grid-column: 5 / -5}
.inline-grid {display: inline-grid}

.colGrid_12 {grid-template-columns: repeat(12, minmax(10px, 1fr))}
.colGrid_12 > .half {grid-column: 4 / -4}
.colGrid_12 > .half.plus {grid-column: 3 / -3}

.autoGrid {
--min-column-size:10px;	
grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size),  100%), 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}

.mainNav, .secondNav {width: 495px}

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

.dropdown a[aria-current] {background: rgb(255 255 255 / 0.2)}
.dropdown-content a[aria-current] {background: #e5e5e5}
.subNav a[aria-current] {color: var(--main-color)}
.secondNav .dropdown {margin-left: auto}

.leafLeft::after,
.leafRight::after {
content: '';
position: absolute;
height: 65px;
width: 155px;
left: 7%;
top: 9.25%;
background-image: url("/squelettes/design/feuillages.png");
background-size: 100% auto;	
background-repeat: no-repeat}

.leafRight::after {
left: inherit;
right: 7%;
top: 9.25%;
transform: scaleX(-1)}

.home_4cols .rub-article:not(:last-child) {border-right: 1px solid rgb(0 0 0 / 0.10)}
.home_eshop {background: linear-gradient(90deg, var(--second-color) 0%, var(--second-light-color) 50%, var(--second-light-color) 100%)}
.home_eshop .art-header {
grid-column: 3 / span 5;
align-self: center}
.home_eshop .art-logo {grid-column: span 7}
.home_eshop img {height: 100%}

.home_eshop .art-header::after {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -75px;	
content: "";
height: 150px;
width: 150px;
background: var(--second-light-color);	
clip-path: polygon(50% 0%, 100% 50%, 50% 100%)}

.home_temoignage {
background-image: url(/squelettes/design/gastronomie.webp);
background-repeat: no-repeat;
background-size: contain}
.home_temoignage .art-header {grid-column: 3 / span 4}
.home_temoignage ul {grid-column: 8 / span 6}

.home_temoignage .selection-logo {
grid-column:1 / span 5;	
grid-row: 1}
.home_temoignage .selection-logo img {height: 100%}

.home_temoignage li:first-child {border-top: 1px solid rgba(255 255 255 / .1)}
.home_temoignage .thumbnail {flex:0 1 180px}

.row_actus + footer .footer {border-top:3px solid white}
.row_actus .title {grid-column-end: span 12}

/* ARTICLE
/* ---------------------------------------------------------------- */
::selection {
background: var(--third-color);	
color:black}

.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-chapo p,
.art-text (p, li),
.texteencadre-spip,
p {line-height: var(--line-height)}

.art-header h1 {font-size: var(--s4)} 

.page_art-couteaux .art-header h1,
.rub-header h1,
.art-text h2 {font-size: var(--s3); line-height: 1.35em}   
.art-text h3 {font-size: var(--s2); line-height: 1.35em} 
.art-text h4,
.art-chapo p {font-size: var(--s1); line-height: var(--line-height)}
.art-text h5 {font-size: var(--s0); line-height: var(--line-height)} 

.art-text :is(h2, h3, h4, h5) {font-weight: 400}
.art-text :is(p, ul) {font-family: var(--font-secondary); color: #555}

.art-text :is(p, ul) + :is(h2, h3, h4, h5){margin-top: 1.25em}

.art-text :is(p, ul, h2, h3, h4, h5, .texteencadre-spip, blockquote, table) {margin-bottom:.5em}
.art-text picture {
margin-top: 1.5rem;
margin-bottom: 1.5rem}    

.art-text .texteencadre-spip {
position: relative;
overflow: hidden;
padding:1.5rem;
margin: 1.5em 0;
border:none;
border-bottom-right-radius: 10px;	
border-top-right-radius: 10px;	
border-left: 3px solid var(--main-color);
font-family: var(--font-secondary);
font-size: 1.125rem;
font-weight: 400;
color: black;
background: var(--third-color);
background: linear-gradient(90deg, rgba(219,217,166,1) 0%, rgba(205,203,146,1) 100%) }
    
.art-text .texteencadre-spip :is(h2, h3, h4, h5) {
line-height: 1.35em;
text-transform: none;
font-size: var(--s2)}

.art-text .texteencadre-spip i,
.art-text blockquote i {
display: inline-block;
margin-bottom: .250em;
font-style: normal;
font-family: var(--font-primary);
font-size: var(--s0);
line-height: 1.25em;	
text-transform: uppercase;
letter-spacing: 1px}

.art-text blockquote i {color: white}

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

.art-text ul.spip {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: currentColor}
    
:is(.art-chapo, .art-text) strong {font-weight: 400}

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

.art-text blockquote.spip {
padding: 1.5rem;
margin: 1.5em 0;
border-radius: 10px;
background: var(--main-color);
color: #ccc}  
.art-text blockquote :is(p, ul) {color: #ddd} 

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

:is(.art-chapo, .art-text) a {color: black; text-decoration-color: var(--main-color)}
.texteencadre-spip a {color: var(--main-color)}
.art-text blockquote.spip a {text-decoration-color: var(--third-color)}  

    
:is(.art-chapo, .art-text) a:hover {background-color: var(--third-color); color: black}
: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}

:is(.art-chapo, .art-text) a.btn--text {padding: 1.250rem .9375rem}

.art-text blockquote a,
.art-text blockquote strong {color: white}
.art-text blockquote a:hover {background-color: rgba(255 255 255 / .15);color: white}

.next_prev a:hover svg {margin: 0}
.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 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.250rem;
font-weight: 400;
text-transform: uppercase;
text-align: center;
color: black}

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

.formulaire_spip .editer label {
display: block;
margin-bottom: .5rem;
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 .statut label {display:block}
.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: 44px;
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;
padding-left: .9375rem;
padding-right: .9375rem;
height: 44px;
line-height: 44px;
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}

.footer .formulaire_spip [type="submit"] {font-size: .750rem}

.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(--main-color);
padding :1.875rem;
margin: 1.875rem 0;
font-size: 1.250rem;
line-height: 1.333em;
text-align: center;
color:black}

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

.art-text .reponse_formulaire p {margin-bottom:0; 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: 1.125rem .9375rem;
background:var(--third-color);
font-size: var(--s0);
text-transform: uppercase;
line-height: 1.3em;
font-weight: 400;
color:black}

.plan h2 a {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: .5rem .5rem .5rem .9375rem;
font-size: var(--font-size);
font-family: var(--font-secondary);		
color: black}