@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ----- Styles Tags ----- */
.tag.tag3 {
  background-color:#93BCC1;
  color:#133151;
}
.tag.tag4 {
  background-color:#BECC94;
  color:#133151;
}

/* ----- Styles Webpages ----- */
.grieps-orange-box {
    background-color:rgba(244,235,222);
    padding:24px 32px 24px 32px;
    border-radius:8px;
}
.grieps-grid {
    display:grid;
    gap:16px;
    grid-template-columns:repeat(4,calc(33% - 24px));
    align-items: stretch;
    text-align:center;
}

/* ----- Styles HomePage ----- */
 #grieps-contexts {
	display:flex;
	gap:24px;
	flex-direction: row;
	justify-content:center;
	align-items:flex-start;
	align-content: flex-start;
	flex-wrap: wrap;
}
 #grieps-contexts>a {
	text-align:center;
	color:inherit;
	width:96px;
}
 #grieps-contexts>a:hover {
	color:var(--cxColor);
}
 #grieps-contexts>a>div {
	width:80px;
	height:80px;
	box-sizing:border-box;
	border-radius:0 160px;
	margin:auto;
	background-color:var(--cxColor);
	transition:all .3s;
	display: flex;
	justify-content: center;
	align-items: center;
}
 #grieps-contexts>a>div>img {
	width:40px;
	height:40px;
	flex-shrink: 0;
	aspect-ratio: 1/1;
}
 #grieps-contexts>a:hover>div {
	border:50px solid #FFFFFF;
}
 #grieps-contexts>a>p:first-of-type {
	font-weight:bold;
	margin:12px 0 0;
}
 #grieps-contexts>a>p:last-child {
	font-size:.75em;
	margin:0;
	max-height:4.5em;
	overflow:hidden;
}

 #grieps-diff {
	display:flex;
	gap:24px;
	color:#133151;
}
 #grieps-diff>a {
	color:inherit;
	background-color:#F4EBDE;
	text-align:center;
	padding:20px 16px;
	border-radius:8px;
	flex: 0 1 100%;
}
 #grieps-diff>a:hover {
	font-weight:normal;
	animation:zoom .3s;
}
 #grieps-diff .kent-ico{
	font-size:36px;
	color:inherit;
}
 #grieps-diff p:first-of-type{
	font-weight:bold;
	margin:0;
}
 #grieps-diff p:last-child{
	font-size:.75em;
	margin:0;
}

#grieps-advert {
	background-image:url('/icon/GRI/Pedagogie.jpg');
	background-position:center center;
	background-size:cover;
	color:#FFFFFF;
	display:flex;
	gap:24px;
	align-items:center;
	justify-content:center;
}
 #grieps-advert p {
	font-size:1.25em;
	max-width:640px;
}
 #grieps-advert .button {
	background-color:#EE7240;
	border-color:#EE7240;
	color:#133151;
}

 #kentApps .kentApp.style-box-office h3
{
	color:#FFFFFF;
}

 #kentApps .kentApp.style-box-office h3
{
	color:#FFFFFF;
}
 #kentApps .style-box-office li .title:not(:hover)
{
	color:#133151;
}

/* ----- Styles listes ----- */
 #griepsFilterTypes {
	display:flex;
	gap:12px;
	justify-content:center;
	max-width:100%;
	overflow-y:auto;
	margin:8px 0;
}
 #griepsFilterTypes button {
	background-color:transparent;
	border-color:#93BCC1;
	color:#133151;
	display:flex;
	gap:4px;
	line-height:1.5;
	min-width:0;
	max-width:400px;
	padding:4px 8px;
	flex: 1 0 0;
}
 #griepsFilterTypes button:hover {
	animation:none;
}
 #griepsFilterTypes button.selected:not(:hover), #griepsFilterTypes button:hover {
	background-color:#93BCC1;
	font-weight:bold;
}
 #griepsFilterTypes button span:first-child {
	overflow:hidden;
	text-overflow:ellipsis;
	text-align: left;
	flex: 1 0 0;
}
#griepsFilterTypes button span:last-child {
	flex:0 0 auto;
}