:root{
  --base-color: white;
  --base-variant: #e8e9ed;
  --text-color: #111528;
  --secondary-text: #232738;
  --primary-color: #3a435d;
  --accent-color: #0071ff;
  --bs-body-bg: #F8F8F8;
  --bs-body-bg-rgb: 248, 248, 248;
  --base-variante: #e8e9ed;
  --couleur-text: #111528;
  --yll-color: red;
  --vis-color: black;
}
.darkmode{
  --base-color: #070b1d;
  --base-variant: #101425;
  --text-color: #ffffff;
  --secondary-text: #a4a5b8;
  --primary-color: #3a435d;
  --accent-color: #0071ff;
  --bs-body-bg: #101425;
  --bs-body-bg-rgb: 0, 0, 0;
  --base-variante: #e8e9ed;
  --couleur-text: #111528;
  --yll-color: yellow;/*yellow*/
  --vis-color: white;
}

.trsfrm{
  color: var(--couleur-text);
}

.opr{
  color: var(--couleur-text);
}
/*.vis{
  color: var(--vis-color);
}*/

.yll{
  color: var(--yll-color);
}
*{
  margin: 0;
  padding: 0;
}
html{
  font-family: Poppins;
}
body{
  min-height: 100vh; 
  background-color: var(--base-color);
  color: var(--text-color);
}
header, section{
  padding: 70px min(50px, 7%);
}
section{
  background-color: var(--base-variant);
}
p{
  margin: 10px 0 20px 0;
  color: var(--secondary-text);
}
button{
  border: none;
  padding: .8em 2em;
  background-color: var(--primary-color);
  color: white;
  border-radius: 4px;
  font: inherit;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
}
.cta-button{
  background-color: var(--accent-color);
} 
#theme-switch{
  height: 24px;/*50px;*/
  width: 24px;/*50px;*/
  padding: 0;
  border-radius: 50%;
  background-color: var(--base-variant);
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  top: 20px;
  right: 0;
}
#theme-switch svg{
  fill: var(--primary-color);
}
#theme-switch svg:last-child{
  display: none;
}
.darkmode #theme-switch svg:first-child{
  display: none;
}
.darkmode #theme-switch svg:last-child{
  display: block;
}




/*.slide-in {
    max-width: 900px;
    margin: 50px auto;
    background: linear-gradient(to right, #fc4a1a, #f7b733); 
    transform: translateX(-5%);
    opacity: 0;
    transition: transform 0.6s ease-in-out,
    opacity 0.6s ease-in-out;
}
.slide-in.active {
    transform: translateX(0%);
    opacity: 1;
}

.slide-inh {
    max-width: 900px;
    margin: 50px auto;
    background: linear-gradient(to left, #fc4a1a, #f7b733); 
    padding: 20px;
    transform: translateX(5%);
    opacity: 0;
    transition: transform 0.6s ease-in-out,
    opacity 0.6s ease-in-out;
}
.slide-inh.active {
    transform: translateX(0%);
    opacity: 1;
}*/

