/* Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* Pages */
@import 'pages/accueil.css';
@import 'pages/design.css';
@import 'pages/web.css';
@import 'pages/photographie.css';
@import 'pages/cv.css';
@import 'pages/audiovisuel.css';

/*sous pages*/
@import 'pages/design/webdesign.css';
@import 'pages/design/flyers.css';
@import 'pages/design/Carte_de_visite.css';
@import 'pages/design/affiche.css';
@import 'pages/design/illustration.css';
@import 'pages/design/divers-design.css';


@import 'pages/web/site-collectivite.css';
@import 'pages/web/site-entreprise.css';
@import 'pages/web/site-entrainement.css';


@import 'pages/audiovisuel/autour_de_la_table.css';
@import 'pages/audiovisuel/divers_audiovisuel.css';


/* Modules */
@import 'modules/header.css';
@import 'modules/scrollbar.css';
@import 'modules/cursor.css';
@import 'modules/footer.css';
@import 'modules/sectionintro.css';
@import 'modules/vignettegrid.css';
@import 'modules/fil_darianne.css';
@import 'modules/sectioncreation.css';
@import 'modules/galerie.css';


/* Design System */
:root {
    /*------------------- Colors---------------------- */
     /*------ Pages------- */
    /* Page accueil */
    --background-accueil-page: #FFFFFF;
    --color-accueil-page: #443737;

    /* Page design */
    --background-design-page: #FFDDDF;
    --color-design-page: #9A3137;

     /* Page web */
     --background-web-page: #DDE7FF;
     --color-web-page: #4B5380;

    /* Page photographie */
    --background-photographie-page: #FFF4DD;
    --color-photographie-page: #426C41;

  
    /* Page Audiovisuel */
    --background-audiovisuel-page: #FFDFF4;
    --color-audiovisuel-page: #6C416B;

      /* Page CV */
      --background-cv-page: #2C2C2C;
      --color-CV-page: #FFFFFF;
      --cv-language-color: linear-gradient(145deg, #FA757D, #B159E7);
      --cv-logicielApplication-color: linear-gradient(145deg, #415DF0, #4FF47D);
      --cv-experience-color: linear-gradient(145deg, #FB3232, #FF8125);
      --cv-softskill-color: linear-gradient(145deg, #54FF51, #E0F370);
      --cv-formation-color: linear-gradient(145deg, #68EDFF, #0A1CC0);
      --cv-connaissances-color: linear-gradient(145deg, #FEB953, #AF7F47);
      --cv-langueinteret-color: linear-gradient(145deg, #D943FF, #FF7439);
      --cv-vignette-color: linear-gradient(145deg, #3E3E3E, #575757);

    /*------ Module------- */
    /*Menu*/
    --background-menu: #313131;
    --color-menu-survol: #FFDBB1;

     /*Footer*/
     --background-footer: #000000;
     --color-footer: #FFFFFF;
 
  
  }
 
  
  html {
	 /*max-height: 100vh;
   scroll-snap-type: y mandatory;*/
    scroll-behavior: smooth;
    cursor: none;
    overflow-x: hidden;
        
    }



  body {
    margin: 0;



  } 

  .bouton {
    border-radius: 50px;
    font-family: Poppins;
    font-size: 2.25em;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding:10px;
    padding-left:5%;
    padding-right:5%;
    transition-duration: 0.5s;
    border: 2px solid var(--color-menu-survol);
    position: relative;
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    overflow: hidden;
    color: var(--color-menu-survol);
    
  }

  .bouton::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 60px;
    height: 60px;
    border-radius: inherit;
    scale: 0;
    z-index: -1;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
    background-color: var(--color-menu-survol);
  }
  .bouton:hover::before {
    scale: 6;
  }

  .bouton:hover {
    color: var(--background-menu);
    scale: 0.95;
    box-shadow: 0 0px 20px var(--color-menu-survol);
  }

  .bouton:active {
    scale: 0.90;
    box-shadow: 0 0px 40px var(--color-menu-survol);
    font-size: 2.50em;
  }
  

a {
  text-decoration: none;
  color: inherit;
  cursor: none;

}

p {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/*footer */
.border-radius-end {
  width: 100%;
  height: 8vh;
  position: relative;
  bottom: -8vh;
  border-radius: 0 0 50px 50px;
  z-index: 1;
}

.background_parralax {

    transition: background-position 0.5s ease-out;   
}


.mention {
  display: flex;
  justify-content: center;
}

.mention div {
  width: 70%;
}
  
  @media (max-width: 768px) {
    :root {
      /* Mobile Variables */
      
    }
    html {
      /*scroll-snap-type: y mandatory;*/
    }
    .bouton {
      width: 100%;
      font-size: 1.5rem;
      
    }
    .bouton::before {
      transition: all 1.5s cubic-bezier(0.23, 1, 0.320, 1);
      background-color: var(--color-menu-survol);
    }
    .bouton:hover::before {
      scale: 15;
    }
    .mention div {
      width: 95%;
    }
  
  }