@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

/* Importation de la police de caractères Montserrat */

body {
  font-family: "Montserrat", sans-serif;
  margin: 0;
}

/* Application de la police de caractères Montserrat à tout le corps de la page */

* {
  margin: 0%;
}

/* Réinitialisation de la marge pour tous les éléments */

html {
  scroll-behavior: smooth;
}

/* Activation du défilement fluide */

html,
body {
  height: 100%;
}

/* Définition de la hauteur à 100% pour le corps de la page et le HTML */

.banner,
h1,
button {
  transition: 0.6s;
}

/* Ajout d'une transition de 0.6s pour les éléments de la bannière, les titres h1 et les boutons */

.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60%;
  background: url("./img/bg.webp");
  background-size: 120%;
  background-position: center;
  transition: 0.5s;
  color: aliceblue;
}

/* Styles pour la bannière avec un affichage en colonne, une justification et un alignement centrés, une largeur de 100%, une hauteur de 60%, un arrière-plan avec une image et une transition de 0.5s */

.banner-header {
  gap: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
}

/* Styles pour l'en-tête de la bannière avec un espacement entre les éléments, un affichage en ligne, une justification et un alignement centrés, un espacement intérieur pour le haut et le bas */

.banner-header h1 {
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 36px;
  margin-top: 0;
}

/* Styles pour le titre h1 de l'en-tête de la bannière avec une épaisseur de police en gras, un espacement des lettres de 2px, une taille de police de 36px et une marge supérieure de 0 */

.banner-header img {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  animation: morph 3.5s linear infinite;
}

/* Styles pour l'image de l'en-tête de la bannière avec une largeur et une hauteur spécifiées, une bordure arrondie, un ajustement de l'objet pour couvrir, et une animation de morphing */

#banner-photo {
  transition: 0.5s;
}

/* Transition de 0.5s pour l'ID "banner-photo" */

@media (width <= 620px) {
  .banner {
    text-align: center;
    flex-direction: column-reverse;
    justify-content: center;
  }
}

/* Styles spécifiques aux médias pour une largeur d'écran inférieure ou égale à 620px, avec un alignement central et un renversement de l'ordre des éléments de la bannière */

.banner-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 200%;
  height: 110%;
  rotate: -2deg;
  background: white;
}

/* Styles pour l'élément ::before de la bannière avec une position absolue, un z-index inférieur, un alignement au centre, une largeur de 200%, une hauteur de 110%, une rotation et un arrière-plan blanc */

@keyframes morph {
  0%,
  100% {
    border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
  }
  34% {
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }
  67% {
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
  }
}

/* Définition de l'animation "morph" avec des étapes de pourcentages pour définir différents rayons de bordure */

.appears {
  /* Add your styles here */
  opacity: 0;
  transform: translateX(0);
  transition: all 0.3s ease-in-out;
}

/* Styles pour la classe "appears" avec une opacité de 0, une translation horizontale de 0 et une transition de 0.3s pour tous les changements avec une accélération douce */

.main-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 60px 60px 60px 60px;
  gap: 10px;
  width: auto;
}

/* Styles pour le conteneur principal avec un affichage en ligne, une justification de l'espace entre les éléments, un alignement centré, un espacement intérieur spécifié, un espacement entre les éléments et une largeur automatique */

.main-container-inverte {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  padding: 60px 60px 60px 60px;
  gap: 10px;
  width: auto;
  animation: fade-in 1s ease-in-out;
}

.main-container h2,
.main-container-inverte h2 {
  font-size: 28px;
  text-align: center;
  padding: 50px;
  width: 45%;
}

/* Styles pour le titre h2 du conteneur principal avec une taille de police de 28px, un alignement centré, un espacement intérieur spécifié et une largeur de 45% */

.main-text .see-more-btn {
  display: block;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.main-text .detailed-text {
  display: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.main-text .see-more-btn {
  display: block;
  margin-top: 10px;
}

.main-text.expanded .main-text-resume {
  display: none;
}

.main-text.expanded .detailed-text {
  display: block;
  opacity: 1;
}

.main-text {
  float: left;
  width: 50%;
}

/* Styles pour le texte principal avec une flottaison à gauche et une largeur de 50% */

.main-text p {
  padding: 5px;
}

/* Styles pour les paragraphes dans le texte principal avec un espacement intérieur spécifié */

.main-text span {
  font-weight: bolder;
}

/* Styles pour les éléments <span> dans le texte principal avec une épaisseur de police plus grasse */

@media (max-width: 768px) {
  .main-container,
  .main-container-inverte {
    flex-direction: column;
  }
  .main-container h2 {
    width: 100%;
  }
}

/* Styles spécifiques aux médias pour une largeur d'écran maximale de 768px, avec un affichage en colonne pour le conteneur principal et une largeur de 100% pour le titre h2 */

.main-container img {
  box-sizing: border-box;
  float: right;
  max-width: 25%;
}

/* Styles pour les images du conteneur principal avec une boîte de dimensionnement, une flottaison à droite et une largeur maximale de 25% */

.sae {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0px 60px 60px 60px;
  gap: 40px;
}

/* Styles pour l'élément avec la classe "sae" avec un affichage en colonne, une justification de l'espace entre les éléments, un alignement centré, un espacement intérieur spécifié et un espacement entre les éléments */

.sae h2 {
  font-size: 28px;
  text-align: center;
}

/* Styles pour le titre h2 de l'élément avec la classe "sae" avec une taille de police de 28px et un alignement centré */

.sae button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-family: inherit;
  font-size: 15px;
}

.sae button.learn-more {
  font-weight: 600;
  color: #382b22;
  text-transform: uppercase;
  padding: 1.25em 2em;
  background: #fff0f0;
  border: 2px solid #b18597;
  border-radius: 0.75em;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1),
    -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1),
    background 150ms cubic-bezier(0, 0, 0.58, 1),
    -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
}

