html {
  scroll-behavior: smooth;
}
.layout-container{
    font-family: 'Quicksand';
    font-size: 15px;
    line-height: 1.3em;
    color: #040704;
    background-color: #fff;
}
a{
    color: #ea401f;
    font-weight: 700;
    text-decoration: none;
}
.milieu a{
    color: #ea401f;
    font-weight: 700;
    text-decoration: none;
    background: linear-gradient(0deg, #f9d523, #f9d523) no-repeat right bottom / 0 var(--bg-h);
    transition: background-size 350ms;
    --bg-h: 100%;
}
.milieu a:where(:hover, :focus-visible) {
  background-size: 100% var(--bg-h);
  background-position-x: left;
}
.milieu #block-views-block-programmes-block-1 a,
.milieu #block-views-block-ressources-block-1 a{
    background: linear-gradient(0deg, #fff, #fff) no-repeat right bottom / 0 var(--bg-h);    
}
.milieu #block-views-block-programmes-block-1 a:where(:hover, :focus-visible),
.milieu #block-views-block-ressources-block-1 a:where(:hover, :focus-visible){
  background-size: 100% var(--bg-h);
  background-position-x: left;
}
p{
    font-size: 15px;
    line-height: 1.3em;
}
img{
    max-width: 100%;
    height: auto;
    margin-bottom: -5px;
}
h1, .region-bas:before, .page-node-4 .region-deux:before{
    font-weight: 700;
    font-size: 40px;
    padding-bottom: 20px;
    line-height: 1em;
}
h2, #block-views-block-equipe-block-1 h1, #block-views-block-equipe-block-2 h1, #block-views-block-equipe-block-3 h1{
    font-weight: 700;
    font-size: 30px;
    line-height: 1em;
}
h3, .field--name-field-nom-partenaire{
    font-weight: 700;
    font-size: 20px;
}
h4{
    font-weight: 400;
    font-size: 20px;
}
h5{
    font-weight: 400;  
    font-size: 20px;
    margin: 10px 0;
}
h6{
    font-weight: 700;
    font-size: 15px;
}
.deux .field--name-field-photo, .views-field-field-photo-equipe, .slide__media{
    margin-top: 40px;
    box-shadow: 0px 0px 8px #0407043d;
   background-image: linear-gradient(to right, #040704 50%, rgba(255,255,255,0) 0%), linear-gradient(to right, #040704 50%, rgba(255,255,255,0) 0%),
    linear-gradient(to bottom, #040704 50%, rgba(255,255,255,0) 0%), linear-gradient(to bottom, #040704 50%, rgba(255,255,255,0) 0%);
    background-position: top, bottom, left, right;
    background-size: 25px 2px, 25px 2px, 2px 25px, 2px 25px;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    border: none;
    padding: 2px 2px 0 2px;
}

textarea, input{
    background-image: linear-gradient(to right, #040704 50%, rgba(255,255,255,0) 0%), linear-gradient(to right, #040704 50%, rgba(255,255,255,0) 0%),
    linear-gradient(to bottom, #040704 50%, rgba(255,255,255,0) 0%), linear-gradient(to bottom, #040704 50%, rgba(255,255,255,0) 0%);
    background-position: top, bottom, left, right;
    background-size: 25px 2px, 25px 2px, 2px 25px, 2px 25px;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    border: none;
    box-shadow: 0px 0px 8px #0407043d;
    background-color: #fff;
    display: block;
    padding: 10px 20px;
    font-weight: 700;
    margin: 8px 0 30px 0!important;;
}
label{
    padding-left: 20px;
}
input{
    width: calc(100% - 37px);
}
#edit-actions input{
    background-color: #ea401f;
    color: #fff;
    border: none;
    background-image: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    width: auto;
    margin-left: auto!important;
    margin-right: auto!important;
}
#edit-actions input:hover{
    background-color: #f9d523;
}

/* NAVIGATION */
#block-navigationprincipale{
    display: none;
}
.navigation{
    background-color: #f9d523;
    background-image: linear-gradient(to right, #040704 50%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 25px 2px;
    background-repeat: repeat-x;
    box-shadow: 0px 0px 12px #04070482;
    position: fixed;
    z-index: 20;
    width: 100%;
    padding-top: 7px;
}
.responsive-menu-toggle-icon span.label{
    display: none;
}
.responsive-menu-toggle{
    width: 100%;
}
.responsive-menu-toggle-icon{
    float: right;
}
.mm-wrapper_opening .mm-menu_position-right.mm-menu_opened~.mm-slideout{
    -webkit-transform: translate3d(-240px,0,0);
    transform: translate3d(-240px,0,0);
}
.mm-menu_offcanvas{
    width: 225px;
    max-width: 225px;
}
.mm-panels {
    text-align: center;
    font-family: Quicksand;
    font-weight: 700;
    color: #040704;
}
.mm-panel{
    background-color: #f9d523;    
}
.mm-listitem__text{
    padding-left: 10px;
}
.mm-navbar_sticky{
    background-color: #0992d6;
    color: #fff;
}
.mm-panels a.is-active{
    background-color: #ea401f;
    color: #fff;
}
.responsive-menu-toggle-icon:before, .responsive-menu-toggle-icon:after, .responsive-menu-toggle-icon span.icon{
    background: #040704;
}

/* BRANDING */
.brand{
    padding: 35px 15px 50px 15px;
    background-image: url("Dessins.svg"), url("BgBranding2.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: 100% 25%, left bottom;
    background-size: auto 65%, auto 70%;
    z-index: 10;
    position: relative;
    top: 40px;
}
#block-identitedusite{
    max-width: 200px;
}


/* EN-TETE */
.entete{
    position: relative;
    top: -20%;
}
.entete .field--name-body{
    color: #fff;
    padding: 50px 30px 20px 30px;
    line-height: 1.5em;
    text-align: center;
}
.page-node-1 .entete, .page-node-4 .entete{
    background-color: #39b54a;
}
.page-node-2 .entete , .page-node-5 .entete {
    background-color: #0992d6;
}
.page-node-3 .entete, .page-node-6 .entete{
    background-color: #ea401f;
}
.field--name-field-photo-en-tete img{
    margin-bottom: -4px;
}

/* CONTENU */
#block-famille-content, #block-views-block-ressources-block-1, .messages{
    margin: 50px 20px 0px 20px;
    font-size: 16px;
}
#block-famille-content p{
    font-size: 18px;
}
#block-famille-content .field--name-body{
    text-align: center;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover, .ui-accordion .ui-accordion-header{
    background: #ea401f;
    background: linear-gradient(90deg, #0992d6 35px, #ea401f 4%) 100%;
    border: 0;
    box-shadow: 0px 0px 6px #04070482;
    font-weight: 700;
    color: #fff;
    padding: 0;
    transition: all 0.2s ease;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr{
    border-radius: 8px;
}
.ui-widget{
    font-family: 'Quicksand';
}
.ui-accordion .ui-accordion-content{
    background-color: #f9d523;
    margin-top: -10px;
    border-radius: 0 0 12px 12px;
    border: 0;
    padding: 25px 15px 15px 20px;
}
#block-views-block-ressources-block-1 .views-row{
    margin-top: 30px;
}
.views-accordion-header .field-content{
    padding: 8px 5px 8px 20px;
    display: inline-block;
    width: calc(100% - 60px);
}
.ui-icon, .ui-widget-content .ui-icon, .ui-state-active .ui-icon, .ui-button:active .ui-icon, .ui-state-active .ui-icon:hover, .ui-button:active .ui-icon:hover, .ui-state-hover .ui-icon, .ui-state-focus .ui-icon{
    background-image: url("IconePlus.svg");
    background-position: 8px 8px;
    background-size: 18px 18px;
    width: 27px;
    height: 27px;
    vertical-align: top;
    margin: 0;
}
.ui-state-active .ui-icon, .ui-button:active .ui-icon{
    background-image: url("IconeMoins.svg"); 
}
.views-field-field-description-ress{
    margin-bottom: 15px;
}
.views-field-field-lien-ress a{
    background-image: url("IconeOrdi.svg");
    margin: 20px 0 5px 0;
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 30px;
    background-size: 21px;
}
.ui-widget-content a{
    color: #ea401f;
    line-height: 1.1em;
}
.views-field-field-lien-ress ul, .views-field-field-pdf-ress ul, .views-field-field-lien-ress li, .views-field-field-fichier-ress li{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.views-field-field-lien-ress li, .views-field-field-fichier-ress li{
    margin-bottom: 5px;
}
.is-active a{
    color: #040704;
}
.views-field-field-video-ress{
    margin-top: 20px;
}

.views-field-field-video-ress .field-content{
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.views-field-field-video-ress iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#block-views-block-ressources-block-1 label{
    padding-left: 0;
    display: block;
    padding: 40px 40px 20px 40px;
    font-weight: 700;
    font-size: 22px;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button{
    font-family: 'Quicksand';
}
.bef-exposed-form .form--inline > .form-item{
    background-image: linear-gradient(to right, #040704 50%, rgba(255,255,255,0) 0%), linear-gradient(to right, #040704 50%, rgba(255,255,255,0) 0%),
    linear-gradient(to bottom, #040704 50%, rgba(255,255,255,0) 0%), linear-gradient(to bottom, #040704 50%, rgba(255,255,255,0) 0%);
    background-position: top, bottom, left, right;
    background-size: 25px 2px, 25px 2px, 2px 25px, 2px 25px;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    border: none;
    margin-top: 0;
}
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;       /* Remove default arrow */
    background-image: url(...);   /* Add custom arrow */
    background-color: #0992d6;
    color: #fff;
    font-weight: 700;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 10px 0;
    border: none;
    border-radius: 10px;
    margin-bottom: 40px;
    box-shadow: 0px 0px 6px #04070482;
    transition: all 0.2s ease;
}
select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}
select:hover, select:focus, .ui-state-active:hover, .ui-widget-content .ui-state-active:hover, .ui-widget-header .ui-state-active:hover, a.ui-button:active:hover, .ui-button:active:hover, .ui-button.ui-state-active:hover, .ui-accordion .ui-accordion-header:hover{
    box-shadow: none;   
}
.pager{
    margin: 60px 0 100px 0;
}

/* DEUX */
.page-node-1 .deux, .page-node-3 .deux{
    background-image: url("soleil.svg");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 45% auto;
    padding-top: 120px;
}
.region-deux{
    padding: 20px;
}
.page-node-1 .deux, .page-node-2 .deux, .page-node-3 .deux{
    background-image: url("Courbe.svg");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 175%;
    padding-bottom: 75px;
    margin-bottom: -25px;
    position: relative;
    z-index: 2;
}
.page-node-2 .deux{
    background-position: left top;
    margin-top: 60px;
    padding-top: 40px;
}
#block-views-block-programmes-block-1 .views-row{
    margin-top: 60px;
    padding-bottom: 50px;
    background-image: linear-gradient(to right, #040704 50%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 25px 2px;
    background-repeat: repeat-x;
}
.page-node-4 .region-deux{
    background-color: #fff;
    padding: 0 20px 20px 20px;
}
#block-nosobjectifs{
    background-color: #0992d6;
    color: #fff;
    border-radius: 20px;
    padding: 20px 15px;
    box-shadow: 0px 0px 12px #04070482;
}
.page-node-3 #block-nosobjectifs{
    background-color: #39b54a;
}
#block-views-block-partenaires-block-1{
    background-image: linear-gradient(to right, #040704 50%, rgba(255,255,255,0) 0%);
    background-position: top;
    background-size: 25px 2px;
    background-repeat: repeat-x;
}
.view-partenaires{
    padding-top: 60px;
}
.view-partenaires .views-row{
    padding-bottom: 15px;
    line-height: 1.1em;
}
details{
    border: none;
    margin-bottom: 0;
    margin-top: 25px;
}
details summary{
    background-color: #ea401f;
    color: #fff;
    font-weight: 700;
    display: inline;
    border-radius: 10px;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
    box-shadow: 0px 0px 6px #04070482;
    padding: 0 15px 0 0;
    height: 40px;
    transition: all 0.2s ease;
}
summary:hover{
    box-shadow: none;    
}
details summary:before{
    content: "";
    background-image: url("IconePlus.svg");
    width: 40px;
    height: 40px;
    display: inline-block;
    background-color: #0992d6;
    border-radius: 10px;
    margin-right: 15px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: 8px 7px;
    background-size: 25px 25px;
    transition: all 0.2s ease;
}
details[open] summary:before{
       background-image: url("IconeMoins.svg"); 
}
.views-field-field-details-prog{
    background-color: #f9d523;
    border-radius: 20px;
    padding: 15px 17px 15px 20px;
    position: relative;
    top: -25px;
    margin-left: 20px;
}
.page-node-6 .deux p{
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 28px;
    margin: 5px 0;
}
#block-coordo1-2, #block-coordo2-2, #block-coordo3-2{
    margin-bottom: 15px;
}
#block-contactblock{
    margin-top: 60px;
}
.page-node-6 .deux{
    background-image: url("TroisBonhommes.svg");
    background-repeat: no-repeat;
    background-position: 98% bottom;
    background-size: 25% auto;
    padding-bottom: 80px;
}
.page-node-6 .milieu{
    background-image: url("BgCoordos.svg");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 175%;
    padding-bottom: 60px;
}
.page-node-4 .region-deux:before{
    content: "Nos partenaires";
    display: block;
    text-align: center;
    margin-top: 80px;
}
.page-node-4 .region-deux img{
    max-width: 50%;
    display: block;
    margin-bottom: 20px;
}
.page-node-4 .region-deux .block{
    margin-top: 50px;
}
.field--name-field-lien-partenaire{
    background-image: url("IconeOrdi.svg");
    margin: 20px 0;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 34px;
}
.field--name-field-description-partenaire{
    font-weight: 700;
    font-size: 0.9em;
}
#block-views-block-activites-block-2 h4, #block-views-block-activites-block-2 h6, #block-views-block-activites-block-2 p{
    margin: 0;
}
.date, .lieu, .cout, .inscription, .views-field-field-autres-act{
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 40px;
    min-height:35px;
    padding-top: 7px;
    background-size: 36px auto;
    margin-top: 15px;
}
.date{
    background-image: url("IconeDate.svg");

}
.lieu{
    background-image: url("IconeLieu.svg");
}
.cout{
    background-image: url("IconeCout.svg");   
}
.inscription{
    background-image: url("IconeInscription.svg");   
}
.views-field-field-autres-act{
    background-image: url("IconeInfos.svg");   
}
.views-field-field-lieu-pre, .views-field-field-date-prec, .views-field-field-cout-prec, .views-field-field-inscriptions-prec, .views-field-field-autres-act p{
    line-height: 1.1em;
}
#block-views-block-activites-block-2 .views-row{
    margin-bottom: 60px;
}

