@import url("reset.css");
@import url("header.css");
@import url("sidebar.css");
@import url("home.css");
@import url("profile.css");
@import url("formation.css");
@import url("skills.css");
@import url("projects.css");
@import url("contact.css");
@import url("modal.css");
@import url("toast.css");
@import url("footer.css");

/* Styles généraux */
:root {
  --background-color: white;
  --background-color-opacity50: rgba(30, 30, 30, 0.5);
  --section-color: #F3F3F3;
  --text-color: #1E1E1E;
  --line-color: #1E1E1E;
  --link: #5D8191;

  --cv: #163853;
  --blue-light: #78A6BB;
  --blue-dark: #27548A;
  --yellow: #FBD000;
  --green: #25d366;
  --mysocialapp-color: #3577e6;
  --my80store-color: #FF0CB2;
  --rollinnewyork-color: #DEB973;
  --rubik: Rubik;

  --header-height: 60px;
  --footer-height: 60px;
}

html {
  min-width: 320px;
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body.dark-mode {
  --background-color: #1E1E1E;
  --section-color: #393b40;
  --text-color: white;
  --line-color: white;
  --link: #78A6BB;
}

body {
  min-width: 320px;
  font-family: var(--rubik);
  background-color: var(--background-color);
  color: var(--text-color);
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

.colored-text {
  color: var(--link);
  font-weight: 800;
}

/* Boutons */
button {
  all: unset;
  cursor: pointer;
}

.btn {
  padding: 8px 15px;
  border: var(--line-color) 2px solid;
  background-color: var(--background-color);
  color: var(--text-color);
  font-size: 1rem;
  text-align: center;
}

.btn:hover {
  color: var(--background-color);
  background-color: var(--text-color);
}

.btn:active {
  transform: scale(0.9);
}

/* Barre de défilement */
::-webkit-scrollbar {
  width: 8px;
  border-left: 2px solid var(--line-color);
}

::-webkit-scrollbar-thumb {
  background-color: var(--line-color);
}

/* Bouton pour sauter la navigation et aller directement au main avec le clavier */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background-color: var(--background-color);
  color: var(--text-color);
  text-decoration: none;
}

/* Elements nécessaires mais cachés visuellement */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Media Queries */
@media screen and (max-width: 768px) {
  :root {
    --header-height: 40px;
  }
}

@media screen and (max-width: 950px) {
  :root {
    --footer-height: 40px;
  }
}

@media screen and (max-width: 1024px) {
  main {
    padding-top: calc(var(--header-height) + 2px);
  }
}