.sae button.learn-more::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f9c4d2;
  border-radius: inherit;
  -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
  box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
  -webkit-transform: translate3d(0, 0.75em, -1em);
  transform: translate3d(0, 0.75em, -1em);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1),
    box-shadow 150ms cubic-bezier(0, 0, 0.58, 1),
    -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1),
    -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}

.sae button.learn-more:hover {
  background: #ffe9e9;
  -webkit-transform: translate(0, 0.25em);
  transform: translate(0, 0.25em);
}

.sae button.learn-more:hover::before {
  -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
  box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
  -webkit-transform: translate3d(0, 0.5em, -1em);
  transform: translate3d(0, 0.5em, -1em);
}

.sae button.learn-more:active {
  background: #ffe9e9;
  -webkit-transform: translate(0em, 0.75em);
  transform: translate(0em, 0.75em);
}

.sae button.learn-more:active::before {
  -webkit-box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
  box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
  -webkit-transform: translate3d(0, 0, -1em);
  transform: translate3d(0, 0, -1em);
}

/* Styles au survol pour l'élément ::after du bouton avec la classe "learn-more" dans l'élément avec la classe "sae" avec une transformation spécifiée et une ombre spécifiée */

.contact {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 60px 60px 60px 60px;
  gap: 10px;
}
/* Div pour la section de contact */

.contact h2 {
  font-size: 28px;
  text-align: center;
  padding: 50px;
}
/* Titre de la section de contact */

.main-contact {
  float: left;
  width: 50%;
}
/* Div principale pour le contenu principal du contact */

.main-contact p {
  padding: 5px;
}
/* Paragraphes dans le contenu principal du contact */

.main-contact span {
  color: blue;
  text-decoration: underline;
}
/* Span dans le contenu principal du contact */

footer {
  padding: 20px;
  height: 200px;
}
/* Div pour le pied de page */

footer ul {
  display: inline-grid;
  grid-auto-flow: row;
  grid-gap: 24px;
  justify-items: center;
  margin: auto;
}
/* Liste non ordonnée dans le pied de page */

@media (min-width: 200px) {
  footer ul {
    grid-auto-flow: column;
  }
}
/* Media query pour les écrans d'une largeur minimale de 200px */

footer ul li:nth-child(5) {
  list-style: none;
}
/* Cinquième élément de la liste non ordonnée dans le pied de page */

.social li {
  list-style: none;
}
/* Listes non ordonnées dans les réseaux sociaux */

.social a {
  text-decoration: none;
  box-shadow: inset 0 -1px 0 hsla(0, 0%, 100%, 0.4);
  transition: 0.5s;
}
/* Liens dans les réseaux sociaux */

.social a:hover {
  box-shadow: inset 0 -1.2em 0 #8367c5;
  color: #ffffff;
}
/* Effet de survol sur les liens des réseaux sociaux */

.social li:last-child {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
/* Dernier élément de la liste des réseaux sociaux */

.social li:hover ~ li p {
  animation: wave-animation 0.3s infinite;
}
/* Effet d'animation sur les paragraphes suivant le survol des réseaux sociaux */

/* below is just for demo styling */

.social {
  display: flex;
  height: 200px;
  width: 100%;
  background-color: #8367c5;
  line-height: 1.3;
  font-family: Menlo, monospace;
}

@keyframes wave-animation {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(-15deg);
  }
}

hr {
  height: 1px;
  border: none;
  background-image: linear-gradient(to right, #f0f0f0, #000000, #f0f0f0);
}
/* Ligne horizontale stylisée */

.btn-acc {
  display: flex;
  margin: auto;
  height: 3em;
  width: 100px;
  align-items: center;
  justify-content: center;
  background-color: #eeeeee4b;
  border-radius: 3px;
  letter-spacing: 1px;
  transition: all 0.2s linear;
  cursor: pointer;
  border: none;
}
/* Bouton stylisé */

.btn-acc > svg {
  margin-right: 5px;
  margin-left: 5px;
  font-size: 20px;
  transition: all 0.4s ease-in;
}
/* SVG à l'intérieur du bouton stylisé */

.btn-acc:hover > svg {
  font-size: 1.2em;
  transform: translateX(-5px);
}
/* Effet de survol sur l'icône du bouton */

.btn-acc:hover {
  box-shadow: 9px 9px 33px #d1d1d1, -9px -9px 33px #ffffff;
  transform: translateY(-2px);
  border: solid grey 0.5px;
  transition: all 0.3s ease-in;
}
/* Effet de survol sur le bouton */