html {
	/* lui-même" */
	/* ========================================== */
	min-height: 100vh;

	/* par rapport à l'Intérieur de "html" */
	/* ========================================== */
    font-family: cursive;
	word-spacing: 3px;
	letter-spacing: 0.3px;
    
    body {
        /* par rapport à l'EXtérieur de "body" */
        /* ========================================== */
        margin: 0px;
        padding: 0px;

        /* lui-même" */
        /* ========================================== */
     
        padding: 1em;
    /*
        background: linear-gradient(160deg, rgba(197,224,252,1), rgba(152,251,201,1), rgba(152,217,183,1), rgba(253,205,253,1), rgba(223,195,253,1));
        background-repeat: no-repeat;
    */
        /*background-size: cover; /* Redimensionne pour couvrir tout l'écran */
        /*background-position: center;*/
        
        background-image: url("../img/arcEnCiel4w.svg"), 
            linear-gradient(
                160deg, rgba(197,224,252,1), 
                rgba(152,251,201,1), 
                rgba(152,217,183,1), 
                rgba(253,205,253,1), 
                rgba(223,195,253,1)
                );
        background-repeat: space space, no-repeat; /* L'image se répète, mais pas le gradient */
        background-size: auto, cover; /* Taille automatique pour l'image, le gradient couvre tout */
        background-position: top, center; /* Positionne l'image et le gradient */
        backdrop-filter: contrast(50%) brightness(140%) blur(3px);
        /*backdrop-filter: blur(10px);*/
           
        hgroup {
            img{
                /*Centrer l'image titre*/
                display: block;
                margin: auto;
                max-height: 100%;
                max-width: 100%;
            }            
        }
        
        section {
            margin-top: 60px;
            &:not(:first-of-type)::before{
                content: url("../img/ligneDeShamalow4w.svg");
                display: block;
                margin: auto;
                width: fit-content; 
            }
            hgroup {
                h1 {
                    text-align:center;
                    color:#BA55D3;
                }
            }
            nav {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-around;
                :hover{
                        background-color: #98fbc9;
                }
                :active{
                    box-shadow: none;
                }

                a {
                    display: flex;
                    align-items: center;
                    background-color: #9898fb;
                    border: solid 2px #5485dd;
                    border-radius: 30% 20% / 10% 40%;
                    box-shadow: 10px 5px 5px gray;
                    height: 150px;
                    width: 250px;
                    margin : 1em;
                    text-decoration: none;
                    color: black;
                }
                img {
                    display: block;
                    margin: auto;
                    max-height: 100%;
                    max-width: 100%;
                }
                figure{
                    text-align: center;
                    margin: auto;
                    img{
                        display: inline;
                        max-height: 75px;
                        max-width: 200px;
                    }
                }
            }
        }
    }
}