/* Root */
:root{
    --primary-color : #1b60a1; /*bleu*/
    --secondary-color: #db8809; /*marron*/
    --tertiary-color: #84b825; /*vert*/
    --lighten-tertiary-color: #f2f8ea; /*vert calir*/
    --orange-color: #db890a; /*orange*/
    --gray-color: #F7F7F7;
    --primary-font: 'Nunito', sans-serif;

    --spip-color-white: #FFFFFF;
    --spip-color-theme--h: #FFFFFF;
    --spip-btn-color-main-text: #000000;
    --spip-btn-color-main-border: #000000;
}

body{
	font-family: var(--primary-font);
}

.bg-blue{
    background-color: var(--primary-color);
}

.bg-green{
    background-color: var(--tertiary-color);
}

.bg-orange{
    background-color: var(--orange-color);
}

.bg-yellow{
    background-color: var(--secondary-color);
}

.bg-gray{
    background-color: var(--gray-color);
}

.txt-green{
    color: var(--tertiary-color);
}

.fs-12{
    font-size: 12px;
}

.fs-13{
    font-size: 13px;
}

.fs-14{
    font-size: 14px;
}

.fs-15{
    font-size: 15px;
}

h1{
    color: var(--primary-color);
    font-weight: bold;
    font-size: 28px;
    text-transform: uppercase;
}

h2{
    color: var(--tertiary-color);
    font-weight: bold;
    font-size: 23px;
    text-transform: uppercase;
    margin: 20px 0 2px 0;
}

h2.recherche{
    background-image: url(../images/Zoom_rechercher_blanc.png);
    background-position: 5% 50%;
    background-repeat: no-repeat;
    background-size: 100px;
    color: white;
    padding-left: 80px;
    display: inline-block;
    line-height: 80px;
}

h3{
    color: var(--primary-color);
    font-weight: bold;
    font-size: 20px;
}

/*Header*/
header{
    background-color: white;
}
header a.recherche, header a.carto, header a.annuaire, header a.ressources{
    padding-top: 36px;
    color: #b0b0b0;
    font-size: 10px;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    margin: 5px 5px 15px 5px;
    width: 83px;
    height: 78px;
    text-align: center;
}
header a.recherche:hover, header a.carto:hover, header a.annuaire:hover, header a.ressources:hover{
    color: var(--secondary-color);
}

header a.recherche{
    background: url(../images/recherche_off.jpg) top center no-repeat;
}
header a.recherche:hover{
    background-image: url(../images/recherche_on.jpg);
}

header a.carto{
    background: url(../images/carto-off.jpg) top center no-repeat;
}
header a.carto:hover{
    background-image: url(../images/carto-on.jpg);
}

header a.annuaire{
    background: url(../images/annuaire_off.png) top center no-repeat;
}
header a.annuaire:hover{
    background-image: url(../images/annuaire_on.png);
}

header a.ressources{
    background: url(../images/icone_ressources_off.png) top center no-repeat;
}
header a.ressources:hover{
    background-image: url(../images/icone_ressources_on.png);
}

/*Page d'accueil*/

#carousel-home .carousel-indicators button{
    border-radius: 50%;
    height: 12px;
    width: 12px;
}

#carousel-home .carousel-caption {
    background-color: rgba(255,255,255,0.8);
    color: #0000;
    top: 0%;
    bottom: 0%;
    width: 300px;
    left: auto;
    right: 20%;
    padding: 20px;
}
#carousel-home .carousel-caption .text p {
    color: #000;
    font-size: 15px;
    text-align: left;
}

#carousel-home .carousel-caption .text a{
    display: block;
    width: 180px;
    margin: 5px auto;
    padding: 2px;
    text-align: center;
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
}

#carousel-home .carousel-caption .text a:hover{
    background-color: var(--tertiary-color);
}

#carousel-home .carousel-caption .h5 {
    color: var(--primary-color);
    text-align: left;
    font-weight: bold;
    font-size: 20px;
    margin:15px 0;
}

#carousel-home .carousel-item img{
    min-height:350px;
/*    width: 100%;*/
    display:block;
    margin:0 auto;
}

#carousel-home .carousel-indicators{
}

#carousel-home .carousel-indicators .active {
    background-color: var(--tertiary-color);
}

