@font-face {
	font-family: 'Raleway';
	src: url('https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwN4rWqZPAA.woff2');
}

@font-face {
  font-family: 'Open Sans';

}

@font-face{
	font-family: 'Montserrat';
	src:url('https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2');
}



/*@font-face{
	font-family: 'Raleway Bold';
	src: url('https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwJYtWqZPAA.woff2');
}*/

/*@font-face {
	font-family: 'Roboto;
	src: url("../fonts/roboto-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-regular-webfont.woff2") format("woff2"), url("../fonts/roboto-regular-webfont.woff") format("woff"), url("../fonts/roboto-regular-webfont.ttf") format("truetype"), url("../fonts/roboto-regular-webfont.svg#robotoregular") format("svg");
	font-style: normal;
	font-weight: normal;
}*/



:root {
	--color-#3AB5C2: #36A2C6;
}

* {
	box-sizing: border-box;
}

html {
  height: 100%;
}

body {
	color:#303030;
	background-image:url(img/topography.png);
	background-attachment:fixed;
	font-family: Calibri;
	padding: 0;
	margin: 0;

  position: relative;
  padding-bottom: 54.4px; /*taille du footer*/
  min-height: 100%;
}

section {
	margin: 50px;
	text-align: justify;
}

/*.page {
	background-color:white;
	max-width: 65.5rem;
	margin: auto;
	}*/

	.main{
		/*background-color:white;*/
		max-width: 65.5rem;
		margin: auto;
		/*padding-bottom: 10rem;*/
	}

	/*.wrapper{
		padding-right: 3.3333rem;
		padding-left: 3.3333rem;
	}*/

	/* Bannière */

	.banniere{
    /*height: 400px;
    min-width: 250px;*/
    /*padding: 128px 16px;*/
    padding: 75px 16px;
    /*background-image: url(img/banner.jpg);
    background-size: cover;*/
    display: block;
}

.banniere h1{
	display: block;
	color: white;
	text-align: center;
	margin:auto;
	text-decoration: none;
	font-size: 90px;
	font-family: Raleway;
	/*text-transform: uppercase;*/
}

h2{
	font-size: 25px;
	font-family: Raleway;
	font-weight: lighter;
	display: inline-block;
	border-bottom: 2px solid #3BB2Be;
	margin-bottom: 0;
	margin-top: 20px;
}

.banniere a{
	text-decoration: none;
}



h3.spip {
	color: #36A2C6;
	font-family: "Raleway";
	font-weight: normal;

}


/* Barre de navigation */
.bandeau{
    background-image: url(img/banner.jpg);
    background-size: cover;
}

ul.topnav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	box-shadow:0 2px 10px 0 rgba(0,0,0,0.50);
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}

ul.topnav li {float: right;}

ul.topnav li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-family: Montserrat;
	/*font-weight: 500;*/
	font-size: 18px;
	/*text-transform: uppercase;*/
  text-shadow: -1px 0 #4a4a4a, 0 1px #4a4a4a, 1px 0 #4a4a4a, 0 -1px #4a4a4a;

}

ul.topnav li:hover:not(.active) {
  background-color: #3BB2Be;transition: 0.3s;
  text-shadow: none;
}

ul.topnav li.active {
  background-color: #3BB2Be;
}

ul.topnav li:hover:not(.active) a {
  text-shadow: none;
}

.icon-show-nav{
    display: none;
}

#nav a {
  text-shadow: -1px 0 #4a4a4a, 0 1px #4a4a4a, 1px 0 #4a4a4a, 0 -1px #4a4a4a;
}

#nav a:hover{
  color: white;
}

@media screen and (max-width: 600px){
    #nav {
        align-items: center;
        display: block;
    }

    ul.topnav{
        flex-direction: column;
        background-color: #333;
        display: none;
    }

    .icon-show-nav{
        color: white;
        font-size: 25px;
        padding: 10px 14px;
        display: block;
        padding-top: 10px;
    }
}

