/* TYPOS */

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


/* ANIMATION */

/* SUPERZOOM Aller - Retour */
@keyframes superzoom {
	from { background-size: auto 50%, auto 50%; }
    /* 30%  { background-size: auto 200%, auto 50% }
	to   { background-size: auto 50%, auto 50% } */
    to { background-size: auto 180%, auto 50%; }
}

/* @keyframes rideau_droit {
	from { 	width: 50%;
			border-right: 4px solid black;  }
    95%  {  border-left: none;}
    to   { 	width: 0%; }
}

@keyframes rideau_gauche {
	from { 	width: 50%;
			border-left: 4px solid black;  }
    95%  {  border-left: none;}
	to   { 	width: 0%; }
} */

@keyframes volet {
	from { 	height: 0;
            width: 75%;
            /* padding-top: var(--unite-base); */
            border-bottom: 0px solid transparent;
			 }
    50% {   border-bottom: 1px solid #54565a;}
	to   { 	height: 100%;
        width: 100%;
        /* padding-bottom: var(--unite-base); */
        border-bottom: 0px solid transparent;  }
}

/* @keyframes volet_texte {
	from { 	transform: translateX(-95%); }
	to   { 	transform: translateX(0%); }
} */

@keyframes nav_1 {
	from { 	opacity: 0;  }
	to   { 	opacity: 1; }
}


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

#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: superzoom 1.5s linear;
    animation-fill-mode: forwards;
    -webkit-animation: superzoom 1.5s linear;
    -webkit-animation-fill-mode: forwards;
 
}

.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 1.7s 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 2s 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);
    }

}