.home_ressources_section{
    background: url(../images/visuel_triton.png) 1% 50% no-repeat; var(--gray-color);
}

h2.dernieres_ressources{
    font-size: 30px;
    font-weight: 900;
    text-transform: uppercase;
}

a.ressource_home{
    display: block;
    min-height: 68px;
    border-bottom: 1px solid var(--primary-color);
    padding: 20px 50px 10px 0;
    background: url(../images/icone-telecharger.png) right center no-repeat;
    text-decoration: none;
    color: var(--primary-color);
    font-weight: bold;
}
a.ressource_home:hover{
    text-decoration: none;
}

a.ressource_home.video{
    background: url(../images/icone-voir.png) right center no-repeat;
}

a.ressource_home div{
    line-height: 16px;
}

a.ressource_home span{
    color: var(--tertiary-color);
    font-size: 11px;
}

a.tout_voir_blue{
    display: block;
    margin: 15px auto;
    width: 250px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
}
a.tout_voir_blue:hover{
    color: var(--primary-color);
    background-color: white;
    text-decoration: none;
}
#mc_embed_signup .button{
    display: block!important;
    width: 250px!important;
    height: 30px!important;
    line-height: 30px!important;
    font-size: 14px!important;
    text-align: center!important;
    text-decoration: none!important;
    text-transform: uppercase!important;
    color: white!important;
    font-weight: bold!important;
    border: 1px solid var(--primary-color)!important;
    background-color: var(--primary-color)!important;
}
#mc_embed_signup .button:hover{
    color: var(--primary-color)!important;
    background-color: white!important;
    text-decoration: none!important;
}
/*.titre_experience{
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    padding: 5px 15px;
    margin-top: 34px;
}

.bloc_experience{
    border: 2px solid var(--primary-color);
    padding: 15px;
    background-color: white;
}*/

a.experience_home{
    display: block;
    min-height: 68px;
    border-bottom: 1px solid var(--primary-color);
    padding: 20px 50px 10px 0;
    background: url(../images/icone-retour-experience.png) right center no-repeat;
    text-decoration: none;
    color: var(--primary-color);
    font-weight: bold;
}

a.experience_home:hover{
    text-decoration: none;
}

a.experience_home div{
    line-height: 16px;
}
a.experience_home span{
    color: var(--tertiary-color);
    font-size: 11px;
}

h2.nouveaux_acteurs{
    font-size: 30px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--tertiary-color);
}

.bloc_acteur{
    border: 2px solid var(--tertiary-color);
    padding: 15px;
}

.bloc_acteur a.nom, .bloc_actu a.nom{
    display: block;
    color: black;
    text-decoration: none;
    font-weight: bold;
}

.bloc_acteur a.nom:hover{
    color: var(--tertiary-color);
}

.bloc_actu a.nom:hover{
    color: var(--secondary-color);
}


.bloc_acteur a.suite, .bloc_actu a.suite{
    display: inline-block;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 0 5px;
}

.bloc_actu a.suite{
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.bloc_acteur a.suite:hover, .bloc_actu a.suite:hover{
    color: var(--primary-color);
    background-color: white;
}
.bloc_actu a.suite:hover{
    color: var(--secondary-color);
    background-color: white;
}

a.tout_voir_vert{
    display: block;
    margin: 15px auto;
    width: 250px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    border: 1px solid var(--tertiary-color);
    background-color: var(--tertiary-color);
}
a.tout_voir_vert:hover{
    color: var(--tertiary-color);
    background-color: white;
    text-decoration: none;
}

h2.actus{
    font-size: 30px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--secondary-color);
}

.bloc_actu{
    border: 2px solid var(--secondary-color);
    padding: 15px;
    position: relative;
}

.bloc_actu::after{
    content: "";
    position: absolute;
    right: -66px;
    top: 13px;
    width: 89px;
    height: 103px;
    background: url(../images/visuel-grenouille.png);
}

a.tout_voir_jaune{
    display: block;
    margin: 15px auto;
    width: 250px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    border: 1px solid var(--secondary-color);
    background-color: var(--secondary-color);
}
a.tout_voir_jaune:hover{
    color: var(--secondary-color);
    background-color: white;
    text-decoration: none;
}