@media screen and (max-width: 600px){
    ul.topnav.responsive{
        display: flex;
    }

    .wrapper a{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
}


/* Fin top nav */

/* Ancienne grille pour l'affichage des articles */
/*.grid{
    display: grid;
    width: 100%;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
    grid-auto-rows: 30px;    
}



.item{
    display: block;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    background-color: white;
}

.item .titre{
    padding: 20px;
    font-family: 'Raleway Bold';
    font-size: 20px;
    padding-bottom: 0;
    padding-top: 0;
}

.item a{
    text-decoration: none;
    color: black;
    outline: none;
}

.item .auteur{
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 0px;
    color: #36A2C6;
    color: #808080;
    font-size: 14px;
    font-style: italic;
}

.item .date{
    padding: 20px;
    padding-bottom: 6px;
    font-weight: bold;
    color: #9e9e9e;
    color: #fe6200;
}

.item .introduction{
    padding: 20px;
    padding-top: 0;
    padding-bottom: 0;
}

.item .spip_logo{
    width: 5%;
    margin: 0 10px 10px 0;
    float: left;
    padding: 10px 10px 5px 10px;
}
.item:hover{
    outline: 2px solid #36A2C6;
    outline-offset: -2px;
    box-shadow: none;
    }*/


    /* ==== Nouvelle grille pour les articles === */
    *, *:after, *:before
    {
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    }

    body {
    	background-color:#d8e0e5;
    	font-family: Open Sans;
    	font-size: 16px;
    	line-height: 1.4;

    }
    img {
    	max-width:100%;
    }


    /* ------------------------------- */

    .card-grid {
    	width:100%;
    }
/*.card-grid:after {
  content: "";
  display: table;
  clear: both;
}



.card-wrap {
  float:left;
  width:100%;
  padding:5px;
}
@media (min-width: 500px) {
  .card-wrap {
    width:50%;
  }
}
@media (min-width: 800px) {
  .card-wrap {
    width:25%;
  }
  }*/

  .card-grid {
  	padding: 0;
  	margin: 0;
  	list-style: none;

  	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;

  	-webkit-flex-flow: row wrap;
  	justify-content: space-around;
  }

  article{
  	width: 290px;
  }


  .card {
  	position: relative;
  	background-color:white;
  	/*border-radius:5px;*/
  	border:1px solid #ccc;
  	/*border-bottom:2px solid #ccc;*/
  	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  	transition: box-shadow 0.3s;
  	transform: translateZ(0px);
  	margin: 10px;
  }

  .card a{
  	color: inherit;
  	text-decoration: none;
  	overflow: hidden;
  }

  .card a:hover{
    color: black;
  }
/*.card > div {
  padding:0 1em;
  }*/

  .card:hover {
  	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }

  /* __________________________ */

  .card__date{
  	position:absolute;
  	top: 20px;
  	right: 20px;

  	width: 45px;
  	height: 45px;
  	padding-top: 10px;

  	background-color: #3AB5C2;
  	border-radius: 50%;

  	color: white;
  	text-align: center;
  	line-height: 13px;
  	font-weight: bold;
  }

  .card__date_day{
  	display: block;
  	/*font-size: 14px;*/
  }

  .card__date_month{
  	display: block;
  	font-size: 10px;
  	text-transform: uppercase;
  }


  /* ------- Image-------------- */
  .card__thumb{
  	height: 235px;
  	background-color: black;
  	transition: height 0.3s;
  	overflow: hidden;
  }

  .card__thumb img{
  	display: block;
  	opacity: 1;
  	transition: opacity 0.3s, transform 0.3s;
  	transform: scale(1);
  }

  .card:hover .card__thumb img{
  	opacity: 0.6;
  	transform: scale(1.2);
  }

  .card:hover .card__thumb{
  	height: 90px;
  }

  /*---------- Corps ------------*/
  .card__body{
  	position: relative;
  	padding: 20px;
  	height: 185px;
  	transition: height 0.3s;
  	overflow: hidden;
  }

  .card:hover .card__body{
  	height: 330px;
  }

  .card__category{
  	position: absolute;
  	left: 0;
  	top: 210px;

  	height: 25px;
  	padding: 0 15px;
    max-width: 100%;

  	color: white;
  	font-size: 11px;
  	line-height: 25px;
  	text-transform: uppercase;

  	background-color: #3AB5C2;

  	transition: top 0.3s;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
  }

  .card:hover .card__category{
  	top: 65px;
  }

  .card__category a {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
  }

  .card__title{
  	margin: 0;
  	padding: 0 0 10px 0;

  	font-size: 16px;
  	color: black;
  	font-weight: bold;
  }

  .card__subtitle{
  	margin: 0;
  	padding: 0;
  	font-size: 13px;
  	color: #3AB5C2;
  }

  .card__body p{
  	position: relative;

  	margin: 0;
  	margin-top: 10px;
  	padding: 0;

  	color: #666C74;
  	font-size: 14px;
  	line-height: 20px;

  	opacity: 0;
  	transition: opacity 0.2s, transform 0.2s;
  	transition-delay: 0s;
  	transform: translateY(25px);
  	text-align: justify;
  }


  .card:hover .card__body p{
  	opacity: 1;
  	transition-delay: 0.1s;
  	transform: translateY(0);
  }
  .card__footer{
  	position: absolute;
  	bottom: 20px;
  	left: 20px;
  	right: 20px;

  	font-size: 11px;
  	color: #A3A9AB;
  }

  .icon{
  	display: inline-block;
  	vertical-align: miidle;
  	margin-top: 2px;
  }

  .icon__comment{
  	margin-left: 12px;
  }


  .icon__time{
  	margin-right: 2px;
  }

  .icon__view{
  	margin-left: 12px;
  	margin-right: 2px;
  }

  .rect {
	position: absolute;
	width: 100%;
	height: 50px;
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
	/* overflow: auto; */
	right: 0;
	left: 0;
	bottom: 40px;
}

.rect_white{
	position: absolute;
	width: 100%;
	height: 40px;
	bottom: 0;
	background-color: white;
}

  /* ------- Fin nouvelle grille ------------- */


  /* Filtres */
/*ul.filtre_liste {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

ul.filtre_liste li {float: left;}*/

.filtre_item {
	border: none;
	color: white;
	padding: 1px 4px;
	border-radius: 3px;
	text-decoration: none;
	display: inline-block;
	margin: 8px 2px;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	cursor: pointer;
	opacity: 0.7;
}

.filtre_item a {
	color: white;
	text-decoration: none;
	font-family: Calibri;
	/*font-weight: 500;*/
	font-size: 17px;
	/*text-transform: uppercase;*/
}

.filtre_item a:hover {
  color: white;
}

.filtre_item:hover {opacity: 1}

.wrapper_filtre{
	text-align: center;
	display: block;
	/*background-color: white;*/
	padding: 10px 50px;
	margin: 40px 0px;
	/*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/
}

.cadre_filtre{
	margin:auto;
}

/* Mots clefs */
.item .mot_clef{
	display: inline-block;
	margin: 10px 20px;
	padding-right: 2px;
	padding-left: 2px;
	font-size: 13px;
	border: none;
	/*background-color: var(--color-#3AB5C2);*/
	color : white;
	border-radius: 2px;
	text-decoration: none;
	opacity: 0.7;
	transition: 0.3s;
}

.item .mot_clef a{
	color : white;
	font-size: 13px;
}

.item .mot_clef:hover {opacity: 5}

.mot_clef_0{
	background-color: #3bb2be;
}

.mot_clef_1{
	background-color: #01295f;
}

.mot_clef_2{
	background-color: #1c9fe7;
}

.mot_clef_3{
	background-color: #1a6a8d;
}

.mot_clef_4{
	background-color: #c29234;
}

.mot_clef_7{
	background-color: rgb(112, 146, 190)
}

/* Barre de recherche */

.main-wrapper-recherche{
	margin: 0;
	padding: 0;
    padding-top: 10px;
}

#search-bar{
	width: 100%;
	position: relative
}

#recherche {
	float: left;
	width: 100%;
	border: 1px solid #999;
	padding: 5px;
	height: 40px;
	outline: none;
	color: #707070;
	background-color: #fff;
	font-size: 17px;
}

