/* TYPOS */

.exergue {
    font-family: 'kanitregular', sans-serif;
    color:#6d7590;
    /* font-weight: 400; */
}


/* ANIMATION */

/* HEARTBEAT */
/* @keyframes heartbeat {
	from { background-size: auto 180% }
	50%  { background-size: auto 150% } 
	to   { background-size: auto 180% }
} */



/* ------------------------------------------- */

#accueil {
    background-color: white;
    /* border-top: 1px solid #f7f5f8;
    border-bottom: 1px solid #f7f5f8; ; */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

	background-image: url('../img/logo-2h2o.svg'), url('../img/logo-2h2o.svg');
	background-repeat: no-repeat;
	background-position: center;
	/* animation: heartbeat 8s linear infinite;
    -webkit-animation: heartbeat 10s linear infinite; */
 
}

.accroche {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
	font-size: 40px;
	height: auto;
	width: 100%;
    padding: var(--unite-base);
}

.volet {
    width: 100%;
    overflow:hidden;
    /* animation: volet 1s ease-out;
    animation-fill-mode: forwards; */
    box-sizing: border-box;
    font-family: 'kanitthin', sans-serif;
    /* font-weight: 100; */
}

.volet div {
    white-space: normal;
}


.rideaux {
    width: 100%;
    height: 100%;
   
}


nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 1.5em;
    animation: nav_1 1s ease-in;
    animation-fill-mode: forwards;
}

nav li  {
    font-family: 'biotiflight';
    font-weight: normal;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--unite-base)*4);
    height: calc(var(--unite-base)*4);
    border-radius: 50%;
    cursor: pointer;
    color: white;
    transition: background-color 1s, transform 0.4s;
}

nav li:nth-child(1)  {
    /* background-color: rgba(231,169,67,0.8); */
    background-color: var(--couleur-page1);
}

nav li:nth-child(2)  {
    /* background-color: rgba(124,114,220, 0.8); */
    background-color: var(--couleur-page2);
    margin-left: var(--unite-base);
    margin-right: var(--unite-base);
}

nav li:nth-child(3)  {
    /* background-color: rgba(132,160,170, 0.8); */
    background-color: var(--couleur-page3);
   
}

nav li:hover {
    background: white;
    color: var(--menubulles-text-on-color);
    border: var(--menubulles-text-on-color) 1px solid;
    transform: translateY(10%);
}


.signaletique h1 {
    color: var(--couleur-defaut-typo);
    font-size: 40px;
    font-family: 'biotiflight', sans-serif;
    font-weight: 100;
    cursor: pointer;
    transition: transform 0.3s;
}

.signaletique h1:hover {
    transform: translateY(30%);
}


/* RESPONSIVE */
/* ------------------------------------ */

/* IPad Paysage */
@media screen and (max-width: 1024px) and (orientation: landscape)
{
    nav li  {
        width: calc(var(--unite-base)*5.5);
        height: calc(var(--unite-base)*5.5);
    }

}


/* SMARTPHONE HD portrait */

@media screen and (max-width: 480px) and (orientation: Portrait)
{

    .accroche {
        height: 40%;
        font-size: 30px;
    }

    nav {
        height: 60%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding-bottom: var(--unite-base) ;
    }

    nav li {
        font-size: 15px;
        width: calc(var(--unite-base)*3.5);
        height: calc(var(--unite-base)*3.5);

    }

}


/* SMARTPHONE Anciens et bas de gamme portrait */

@media screen and (max-width: 360px) and (orientation: Portrait)
{

    .accroche {
        height: 35%;
        font-size: 22px;
    }

    nav {
        height: 65%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding-bottom: var(--unite-base) ;
    }

    nav li {
        font-size: 14px;
        width: calc(var(--unite-base)*4);
        height: calc(var(--unite-base)*4);

    }

    nav li:nth-child(2)  {
        margin-top: calc(var(--unite-base)/2);
        margin-bottom: calc(var(--unite-base)/2);
    }

}