html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

@font-face {
  font-family: "BasstonScript";
  src: url("./font/BasstonScript.otf");
  src: url("./font/BasstonScript.ttf");
  src: url("./font/BasstonScript.woff");
}

@font-face {
  font-family: "Calibri Light";
  src: url("./font/calibril.ttf");
  src: url("./font/calibril.woff");
}

body {
  color: black;
}

.wrapper {
  width: 100%;
  margin: auto;
}

.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 99;
}

a {
  text-decoration: none !important;
  color: black;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.navbar {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
}

.navbar-brand img {
  width: 90px;
  padding-top: 10px;
}

.navbar a {
  position: relative;
  display: inline-block;
}

.navbar a:link {
  padding-right: 35px;
  font-family: "BasstonScript";
  font-size: 57px;
  padding-bottom: 5px;
}

.navbar a:hover {
  color: #5e6063;
}

.navbar-nav a::after {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 90%;
  left: -10px;
  border-bottom: 2px solid #d76060;
  opacity: 0;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  transition: all .4s;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -ms-transition: all .4s;
  -o-transition: all .4s;
}

.navbar a:hover:after {
  opacity: 1;
  bottom: 0;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.accueil {
  height: 95vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-image: url("../medias/images/degrade.jpg");
  background-size: cover;
  text-align: center;
  margin: 0 auto;
}

/*.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  -webkit-transition: opacity 1.30s ease-in;
  transition: opacity 1.30s ease-in;
}*/

.flex.load,
.fa-chevron-down.load {
  opacity: 1;
  margin: 10px;
}

.accueil h1 {
  font-family: "BasstonScript";
  font-size: 150px;
}

.prenom {
  font-family: "BasstonScript";
  font-size: 200px;
}

/*.ma-photo {
  text-align: center;
  margin-left: 250px;
}

.ma-photo img {
  display: block;
  width: 20%;
}*/

.legende-photo {
  margin-top: 20px; 
  padding-bottom: 20px;
}

.legende-photo p {
  padding-bottom: 5px;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  opacity: 0;
  -webkit-animation: bounceIn 0.75s ease-in-out 2s forwards;
          animation: bounceIn 0.75s ease-in-out 2s forwards;
  font-weight: bold;
}

.fa-chevron-down {
  position: relative;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity 5s ease-in;
  transition: opacity 5s ease-in;
  -webkit-animation: jump 3s infinite;
          animation: jump 3s infinite;
  font-size: 80px;
}

a:hover {
  color: #5e6063 !important;
}

@-webkit-keyframes jump {
  0% {
    top: 0;
  }
  50% {
    top: 50px;
  }
  100% {
    top: 0;
  }
}

@keyframes jump {
  0% {
    top: 0;
  }
  50% {
    top: 50px;
  }
  100% {
    top: 0;
  }
}

h1 {
  font-family: "BasstonScript";
  font-size: 80px;
}

.informations {
  padding-top: 150px;
  padding-bottom: 150px;
  padding-left: 80px;
  padding-right: 80px;
}

.informations__contenu {
  margin-top: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.presentation {
  background-color: #ffe1e1;
}

.presentation li {
  list-style-position: inside;
  padding: 3px;
}

.texte-presentation {
  width: 50%;
}

.texte-presentation p {
  margin-top: 15px;
  margin-bottom: 15px;
}

.presentation p {
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 30px;
}

.informations img {
  width: 40%;
}

.cursus {
  background-color: #cbf0ff;
}

h3,
li,
h2,
p {
  font-family: "Calibri Light", sans-serif;
  font-size: 20px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 22px;
}

.texte-gauche {
  width: 50%;
}

.actuellement {
  margin-bottom: 30px;
  margin-right: 80px;
  text-align: center;
}

.texte-gauche-div p {
  padding-bottom: 5px;
}

.actuellement p {
  font-size: 22px;
}

.exp_pro {
  list-style-position: inside;
  margin-right: 80px;
  text-align: center;
}

.exp_pro li {
  padding: 5px;
}

.cursus-elt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 15px;
  background-color: #ff6c6c;
  padding: 20px 70px;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
  color: #FFF;
  width: 100%;
}

.cursus-elt h2 {
  font-size: 140%;
}

.cursus-elt h3 {
  font-style: italic;
  font-size: 110%;
}

.cursus-logo {
  font-size: 70%;
  padding-right: 20px;
}

.cursus-texte {
  line-height: 25px;
}

.cursus i {
  font-size: 500%;
  width: 1.25em;
  text-align: center;
}

.competences {
  background-color: #ffe1e1;
}

.card {
  border: none;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
  background-color: #ffe1e1;
}

.competences h2 {
  font-weight: bold;
  font-size: 110%;
}

.cm,
.chargee,
.infographie,
.developpement,
.langues {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 100px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.competences-progress {
  margin-top: 40px;
  margin-bottom: 30px;
}

.front {
  border-top: 5px solid #38b6ff;
  padding: 30px;
  width: 500px;
  background-color: white;
}

.back {
  border-top: 5px solid #ff6c6c;
  padding: 30px;
  padding-top: 20px;
  width: 500px;
  background-color: white;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.html,
.css,
.bdd,
.cms,
.photoshop,
.illustrator,
.premiere,
.facebook,
.microsoft,
.youtube,
.writing,
.canva,
.capcut,
.chatgpt,
.midjourney,
.after {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 2%;
}

.competences-bar {
  height: 5px;
  width: 100%;
  background-color: #e6e6e6;
  position: relative;
}

.competences-level {
  height: 100%;
  background-color: #38b6ff;
  width: 0;
}

.competences-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 130px;
  margin-bottom: 10px;
}

.competences-logo p {
  font-size: 80%;
  text-align: center;
  margin-top: 10px;
  font-family: "Calibri Light", sans-serif;
}

.competences span {
  font-family: "Calibri Light", sans-serif;
}

.competences-logo i {
  font-size: 50px;
  color: #38b6ff;
}

.competences-pourcentage {
  position: absolute;
  top: -20px;
  right: 0;
}

.competences ul {
  margin-top: 35px;
  margin-bottom: 10px;
}

.competences li {
  list-style-position: inside;
  margin-bottom: 30px;
}

.competences-progress img {
  width: 50px;
}

.langues {
  width: 1000px;
  margin: 0 auto;
  background-color: white;
  border-top: 5px solid #38b6ff;
  padding: 30px;
  margin-top: 50px;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
}

.langues-container {
  margin: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

.langues-container div {
  width: 50%;
  margin: 30px;
}

.realisations {
  background-color: #cbf0ff;
}

.realisations-elt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 50px;
  margin-bottom: 50px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #FFF;
  width: 100%;
}

/*.center {
    align-items: center;
    //justify-content: center;
    margin-bottom: 30px;
}

.realisations-image {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}*/
.realisations-description {
  color: white;
  background-color: #d76060;
  text-align: center;
  margin-left: 50px;
  width: 50%;
  padding: 20px;
}

/* -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
}

.realisations-animation:hover .realisations-image {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.realisations-animation:hover .realisations-description {
    background-color: #d76060;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}*/
.realisations-description h2 {
  padding-bottom: 6px;
}

.realisations img {
  width: 450px;
}

.loisirs {
  background-color: #ffe1e1;
}

.margin {
  margin-bottom: 80px;
}

.loisirs h2 {
  text-align: center;
  margin: 30px;
}

.loisir-solo h1 {
  font-size: 400%;
  text-align: center;
  margin-top: 3%;
}

.carousel {
  margin: 0 auto;
  width: 60%;
}

.contact {
  background-color: #ffe1e1;
}

.contact h2 {
  margin-bottom: 25px;
}

.formulaire-container {
  width: 40%;
}

form {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

form input {
  font-family: "Calibri Light", sans-serif;
  background-color: #cbf0ff;
  font-size: 110%;
  outline: 0;
  border: 0;
  border-bottom-color: currentcolor;
  border-bottom-style: none;
  border-bottom-width: 0px;
  padding: 10px;
  border-bottom: 2px solid #d76060;
  margin-bottom: 20px;
  color: #212121;
}

form textarea {
  font-family: "Calibri Light", sans-serif;
  font-size: 110%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.button {
  font-family: "BasstonScript";
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  margin-top: 20px;
  background-color: #d76060;
  font-size: 50px;
}

.coordonnees {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: 10px;
}

.coordonnees i {
  font-size: 200%;
  padding-right: 25px;
  width: 1.25em;
  text-align: center;
}

.boutons {
  display: block;
}

.mail {
  color: #d76060;
  font-family: "Calibri Light", sans-serif;
  font-size: 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

footer {
  color: white;
  background-color: #33312e;
  height: 100px;
}

.footer-container {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  text-align: center;
  width: 50%;
  height: 100%;
}

.footer-container a {
  color: white;
}

.footer-texte-gauche {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 5%;
  margin-bottom: 5%;
}

.footer-texte-droite {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 5%;
  margin-bottom: 5%;
}

.footer-texte-gauche p {
  margin-right: 40px;
}

.footer-texte-gauche i {
  margin-right: 10px;
}

.footer-texte-droite i {
  padding-right: 10px;
  font-size: 150%;
}

strong {
  font-weight: bold;
}

@media (max-width: 1340px) {
  .center {
    display: block;
  }
  .realisations-animation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 40px;
  }
  .realisations-description {
    opacity: 1;
    background-color: #d76060;
    height: 50%;
    margin-left: 20px;
  }
  .realisations-image, .realisations-description, .realisations-animation, .realisations-animation:hover {
    -webkit-transform: none !important;
            transform: none !important;
  }
  .complement {
    display: block;
  }
}

@media (max-width: 1024px) {
  .accueil h1 {
    font-size: 80px;
  }
  .prenom {
    font-size: 180px;
  }
  .ma-photo img {
    width: 50%;
  }
  .ma-photo {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-left: 100px;
  }
  .legende-photo p {
    font-size: 20px;
  }
  .informations {
    padding-top: 150px;
  }
  .informations__contenu {
    display: block;
    margin-top: 50px;
  }
  .texte-presentation {
    width: 100%;
  }
  video {
    width: 80%;
    margin-top: 30px;
    margin-left: 80px;
  }
  .texte-gauche {
    width: 100%;
    margin-bottom: 40px;
  }
  .competences-container {
    margin-top: 50px;
  }
  .competences-div {
    margin: 10px;
  }
  h3, li, h2, p {
    font-size: 18px;
  }
  .cm, .chargee, .autres, .infographie, .developpement, .langues, .langues-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 50px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .front, .back {
    width: 400px;
  }
  .circles {
    margin: 10px;
  }
  .langues {
    width: 800px;
  }
  .langues img {
    margin: 20px;
  }
  .realisations img {
    width: 400px;
  }
  .loisir-solo {
    text-align: center;
    margin-bottom: 50px;
  }
  .loisir-solo img {
    width: 20%;
  }
  .carousel {
    width: 80%;
  }
  .coordonnees-container {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 auto;
  }
  .footer-container {
    width: 90%;
  }
}

@media (max-width: 768px) {
  .navbar a:link {
    padding-right: 0;
  }
  .flex.load {
    display: block;
  }
  .ma-photo {
    margin: 0 auto;
    margin-top: 40px;
  }
  .ma-photo img {
    width: 40%;
    margin: 0 auto;
  }
  .cm,
  .chargee,
  .autres,
  .infographie,
  .developpement,
  .langues,
  .langues-container {
    display: block;
    width: 100%;
  }
  .langues-container {
    margin: 0;
  }
  .langues-container div {
    width: 100%;
    margin: 0;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .front,
  .back {
    width: 100%;
  }
  .realisations-elt {
    display: block;
  }
  .realisations-animation {
    display: block;
  }
  .realisations img,
  .realisations-description {
    width: 100%;
    margin-left: 0;
  }
  .loisir-solo img {
    width: 30%;
  }
  .carousel {
    width: 100%;
  }
  .formulaire-container {
    width: 80%;
  }
}

@media (max-width: 425px) {
  .flex.load {
    padding-top: 50px;
  }
  .navbar-brand img {
    width: 60px;
    padding-top: 5px;
  }
  .legende-photo {
    padding-top: 5px;
  }
  .accueil i {
    display: none;
  }
  .accueil {
    background-position: center;
    height: 120vh;
  }
  .prenom {
    font-size: 100px;
  }
  .accueil h1,
  h1 {
    font-size: 60px;
  }
  h1, .complement {
    text-align: center;
  }
  .fa-chevron-down {
    font-size: 50px;
  }
  .informations {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 20px;
    padding-right: 20px;
  }
  video {
    margin: 0;
    margin-top: 20px;
    width: 100%;
  }
  .cursus-elt {
    padding: 10px;
  }
  .cursus-elt h2 {
    font-size: 20px;
  }
  .cursus-elt h3 {
    font-size: 15px;
  }
  .cursus-logo {
    font-size: 10px;
  }
  .realisations-elt {
    display: block;
  }
  .realisations-animation {
    display: block;
  }
  .realisations img, .realisations-description {
    width: 100%;
    margin-left: 0;
  }
  .loisir-solo h1 {
    font-size: 50px;
  }
  .loisir-solo img {
    width: 40%;
  }
  .button {
    font-size: 40px;
  }
  footer {
    height: 210px;
    display: block;
    padding: 10px;
  }
  .footer-container {
    display: block;
  }
  .footer-texte-gauche {
    margin: 0;
    display: block;
  }
  .footer-texte-gauche i {
    display: none;
  }
  .footer-texte-gauche p {
    margin-right: 0;
    margin-bottom: 30px;
  }
  .footer-texte-droite {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
/*# sourceMappingURL=style.css.map */