.slide-inh {
    max-width: 900px;
    margin: 50px auto;
    background: linear-gradient(to left, #fc4a1a, #f7b733);
    padding: 20px;

    transform: translateX(80px) scale(0.95);
    opacity: 0;
    filter: blur(5px);

    transition: 
        transform 0.6s ease,
        opacity 0.6s ease,
        filter 0.6s ease;
}

.slide-inh.active {
    transform: translateX(0) scale(1);
    opacity: 1;
    filter: blur(0);
}

.slide-in {
    max-width: 900px;
    margin: 50px auto;
    background: linear-gradient(to right, #fc4a1a, #f7b733);
    padding: 20px;

    transform: translateX(-80px) scale(0.95);
    opacity: 0;
    filter: blur(5px);

    transition: 
        transform 0.6s ease,
        opacity 0.6s ease,
        filter 0.6s ease;
}

.slide-in.active {
    transform: translateX(0) scale(1);
    opacity: 1;
    filter: blur(0);
}

.slide-ina {
    max-width: 900px;
    margin: 50px auto;
    background: linear-gradient(to right, #fc4a1a, #f7b733);
    padding: 20px;

    transform: translateX(-80px) scale(0.95);
    opacity: 0;
    filter: blur(5px);

    transition: 
        transform 0.6s ease,
        opacity 0.6s ease,
        filter 0.6s ease;
}

.slide-ina.active {
    transform: translateX(0) scale(1);
    opacity: 1;
    filter: blur(0);
}

.slide-inb {
    max-width: 900px;
    margin: 50px auto;
    background: linear-gradient(to left, #fc4a1a, #f7b733);
    padding: 20px;

    transform: translateX(80px) scale(0.95);
    opacity: 0;
    filter: blur(5px);

    transition: 
        transform 0.6s ease,
        opacity 0.6s ease,
        filter 0.6s ease;
}

.slide-inb.active {
    transform: translateX(0) scale(1);
    opacity: 1;
    filter: blur(0);
}
/*.slide-ina {
    max-width: 900px;
    margin: 50px auto;
    background: linear-gradient(to right, #fc4a1a, #f7b733); 
    padding: 5px;
    transform: translateX(-5%);
    opacity: 0;
    transition: transform 0.6s ease-in-out,
    opacity 0.6s ease-in-out;
}
.slide-ina.active {
    transform: translateX(0%);
    opacity: 1;
}*/

/*.slide-inb {
    max-width: 900px;
    margin: 50px auto;
    background: linear-gradient(to left, #fc4a1a, #f7b733);
    padding: 5px;
    transform: translateX(5%);
    opacity: 0;
    transition: transform 0.6s ease-in-out,
    opacity 0.6s ease-in-out;
}
.slide-inb.active {
    transform: translateX(0%);
    opacity: 1;
}
*/





.sliding-opra{
    max-width: 900px;
    margin: 50px auto;
    background: linear-gradient(to left, #fc4a1a, #f7b733);
    padding: 5px;
    transform: translateY(-5%) scale(-0.95) rotate(90deg);
    opacity: 0;
    /*transition: transform 0.6s ease-in-out,
    opacity 0.6s ease-in-out;*/
    transition: 
        transform 0.6s ease,
        opacity 0.6s ease,
        filter 0.6s ease;
}
.sliding-opra.active {
    transform: translateY(0%);
    opacity: 1;
}

.sliding-oprb{
    max-width: 900px;
    margin: 50px auto;
    background: linear-gradient(to left, #fc4a1a, #f7b733);
    padding: 5px;
    transform: translateY(5%) scale(-0.95) rotate(-90deg);
    opacity: 0;
    
    transition: 
        transform 1.2s ease,
        opacity 1.2s ease,
        filter 1.2s ease;
}
.sliding-oprb.active {
    transform: translateY(0%);
    opacity: 1;
}

.sliding-oprc{
    max-width: 900px;
    margin: 50px auto;
    background: linear-gradient(to left, #fc4a1a, #f7b733);
    padding: 5px;
    transform: translateY(-5%) scale(-0.95) rotate(90deg);
    opacity: 0;
    
    transition: 
        transform 1.8s ease,
        opacity 1.8s ease,
        filter 1.8s ease;
}
.sliding-oprc.active {
    transform: translateY(0%);
    opacity: 1;
}

.sliding-oprd{
    max-width: 900px;
    margin: 50px auto;
    background: linear-gradient(to left, #fc4a1a, #f7b733);
    padding: 5px;
    transform: translateY(5%) scale(-0.95) rotate(-90deg);
    opacity: 0;
    
    transition: 
        transform 2.4s ease,
        opacity 2.4s ease,
        filter 2.4s ease;
}
.sliding-oprd.active {
    transform: translateY(0%);
    opacity: 1;
}

.sliding-opre{
    max-width: 900px;
    margin: 50px auto;
    background: linear-gradient(to left, #fc4a1a, #f7b733);
    padding: 5px;
    transform: translateY(-5%) scale(-0.95) rotate(90deg);
    opacity: 0;
    
    transition: 
        transform 3.0s ease,
        opacity 3.0s ease,
        filter 3.0s ease;
}
.sliding-opre.active {
    transform: translateY(0%);
    opacity: 1;
}

.sliding-oprf{
    max-width: 900px;
    margin: 50px auto;
    background: linear-gradient(to left, #fc4a1a, #f7b733);
    padding: 5px;
    transform: translateY(5%) scale(-0.95) rotate(-90deg);
    opacity: 0;
    
    transition: 
        transform 3.6s ease,
        opacity 3.6s ease,
        filter 3.6s ease;
}
.sliding-oprf.active {
    transform: translateY(0%);
    opacity: 1;
}

.sliding-oprg{
    max-width: 900px;
    margin: 50px auto;
    background: linear-gradient(to left, #fc4a1a, #f7b733);
    padding: 5px;
    transform: translateY(-5%) scale(-0.95) rotate(90deg);
    opacity: 0;
    
    transition: 
        transform 4.2s ease,
        opacity 4.2s ease,
        filter 4.2s ease;
}
.sliding-oprg.active {
    transform: translateY(0%);
    opacity: 1;
}





#fft{
  background-color: var(--base-variante);
}

#fia{
  color: var(--couleur-text);
}
#fib{
  color: var(--couleur-text);
}
#fic{
  color: var(--couleur-text);
}
#fid{
  color: var(--couleur-text);
}
#fie{
  color: var(--couleur-text);
}
#fif{
  color: var(--couleur-text);
}
#fig{
  color: var(--couleur-text);
}
#fih{
  color: var(--couleur-text);
}


#daa{
  color: var(--text-color);
}
#dab{
  color: var(--text-color);
}
#dac{
  color: var(--text-color);
}


