/* ========================================================================== */


/*	************************
	TOP-BAR & BOTTOM-BAR
	********************* */
	.top-bar ul { background-color: transparent; }

	.top-bar { margin-bottom: 0px; }

	.top-bar.bottom-bar { height: auto; margin: 0px; padding: 0px;}

	#top-fond {	background-color: transparent; font-size: 1.2em; }
	
/*	************************
	FOOTER
	********************* */	
	
	#diane-footer {
	border-left-width: 2px;
	border-left-color: gray;}
	#footer-soutien {
	border-left-width: 2px;
	border-left-color: gray;}
	@media screen and (min-width: 320px) and (max-width: 960px){
		#diane-footer { width: 100%;}
		#footer-soutien { width: 100%; height: 50%;}	}

.retro_footer {
	font-family: 'Space Mono', monospace;
	margin: 0 0 0 25vw;
	padding: 3em;
	color: white;
	background: black;
}

.retro_footer a {
	color: #ffadc9;
}

.retro_footer a:hover,
.retro_footer a:focus {
	color: #7bd4ff;
}

.retro_columns {
	display: flex;
}

.retro_column {
	width: 33.33%;
	padding: 0 1em;
}
.retro_block-link {
	display: block;
}

@media screen and (max-width: 40em){
	.retro_footer {
		margin: 0;
	}
	.retro_columns {
		display: block;
	}
	.retro_column {
		width: 100%;
	}
	
}


/*	************************
	AJOUTS DE CLASS BUTTON
	********************* */
	.button.page {
		background-color: #777;
		color: #ffffff;
		margin-right: 3px;
		margin-left: 3px;
		padding-bottom: 3px;
		padding-top: 3px; }

	.button.page:hover, .button.page:focus { background-color: #5f5f5f; color: #ffffff; }

		/*	
			#top-fond { background: url(https://www.akklesia.fr/public/images/fond_top_2.jpg); }
			#top-liens .top-bar-left .menu li > .page button a:hover { color: #ea0a0a; }
					<ul class="menu">	
			<li><a class="page button" href="#">p1</a></li>
			<li><a class="page button" href="#">p2</a></li>
			*/


/*	************************
	GRILLE
	********************* */

	.callout {
	  margin: 0 0 1rem 0;
	  padding: 1rem;
	  border: 1px solid rgba(10, 10, 10, 0.25);
	  border-radius: 0;
	  position: relative;
	  color: #0a0a0a;
	  background-color: white; }

/*	************************
	PAGINATION
	********************* */

.pagination { font-family: courier_std_boldbold;
	margin-left: 0;
	margin-bottom: 1rem; }

.pagination::before, .pagination::after {
	content: ' ';
	display: table; }
.pagination::after {
    clear: both; }

.pagination li {
	font-size: 0.875rem;
	margin-right: 0.0625rem;
	border: 0.15em solid #cacaca;
	border-radius: 50%;
	display: none; }

.pagination li:hover { background: #6f9f4e;	color: #4e6f9f; }
.pagination li a:hover { color: #4e6f9f; }

	.pagination li:last-child, .pagination li:first-child { display: inline-block; }
    @media screen and (min-width: 40em) {
      .pagination li {
        display: inline-block; } }

.pagination a,
.pagination button {
	color: #4e6f9f;
	display: block;
	padding: 0.1875rem 0.625rem;
	border-radius: 0; }

.pagination a:hover,
.pagination button:hover { background: transparent; }

.pagination .current {
	padding: 0.1875rem 0.625rem;
	background: #4e6f9f;
	color: #fefefe;
	cursor: default; }
.pagination .current:hover { color: #fefefe; background: #4e6f9f; }

.pagination .disabled {
    padding: 0.1875rem 0.625rem;
    color: #cacaca;
    cursor: not-allowed; }
.pagination .disabled:hover {
	background: transparent; }

.pagination .ellipsis::after {
	content:'\2026';
	padding: 0.1875rem 0.625rem;
	color: #4e6f9f; }
.pagination .ellipsis { border-bottom-width: 1px; border-bottom-color: #cacaca;
	border-left-width: 0; border-right-width: 0; border-top-width: 0; }

.pagination-previous a::before,
.pagination-previous.disabled::before {
	content:'\00ab';
	display: inline-block;
	margin-right: 0.0rem; }

.pagination-next a::after,
.pagination-next.disabled::after {
	content:'\00bb';
	display: inline-block;
	margin-left: 0.0rem; }

/*	************************
	TESTS
	.column { }
	.columns { }
	$grid-column-gutter: small: 100px, medium: 100px, !default;
	@include flex-grid-column($columns, $gutter);
	@include grid-column-gutter (small: 100px, medium: 100px,)($behavior:nest);
	********************* */