/**
* Un bloc d'article (avec titre, image descriptive, description, galerie photo et documents)
* $debug : mettre à true pour afficher les cadres des différentes div
*/
@mixin bloc-article($breakpoint-image-a-gauche: 40.063em /*> 640px*/, $debug: false){

	@if $debug {
		@debug "Le mixin bloc-article est en mode debug";
		box-shadow: 0 0 3px red;
		position: relative;
		&:before {
			position: absolute;
			right: 0;
			top: 0;
			opacity: 0.15;
			font-weight: bold;
			color: red;
			content: 'DEBUG CSS BLOC ARTICLE';
		}
	}

	margin-bottom: $paragraph-margin-bottom;

	.image-header {// Une image descriptive EN DEHORS d'un .description !

		margin-top: 3 * $paragraph-margin-bottom;
		margin-bottom: $paragraph-margin-bottom;

		@if $debug {
			background-color: green;
		}

		text-align: center;
	}

	.titre {
		@if $debug {
			border: 1px solid green;
			&:hover {background-color: rgba(green, 0.2);}
		}
	}

	.contenu { // Description, image descriptive, galerie photos, documents
		@include xy-grid;
		.image-side {
			@include xy-cell(12, $gutters: ());
			margin-bottom: $paragraph-margin-bottom;
		}
		.description-side {
			@include xy-cell(12, $gutters: ());
			@include clearfix();
		}
		.description-side > .galerie:first-child {
			margin-top: 0!important;// annule l'espace haut de la galerie quand .description-side commence par une galerie
		}

		@media only screen and (min-width: $breakpoint-image-a-gauche) {
			.image-side {
				@include xy-cell(4, $gutters: ());
				padding-left: 0;
			}
			.image-side + .description-side {
				@include xy-cell(8);
				padding: rem-calc(0 0 0 20);
			}
		}
	}

	.description-side .image-descriptive {// Une image descriptive EN COIN

		@media only screen and (min-width: $breakpoint-image-a-gauche) {
			margin-right: $paragraph-margin-bottom;
			margin-bottom: $paragraph-margin-bottom;
			width: 35%;
			//max-width: 250px;
			float: left;
			text-align: left;
		}
	}

	// .description > p:last-of-type{
	// 	margin-bottom: 0;
	// }

	.galerie {

		margin-top: $paragraph-margin-bottom;
		margin-bottom: $paragraph-margin-bottom;

		@if $debug {
			border: 1px dashed red;
			&:hover{background-color: rgba(red, 0.2);}
		}

	}

	.description + .galerie {
		margin-top: 2 * $paragraph-margin-bottom;
	}

	.documents {
		@if $debug {
			border: 1px solid green;
			&:hover {background-color: rgba(green, 0.2);}
		}
		margin-bottom: 0; // le margin-bottom est sur le .documents > ul

		small {
			font-size: 70%;
			color: $dark-gray;
		}
	}

	.description + .documents {
		margin-top: $paragraph-margin-bottom;
	}

	&:first-of-type .image-header { // L'image header du premier article de la liste
		margin-top: $paragraph-margin-bottom; // on réduit l'espace (cf .image-header)
	}
}