/* ----------------------------------------------------
   FONTS & RESET
---------------------------------------------------- */
html, body, h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
}
html { scroll-behavior: smooth; }

/* ----------------------------------------------------
   ÉTATS HOVER & GLOBAUX
---------------------------------------------------- */
.w3-button:hover {
  background-color: #fff;
  color: #000;
  transform: scale(1.05);
  transition: all 0.3s ease-in-out;
}
a:hover {
  color: #fff;
  background-color: #000;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.w3-card:hover {
  background-color: #333;
  transition: background-color 0.5s ease-in-out;
}
.skill-icon { transition: transform 0.3s ease-in-out; }
.skill-icon:hover { transform: rotate(360deg); }
.section-header { position: relative; display: inline-block; }
.section-header:after {
  content: "";
  position: absolute;
  width: 100%; height: 2px;
  bottom: 0; left: 0;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.section-header:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* ----------------------------------------------------
   TOGGLE BUTTON
---------------------------------------------------- */
#themeToggle {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
}

/* ----------------------------------------------------
   DARK MODE
---------------------------------------------------- */
body.dark-mode {
  background-color: #000;
  color:            #fff;
}

body.dark-mode .w3-white {
  background-color: #333 !important;
  color:            #fff !important;
}

body.dark-mode .w3-text-black {
  color: #fff !important;
}

body.dark-mode .w3-border-white {
  border-color: #555 !important;
}

body.dark-mode .w3-button,
body.dark-mode a.download-link button {
  background-color: #444 !important;
  color:            #fff !important;
}

/* ----------------------------------------------------
   LIGHT MODE
   (contours & textes forcés noirs sur fond blanc)
---------------------------------------------------- */
body.light-mode {
  background-color: #fff;
  color:            #000;
}

body.light-mode .w3-black,
body.light-mode .w3-card,
body.light-mode .w3-container {
  background-color: #fff !important;
  color:            #000 !important;
}

body.light-mode .w3-border-white {
  border-color: #000 !important;
}

body.light-mode .w3-text-white {
  color: #000 !important;
}

body.light-mode .w3-teal {
  /* Conserve ta couleur teal pour les labels */
  background-color: teal !important;
  color:            #fff !important;
}

body.light-mode .w3-text-grey {
  color: #555 !important;
}

.w3-display-container img {
  display: block;
  width: 100%;
  height: auto;
  background: none;
}