@font-face {

    font-family: 'd-din';

    src: url("../fonts/d-din/d-din-webfont.woff2") format("woff2"),

        url("../fonts/d-din/d-din-webfont.woff") format("woff");

}



/**

* PAGE

**/

.page section, .page div.banner, .page div.content, .page_communication{

    position: relative; width: 1140px; max-width:95%; margin:120px auto; text-align: left;

}

.page div.content, .page_communication{

    margin: 30px auto;

}

header.container, nav div.container{

    width: 1140px; max-width:95%; margin:0.2em auto; text-align: left;

}

a{

    text-decoration: none;

    color: black;

}

a:hover{

    text-decoration: none;

    color: black;

}

nav a:hover{

    text-decoration: none;

}

nav a.title_ressources{

    font-size: 18px;

    justify-content: center;

    width: 200px;

}

footer{

    margin-top: 50px;

}



figcaption.spip_doc_legende{

    display: none;

}



body{

    font-family: var(--font-secondary);

}

.page section.page-background-width{

    width: 100%;

    max-width: 100%;

    background: var(--color-primary);

    padding: 0;

    margin: 0;

}

.page section.page-background-width div.row{

    width: 1140px;

    max-width: 95%;

    margin: 0em auto; 

}



h1, h2, h3, h4{

    font-family: var(--font-primary);

}

h1{

    font-size: var(--font-size-h1);

}

h2{

    font-size: var(--font-size-h2);

}

h3{

    font-size: var(--font-size-h3);

}

h4{

    font-size: var(--font-size-h4);

}



.btn-orange{

    background-color: var(--color-secondary);

    color: white;

}

.btn-orange:hover{

    background-color: white;

    color: var(--color-secondary);

    border: 1px solid var(--color-secondary);

}

.btn:focus{

    box-shadow: none;

}

div.card-header{

    background-color: var(--color-primary);

}

div.card-header a {

    color: white;

}

/**

* HEADER

**/

header .h1{

    color: var(--color-secondary);

    font-weight: bold;

    line-height: 40px;

    font-size: 35px;

    font-family: var(--font-primary);

}

/* last div in the header  */

header div.slogan{

    width: 43%;

}

    header div.slogan p{

        font-weight: 900;

        color: var(--color-primary);

    }

div.logo{

    width: 20%;

}

header div.contact a.btn{

    z-index:2;

    background-color: var(--color-tertiary);

    outline: var(--color-tertiary);

    border-color: var(--color-tertiary);

    padding: 5px 15px 10px 15px;

    border-radius: 0px 0px 25px 25px;

    box-shadow: 4px 0px 8px 3px grey;

}

    header div.contact a.btn:hover{

        opacity: 0.8;

        transition: opacity 0.4s;

    }

    header div.contact{

        display: flex;

        justify-content : center;

    }

    header div.contact a:hover{

        color: white;

        text-decoration: none;

    }

header div.row{

    display: flex;

    justify-content: center;

}



/**

* NAV

**/

nav{

    font-family: var(--font-secondary-condensed);

    background-color: var(--color-primary);

    border-bottom: 6px solid transparent;

    border-bottom :6px solid var(--color-secondary);

    text-align: center;

}

    nav .bg-color-dropdown {

        background-color: var(--color-secondary);

    }

    nav .dropdown-item.active, .dropdown-item:active{

        background-color: var(--color-secondary);

    }

    nav .dropdown:hover>.dropdown-menu{

        display: inherit;

        background: var(--color-secondary);

        border: 0;

        min-width: 100%;

        padding: 0;

        border: 1px solid var(--color-secondary);

        position: absolute;

        border-radius: 0;

        transition: all 0.5s ease;

        left: 0;

    }

    nav div ul li ul.dropdown-menu a{

        color: white;

    }

    nav div ul li ul.dropdown-menu a:hover{

        background-color: white;

        color: var(--color-secondary);

    } 

    nav div ul li a.nav-link{

        white-space: inherit;

        color: white!important;

        font-weight: 900;

    }

    nav div ul li.nav-item{

        max-width: 200px;

        height: 100%;

    }

    nav ul.navbar-nav{

        height:100px;

    }

    nav div a.logo-nav{

        display: none;

    }

    nav ul.navbar-nav > li > a.dropdown-toggle{

        position: relative;

    }

    nav ul.navbar-nav > li > a.dropdown-toggle::after{

        display: none;

    }

    nav ul.navbar-nav > li > a.dropdown-toggle span.name{

        display: none;

    }

    .caret{

        display: inline-block;

        position: relative;

        top: 25px;

        vertical-align: middle;

        border-top: 4px dashed;

        border-top: 6px solid white;

        border-right: 6px solid transparent;

        border-left: 6px solid transparent;

    }

    nav .dropdown-menu > li > a.mobile{

        display: none;

    }

    nav div ul li a.btn-ressources{

        color: var(--color-secondary)!important;

    }

    nav div ul li.li-ressources:hover a, nav div ul li.li-ressources:hover a svg.bi-search{

        color: white!important;

        fill:white;

        display: block;

    }

    nav div ul li.li-ressources {

        min-width: 150px;

    }

    nav.navbar div.container div.navbar-collapse ul.navbar-nav li.li-ressources a.btn-ressources.active{

        color: white!important;

    }

    a.mobile{

        display: none;

    }

    

    a.desktop{

        display: flex;

        align-items: center;

    }

 /**

* SECTION HEADER ACCUEIL

**/  

