html, body {height: 100%;margin: 0; padding: 0;}
body{position: absolute;display : table;width: 100%;}
a{color:grey;}
hr.separation{width:50%;margin:20px auto;border:1px solid #EDEFF1}
footer{margin:60px 0 30px;}
.header{max-width:1200px;margin-top:20px;margin-left: auto;margin-right: auto;}
.centre{text-align:center;}
.parent {position:relative;opacity: 0.7;display: grid;grid-template-columns: 60px 1fr 1fr;justify-content: center;gap: 8px;align-items:center;}
.parent:hover{opacity:1}
.childleft{margin-left:8px;}
.childright {position:absolute;right: 15px;top: 15px;}
.rond{border:3px solid #BBD8E8;border-radius:50%;padding:4px;}


.page{display: grid;
grid-template-columns: repeat(auto-fit, 105px);
grid-auto-rows: 104px;
grid-column-gap:4px;grid-row-gap:4px;justify-content: center;justify-items: stretch;align-items:stretch;margin:20px auto 20px auto;max-width:1400px;}

.icone{
border:3px double black;outline: thick double #222222;
border-radius:12px;padding:4px;-webkit-font-smoothing: antialiased;filter:blur(0px); box-shadow:inset 10px 10px 10px #000000c, 15px 25px 10px #00000019, inset -10px -10px 15px ffffffe15;
}
.icone::before, .icone::after {background-color:#fff;content:'';border-radius:30% / 60%;width:20px;height:20px;}
.icone img{border:6px solid white;border-radius:8px;}
.icone:hover{
border:1px solid #A2A2A2;
-webkit-box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.91), 0px 0px 0px 8px rgba(0,0,0,0.91); 
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.91), 0px 0px 0px 8px rgba(0,0,0,0.91);}

.bien{box-shadow:inset 2px 4px 4px rgba(0,0,0,0.02),
	6px 6px 4px rgba(0,0,0,0.05),
	15px 20px 20px rgba(0,0,0,0.05),
	inset -4px -4px 5px rgba(0, 0, 0, 0.3);}
.drop{
	position:relative;
	width:98px;height:98px;
	   box-shadow: rgba(0,0,0,0.3) 2px 2px 12px 0px;
	
	
	border-radius:12px;
	display:flex;
	justify-content:center;
	align-items:center;
}

.drop img{border-radius:12%;}
.drop:hover {border-radius:50%;box-shadow: rgba(100, 128, 145, 0.38) 8px -23px 25px 0px inset}
.drop:hover img{border:3px double black;outline: thick double #888888;border-radius:25%;}


.drop::before{
	content:'';
	position: absolute;
	top:14px;left:16px;
	width:20px;height:20px;
	border-radius:50%;
	background:#fff;opacity:0.2
}

.drop::after{
	content:'';
	position: absolute;
	top:15px;left:40px;
	width:10px;height:10px;
	border-radius:50%;
	background:#fff;opacity:0.3
}
.drop a:hover{border-radius:12px;}
.drop a:active{filter: grayscale(1);opacity:0.4; transition-timing-function: ease;transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);}


a.classico{position:relative;
	width:98px;height:98px;
	   box-shadow: rgba(0,0,0,0.3) 2px 2px 12px 0px;
	
	
	border-radius:12px;
	display:flex;
	justify-content:center;
	align-items:center;}
.classdiv{position:relative;width:98px;height:98px;box-shadow: rgba(0,0,0,0.3) 2px 2px 12px 0px;border-radius:12px;display:flex;
	justify-content:center;
	align-items:center;
}