#recherche:focus{
	color: #333;
}

.submit {
  border:none;
	background: #3BB2Be;
	text-align: center;
	color: #fff;
	cursor: pointer;
	font-size: 20px;
}

#search-bar .submit {
  border: 1px solid #999;
  border-left: none;
  position: absolute;  
  right: 0;
  width: 40px;
  height: 40px;
}





.inner-wrapper-recherche{
	width: 100%;
	background: #f2f2f2;
	font-family: 'Open Sans', sans-serif;
	margin: auto;
}


/* Footer */
.footer{
	display: flex;
	margin: auto;
	width: 100%;
	justify-content: center;
	background-color: #333;
	color: #b9b9b9;
	/*margin-top: 2rem;*/
	position: absolute;
	bottom: 0;
    left: 0;
    margin-top: 6px solid #999
}

.footer a{
	color: white;
	text-decoration: none;
}

.footer a:hover{
	color: #3AB5C2;
}

.footer .colophon{
	text-align: center;
}

/* Aside : Recherche */
aside .fils{
    max-width: 65.5rem;
    margin: auto;
    padding: 0 10px 1px 10px;
}

aside {
    background-color: #0202021a;
    border-top: 6px solid #999;
    margin-top: 35px;
}


/* Pagination */
.pagination{
	display: flex;
}
.pagination .pages{
	margin: auto;
}

