section#avis > header nav > div {
	background: rgba(246, 246, 248,0.95);
	padding: 24px;
	border-radius: 5px;
	text-align: left;
	
	& > a {
		background: rgba(25, 123, 255);
		border-radius: 24px;
		color: white;
		font-size: 14px;
		border: 2px solid rgba(255,255,255,0.1);
		box-shadow: unset;
		text-shadow: unset;
		width: auto;
		height: auto;
		padding: 4px;
		
		&:hover {
			background: #3088ff;
			transform: unset;
		}
	}
	
	& span.count {
		font-size: 12px;
		line-height: 14px;
		color: rgba(17,17,17,0.5);
		vertical-align: top;
	}
	
}

section#avis > header nav > span.bref {
	display: block;
	box-shadow: 2px 4px 15px -13px rgba(30,0,80,0.3), 2px 4px 15px -16px rgba(30,0,80,0.3) inset;
	border-radius: 15px;
	& h4 {
		margin: 10px 0;
		padding-top: 10px;
	}
	& p {
		font-weight: 450;
		padding: 0 10px;
	}
}

section#avis .rating {
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	color: rgb(17,17,17);
	
	& svg {
		width: 20px;
		height: 20px;
		vertical-align: middle;
		&.P, &.M rect {
			fill: rgb(252, 191, 2);
		}
		&.N, &.M use {
			fill: #c8c8c9;
		}
	}
}

section#avis div.navs {
	background: unset;

	& article.nav {
		background: rgb(246, 246, 248);
		text-align: left;
		height: 280px;
		
		&.model {
			display: none;
		}
		
		& header {
			display: flex;
			align-items: start;
			& span {
				display: inline-block;
			}
			& span:not(.picture) {
				margin-top: 4px;
			}
		}

		& span.picture {
			position: relative;
			margin-right: 15px;
			& img {
				width: 50px;
				height: 50px;
			}
			&::after {
				content: url('imgs/google-g.svg');
				position: absolute;
				bottom: 0;
				right: 0;
				width: 20px;
				height: 20px;
			}
		}
		
		& div.name {
			font-weight: 600;
			font-size: 18px;
			line-height: 21px;
			&:not(.null)::after {
				content: url('imgs/verified.svg');
				width: 12px;
				height: 12px;
				display: inline-block;
				margin-left: 4px;
			}
			&.null {
				font-weight: 400;
				font-style: italic;
			}
		}
		
		& div.date {
			font-size: 14px;
			line-height: 18px;
			color: rgba(17, 17, 17, 0.5);
		}
		
		& div.comment {
			text-align: justify;
			margin-top: 10px;
			overflow-y: overlay;
			height: 171px;
			box-shadow: 0 5px 10px -10px gray;
			scrollbar-width: thin;
			padding-right: 3px;
		}
		
	}
}

@media only screen and (min-width: 700px) {
	section#avis div.navs {
		--width: 2;
		& article.nav {
			width: calc( 50% - 30px );
			&:first-of-type, &:last-of-type {
				width: calc( 50% - 20px );
			}
		}
  	}
}