.page div.banner{  

    margin: 50px auto 120px auto;

}

div.card-banner{

    background-color: var(--color-secondary);

    border-radius: 0;

    color: white;

    padding: 35px;

}

div.card-banner a, div.card-banner a:hover{

    color: white;

    text-decoration: none;

}

div.card-banner hr{

    height: 5px;

    color: white;

    opacity: 1;

    margin: 0px auto;

}

div.img-banner figure.spip_documents_center div.oembed{

    max-width: 900px!important;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}

div.text-banner{

    z-index: 2;

    font-size: 18px;

    margin-left: -60px;

}

 /**

* SECTION PRESENTATION ACCUEIL

**/   

.presentation a{

    color: white;

    text-decoration: underline;

}

.presentation a:hover{

    color: white;

}

section div.row h1{

    border-bottom: 3px solid var(--color-primary);

    padding-left: 0;

    margin-bottom: 1em;

    font-weight: bold;

}



section.financeurs div.row h1, section.partenaires div.row h1 , section.organisateurs div.row h1{

    border-bottom: 2px solid gainsboro;

    text-align: center;

}



.green{

    color: var(--color-primary);

}

.brown {

    color: var(--color-tertiary);

}



section.presentation{

    color: white;

}

section.presentation h2{

    border-bottom: 2px solid var(--color-secondary);

}



section.presentation div a.button{

    background-color: var(--color-secondary);

    border: none;

    color: white;

    font-weight: bold;

    padding: 10px 30px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

    border-radius: 3px;

}

section.presentation div a.button:hover{

    background-color: white;

    color: var(--color-secondary);

}



 /**

* SECTION ACTUALITES ACCUEIL

**/ 

section.actualites p{

    font-weight: bold;

    font-size: 1em;

}

section.actualites h4 a{

    color: var(--color-secondary);

    font-weight: bold;

}

.bloc-actu{

    z-index: 2;

}



.actu-bg{

    position: relative;

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    z-index: 1;

    height: 381px;

    background-color: var(--color-tertiary);

    margin-top: -290px;

}



 /**

* SECTION RUBRIQUES ACCUEIL

**/ 

.card-rubrique .card-title{

    z-index: 1;

    color:white

}

.card-rubrique::before{

    content: "";

    position: absolute;

    margin: -20px;

    width: 25px;

    height: 64px;

    left: 60px;

    top: 70px;

    transform: rotate(321deg);

}

.card-rubrique:first-child::before{

    background-color: var(--color-tertiary);

    box-shadow: 0 0 0 250px var(--color-tertiary);

}

.card-rubrique:nth-child(2)::before{

    background-color: var(--color-secondary);

    box-shadow: 0 0 0 250px var(--color-secondary);

}

.card-rubrique:last-child::before{

    background-color: var(--color-primary);

    box-shadow: 0 0 0 250px var(--color-primary);

}

.rubrique-chosen > div{

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    border: 1px solid gray;

    padding: 20px;

}

    .rubrique-chosen div a{

        color: white;

    }



.card-rubrique{

    overflow: hidden;

    border: none;

    border-radius: 0;

}

/**

* SECTION FINANCEURS ACCUEIL

**/ 

section.financeurs{

    margin-top: 40px;

    margin-bottom: 50px;

}

#carouselPartenaires, #carouselFinanceurs{

    min-height: 190px;

}

section.financeurs div.row button span.carousel-control-prev-icon{

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000' %3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");

}

section.financeurs div.row button span.carousel-control-next-icon{

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

}



section.financeurs div.row button.carousel-control-prev{

    left: -40px;

}

section.financeurs div.row button.carousel-control-next{

    right: -40px;

}

/* Partenaires */

section.partenaires div.row button span.carousel-control-prev-icon{

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000' %3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");

}

section.partenaires div.row button span.carousel-control-next-icon{

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

}



section.partenaires div.row button.carousel-control-prev{

    top: 70px;

    left: -40px;

}

