:root {
--main-color : #001c3c;
--main-light-color : #00326a;
--second-color : #fc5d03;
--second-light-color : #feceb3;
--third-color : #eeeeee;

--grid-gap-large:3.750rem;
--grid-gap:1.875rem;
    
--font-primary: 'Work Sans', sans-serif;
--font-secondary: 'Domine', serif;
--text-base-size: 1.125em;
--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: local('Work Sans'), url("/squelettes/fonts/work-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: 'Domine';font-style: normal;font-weight: 400;font-display: swap;src: local('Domine'), url("/squelettes/fonts/domine-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}

.main-color {color:var(--main-color)}
.second-color {color:var(--second-color)}
.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-main-color { background-color: var(--main-color)}
.bg-main-light-color { background-color: var(--main-light-color)}
.bg-second-color { background-color: var(--second-color)}
.bg-second-light-color { background-color: var(--second-light-color)}
.bg-third-color { background-color: var(--third-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)}
    
#cookie-bar.fixed {
max-width: 120rem;
margin-inline:auto;
right: 0;
background: var(--main-light-color);
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: var(--main-color);
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 {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}
        
.btn--primary {line-height: 35px}
.btn--secondary {line-height: 33px}

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

    
/* ===================================================================
 *  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}

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

.colGrid_2 {grid-template-columns: repeat(2, 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_carousel .mask {opacity: .3}
.home_carousel .title{font-size: var(--s4)}

.home_seo .intro {
grid-column: 3 / span 6;
grid-row:1}
.home_seo picture {grid-row: 1 / span 2}
.home_seo .list-art {grid-row: 2}
.home_seo .title,
.home_zoom .title {font-size: var(--s4)}
.home_seo p::after {
position: absolute;
left: -30px;
top: 0;
content: "•";
font-size: 30px;
color: var(--second-color)}

.home_rub .colGrid_2 article {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px}
.home_rub .colGrid_2 article + article {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px}

.circle {
border-radius: 50%;
background: var(--second-color) url("/squelettes/design/fond_zoom.webp") no-repeat left top / cover}
.circle::after {
content:"";
display: block;
padding-bottom: 100%}

.home_partners .selection-header {
border-top-left-radius: 20px;
border-top-right-radius: 20px}
.sepLine {
height: 5px;
width: 150px;
background: white}

.home_partners .selection-items:not(:last-child) {border-right: 1px solid rgb(255 255 255 / .15)}

.row_actus .header-section {grid-column: span 2}
.list-art article {grid-column: span 4}
.list-team h2 {font-size: var(--s2)}
.card--team,
.card--team.row + .row {grid-column: span 3}
.card--team.row {grid-column: 1 / span 3}

/* FICHE */
.art-chapo .ssTitle {font-size: var(--s2)}

.mission {grid-column: 3 / span 10}
.details {grid-column: 3 / span 10}

.picto {
border-radius: 50%;	
width: 145px;
height: 145px}

.bg-mission {
grid-column: 1 / span 13;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px}
.bg-details {
grid-column: 2 / span 13;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px}

.mission, .bg-mission {grid-row:3}
.details, .bg-details {
grid-row:4;
margin-top: 1.875rem}	

.mission strong {
display: inline-block;
margin-bottom: .9375rem;	
font-family: var(--font-primary);
font-weight: 400;
font-size: 1.250rem;
text-transform: uppercase}

.mission ul.spip {list-style-position: inside}
.mission ul.spip li {margin-bottom: .250rem}

.mission ul.spip li::marker {
content:"-";
font-size: 1.250rem;
color: black}

.details--2 p {font-size: var(--s1)}

.card_prev-next,
.card_prev-next--bg {grid-row:8}
.card_prev-next .title {font-size: var(--s3)}
.header_prev-next {
margin-top: auto;
margin-bottom: auto}
.ref, .date {margin-bottom: .125rem}
.ref-vide{height: 100%}
.ref-vide.prev{max-height: calc(50% - 2px)}

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}

.pagination_precedent_suivant {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column: 2 / -2;
grid-gap: var(--grid-gap);
margin-bottom: 3.750rem;
list-style: none}

.pagination-item :is(a, span){
font-size: .875rem;
color: black;
text-transform: uppercase;
text-decoration: none}
.pagination-item span{color: #666}
.pagination-item.prev {text-align: right}

/* ARTICLE
/* ---------------------------------------------------------------- */
::selection {
background: var(--second-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}
    
:is(.rub-chapo, .art-chapo)::after {
position: absolute;
top: -25px;
left: 0;
right: 0;
margin-inline:auto;
content: "";
background-image: url(/squelettes/design/ellipses@2x.png);
background-size: 100% auto;
background-repeat: no-repeat;
width: 150px;
height: 85px}

.art-chapo p,
.art-text :is(p, li, h2, h3, h4, h5, h6),
.texteencadre-spip,
p {line-height: var(--line-height)}

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

:is(.rub-header, .art-header) h1 strong {
display: block;
margin-top: .5rem;	
font-size: var(--s2);
font-weight: 400;
line-height: var(--line-height-small)} 

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

.art-text :is(p, ul) {font-family: var(--font-secondary)}
.art-text :is(p, ul, h2, h3, h4, h5, h6, .texteencadre-spip, blockquote, table) {margin-top:1.25em}

.art-text h2:first-of-type,
.art-text .texteencadre-spip :is(h2, h3, h4, h5, h6, p, ul):first-of-type,
.art-text .cs_blocs :is(h2, h3, h4, h5, h6, .texteencadre-spip, blockquote, table):first-of-type {margin-top:0}
    
.art-text .texteencadre-spip {
position: relative;
overflow: hidden;
padding:1.875rem;
margin: 1.5em 0;
border-radius: 20px;	
border:none;
background: var(--second-light-color);
color: black}
    
.art-text .texteencadre-spip :is(h2, h3, h4, h5, h6) {
line-height: 1.35em;
text-transform: none;
font-size: var(--s1)}

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

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

.art-text blockquote.spip {
border-left: 3px solid var(--purple-color);    
margin: 1em 0 0;
padding-left: .9375rem}
    
.art-text blockquote p {color: #666}  
    
.art-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)}  
    
.art-text blockquote strong::before {
position: absolute;
content: "_";
left: 0;
top: 5px;
font-size: 1rem;
line-height: 0}  

:is(.art-chapo, .art-text) a {color: black}
.texteencadre-spip a {color: var(--main-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 {color: white}
:is(.art-chapo, .art-text) a:hover.btn--text {background-color: var(--main-color)}
 
.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 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 {
border-radius: 20px;	
background:var(--main-color);
padding :1.875rem;
margin: 1.875rem 0;
font-size: 1.250rem;
line-height: 1.333em;
text-align: center;
color:var(--second-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}

.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:var(--main-color);
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(--s1);
line-height: 1.3em;
font-weight: 400;
color:black}

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