.articles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    /* grid-template-columns: repeat(auto-fit, minmax(max(10em, 100%), 1fr)); */
    grid-gap: 4rem 5%;
    gap: 4rem 5%;

    clear: left;
}

article {

	position: relative;
}

article time {
	float: right;
}

#main .article {
    /* padding-left: 4em; */
    padding-bottom: 2em;
    min-width: 50%;

	transition: transform .25s, box-shadow .3s;
}
.article:hover {
	transform: scale(1.03);
}
#main .article h2 {
    margin-bottom: .4em;
    line-height: 1.2;
	min-height: 2.4em;
}

a.more {
	float: right;
	font-size: 1.2em;
	font-weight: 400;
/* 	position: relative; */

	z-index: 9;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
a.more span {
	display: none;
}
a.more:hover {
	color: #161616;
}
a.more::before,
a.more::after {
	position: absolute;
	bottom: 0; /*-.4em;*/
	left: 0;
}
a.more::before {
	left: 1ch;
	content: "lire         la suite";
/* 	position: absolute; */
/* 	top: .1em; */
/* 	right: 100%; */
	overflow: hidden;
	width: 7.5ch;
	text-indent: 1.8ch;
	height: 1em;
	white-space: pre;
	display: block;
	color: #161616;
	padding-right: .6ch;
	line-height: 1;
	font-size: .9em;
	transition: text-indent .4s ease-in-out;
}
a.more:hover::before {
	text-indent: -4ch;
	color: inherit;
}
a.more::after {
	display: block;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 2px;
	line-height: .7;
	width: 1em;
	height: 1em;
	text-align: center;
	background: #161616;
	content: "+";
	box-shadow: -.6ch 0 .6ch 0 rgba(255, 255, 255, .9);
}
a.more::after,
.article::after {
	background-color: #161616;
}
a.more:hover::after {
	color: inherit;
	background-color: #fff;
	border-color: currentColor;
}

.short {
	min-height: 3em;
	max-height: 32em;
	overflow: hidden;
	position: relative;

    text-align: justify;
    hyphens: auto;
/*
	text-overflow: ellipsis;
	white-space: nowrap;
*/
}
.short::after {
	content: "";
	position: absolute;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) .4em,rgba(255,255,255,1) 100%);
	height: 1em;
	bottom: 0;
	left: -5px;
	right: -5px;
}

article figure {
/* 	width: 20%; */
	width: 100%;
    /* max-width: 16em; */
/* 	min-width: 10em; */
/* 	height: 20%; */
	height: 10em;
/*
	min-height: 8em;
	max-height: 12em;
*/
	overflow: hidden;
	display: inline-block;
	margin-right: .5%;
	margin-bottom: .5em;
	text-align: center;
	position: relative;
	float: left;
}

article figure img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;';
}
article figure figcaption {
/*
    color: #666;
    font-style: italic;
    font-size: .8em;
    line-height: 1;
	text-align: justify;
	padding: 0 1%;
*/
	display: none;
}

.short p,
.short ul,
.short ol,
.short figure + br {
	margin-bottom: .5em;
	clear: left;
}
.short p:first-child {
	min-height: 6em;
}

/* .short figure:has(+p:empty) {
} */

.summary {
    margin-bottom: 4rem;
}