/* JAUNE */
.jaune{
    background-color: #f9d523;
}
.region-jaune{
    padding: 50px 20px 0px 20px;
} 
#block-notreequipe-2, #block-views-block-equipe-block-1 h1, #block-views-block-equipe-block-2 h1, #block-views-block-equipe-block-3 h1, #block-views-block-activites-block-2 h1{
    text-align: center;
}
.jaune h6{
    margin-top: 0;
}
#block-views-block-equipe-block-1, #block-views-block-equipe-block-2{
    background-image: linear-gradient(to right, #040704 50%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 25px 2px;
    background-repeat: repeat-x;
    padding: 40px 0 50px 0;
}
#block-views-block-equipe-block-3{
    padding-top: 40px;
}
.page-node-1 .jaune, .page-node-3 .jaune{
    background-image: url("BasJaune1.svg"), linear-gradient(0deg, rgba(255,255,255,1) 1%, rgba(249,213,35,1) 1%);
    background-repeat: no-repeat, no-repeat;
    background-position: right bottom;
    padding-bottom: 120px;
}
.page-node-1 .jaune{
     background-image: url("BasJaune1.svg"), linear-gradient(0deg, rgba(255,255,255,1) 3%, rgba(249,213,35,1) 3%);   
}
.page-node-1 .jaune{
    text-align: center;
    padding-bottom: 80px;
}
.page-node-1 .jaune h3, .page-node-1 .jaune h6{
    margin: 0;
}
.page-node-1 .jaune h4{
    margin: 10px 0;
}
#block-views-block-activites-block-1 .views-row{
    margin: 40px 0;
}
a.bouton{
    color: #fff;
    background-color: #ea401f;
    padding: 8px 12px;
    box-shadow: 0px 0px 8px #0407044f;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}
a.bouton:hover{
    color: #fff;
    background: #0992d6!important;
}



/* BAS */
.bas{
    padding: 60px 20px;
    text-align: center;
} 
.page-node-1 .region-bas:before{
    content: "Suivez-nous sur Facebook!";
    display: block;
    text-align: center;
}
.region-bas p{
    font-weight: 700;
}
.bas .block{
    padding: 20px 0;
}
.page-node-1 .bas a{
    color: #fff;
    background-color: #ea401f;
    padding: 8px 12px;
    box-shadow: 0px 0px 8px #0407044f;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.page-node-1 .bas a:hover{
    color: #fff;
    background-color: #f9d523;
}
.page-node-1 .bas .field--name-body{
    margin-bottom: 15px;
}
.slide__media{
    padding-bottom: 2px;
}
.slick-arrow{
    width: 75px;
}
.slick-arrow::before{
    color: #0992d6;
    opacity: 1;
    transition: all 0.2s ease;
    font-size: 3.25rem;
}
.slick-arrow:hover::before{
    color: #ea401f;
}
.slide__thumbnail img{
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  transition: all 0.2s ease;
}
.slide__thumbnail img:hover{
  filter: grayscale(0%);
}

/* COORDONNEES */
.coordonnees{
    background-image: url("BgCoordos.svg");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 175%;
    padding-bottom: 60px;
}
.region-coordonnees{
    padding: 20px;
}
.coordonnees p{
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 28px;
    margin: 5px 0;
}
p.tel{
    background-image: url("IconeTel.svg");
}
p.fax{
    background-image: url("IconeFax.svg");
}
p.courriel{
    background-image: url("IconeCourriel.svg");
}
p.facebook{
    background-image: url("IconeFacebook.svg");
    padding-left: 25px;
}
p.facebook a{
    color: #040704;
    text-decoration: none;
}
p.map{
    background-image: url("IconeMap.svg");
    background-size: 20px auto;
    background-position: left top;
}
#block-coordo1, #block-coordo2{
    width: 49%;
    display: inline-block;
    vertical-align: top;
}
#block-coordo3{
    background-image: url("Benevolat.svg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 75px auto;
}