/* daa : Dev Application Animation */

/********************************************************************************************************************************
                            glissement vers la gauche : slide left selon scroll
                            JS NECESSAIRE pour animation au moment du scroll !
********************************************************************************************************************************/

/* UTILISATION D'UN PARENT OBLIGATOIRE :
conteneur parent pour limiter le débordement et
eviter la barre de défilement horizontale */
.daa-scroll-glissement-vers-gauche-parent
{
    position: relative;
    overflow: hidden; /* masque le contenu qui sort des limites */
}

.daa-scroll-glissement-vers-gauche
{
    opacity: 0;
    transform: translate3d(30px, 0, 0); /* ne pas mettre 100% sinon js ne détecte pas qu'il est à l'écran pour le passer à visible */
    transition: transform 1s ease-out, opacity 1s ease-out;
    backface-visibility: hidden;
}

.daa-scroll-glissement-vers-gauche.daa-visible
{
    /* display: initial; // à tester */
    opacity: 1;
    transform: translateX(0);
}

/*
.daa-glissement-vers-gauche
{
    animation: daa-glissement-vers-gauche-param 0.5s forwards;
}
@keyframes daa-glissement-vers-gauche-param
{
    from {transform: translateX(30%);}
    to {transform: translateX(0);}
}
*/

/********************************************************************************************************************************
                            glissement vers la droite : slide right selon scroll
                            JS NECESSAIRE pour animation au moment du scroll !
********************************************************************************************************************************/

.daa-scroll-glissement-vers-droite
{
    opacity: 0;
    transform: translate3d(-30px, 0, 0); /* ne pas mettre 100% sinon js ne détecte pas qu'il est à l'écran pour le passer à visible */
    transition: transform 1s ease-out, opacity 1s ease-out;
    backface-visibility: hidden;
}

.daa-scroll-glissement-vers-droite.daa-visible
{
    opacity: 1;
    transform: translateX(0);
}

/*
.daa-glissement-vers-droite
{
    animation: daa-glissement-vers-droite-param 0.5s forwards;
}
@keyframes daa-glissement-vers-droite-param
{
    from {transform: translateX(0);}
    to {transform: translateX(30%);}
}
*/

/********************************************************************************************************************************
                            glissement vers le haut : slide top selon scroll
                            JS NECESSAIRE pour animation au moment du scroll !
********************************************************************************************************************************/

/* trop pixel size trop flou baveux */
/*
.daa-scroll-glissement-vers-haut
{
    opacity: 0;
    transform: translateY(20px); /* les % font des bavouilles sur la font du texte *//*
    transition: transform 1s ease-out, opacity 1s ease-out;
    will-change: transform, opacity;
}
*/

.daa-scroll-glissement-vers-haut
{
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: transform 1s ease-out, opacity 1s ease-out;
    backface-visibility: hidden;
}

.daa-scroll-glissement-vers-haut.daa-visible
{
    opacity: 1;
    transform: translateY(0);
}

/********************************************************************************************************************************
                            glissement vers le bas : slide bottom selon scroll
                            JS NECESSAIRE pour animation au moment du scroll !
********************************************************************************************************************************/

.daa-scroll-glissement-vers-bas
{
    opacity: 0;
    transform: translate3d(0, -30px, 0); /* accélération GPU */
    transition: transform 1s ease-out, opacity 1s ease-out;
    backface-visibility: hidden; /* empêche les artefacts */
    /*transform-style: preserve-3d; /* texte flou baveux : ne maintient pas une qualité visuelle */
}

.daa-scroll-glissement-vers-bas.daa-visible
{
    opacity: 1;
    transform: translateY(0);
}

/********************************************************************************************************************************
                                    apparition fondue : fade in
                            JS NECESSAIRE pour animation au moment du scroll !
********************************************************************************************************************************/

.daa-scroll-apparition-fondue
{
    opacity: 0;
    transition: opacity 2s ease-in;
    will-change: opacity;
}

.daa-scroll-apparition-fondue.daa-visible
{
    opacity: 1;
}

/********************************************************************************************************************************
                            vagues mouvantes svg
********************************************************************************************************************************/