section.partenaires div.row button.carousel-control-next{

    top: 70px;

    right: -40px;

}



/* SECTION RESSOURCES*/



.mot-cle-cards{

    font-weight: bold;

}

div.pagination{

    background-color: transparent;

    display: flex;

    justify-content: center;

}

div.pagination ul{

    display: flex;

    flex-direction: row;

}

div.pagination ul li a, div.pagination ul li span{

	display: block;

	min-width: 30px;

	height: 30px;

	line-height: 30px;

	border:1px solid var(--color-secondary);

	color: var(--color-secondary);

}

div.pagination ul li a.pagination_total:hover{

    background-color: transparent;

    color: var(--color-secondary);

}

div.pagination ul li.prev a,  div.pagination ul li.next a{

	width: 32px;

	height: 32px;

	line-height: 32px;

	border:none;

	font-size: 20px;

	font-weight: bold;

  }

div.pagination ul li:hover a, div.pagination ul li.active a{

	background-color: var(--color-secondary);

	color: #FFF;

  }

  div.pagination ul li:hover span, div.pagination ul li.active span{

	background-color: var(--color-secondary);

	display: block;

    min-width: 30px;

    height: 30px;

    line-height: 30px;

    border: 1px solid var(--color-secondary);

    color: var(--color-secondary);

	color: #FFF;

  }

.pagination{

	justify-content: center;

}



div.pagination ul {

	display: flex;

	flex-direction: row;

    flex-wrap: wrap;

    margin: 20px 0 10px 0;

}

div.pagination ul li {

    margin: 0 5px 0 5px;

}

 /**

* SECTION FOOTER

**/

footer{

    border-top: 4px solid var(--color-primary);

    box-shadow: inset 0px 3px 0px 0px var(--color-secondary);

    padding: 5px;

    background: none;

}

div.footer-links{

    z-index: 2;    

    height: fit-content;

}

div.footer-links div{

    z-index: 1;

}

div.footer-links a:hover{

    text-decoration: underline;

}





@media screen and (max-width: 992px) {

    nav ul.navbar-nav{

        height: fit-content;

    }

    div.footer-img{

        display: none;

    }

    nav div ul li.nav-item{

        max-width: 100%;

        width: 100%;

    }

    nav div ul li.nav-item a{

        margin-bottom: 2px;

    }

    nav .dropdown-menu > li > a.mobile{

        display: inline-block;

    }

    .caret{

        position: relative;

        top: 0px;

        margin-left: 10px;



    }

}

@media screen and (max-width: 768px) {

    nav .dropdown:hover>.dropdown-menu{

        position: relative;

    }

    .page section, .page div.banner, .page div.content, .page_communication{

        margin:20px auto;

    }

    header .h1{

        font-size: 28px;

    }

    div.logo{

        width: 35%;

    }

    .contact{

        z-index: 2;

    }

    header div.row div.logo,header div.row div.contact{

        display: flex;

        justify-content: center;

    }

    .slogan p{

        order: 1;

        font-size: 0.8em;

    }

    .slogan h1{

        font-size: 1em;

    }

    .logo{

        order: 2;

        width: 200px;

        z-index: 1;

    }

    .slogan{

        order: 3;

    }

    .card-banner{ 

        margin-left: 0px; 

        top: 100px;

        position: absolute;

        margin: 0 auto;

        justify-content: center;

    }

        div.card-banner hr{

           height: 10px;

           width: 100%;

           color: white;

           opacity: 1;

        }



    .page div.banner{  

        margin: 20px auto 20px auto;

    }

    .financeurs div#carouselFinanceurs, .partenaires div#carouselPartenaires{

        margin-top: 0;

        margin-bottom: 0;

        padding: 0;

    }

    div#carouselFinanceurs .container, div#carouselPartenaires .container{

        margin: 0;

        padding: 0;

    }

    .financeurs div div, .partenaires div div{

        height: auto;

        width: 180px;

        margin: 20px auto;

    }



    div.text-banner{

        display: none;

    }

    .actu-bg{

        display: none;

    }



    a.mobile{

        display: block;

    }

    a.desktop{

        display: none!important;

        flex: none;

    }

    



}

@media screen and (max-width: 425px) {

    header div.slogan{

        width: 90%;

    }

    header div.row div.logo a, header div.row div.logo{

        display: none;

    }

    nav div a.logo-nav{

        display: block;

    }

    

    .page div.banner{

        display: block;

        margin-bottom: 0px;

    }

    .card-header{ 

        top: 0px;

        margin-left: 0px; 

        position: relative;

        margin: 0 auto;

        justify-content: start;

    }

    .financeurs div div, .partenaires div div{

        height: auto;

        width: 140px;

        margin: 20px auto;

    }

}