/* ============================================================
   MOBILE RESPONSIVE — max-width: 768px
   Uniquement les petits écrans. Ne touche pas au desktop.
   ============================================================ */

@media (max-width: 768px) {

  /* ── Global ───────────────────────────────────────────────── */

  /* Empêcher tout débordement horizontal */
  body, html { overflow-x: hidden; }
  * { box-sizing: border-box; }

  /* Toutes les sections : padding horizontal réduit */
  section {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Padding vertical réduit */
  section[style*="padding:6rem"],
  section[style*="padding: 6rem"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  section[style*="padding:4rem"],
  section[style*="padding: 4rem"] {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* max-width containers */
  .max-w-6xl, .max-w-7xl {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* ── Navigation ───────────────────────────────────────────── */
  .site-nav { padding: 0 1rem !important; }


  /* ── Grilles 2 colonnes → 1 colonne ──────────────────────── */
  .hero-grid,
  .about-grid,
  .about-exp-grid,
  .about-contact-grid,
  .contact-grid,
  .contact-page-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }


  /* ── HERO ─────────────────────────────────────────────────── */
  .hero-section {
    min-height: auto !important;
    padding: 2.5rem 1.25rem 3.5rem !important;
    align-items: flex-start !important;
  }

  .hero-section h1 {
    font-size: 2.2rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
  }

  /* Photo col cachée */
  .hero-photo-col { display: none !important; }

  /* CTA boutons empilés */
  .hero-ctas {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .hero-ctas a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Stack pills : max-width pleine largeur */
  .hero-section [style*="max-width:420px"] {
    max-width: 100% !important;
  }

  /* Scroll indicator caché */
  .hero-scroll { display: none !important; }


  /* ── STATS (3 colonnes) ───────────────────────────────────── */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    gap: 0 !important;
  }

  [style*="font-size:2.8rem"] {
    font-size: 1.6rem !important;
  }
  [style*="font-size:2.8rem"] span {
    font-size: 1.1rem !important;
  }

  [style*="padding-right:2rem"][style*="border-right"] {
    padding-right: 0.6rem !important;
  }
  [style*="padding:0 2rem"] {
    padding: 0 0.6rem !important;
  }
  [style*="padding-left:2rem"] {
    padding-left: 0.6rem !important;
  }


  /* ── ABOUT section ────────────────────────────────────────── */

  /* Ligne verticale orange : padding réduit */
  .about-grid > div[style*="padding-left:2.5rem"],
  .about-exp-grid > div[style*="padding-left:2.5rem"] {
    padding-left: 1.5rem !important;
  }

  /* Section about : padding réduit */
  .about-exp-section {
    padding: 3rem 1.25rem !important;
  }
  .about-contact-section {
    padding: 3rem 1.25rem !important;
  }

  /* About hero grid (photo + texte) */
  .about-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .about-hero-img { display: none !important; }


  /* ── CONTACT ──────────────────────────────────────────────── */
  .contact-page-wrap {
    padding: 2.5rem 1.25rem !important;
    min-height: auto !important;
  }

  /* Formulaire en premier, texte dessous */
  .contact-page-grid > div:first-child { order: 2; }
  .contact-page-grid > div:last-child  { order: 1; }
  .contact-page-grid button[type="submit"] {
    width: 100% !important;
    margin-top: 0.5rem !important;
  }

  /* Home contact section */
  .contact-grid > div:first-child { order: 2; }
  .contact-grid > div:last-child  { order: 1; }
  .contact-grid h2[style] { font-size: 2rem !important; }
  .contact-grid button[type="submit"] { width: 100% !important; }


  /* ── TECHNOLOGIES GRID ────────────────────────────────────── */
  .tech-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
  }

  .tech-card-white {
    padding: 0.75rem 0.5rem !important;
  }


  /* ── PROJECTS LIST (carousel) ─────────────────────────────── */
  .carousel-layout {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .carousel-right { display: none !important; }
  .carousel-left  { padding: 2rem 1.25rem 4rem !important; }

  .project-main-title {
    font-size: clamp(1.8rem, 8vw, 2.8rem) !important;
  }


  /* ── PROJECTS DETAIL ──────────────────────────────────────── */
  .detail-layout {
    grid-template-columns: 1fr !important;
  }
  .detail-left  { padding: 2rem 1.25rem !important; }
  .detail-right {
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    padding: 2rem 1.25rem !important;
  }


  /* ── CHAT WIDGET ──────────────────────────────────────────── */
  #ai-panel {
    width: calc(100vw - 1.5rem) !important;
    right: 0.75rem !important;
    bottom: 5rem !important;
    max-height: 70vh !important;
  }

  #ai-fab {
    bottom: 1.25rem !important;
    right: 1.25rem !important;
  }


  /* ── TITRES ───────────────────────────────────────────────── */
  .section-title { font-size: 1.75rem !important; }

  h2[style*="clamp(2.4rem"] { font-size: 1.9rem !important; }
  h2[style*="clamp(2.2rem"] { font-size: 1.8rem !important; }
  h1[style*="clamp(3rem"]   { font-size: 2.2rem !important; }


  /* ── IMAGES ───────────────────────────────────────────────── */
  img { max-width: 100%; height: auto; }


  /* ── WELCOME MODAL ────────────────────────────────────────── */
  #voice-welcome-inner {
    width: calc(100vw - 2.5rem) !important;
    max-width: 100% !important;
  }


  /* ── MODAL VOIX ───────────────────────────────────────────── */
  #voice-modal > div {
    width: calc(100vw - 2rem) !important;
    max-width: 100% !important;
  }

}