.daa-vagues-mouvantes
{
    display: block;
    width: 100%;
    height: 60px;
    max-height: 60px;
    margin: -60px 0px 0px 0px;
    z-index:5;
    float:left;
}  
.daa-vagues-mouvantes .parallaxe1 > use {animation: daa-vagues-mouvantes-param1 10s linear infinite; &:nth-child(1) {animation-delay: -2s;}}
.daa-vagues-mouvantes .parallaxe2 > use {animation: daa-vagues-mouvantes-param2  8s linear infinite; &:nth-child(1) {animation-delay: -2s;}}
.daa-vagues-mouvantes .parallaxe3 > use {animation: daa-vagues-mouvantes-param3  6s linear infinite; &:nth-child(1) {animation-delay: -2s;}}
.daa-vagues-mouvantes .parallaxe4 > use {animation: daa-vagues-mouvantes-param4  4s linear infinite; &:nth-child(1) {animation-delay: -2s;}}
@keyframes daa-vagues-mouvantes-param1 { 0% {transform: translate(85px, 0%);} 100% {transform: translate(-90px, 0%);}}
@keyframes daa-vagues-mouvantes-param2 { 0% {transform: translate(-90px, 0%);} 100% {transform: translate(85px, 0%);}}
@keyframes daa-vagues-mouvantes-param3 { 0% {transform: translate(85px, 0%);} 100% {transform: translate(-90px, 0%);}}
@keyframes daa-vagues-mouvantes-param4 { 0% {transform: translate(-90px, 0%);} 100% {transform: translate(85px, 0%);}}

/********************************************************************************************************************************
                            element oscillant
                (ex : img stylo qui oscille au dessus d'une carte de visite)
********************************************************************************************************************************/

.daa-oscillation-parent
{
    position: relative;
}

.daa-oscillation
{
    /* width: 250px; à ajuster si besoin */
    position: absolute; /* la position fixe exacte sera précisé via top et left */
    animation: daa-oscillation-param 8s infinite;
    transform-origin: center;
}

@keyframes daa-oscillation-param
{
    0%, 100% {transform: rotate(0deg);}
    22% {transform: rotate(0deg);}
    24% {transform: rotate(-10deg);}
    26% {transform: rotate(10deg);}
    28% {transform: rotate(-10deg);}
    30% {transform: rotate(10deg);}
    32% {transform: rotate(-10deg);}
    34% {transform: rotate(10deg);}
    38%, 95% {transform: rotate(0deg);}
}


/********************************************************************************************************************************
                        element en rotation
                (ex : img qui tourne sur elle meme)
********************************************************************************************************************************/

.daa-rotation
{
    animation: daa-rotation-param 12s linear infinite;
    transform-origin: center;
    will-change: transform;
}


/* rotation lente */
@keyframes daa-rotation-param
{
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/********************************************************************************************************************************
                        element rebondissant
                (ex : img point de localisation qui rebondit sur une carte)
********************************************************************************************************************************/

.daa-rebondissement-parent
{
    position: relative;
}

.daa-rebondissement
{
    position: absolute; /* la position fixe exacte sera précisé via top et left */
    animation: daa-rebondissement-param 8s ease infinite;
}

@keyframes daa-rebondissement-param
{
    0%, 100% {transform: translateY(0);}
    10% {transform: translateY(-300px);}
    12% {transform: translateY(0px);}
    14% {transform: translateY(-200px);}
    16% {transform: translateY(0px);}
    18% {transform: translateY(-100px);}
    20% {transform: translateY(0px);}
    22% {transform: translateY(-50px);}
    24% {transform: translateY(0px);}
}



/********************************************************************************************************************************
                        image de décoration en fond
                            
********************************************************************************************************************************/

.daa-decoration-parent
{
    position: relative;
    /*overflow: hidden; /* à affecter à la section parent */
    z-index: 2; /* on monte d'un cran pour baisser d'un cran l'image */
}

.daa-decoration-img
{
    position: absolute;
    pointer-events: none;
    z-index: 1;
}


/* option : désactive la déco sur mobile */
@media (max-width: 768px)
{
    .daa-decoration-img.daa-no-mobile { display: none; }
}

/* option : désactive la déco sur tablette */
@media (max-width: 1200px)
{
    .daa-decoration-img.daa-no-tablette { display: none; }
}

/********************************************************************************************************************************
                        bouton "revenir en haut" (scroll to top)
                                (js : desa-clic-rev-ht )
********************************************************************************************************************************/

#daa-revenir-en-haut
{
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;

    color:#fff!important;
    background-color:var(--das-col-revenir-en-haut)!important;
    
    border: 2px solid white;
    outline: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 50%;
}

#daa-revenir-en-haut::after
{
    font-family: var(--da-font-icone-del); 
    content: 'v'; /* signe : ^ */
}