
/* ============ boutons surgissants de retour vers haut de page et d'avance vers bas de page ================ */

a#cRetour, a#cAvance {
    background: #AAA;
	border: 1px solid #555;
    font-size: 28px;
    text-decoration: none;
	line-height: 98%;
    text-align: center;
    position: fixed;						/* position de base */
    left: 50%;								/* position de base */
    transform: translate(-429px);			/* décalage horizontal */
    z-index: 5;								/* focalisation au dessus du menu */
    transition: all ease-in 0.3s;			/* vitesse de déplacement (si déplacement) */
    opacity: 0.8;							/* transparence */
    backface-visibility: hidden;			/* facultatif */
    -webkit-backface-visibility: hidden;	/* facultatif */
}

a#cRetour:before { 
    content: "\25B2";						/* caractère triangle pointe en haut */
}

a#cAvance:before { 
    content: "\25BC";						/* caractère triangle pointe en bas */
}

a#cRetour {
    border-radius: 6px 6px 0px 0px;			/* coins supérieurs arrondis */
    padding: 1px 5px 5px 5px;				/* centrage du caractère */
    color: var(--color-banner);
}

a#cAvance {
    border-radius: 0px 0px 6px 6px;			/* coins inférieurs arrondis */
    padding: 4px 5px 2px 5px;				/* centrage du caractère */
    color: var(--color-banner);
}

a#cRetour:hover {
    background: var(--color-banner);
    color: #FFF;
    transition: all ease-in 0.1s;			/* vitesse de transformation */
    opacity: 0.8;							/* transparence */
}

a#cAvance:hover {
    background: var(--color-banner);
    color: #FFF;
    transition: all ease-in 0.1s;			/* vitesse de transformation */
    opacity: 0.8;							/* transparence */
}

a#cRetour.cInvisible {						/* état invisible */
    bottom: 96px;							/* position Y (-35px si déplacé vers le bas) */
    transition: all ease-in 0.1s;			/* vitesse de disparition de visible à invisible */
    opacity: 0;								/* transparence */
}

a#cAvance.cInvisible {						/* état invisible */
    bottom: 60px;							/* position Y (-35px si déplacé vers le bas) */
    transition: all ease-in 0.1s;			/* vitesse de disparition de visible à invisible */
    opacity: 0;								/* transparence */
}

a#cRetour.cVisible {						/* état visible */
    bottom: 96px;							/* position Y */
    transition: all ease-in 0.1s;			/* vitesse d'apparition de invisible à visible */
    opacity: 0.8;							/* transparence */
}

a#cAvance.cVisible {						/* état visible */
    bottom: 60px;							/* position Y */
    transition: all ease-in 0.1s;			/* vitesse d'apparition de invisible à visible */
    opacity: 0.8;							/* transparence */
}
