/* dirty reset */
* {margin:0;padding:0;border:0 none; position: relative;}
*,*:before,*:after {box-sizing:border-box;;}

/* 1 vmin = 1/100e du côté le plus petit du viewport. */
/* 1 vmax = 1/100e du côté le plus grand du viewport. */
/* Ces unités permettent de s’adapter au ratio de l’écran */

@media only screen and (min-width: 800px) {
    section {
    	display: grid;
    	grid-template-columns: repeat(auto-fill, minmax(calc(8rem + 5vw + 5vh), 1fr));
    	grid-gap: calc(1rem + 2.5vmin);
     	grid-auto-flow: dense; /* fill in the blanks */
    	padding: calc(1rem + 2.5vmin); /* équivalent au grip-gap  */
    }

	p {
		font-size: calc(1rem + .5vmax + 1vmin);
		color:white;
		background:black;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

    p:first-child {
        grid-row-start: span 3;
        grid-column-start: span 3;
    		font-size: calc(1rem + 4vmax + 2vmin);
    }
    p:nth-child(2n+3) { /* tous les 2 <p> à partir du 3e */
        grid-row-start: span 3;
    		font-size: calc(.9rem + 2vmin);
    }
    p:nth-child(4n+5) { /* tous les 4 <p> à partir du 5e */
        grid-column-start: span 2;
    		grid-row-start: span 2;
    		font-size: calc(1rem + 1vmax + 2vmin);
    }
    p:nth-child(6n+7) { /* tous les 6 <p> à partir du 7e */
        grid-row-start: span 2;
    		font-size: calc(.6rem + 1.5vmax + 1vmin);
    }
    p:nth-child(8n+9) { /* tous les 8 <p> à partir du 9e */
        grid-column-start: span 2;
        grid-row-start: span 3;
    		font-size: calc(1.2rem + 1.5vmax + 1vmin);
    }

	span {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content:center;
		align-items:center;
		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-weight: 500;
		text-transform:uppercase;
		padding: 1rem;
		text-align: center;
		line-height: 1.2;
	}
}

nav {
    margin-bottom: 60px;
    display: flex;
    justify-content:space-between;
    padding: 0 20px;
    width: calc(100% - 60px);
    margin-left: 30px;
    z-index: 1;
    position: relative;
}
nav img { width: 60px;}
.droite img { transform: rotate(90deg);}
.gauche img { transform: rotate(-90deg); }

.ok {

    color:  rgb(0, 0, 0); 
    background-color: #ffffff;
    border: 8px solid hsl(0, 0%, 0%);
}