/* Glassmorphism pour les cards projets */
.project__card {
  background: rgba(255,255,255,0.18);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,0.24);
}

/* Dégradé dynamique sur le fond de la section projet */
.project {
  background: linear-gradient(120deg, #22AED1 0%, #373F51 100%);
}

/* Boutons avec dégradé animé */
.btn {
  background: linear-gradient(90deg, #22AED1, #0A2239, #22AED1);
  background-size: 200% 200%;
  color: var(--color-primary);
  border: none;
  box-shadow: 0 2px 12px rgba(34, 174, 209, 0.08);
}
.btn:hover {
  animation: gradientMove 1.2s linear infinite;
}
@keyframes gradientMove {
  0% {background-position: 0% 50%;}
  100% {background-position: 100% 50%;}
}

/* Icônes animées réseaux sociaux */
.header__reseaux img, .footer__links__reseaux img {
  transition: transform 0.3s, filter 0.3s;
}
.header__reseaux img:hover, .footer__links__reseaux img:hover {
  transform: scale(1.2) rotate(-8deg);
  filter: drop-shadow(0 2px 8px #22AED1);
}

/* Parallaxe sur le titre principal */
.about__block__info__titleBlock__title {
  position: relative;
  z-index: 1;
}
@media (min-width: 992px) {
  .about__block__info__titleBlock__title {
    background: linear-gradient(90deg, #22AED1 0%, #373F51 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    animation: gradientMove 3s linear infinite alternate;
  }
}

/* Micro-interactions sur les liens */
a {
  transition: color 0.2s, text-shadow 0.2s;
}
a:hover {
  color: #22AED1;
  text-shadow: 0 2px 8px #22AED144;
}

/* Typographie variable sur les titres */
h1, h2, h3, .project__card__block__info__title {
  font-variation-settings: "wght" 700;
  letter-spacing: 0.5px;
  transition: letter-spacing 0.3s, text-shadow 0.3s;
}
h1:hover, h2:hover, h3:hover, .project__card__block__info__title:hover {
  letter-spacing: 2px;
  text-shadow: 0 2px 12px #22AED144;
}

/* Timeline pour les projets (mobile: simple, desktop: frise) */
@media (min-width: 992px) {
  .project__card {
    position: relative;
    margin-bottom: 4rem;
  }
  .project__card:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2rem;
    width: 4px;
    height: 4rem;
    background: linear-gradient(180deg, #22AED1 0%, #373F51 100%);
    border-radius: 2px;
    transform: translateX(-50%);
    opacity: 0.5;
  }
}

/* Loader animé */
#loader {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(34, 174, 209, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s;
}
#loader.hide {
  opacity: 0;
  pointer-events: none;
}
.loader-circle {
  width: 60px; height: 60px;
  border: 6px solid #22AED1;
  border-top: 6px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

/* Dark mode */
body.dark {
  --color-primary: #23272f;
  --color-secondary: #F8F7F9;
  --color-tertiary: #22AED1;
  --bk-primary: #23272f;
  --bk-secondary: #0A2239;
  --bk-tertiary: #1a1d23;
  background: #23272f;
  color: #F8F7F9;
}
body.dark .project {
  background: linear-gradient(120deg, #23272f 0%, #373F51 100%);
}
body.dark .project__card {
  background: rgba(35,39,47,0.7);
  border: 1px solid rgba(34,174,209,0.18);
}
body.dark .btn {
  background: linear-gradient(90deg, #23272f, #22AED1, #23272f);
  color: #F8F7F9;
}
body.dark .btn:hover {
  background: #22AED1;
  color: #23272f;
}