.pagination .lien_pagination{
	color: #333;
	text-decoration: none;
}

.pagination .lien_pagination:hover{
	font-weight: bold;
}

.pagination .on{
	color:#36A2C6;
}

/* Arborecence */
p.arbo{
	margin-top: 0;
	padding-top: 16px;
}

/*p.arbo a {
  color: #3BB2Be;
  text-decoration: none;
  transition: 0.3s;
}

p.arbo a:hover {
  color: #1f708b;
  transition: 0.3s;
}*/

/* Media Queries */
@media screen and (max-width: 600px){
	/* Barre de navigation */
	ul.topnav li.right, 
	ul.topnav li {float: none;}

	/*.banniere{height:150px;}*/

	.banniere h1{
		font-size: 50px;
	}

	.page{width: 100%;}

	.wrapper{
		padding-right: 0;
		padding-left: 0;
	}
}


/* SPIP */

a, a.spip_in, a.spip_out{
	color: #36A2C6;
  text-decoration: none;
  transition: 0.3s;
  word-break: break-all;
  overflow-wrap: break-word;

}

a:hover, a.spip_in:hover, a.spip_out:hover{
  color: #C89D46;
  text-decoration: none;
  transition: 0.3s;
}


.frame{
  box-shadow: 0 4px 8px grey;
  background-color: white;
}

.spip_documents img{
  display: block;
}

.spip_documents_center img{
  margin-right: auto;
  margin-left: auto;
}

.spip_documents_center .spip_doc_titre{
  margin: auto;
}

.spip_documents_right{
  margin: 0px;
  margin-left: 10px;
}

.spip_documents_left{
  margin: 0px;
  margin-right: 10px;
}

/* TOp search bar */
.ante-article {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    align-items: flex-end;
    padding: 0 3%;
}

.ante-article .main-wrapper-recherche{
  width: 290px;
  padding-top: 0;
}

.ante-article h1{
  margin-bottom: 0px;
}


@media screen and (max-width: 600px){
  .ante-article{
    flex-direction: column;
    margin: 10px;
    align-items: stretch;
  }

  .ante-article .main-wrapper-recherche{
    width: 100%;
  }

  .all-wrapper{
        text-align: left;
  }
  
  body{
    padding-bottom: 70px; /*taille du footer*/
  }
}





/* =====SPIP===== */
/* Table */
table.spip {
	border-collapse: collapse;
	margin: auto;
	max-width: 672px;
	width: 100%;
    table-layout: fixed;
}

table.spip caption {
	font-size: 14px;
	padding-bottom: 5px;
}

table.spip tr.row_first {
	background-color: #3bb2be;
	color: white;
}

table.spip th {
	border-bottom: 2px solid #1b1b1b;
	padding: 3px 5px;
}

table.spip tr.row_odd {
	background-color: #f2f2f2;
}

table.spip td {
	border-bottom: 1px solid #929292;
	padding: 3px 5px;
}

.spip_doc_descriptif {
	margin: auto;
	font-size: 13px;
}