#btnrs {
    height: 50px;
    width: 50px;
    background: red;/*crimson;*/
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
	z-index: 9999;
	padding: 10px 14px;


   opacity: 0;
  visibility: hidden;
  transition: 1.5s;


  /*position: fixed;
  bottom: 30px;
  right: 30px;
  display: none;
  padding: 10px 15px;
  font-size: 18px;
  cursor: pointer;*/
}
#btnrs.show {
  opacity: 1;
  visibility: visible;
}






#iconers {
    width: 25px;
}



#jobsa{
  color: var(--couleur-text);
}









/*body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 15px;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}
*/


.bgcolornav{
  background-color: red;
}







.mousemove {
  height: 50px;
  width: 50px;
  border: 2px solid pink;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  transition: 0.2s ease;
  z-index: -1;
}

/*.lienanimea {
  display: inline-block;  OBLIGATOIRE pour bouger 
  transition: transform 0.3s ease;
  padding: 5px 10px;
}

.lienanimeb {
  display: inline-block; 
  transition: transform 0.3s ease;
  padding: 5px 10px;
}

.lienanimec {
  display: inline-block; 
  transition: transform 0.3s ease;
  padding: 5px 10px;
}


.lienanimea:hover, .lienanimeb:hover, .lienanimec:hover {
  color: yellow;
}

*/





.lienanimea {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimea::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimea.hovered::before {
  opacity: 1;
  transform: translateX(0);
}





.lienanimeb {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimeb::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimeb.hovered::before {
  opacity: 1;
  transform: translateX(0);
}


.lienanimec {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimec::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimec.hovered::before {
  opacity: 1;
  transform: translateX(0);
}









.imgfloata img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* animation continue 
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
*/
.float-effect {
  animation: float 1.5s ease-in-out infinite;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}


.imgfloatb img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* animation continue 
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.float-effect {
  animation: float 1.5s ease-in-out infinite;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
*/
.imgfloatc img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* animation continue 
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.float-effect {
  animation: float 1.5s ease-in-out infinite;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
*/




/* ABOUT US */

#theme-switcha{
  height: 24px;/*50px;*/
  width: 24px;/*50px;*/
  padding: 0;
  border-radius: 50%;
  background-color: var(--base-variant);
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  top: 20px;
  right: 0;
}
#theme-switcha svg{
  fill: var(--primary-color);
}
#theme-switcha svg:last-child{
  display: none;
}
.darkmode #theme-switcha svg:first-child{
  display: none;
}
.darkmode #theme-switcha svg:last-child{
  display: block;
}













