/* =============================================
   RESPONSIVE — Mobile First
   Dark Minimal Tech — toutes les adaptations
   ============================================= */

/* ── TABLETTE / MOBILE ≤ 768px ──────────────── */
@media (max-width: 768px) {

  /* Typographie : réduire le hero */
  :root {
    --text-hero:  clamp(2.5rem, 10vw, 3.5rem);
    --text-4xl:   1.875rem;
    --container-pad: var(--space-6);
  }

  /* Nav : masquer les liens desktop, afficher le burger */
  .nav__links  { display: none; }
  .nav__burger { display: flex; }

  /* Hero : passer en colonne, masquer la partie visuelle */
  .hero {
    grid-template-columns: 1fr;
    min-height:  60vh;
    padding-top: var(--space-16);
  }
  .hero-visual { display: none; }
  .hero > div > p { max-width: 100%; }

  /* Stats : empiler verticalement */
  .stats {
    grid-template-columns: 1fr;
    margin-inline: var(--space-6);
  }
  .stat:not(:last-child) {
    border-right:  none;
    border-bottom: 1px solid var(--color-border);
  }

  /* Grille de cards : 1 colonne */
  .cards { grid-template-columns: 1fr; }
  .card.featured {
    grid-column:    span 1;
    flex-direction: column;
  }
  .card-visual { opacity: 0.2; font-size: 2rem; }

  /* Liste : 1 colonne */
  .list-section { grid-template-columns: 1fr; }

  /* Input row : vertical */
  .input-row { flex-direction: column; }

  /* Section title */
  section { padding-block: var(--space-12); }
}

/* ── MOBILE PETIT ≤ 480px ───────────────────── */
@media (max-width: 480px) {
  :root {
    --container-pad: var(--space-4);
  }

  /* Boutons : pleine largeur */
  .btn-group {
    flex-direction: column;
    align-items:    flex-start;
  }

  /* Tags : autoriser le scroll horizontal sur mobile */
  .tags {
    flex-wrap:     nowrap;
    overflow-x:    auto;
    padding-bottom: var(--space-4);
    scrollbar-width: none; /* Firefox */
  }
  .tags::-webkit-scrollbar { display: none; }
}

/* ─── PORTFOLIO responsive ────────────────── */

@media (max-width: 1024px) {
  .skills-grid             { grid-template-columns: repeat(2, 1fr); }
  .projects-featured       { grid-template-columns: 1fr 1fr; }
  .project-card--large     { grid-column: span 2; flex-direction: column; }
}

@media (max-width: 768px) {
  .about-intro             { grid-template-columns: 1fr; }
  .skills-grid             { grid-template-columns: 1fr; }
  .skills-preview          { grid-template-columns: 1fr; }
  .contact-layout          { grid-template-columns: 1fr; }
  .projects-featured       { grid-template-columns: 1fr; }
  .project-card--large     { grid-column: span 1; }
  .projects-grid           { grid-template-columns: 1fr; }
  .form-row                { grid-template-columns: 1fr; }
  .cta-strip__inner        { flex-direction: column; align-items: flex-start; }
  .timeline-item           { grid-template-columns: 60px 20px 1fr; }
}