/*================== OUTILS ACCUEIL ==================*/
.monOutil {display: inline-grid; height: 200px; width:200px; margin:8px 4px;
    box-shadow: 5px 5px 5px #444; box-sizing: border-box; border: 6px solid white;
    background-size: auto 100%; background-origin: border-box; border-radius: 200px;
    text-align: center;
}
.mesOutils H1 {text-shadow: 2px 2px 2px #444; color: white; text-transform: uppercase;}
.monOutil:hover {border: 20px double white;}
.monOutil div {margin: auto; padding: 5px; text-transform: uppercase; font-weight: 700;}

/*================== OUTILS BASE ==================*/
a {color : white}
.full,.outils {position: fixed; top: 20px; font-size: 40px; cursor: pointer;}
.outils {left: 20px;}.full {right: 20px;}
footer {height: 12px; width: 100%; padding: 4px 0; background: black; font-size: 10px; color: white; text-shadow: none;}
footer span:nth-child(1) {position: absolute; left: 10px;}
footer span:nth-child(2) {position: absolute; right: 30px;}

/*================== ROUTINES ENFANTS ==================*/
body {background-size: cover; margin: 0;}
#routineBody {min-height: calc(100vh - 40px - 20px); width: calc(100vw - 40px); margin: 0; padding: 20px;
color:white; font-size: 1.8rem; text-shadow: 2px 2px 2px black}
#routineBody .heure {width: min-content; margin: 0 auto; padding:20px; border: 4px double white ; box-shadow: 8px 8px 8px black; cursor: pointer; white-space: nowrap; text-align: center; font-size: 3rem;}
#routineBody .alarme {position: fixed; top: 20px; right: 80px; cursor: pointer; font-size: 40px;}
.routine .phases div:nth-child(1) {background-color: #9CCDFA;}
.routine .phases div:nth-child(2) {background-color: #BCFE9E;}
.routine .phases div:nth-child(3) {background-color: #FFF38A;}
.routine .phases div:nth-child(4) {background-color: #FFA77B;}
.routine .phases div:nth-child(5) {background-color: #FF776E;}
.routine {position: relative; min-height: 55vh; width: 90vw; margin: 30px auto;}
.routine .horaires p, .phases div {display: inline-block; width: 20%; box-sizing: border-box; margin: 0;}
.routine .horaires p {border-left: 2px dotted white; padding: 0 0 30px 6px; }
.routine .phases div {display: inline-grid; box-shadow: 8px 8px 8px black; padding: 3vh 0 6vh 0;}
.routine .phases div p {margin: 0; padding: 2vh; text-align: center;}
.routine .phases div p:nth-child(2) {border-bottom: 1px solid rgba(255,255,255,0.5);}
.routine .avance {position: absolute; bottom: 0; height: 100%; background-color: rgba(255, 255, 0, 0.7); border-right: rgb(255, 255, 0) 5px solid;}