.lienanimeay {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimeay::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimeay.hovered::before {
  opacity: 1;
  transform: translateX(0);
}





.lienanimeby {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimeby::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimeby.hovered::before {
  opacity: 1;
  transform: translateX(0);
}


.lienanimecy {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimecy::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimecy.hovered::before {
  opacity: 1;
  transform: translateX(0);
}









.imgfloatay img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.imgfloatby img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* animation continue 
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
*/
.imgfloatcy img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}




.mousemovey {
  height: 50px;
  width: 50px;
  border: 2px solid pink;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  transition: 0.2s ease;
  z-index: -1;
}








/* TOPICS */

#theme-switchb{
  height: 24px;/*50px;*/
  width: 24px;/*50px;*/
  padding: 0;
  border-radius: 50%;
  background-color: var(--base-variant);
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  top: 20px;
  right: 0;
}
#theme-switchb svg{
  fill: var(--primary-color);
}
#theme-switchb svg:last-child{
  display: none;
}
.darkmode #theme-switchb svg:first-child{
  display: none;
}
.darkmode #theme-switchb svg:last-child{
  display: block;
}













.lienanimeayz {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimeayz::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimeayz.hovered::before {
  opacity: 1;
  transform: translateX(0);
}





.lienanimebyz {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimebyz::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimebyz.hovered::before {
  opacity: 1;
  transform: translateX(0);
}


.lienanimecyz {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimecyz::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimecyz.hovered::before {
  opacity: 1;
  transform: translateX(0);
}









.imgfloatayz img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.imgfloatbyz img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* animation continue */
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.imgfloatcyz img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}




.mousemoveyz {
  height: 50px;
  width: 50px;
  border: 2px solid pink;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  transition: 0.2s ease;
  z-index: -1;
}










/* GRAMMAR */

#theme-switchc{
  height: 24px;/*50px;*/
  width: 24px;/*50px;*/
  padding: 0;
  border-radius: 50%;
  background-color: var(--base-variant);
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  top: 20px;
  right: 0;
}
#theme-switchc svg{
  fill: var(--primary-color);
}
#theme-switchc svg:last-child{
  display: none;
}
.darkmode #theme-switchc svg:first-child{
  display: none;
}
.darkmode #theme-switchc svg:last-child{
  display: block;
}













.lienanimeays {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimeays::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimeays.hovered::before {
  opacity: 1;
  transform: translateX(0);
}





.lienanimebys {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimebys::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimebys.hovered::before {
  opacity: 1;
  transform: translateX(0);
}


.lienanimecys {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimecys::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimecys.hovered::before {
  opacity: 1;
  transform: translateX(0);
}









.imgfloatays img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.imgfloatbys img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* animation continue 
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
*/
.imgfloatcys img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}




.mousemoveys {
  height: 50px;
  width: 50px;
  border: 2px solid pink;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  transition: 0.2s ease;
  z-index: -1;
}




/* DASHBOARD */

#theme-switchvx{
  height: 24px;/*50px;*/
  width: 24px;/*50px;*/
  padding: 0;
  border-radius: 50%;
  background-color: var(--base-variant);
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  top: 20px;
  right: 0;
}
#theme-switchvx svg{
  fill: var(--primary-color);
}
#theme-switchvx svg:last-child{
  display: none;
}
.darkmode #theme-switchvx svg:first-child{
  display: none;
}
.darkmode #theme-switchvx svg:last-child{
  display: block;
}













.lienanimeayvx {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimeayvx::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimeayvx.hovered::before {
  opacity: 1;
  transform: translateX(0);
}





.lienanimebyvx {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimebyvx::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimebyvx.hovered::before {
  opacity: 1;
  transform: translateX(0);
}


.lienanimecyvx {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimecyvx::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimecyvx.hovered::before {
  opacity: 1;
  transform: translateX(0);
}









.imgfloatayvx img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.imgfloatbyvx img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* animation continue 
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
*/
.imgfloatcyvx img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}




.mousemoveyvx {
  height: 50px;
  width: 50px;
  border: 2px solid pink;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  transition: 0.2s ease;
  z-index: -1;
}





/* LOGIN */

#theme-switchv{
  height: 24px;/*50px;*/
  width: 24px;/*50px;*/
  padding: 0;
  border-radius: 50%;
  background-color: var(--base-variant);
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  top: 20px;
  right: 0;
}
#theme-switchv svg{
  fill: var(--primary-color);
}
#theme-switchv svg:last-child{
  display: none;
}
.darkmode #theme-switchv svg:first-child{
  display: none;
}
.darkmode #theme-switchv svg:last-child{
  display: block;
}