.bande_chiffres{
    background-color: var(--tertiary-color);
    background-image: url(../images/visuel-plante.png), url(../images/visuel-libellule.png);
    background-repeat: no-repeat, no-repeat;
    background-position: 100% 238px, 5% 100%;
}

.bande_chiffres h1{
    color: white;
    font-size: 22px;
    font-weight: bold;
}
.chiffres{
    color: white;
    text-align: center;
}
.chiffres .chiffre{
    font-size: 36px;
    font-weight: bold;
    color: var(--primary-color);

}
.chiffres .texte{
    max-width: 210px;
    margin: 0px auto 45px auto;
    font-size: 16px;
    font-weight: bold;
    position: relative;
}
.chiffres .texte::after{
    content: "";
    width: 100px;
    height: 4px;
    background-color: white;
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -50px;
}

.chiffres a{
    display: block;
    max-width: 180px;
    margin: 5px auto;
    padding: 2px;
    text-align: center;
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
}
.chiffres a:hover{
    background-color: white;
    color: var(--primary-color);
}

/*Page rubrique et article*/
p.arbo{
    font-size: 12px;
    color: #666;
    padding: 8px 0;
    margin-bottom: 15px;
}
p.arbo a{
    text-decoration: none;
    color: #666;
}
p.arbo a:hover{
    text-decoration: underline;
    color: #666;
}

ul.spip{
    padding-left: 1em;
}

ul.spip li::marker{
    color: var(--tertiary-color);
    font-size: 1.1em;
}

table.spip{
    border: 1px solid var(--tertiary-color);
}

table.spip th{
    background-color: var(--tertiary-color);
    color: white;
    font-weight: bold;
    border-right: 1px solid white;
}
table.spip th:last-child{
    border-right: 1px solid var(--tertiary-color);
}

table.spip td{
    border-right: 1px solid var(--tertiary-color);
}
table.spip th:last-child{
    border-right: 1px solid white;
}

.main-content{
    background: url(../images/visuel_insecte.png) 10% 8% no-repeat;
}

.contenu a{
    color: var(--primary-color);
    text-decoration: none;
    display: inline-block;
    padding: 0 5px 0 26px;
    background: url(../images/icone_lien.png) left center no-repeat;
}

.contenu a:hover{
    color: var(--tertiary-color);
}

.contenu figure{
    display: inline-block;
}

.contenu figure a{
    background: none;
    padding: 0;
}

.contenu figure a img{
    max-width: 100%;
    height: auto;
}

.contenu figure figcaption{
    background-color: var(--secondary-color);
    text-align: center;
}

.contenu .card{
}

.contenu .card .card-title{
    color: var(--primary-color);
    font-size: 18px;
    font-weight: bold;
}

.contenu .card a{
    display: block;
    width: 110px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    border: 1px solid var(--tertiary-color);
    background-color: var(--tertiary-color);
    padding: 0;
    background-image: none;
}
.contenu .card a:hover{
    color: var(--tertiary-color);
    background-color: white;
    text-decoration: none;
}

.contenu .pagination ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
}
.contenu .pagination a {
    background:0;
    padding:0;
}
.contenu .pagination li a, .contenu .pagination li span {
    display: block;
    margin-right: 5px;
    margin-bottom: 5px;
}

