#accueil{
    display: -ms-grid;
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    -ms-grid-rows: -webkit-max-content 1fr -webkit-max-content;
    -ms-grid-rows: max-content 1fr max-content;
    grid-template-rows: -webkit-max-content 1fr -webkit-max-content;
    grid-template-rows: max-content 1fr max-content; /* Header et footer prennent l'espace nécessaire. Le contenu prend le reste. */
    background: var(--clr-dark);
    padding: 0;
    overflow-x: hidden; /* Les cercles de couleur, en position absolue génèrent de l'overflow */
}

#accueil header{
    background-color: transparent;
    margin-bottom: 0;
}
 /* La navigation ordinaire et le lien skip nav sont retirés de la page d'accueil */
#accueil header nav{
    display: none;
}

#accueil .skip-nav{
    display: none;
}

/* Hero section*/

    /* Titre */

.hero{
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr -webkit-min-content;
    -ms-grid-rows: 1fr min-content;
    grid-template-rows: 1fr -webkit-min-content;
    grid-template-rows: 1fr min-content; /* La navigation prend la place nécessaire, le texte occupe le reste. */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.main-title{
    text-transform: uppercase;
}

.main-title h1{
    font-weight: 700;
    font-variation-settings: 'CONT' 1000, 'MIDL' 0;
    margin-top: 0;
}

.main-title h1 span{
    display: block; /* Pour que chaque mot passe à la ligne correctement */
    line-height: 1;
}

.main-title{
    /* La taille de police est calculé de sorte que :
    1. La taille maximum, propotionnel à la hauteur du viewport évite que la hauteur du bloc soit trop grande. Le bloc aura en général une hauteur permettant de garder  la page entière dans 100vh
    2. La taille idéale remplit au maximum la largeur.
    3. Les tailles sont calculées proportionnellement à la taille de la première ligne. D'où l'utilisation de variables, qui correspondent aux tailles max et idéale de la première ligne.
    */
    --ideal-fs: 6.8vw;
    --max-fs: 3vh;
}

.main-title h1 span:first-child, .main-title h1 span:nth-child(3), .main-title h1 span:nth-child(5){
    font-size: clamp(1rem, var(--ideal-fs), var(--max-fs));
}

.main-title h1 span:nth-child(2){
    font-size: clamp(1rem, calc(var(--ideal-fs) * 3.83), calc(var(--max-fs) * 3.83));
}

.main-title h1 span:nth-child(4), .main-title h1 span:last-child{
    font-size: clamp(1rem, calc(var(--ideal-fs) * 1.371), calc(var(--max-fs) * 1.371));
}

.main-title p{
    font-size: clamp(1rem, calc(var(--ideal-fs) * 0.8), calc(var(--max-fs) * 0.8));
}

    /* Navigation */

.hero nav{
    margin: 4vh auto 0;
    font-family: var(--ff-display);
    font-size: var(--fs-nav-hero);
    font-weight: 700;
    font-variation-settings: 'CONT' 800, 'MIDL' 0;
}

.hero nav ul li{
    list-style-type: none;
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-radius: 1rem;
    -webkit-transition: 300ms linear;
    transition: 300ms linear;
}

.hero nav ul li a{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.5rem;
}

.hero nav i{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding:0.25rem;
    border:3px solid;
    border-radius: 50%;
    --fs-icon: clamp(1.25rem, 1.5vw + 1rem, 2rem);
    font-size: var(var(--fs-icon));
    width: calc(var(--fs-icon) * 2.5); /* la taille du cercle est proportionnelle à la taille de l'icône */
    height: calc(var(--fs-icon) * 2.5);
    background-color: var(--i-color);
    border-color: var(--i-color)
}

.hero nav ul li:hover, .hero nav ul li:focus-visible{
    background-color: var(--i-color);
}

.hero nav ul li:hover a, .hero nav ul li:focus-visible a{
    color: var(--clr-dark);
}

.hero nav ul li:hover i, .hero nav ul li:focus-visible i{
    font-size: 200%;
}

.hero nav ul li.cyan{
    --i-color: var(--clr-cyan);
}

.hero nav ul li.jaune{
    --i-color: var(--clr-jaune);
}

.hero nav ul li.rose{
    --i-color: var(--clr-rose);
}

.hero nav ul li.vert{
    --i-color: var(--clr-vert);
}

    /* Cercles */

.hero .cercle{ /* Carcle jaune */
    position: fixed;
    z-index: -3;
    width: 100vw;
    max-width: 540px;
    left: 25%;
    top:16%;
    background-color: var(--clr-jaune-transp);
}

.hero .cercle::before{ /* Cercle cyan */
    content:"";
    position: absolute;
    z-index: -2;
    width: 64vw;
    max-width: 345.6px;
    left: -25%;
    top: -5%;
    background-color: var(--clr-cyan-transp);
	border-radius: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	aspect-ratio: 1;
}

.hero .cercle::after{ /* Cercle rose */
    content:"";
    position: absolute;
    z-index: -1;
    width: 50vw;
    max-width: 270px;
    left: -30%;
    bottom: 4%;
    background-color: var(--clr-rose-transp);
	border-radius: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	aspect-ratio: 1;
}


@media  screen and (min-aspect-ratio:1/1) {

    /* Redéfinition de la taille de police en chageant les variables */

    .main-title{
        --max-fs: var(--base-fs); /* La taille maximum est la même que la taille idéale en version verticale */
        --base-fs: 5vh;
    }

    /* Cercles */

    .hero .cercle{
        width: 100vh;
    }

    /* Navigation */

    .hero nav{
        -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
    }

    .hero nav ul{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: 3rem;
    }

    .hero nav ul li a{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
}

@media screen and (min-width:1200px){

    header{
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .identification * {
        text-align: center;
    }

}