.lienanimeayv {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimeayv::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimeayv.hovered::before {
  opacity: 1;
  transform: translateX(0);
}





.lienanimebyv {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimebyv::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimebyv.hovered::before {
  opacity: 1;
  transform: translateX(0);
}


.lienanimecyv {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimecyv::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimecyv.hovered::before {
  opacity: 1;
  transform: translateX(0);
}









.imgfloatayv img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.imgfloatbyv img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* animation continue 
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
*/
.imgfloatcyv img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}




.mousemoveyv {
  height: 50px;
  width: 50px;
  border: 2px solid pink;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  transition: 0.2s ease;
  z-index: -1;
}






/* INSCRIPTION */

#theme-switchvu{
  height: 24px;/*50px;*/
  width: 24px;/*50px;*/
  padding: 0;
  border-radius: 50%;
  background-color: var(--base-variant);
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  top: 20px;
  right: 0;
}
#theme-switchvu svg{
  fill: var(--primary-color);
}
#theme-switchvu svg:last-child{
  display: none;
}
.darkmode #theme-switchvu svg:first-child{
  display: none;
}
.darkmode #theme-switchvu svg:last-child{
  display: block;
}













.lienanimeayvu {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimeayvu::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimeayvu.hovered::before {
  opacity: 1;
  transform: translateX(0);
}





.lienanimebyvu {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimebyvu::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimebyvu.hovered::before {
  opacity: 1;
  transform: translateX(0);
}


.lienanimecyvu {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimecyvu::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimecyvu.hovered::before {
  opacity: 1;
  transform: translateX(0);
}









.imgfloatayvu img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.imgfloatbyvu img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* animation continue 
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
*/
.imgfloatcyvu img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}




.mousemoveyvu {
  height: 50px;
  width: 50px;
  border: 2px solid pink;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  transition: 0.2s ease;
  z-index: -1;
}







/* LISTENING */

#theme-switcham{
  height: 24px;/*50px;*/
  width: 24px;/*50px;*/
  padding: 0;
  border-radius: 50%;
  background-color: var(--base-variant);
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  top: 20px;
  right: 0;
}
#theme-switcham svg{
  fill: var(--primary-color);
}
#theme-switcham svg:last-child{
  display: none;
}
.darkmode #theme-switcham svg:first-child{
  display: none;
}
.darkmode #theme-switcham svg:last-child{
  display: block;
}













.lienanimeaam {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimeaam::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimeaam.hovered::before {
  opacity: 1;
  transform: translateX(0);
}





.lienanimebam {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimebam::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimebam.hovered::before {
  opacity: 1;
  transform: translateX(0);
}


.lienanimecam {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimecam::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimecam.hovered::before {
  opacity: 1;
  transform: translateX(0);
}









.imgfloataam img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.imgfloatbam img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* animation continue 
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
*/
.imgfloatcam img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}




.mousemoveam {
  height: 50px;
  width: 50px;
  border: 2px solid pink;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  transition: 0.2s ease;
  z-index: -1;
}





/* READING */

#theme-switchamn{
  height: 24px;/*50px;*/
  width: 24px;/*50px;*/
  padding: 0;
  border-radius: 50%;
  background-color: var(--base-variant);
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  top: 20px;
  right: 0;
}
#theme-switchamn svg{
  fill: var(--primary-color);
}
#theme-switchamn svg:last-child{
  display: none;
}
.darkmode #theme-switchamn svg:first-child{
  display: none;
}
.darkmode #theme-switchamn svg:last-child{
  display: block;
}













