/* responsive.css — breakpoints */

/* ── Tablet (≤ 1100px) ── */
@media (max-width: 1100px) {
  :root {
    --section-pad-x: 48px;
    --section-pad-y: 80px;
  }
  .competences-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ── Mobile landscape / small tablet (≤ 768px) ── */
@media (max-width: 768px) {
  :root {
    --section-pad-x: 24px;
    --section-pad-y: 60px;
  }

  body { cursor: auto; }
  .cursor, .cursor-follower { display: none; }

  /* Navbar */
  #navbar {
    padding: 20px var(--section-pad-x);
  }
  .nav-burger { display: flex; }
  .nav-links {
    position: fixed;
    inset: 0;
    background: var(--black);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    font-size: 14px;
    clip-path: circle(0% at calc(100% - 36px) 36px);
    transition: clip-path 0.6s var(--ease-out);
    pointer-events: none;
  }
  .nav-links.is-open {
    clip-path: circle(150% at calc(100% - 36px) 36px);
    pointer-events: all;
  }
  .nav-links a {
    font-size: 14px;
    letter-spacing: 3px;
  }
  .nav-cta { margin-top: 8px; }

  /* Hero */
  #hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: 120px var(--section-pad-x) 60px; }
  .hero-right { display: none; }
  .scroll-indicator { display: none; }

  /* Sections */
  #profil,
  #contact {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .formation-grid { grid-template-columns: 1fr; }

  /* Exp timeline */
  .exp-timeline { padding-left: 28px; }
  .exp-item::before { left: -36px; }
  .exp-company { font-size: 22px; }
  .exp-header { flex-direction: column; gap: 8px; }

  /* Contact */
  .contact-big-text { font-size: 48px; }

  /* Footer */
  footer {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .footer-mid { display: none; }

  /* Profil stats */
  .profil-stats { grid-template-columns: 1fr 1fr; }
}

/* ── Small mobile (≤ 400px) ── */
@media (max-width: 400px) {
  .hero-title { font-size: 64px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .profil-stats { grid-template-columns: 1fr; }
  .tags-grid { gap: 8px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-in, .exp-item { opacity: 1; transform: none; }
  .hero-tag, .hero-title, .hero-sub, .hero-actions, .scroll-indicator {
    animation: none;
    opacity: 1;
  }
}