/* =========================================================
   Portfolio — Nathan THIBAULT · BTS SIO option SLAM
   Mise en page commune : en-tête, navigation, sections, pied de page
   ========================================================= */

/* ---------- 5. Barre de progression & en-tête ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--gradient);
  z-index: 1100;
}

.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* Fond flouté : dès qu'on défile, et toujours sur les autres pages (le menu peut passer sur les tasseaux) */
.header.scrolled,
body:not([data-page="accueil"]) .header {
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

.nav {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.logo span { color: var(--primary); }

.nav__menu { display: flex; gap: 0.15rem; }
.nav__link {
  position: relative;
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.3s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover,
.nav__link.active { color: var(--text); }
.nav__link.active::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 0.5rem; }
.nav__burger { display: none; }

/* ---------- 7. Sections ---------- */
.section { position: relative; padding: 6.5rem 0; }
/* Sections crème : la lumière d'une fenêtre tombe en biais sur le mur, avec l'ombre d'une plante */
.section:not(.section--alt) { background: var(--lumiere) right -90px top -50px / min(1000px, 120%) auto no-repeat; }
/* Sections alternées : le mur en tasseaux de bois, avec un peu de relief en haut et en bas */
.section--alt {
  background: var(--lattes);
  box-shadow: inset 0 14px 20px -14px rgba(0, 0, 0, 0.45), inset 0 -14px 20px -14px rgba(0, 0, 0, 0.45);
}
/* Sur les tasseaux, le titre est posé sur une plaque claire pour rester lisible */
.section--alt .section__header {
  padding: 1.6rem 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.section__header {
  max-width: 700px;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.section__label {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}
.section__title {
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  letter-spacing: -0.025em;
}
.section__subtitle { margin-top: 1rem; color: var(--text-muted); }

/* Réseaux sociaux (accueil et pied de page) */
.socials { display: flex; gap: 0.75rem; margin-top: 2rem; }
.socials a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 1.05rem;
  transition: transform 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.socials a:hover {
  color: #fff;
  background: var(--gradient);
  border-color: transparent;
  transform: translateY(-3px);
}
.socials--small { margin-top: 0; }
.socials--small a { width: 38px; height: 38px; font-size: 0.95rem; }

/* ---------- 16. Pied de page & retour en haut ---------- */
/* Le pied de page ressemble au plateau de mon bureau */
.footer { padding: 3.2rem 0 2.6rem; background: var(--bureau); }
.footer__inner p a { text-decoration: underline; text-underline-offset: 3px; }
.footer__inner p a:hover { color: var(--primary); }
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--bureau-texte);
}

.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 900;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  opacity: 0;
  visibility: hidden;
  translate: 0 20px;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease), translate 0.3s var(--ease);
}
.back-to-top.show { opacity: 1; visibility: visible; translate: 0 0; }

/* Navigation mobile */
@media (max-width: 1100px) {
  .nav__burger { display: grid; }
  .nav__menu {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.75rem 1.25rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    translate: 0 -12px;
    transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease), translate 0.3s var(--ease);
  }
  .nav__menu.open { opacity: 1; visibility: visible; translate: 0 0; }
  .nav__link { padding: 0.8rem 0.5rem; font-size: 1rem; }
  .nav__link::after { left: 0.5rem; right: auto; width: 24px; bottom: 0.45rem; }
}
@media (max-width: 700px) {
  .section { padding: 4.5rem 0; }
  .section__header { margin-bottom: 2.5rem; }
  .footer__inner { flex-direction: column; text-align: center; }
}