.lienanimeaamn {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimeaamn::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimeaamn.hovered::before {
  opacity: 1;
  transform: translateX(0);
}





.lienanimebamn {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimebamn::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimebamn.hovered::before {
  opacity: 1;
  transform: translateX(0);
}


.lienanimecamn {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimecamn::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimecamn.hovered::before {
  opacity: 1;
  transform: translateX(0);
}









.imgfloataamn img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.imgfloatbamn img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* animation continue 
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
*/
.imgfloatcamn img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}




.mousemoveamn {
  height: 50px;
  width: 50px;
  border: 2px solid pink;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  transition: 0.2s ease;
  z-index: -1;
}





/* SPEAKING */

#theme-switchamo{
  height: 24px;/*50px;*/
  width: 24px;/*50px;*/
  padding: 0;
  border-radius: 50%;
  background-color: var(--base-variant);
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  top: 20px;
  right: 0;
}
#theme-switchamo svg{
  fill: var(--primary-color);
}
#theme-switchamo svg:last-child{
  display: none;
}
.darkmode #theme-switchamo svg:first-child{
  display: none;
}
.darkmode #theme-switchamo svg:last-child{
  display: block;
}













.lienanimeaamo {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimeaamo::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimeaamo.hovered::before {
  opacity: 1;
  transform: translateX(0);
}





.lienanimebamo {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimebamo::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimebamo.hovered::before {
  opacity: 1;
  transform: translateX(0);
}


.lienanimecamo {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimecamo::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimecamo.hovered::before {
  opacity: 1;
  transform: translateX(0);
}









.imgfloataamo img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.imgfloatbamo img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* animation continue 
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
*/
.imgfloatcamo img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}




.mousemoveamo {
  height: 50px;
  width: 50px;
  border: 2px solid pink;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  transition: 0.2s ease;
  z-index: -1;
}







/* VOCABULARY */

#theme-switchamp{
  height: 24px;/*50px;*/
  width: 24px;/*50px;*/
  padding: 0;
  border-radius: 50%;
  background-color: var(--base-variant);
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  top: 20px;
  right: 0;
}
#theme-switchamp svg{
  fill: var(--primary-color);
}
#theme-switchamp svg:last-child{
  display: none;
}
.darkmode #theme-switchamp svg:first-child{
  display: none;
}
.darkmode #theme-switchamp svg:last-child{
  display: block;
}













.lienanimeaamp {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimeaamp::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimeaamp.hovered::before {
  opacity: 1;
  transform: translateX(0);
}





.lienanimebamp {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimebamp::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimebamp.hovered::before {
  opacity: 1;
  transform: translateX(0);
}


.lienanimecamp {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimecamp::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimecamp.hovered::before {
  opacity: 1;
  transform: translateX(0);
}









.imgfloataamp img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.imgfloatbamp img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* animation continue */
/*@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
*/
.imgfloatcamp img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}




.mousemoveamp {
  height: 50px;
  width: 50px;
  border: 2px solid pink;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  transition: 0.2s ease;
  z-index: -1;
}





/* WRITING */

#theme-switchamw{
  height: 24px;/*50px;*/
  width: 24px;/*50px;*/
  padding: 0;
  border-radius: 50%;
  background-color: var(--base-variant);
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  top: 20px;
  right: 0;
}
#theme-switchamw svg{
  fill: var(--primary-color);
}
#theme-switchamw svg:last-child{
  display: none;
}
.darkmode #theme-switchamw svg:first-child{
  display: none;
}
.darkmode #theme-switchamw svg:last-child{
  display: block;
}













.lienanimeaamw {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimeaamw::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimeaamw.hovered::before {
  opacity: 1;
  transform: translateX(0);
}





.lienanimebamw {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimebamw::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimebamw.hovered::before {
  opacity: 1;
  transform: translateX(0);
}


.lienanimecamw {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* La flèche */
.lienanimecamw::before {
  content: "➺";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.3s ease;
}

.lienanimecamw.hovered::before {
  opacity: 1;
  transform: translateX(0);
}









.imgfloataamw img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.imgfloatbamw img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* animation continue 
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
*/
.imgfloatcamw img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}




.mousemoveamw {
  height: 50px;
  width: 50px;
  border: 2px solid pink;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  transition: 0.2s ease;
  z-index: -1;
}




.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}