.documents_joints{
    border: 1px solid var(--tertiary-color);
    padding: 15px;
    margin: 0 0 20px 0;
}
.documents_joints h2{
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

.documents_joints ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.documents_joints ul li{
    margin: 0 0 8px 0;
    font-size: 14px;
}

.documents_joints ul li a{
    color: black;
    text-decoration: none;
}

.documents_joints ul li a:hover{
    color: black;
    text-decoration: underline;
}


/*Formulaire de recherche*/
.formulaire input[type=text]{
    width: 100%;
    max-width: 814px;
    margin-bottom: 5px;
    border-radius: 15px;
    height:30px;
    padding: 0 15px;
    line-height: 30px;
}

.formulaire select{
    background-color: white;
    height: 28px;
    line-height: 28px;
    margin-bottom: 5px;
    width: 200px;
    font-size: 14px;
}

.formulaire input[type=submit]{
    background-color: white;
    color: var(--primary-color);
    text-transform: uppercase;
    border: 1px solid white;
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    padding: 0 15px;
}

.formulaire input[type=submit]:hover{
    color: white;
    background-color: var(--primary-color);
}

.formulaire a.reset{
    color: white;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    margin-left: 5px;
}

.mots{
    margin-bottom: 5px;
}

/*Page Annuaire*/
.fiche-acteur{
    padding: 15px;
    border: 2px solid var(--secondary-color);
    border-bottom: 0px;
    border-radius: 0;
    position: relative;
    padding-bottom: 45px;
}

.fiche-acteur .nom{
    color: black;
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
    text-decoration: none;
    padding: 8px;
    margin: 15px 0;
    border-bottom: 2px solid var(--secondary-color);
}

.fiche-acteur .nom:hover{
    border-bottom: 2px solid var(--primary-color);
}

.fiche-acteur .voir{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: var(--secondary-color);
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}

.fiche-acteur .voir:hover{
    background-color: var(--primary-color);
    color: white;
}

/*Page acteur*/
.acteur{
    border: 2px solid var(--secondary-color);
    margin-top: 30px;
}

.acteur .logo{
    margin:30px 0;
}

.acteur .logo img{
    max-width: 400px;
    max-height: 200px;
}

.acteur h1{
    text-align: center;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 37.5px;
}

.acteur h1::after{
    content: "";
    position: absolute;
    bottom: -7.5px;
    left: 50%;
    width: 150px;
    margin-left: -75px;
    height: 4px;
    background-color: var(--secondary-color);
}

.acteur .mots{
    margin-bottom: 15px;
}

.acteur .mots h3{
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 0;
}


.acteur .contact{
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    position: relative;
    padding: 15px 30px 10px 30px;
    font-size: 14px;
}

.acteur .contact::after{
    content: "";
    position: absolute;
    left: -7.5px;
    top: -7.5px;
    width: 35px;
    height: 45px;
    background: url(../images/icone-contact.png) center center no-repeat white;
}

.acteur .contact h2{
    color: white;
    font-weight: bold;
    font-size: 16px;
    margin: 0 0 5px 0;
    padding: 0;
}

.acteur .contact div{
    margin-bottom: 10px;
}

.acteur .url{
    border: 2px solid var(--primary-color);
    padding: 5px;
    text-align: center;
    text-decoration: none;
    margin-bottom: 15px;
    display: block;
}

.acteur .url{
    font-size: 14px;
    color: var(--primary-color);
}

.acteur .url:hover{
    text-decoration: underline;
}

.acteur #carte{height:300px; margin: 0 -12px}

.retour_annuaire{
    display: block;
    margin: 30px auto;
    background: url(../images/icone-retour-annuaire.png) top center no-repeat;
    width: 200px;
    height: 50px;
    padding: 38px 0 0 0;
    color: var(--primary-color);
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
}

.retour_annuaire:hover{
    font-weight: bold;
    text-decoration: none;
}

/*Page boîte à outils*/
.fiche-ressource{
    padding: 15px;
    border: 2px solid var(--tertiary-color);
    border-bottom: 0px;
    border-radius: 0;
    position: relative;
    padding-bottom: 45px;
    position: relative;
}

.fiche-ressource .production_pram{
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    color: white;
    background-color: var(--tertiary-color);
    font-size: 11px;
    font-weight: bold;
    padding: 0px 5px;
    text-transform: uppercase;
}

.fiche-ressource .nom{
    color: black;
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
    text-decoration: none;
    padding: 8px;
    margin: 15px 0;
    border-bottom: 2px solid var(--tertiary-color);
}

.fiche-ressource .nom:hover{
    border-bottom: 2px solid var(--primary-color);
}

.fiche-ressource .voir{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: var(--tertiary-color);
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}

.fiche-ressource .voir:hover{
    background-color: var(--primary-color);
    color: white;
}

/*Page ressource*/
.ressource{
    border: 2px solid var(--tertiary-color);
    margin-top: 30px;
}

.ressource .logo{
    height: 280px;
    margin:20px 0 0 0;
}

.ressource h1{
    text-transform: uppercase;
    position: relative;
    margin-bottom: 37.5px;
}

.ressource h1::after{
    content: "";
    position: absolute;
    bottom: -7.5px;
    left: 0%;
    width: 150px;
    height: 4px;
    background-color: var(--tertiary-color);
}

.ressource .no-logo h1::after{
    content: "";
    position: absolute;
    bottom: -7.5px;
    left: 50%;
    width: 150px;
    margin-left: -75px;
    height: 4px;
    background-color: var(--tertiary-color);
}

.ressource .editeur{
    padding: 15px 0 0 0;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

.ressource .editeur p{
    margin: 3px 0;
}

.ressource .editeur p a{
    color: #000;
    text-decoration: none;
}

.ressource .editeur p a:hover{
    text-decoration: underline;
}

.ressource .mots{
    margin-bottom: 15px;
}

.ressource h3{
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 0;
    color: var(--tertiary-color);
}

.ressource .documents_joints{
    border:none;
    padding: 0;
}
.ressource a.externe{
    color: black;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    word-wrap: break-word;
}

.ressource a.externe:hover{
    text-decoration: underline;
}

/*pages retours d'expériences*/
.fiche-experience{
    padding: 15px;
    border: 2px solid var(--primary-color);
    border-bottom: 0px;
    border-radius: 0;
    position: relative;
    padding-bottom: 45px;
    position: relative;
}

.fiche-experience .nom{
    color: black;
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
    text-decoration: none;
    padding: 8px;
    margin: 15px 0;
    border-bottom: 2px solid var(--primary-color);
}

.fiche-experience .nom:hover{
    border-bottom: 2px solid var(--tertiary-color);
}

.fiche-experience .voir{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: var(--primary-color);
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}

.fiche-experience .voir:hover{
    background-color: var(--tertiary-color);
    color: white;
}

/*Page retour expérience*/
.experience h1{
    text-align: center;
}

.experience .type_action{
    text-align: center;
    margin: 5px 0;
}

.experience .type_action span{
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    background-color: var(--tertiary-color);
    border-bottom: 3px solid var(--secondary-color);
    color: white;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
}

.experience .cols{
    border: 1px solid var(--secondary-color);
    border-bottom: none;
    margin-top: 40px;
}

.experience .cols h4{
    text-transform: uppercase;
    border-bottom: 1px solid var(--secondary-color);
    margin: -30px 0 15px 0;
    color: var(--primary-color);
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding-top: 58px;
    min-height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.experience .cols .porteurs{
    font-size: 14px;
    text-align: center;
}

.experience .cols .porteurs p a{
    color: #000;
    text-decoration: none;
}

.experience .cols .porteurs p a:hover{
    text-decoration: underline;
}

.experience .cols h4.porteur{
    background: url(../images/icone_porteur_projet.jpg) top center no-repeat transparent;
}

.experience .cols h4.contact{
    background: url(../images/icone_contact_maitre.jpg) top center no-repeat transparent;
}

.experience .cols h4.date{
    background: url(../images/icone_date_debut-fin.jpg) top center no-repeat transparent;
}
.experience .cols h4.lieu{
    background: url(../images/icone_lieu.jpg) top center no-repeat transparent;
}
.experience .cols h4.partenaires{
    background: url(../images/icone_partenaires.jpg) top center no-repeat transparent;
}
.experience .cols h4.nature_mares{
    background: url(../images/icone_nature_mares.jpg) top center no-repeat transparent;
}

.experience .fiche_pdf{
    border: 1px solid var(--secondary-color);
    border-top: none;
    margin-bottom: 40px;
}
.experience .fiche_pdf a{
    display: block;
    width: 305px;
    margin: 15px auto 20px auto;
    padding: 5px 0;
    background-color: var(--secondary-color);
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
}

.experience .pdf a:hover{
    background-color: var(--tertiary-color);
}

.experience h2{
    color: var(--primary-color);
    margin-top: 15px;
}

.experience strong{
    color: var(--primary-color);
}


.experience .info h2{
    color: var(--tertiary-color);
}

.experience .bloc1{
    background-color: var(--lighten-tertiary-color);
    padding: 15px;
    margin: 30px 0;
}

.experience .bloc1 h2{
    text-align: center;
    color: var(--tertiary-color);
}

.experience .bloc2{
    border: 1px solid var(--primary-color);
    padding: 15px;
    margin: 30px 0;
}

.experience .bloc2 h2{
    text-align: center;
    color: var(--tertiary-color);
}

/*Page carto*/
.carto  a.retour{
    display: block;
    width: 218px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    border: 1px solid var(--tertiary-color);
    background-color: var(--tertiary-color);
}

.carto  a.retour:hover{
    color: var(--tertiary-color);
    background-color: white;
    text-decoration: none;
}

.carto a.site{
    display: block;
    border: var(--primary-color) 1px solid;
    width: 200px;
    text-decoration: none;
    text-align: center;
    color: var(--primary-color);
}

.carto a.site span{
    display: block;
    height: 80px;
    border-bottom: var(--primary-color) 1px solid;
    padding-top: 18px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
}

.carto a.site:hover span{
    background-color: var(--primary-color);
    color: white;
}

.carto a.site:hover img{
    width: 98%;
    margin-top: 1%;
}

/*spip*/
.spip_document{display:flex;justify-content:center;align-items:center}
.spip_documents,.spip_documents_center,.spip_doc_titre,.spip_doc_descriptif,.spip_doc_credits{margin-right:auto;margin-left:auto;text-align:center;min-width:120px}
.spip_documents_center{display:block;clear:both;width:100%;margin:1.385em auto}
.spip_documents_left{float:left;margin-right:15px;margin-bottom:1.385em;max-width:100%}
.spip_documents_right{float:right;margin-left:15px;margin-bottom:1.385em;max-width:100%}

/*Footer*/
footer, footer .container-fluid{
    border-top: 3px solid var(--secondary-color);
}

footer a{
    color: black;
    text-decoration: none;
}

footer a:hover{
    color: black;
   text-decoration: underline;
}

footer a.contact{
    display: inline-block;
    color: white;
    background-color: var(--primary-color);
    padding: 0px 10px;
    margin: 15px 0;
    text-decoration: none;
    font-weight: bold;
    border-radius: 2px;
}

footer a.contact:hover{
    background-color: var(--secondary-color);
}

footer a.newsletter{
    background: url(/squelettes/images/icone-newsletter.png) top center transparent no-repeat;
    width: 160px;
    padding-top: 122px;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
    display: block;
    margin: 0 auto;
    text-align: center;
}
footer a.newsletter:hover{
    text-decoration: none;
    color: var(--secondary-color);
}

footer h5{
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
}

#top{
    display: block;
    width: 50px;
    height: 50px;
    position: fixed;
    right: 15px;
    bottom: 15px;
    opacity: 0.5;
    transition: opacity 0.5s;
}
#top:hover{
    opacity: 1;
}

/* Pagination */
.pagination_spip .pagination-items {list-style: none;display: flex;flex-wrap: wrap; flex-direction: row; justify-content: center}
.pagination_spip .pagination-item {  margin: 0em; flex-basis: auto; display: flex;align-items: center;}
.pagination_spip .pagination_precedent_suivant .pagination-item { flex-basis: auto;}
.pagination_spip .pagination-item + .pagination-item {  margin-left: 0.5em }
.pagination_spip .pagination-item-label { display:block; flex-basis: 100%; background: #f0f0f0; text-decoration: none; padding:.5em; border-radius:.25em; text-align: center;}
.pagination_spip .on .pagination-item-label,
.pagination_spip a.pagination-item-label:hover,
.pagination_spip a.pagination-item-label:focus,
.pagination_spip a.pagination-item-label:active {}
.pagination_spip .on .pagination-item-label {font-weight: bold;}
.pagination_spip .pagination_precedent_suivant .disabled {visibility: hidden}
.pagination_spip .pagination-item.disabled {}
.pagination_spip .pagination-item.disabled .pagination-item-label {color:#888; font-weight: normal;}
.menu_articles .pagination strong {font-size:1em;}

@media all and (max-width: 1500px) {
    .bande_chiffres{
        background-size: auto auto, 180px auto;
        background-position: 100% 338px, 0% 100%;
    }
}


/* en responsive,  lineariser le tableau pour eviter les scrolls*/
@media (max-width: 640px) {
    .table-container{
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: none;
    }

    /*table.spip th, table.spip tr, table.spip td {
        display:block;
    }*/

    table.spip thead th {
        border-bottom:none !important;
    }
    table.spip thead th+th {
        border-top:none;
    }
    table.spip tr {
        border-bottom: 1px solid;
    }
    table.spip td {
        border-bottom:none;
    }

    #top{display: none;}
}