/* ══════════════════════════════════════════════════
   RESPONSIVE — Tous appareils
   Breakpoints : 1200 · 1100 · 900 · 600 · 480 · landscape · touch
   ══════════════════════════════════════════════════ */

/* ── 1200px : grand tablet / petit laptop ── */
@media (max-width: 1200px) {
  nav { padding: 20px 36px; }
  .hero { padding: 110px 36px 70px; }
  .hero-scroll { right: 36px; }
  .section,
  .portfolio-section,
  .services-section,
  .contact-section,
  .testimonials-section,
  .pricing-section { padding: 100px 36px; }
  .timeline-section { padding: 100px 36px; }
  .clients-section { padding: 80px 36px; }
  footer { padding: 36px 36px; }
  .about-grid { gap: 48px; }
  .contact-grid { gap: 48px; }
  .timeline-wrap { gap: 48px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 1100px : badge nav texte court ── */
@media (max-width: 1100px) {
  .navav-full { display: none; }
  .navav-short { display: inline; }
}

/* ── 900px : tablet ── */
@media (max-width: 900px) {

  /* NAV */
  nav { padding: 18px 24px; }
  .nav-links { display: none; }
  .nav-controls { gap: 6px; }
  .lang-btn { padding: 5px 8px; font-size: .65rem; }
  .nav-admin { font-size: .65rem; padding: 6px 12px; }
  .hero-scroll { display: none; }

  /* HERO */
  .hero { padding: 100px 24px 60px; }

  /* SECTIONS */
  .section,
  .portfolio-section,
  .services-section,
  .contact-section,
  .testimonials-section,
  .pricing-section { padding: 80px 24px; }
  .timeline-section { padding: 80px 24px; }
  .clients-section { padding: 60px 24px; }
  footer { padding: 32px 24px; flex-direction: column; gap: 16px; text-align: center; }

  /* ABOUT */
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-stats { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }

  /* PROJETS */
  .portfolio-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .portfolio-header-right { align-items: flex-start; }
  .projects-grid { grid-template-columns: 1fr 1fr; }
  /* override les spans desktop pour 2 colonnes */
  .project-card:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .project-card:nth-child(n+2) { grid-column: span 1; }
  /* featured card : toute la largeur en 2 colonnes */
  .project-card.featured-card { grid-column: span 2 !important; }
  .project-card.featured-card .project-thumb,
  .project-card.featured-card .project-video-thumb,
  .project-card.featured-card .thumb-placeholder { height: 360px; }
  .projects-grid.view-pinterest { columns: 2 !important; }
  /* Filter */
  .filter-tabs { gap: 6px; }
  .filter-tab { padding: 6px 14px; font-size: .72rem; }

  /* SERVICES */
  .services-grid { grid-template-columns: 1fr; }

  /* TÉMOIGNAGES & TARIFS */
  .testi-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }

  /* TIMELINE */
  .timeline-wrap { grid-template-columns: 1fr; gap: 24px; }
  .timeline-sticky { position: static; }
  .timeline-big { font-size: clamp(48px, 10vw, 80px); }

  /* CONTACT */
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }

  /* LIGHTBOX */
  .lb-body { padding: 20px; }
  .lb-header { padding: 16px 20px; }
  .lb-gallery { grid-template-columns: 1fr 1fr; }

  /* ADMIN */
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: span 1; }
  .settings-grid { grid-template-columns: 1fr; }
  .admin-body { padding: 20px; }
  .admin-mode-bar { padding: 10px 20px; flex-wrap: wrap; gap: 8px; }
  .ambar-left { font-size: .7rem; }

  /* WHATSAPP */
  .wa-btn { bottom: 70px; right: 16px; padding: 11px 14px; }
  .wa-label { display: none; }

  /* WELCOME POPUP */
  .welcome-popup { left: 16px; right: 16px; bottom: 80px; max-width: none; }
}

/* ── 600px : mobile ── */
@media (max-width: 600px) {

  /* ─ NAVBAR EMPILÉE : logo en haut, controls en bas ─ */
  nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 20px 12px;
  }
  .nav-logo { z-index: 1; }
  .nav-controls {
    width: 100%;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
  }
  .logo-top { font-size: .82rem; letter-spacing: .1em; }
  .logo-bot { font-size: 1.3rem; letter-spacing: .1em; }
  .nav-admin { font-size: .6rem; padding: 5px 10px; }
  .nav-avail { padding: 4px 8px; font-size: .58rem; gap: 4px; }
  .navav-dot { width: 6px; height: 6px; }

  /* HERO — padding-top augmenté car la nav est plus haute (2 lignes ≈ 105px) */
  .hero { padding: 120px 20px 50px; min-height: 100dvh; }
  .hero-tag { font-size: .68rem; letter-spacing: .14em; margin-bottom: 18px; }
  .hero-sub { margin-top: 20px; font-size: .93rem; max-width: 100%; }
  .hero-cta { margin-top: 24px; gap: 10px; }
  .btn-primary { padding: 13px 24px; font-size: .82rem; }

  /* SECTIONS */
  .section,
  .portfolio-section,
  .services-section,
  .contact-section,
  .testimonials-section,
  .pricing-section { padding: 64px 20px; }
  .timeline-section { padding: 64px 20px; }
  .clients-section { padding: 48px 20px; }
  footer { padding: 28px 20px; }
  .section-label { margin-bottom: 36px; font-size: .62rem; }

  /* ABOUT */
  .about-stats { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
  .stat-num { font-size: 2.4rem; }

  /* PROJETS */
  .projects-grid { grid-template-columns: 1fr; }
  .project-card:nth-child(1),
  .project-card:nth-child(n+2) { grid-column: span 1; }
  .project-card:nth-child(1) .project-thumb,
  .project-card:nth-child(1) .project-video-thumb,
  .project-card:nth-child(1) .thumb-placeholder { min-height: 220px; }
  /* featured card : 1 colonne sur mobile */
  .project-card.featured-card { grid-column: span 1 !important; }
  .project-card.featured-card .project-thumb,
  .project-card.featured-card .project-video-thumb,
  .project-card.featured-card .thumb-placeholder { height: 240px; }
  .projects-grid.view-pinterest { columns: 1 !important; }
  .projects-grid.view-behance .project-card { width: 82vw; }
  /* Filter tabs scrollables */
  .filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scroll-behavior: smooth;
  }
  .filter-tab { white-space: nowrap; padding: 6px 12px; font-size: .68rem; flex-shrink: 0; }

  /* SERVICES */
  .service-card { padding: 30px 22px; }
  .service-name { font-size: 1.2rem; }

  /* TÉMOIGNAGES */
  .testi-card { padding: 24px 20px; }

  /* TARIFS */
  .price-card { padding: 28px 22px; }
  .price-amount { font-size: 2.1rem; }

  /* TIMELINE */
  .timeline-line { padding-left: 28px; }
  .timeline-item { padding-bottom: 36px; }

  /* CONTACT */
  .contact-title { font-size: clamp(30px, 9vw, 50px); }
  .contact-info { gap: 14px; }
  .contact-item-val { font-size: .9rem; word-break: break-word; }

  /* MODAL */
  .modal { padding: 28px 20px; width: 96%; }
  .platform-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .modal-title { font-size: 1.4rem; }

  /* LIGHTBOX */
  .lb-gallery { grid-template-columns: 1fr; }
  .lb-header { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
  .lb-title { font-size: 1.15rem; }
  .lb-stats { flex-wrap: wrap; gap: 10px; }
  .lb-close { width: 34px; height: 34px; font-size: 1rem; }

  /* TOAST */
  .toast { right: 16px; left: 16px; bottom: 24px; text-align: center; font-size: .8rem; }

  /* WHATSAPP */
  .wa-btn { bottom: 18px; right: 12px; padding: 11px 13px; }

  /* WELCOME POPUP */
  .welcome-popup { left: 10px; right: 10px; bottom: 16px; padding: 20px; }

  /* ADMIN BAR */
  .admin-bar { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .admin-bar-left { width: 100%; }
  .admin-logo .logo-bot { font-size: 1.1rem; }
  .admin-close { align-self: flex-end; font-size: .7rem; padding: 6px 12px; }
  .admin-tab { font-size: .65rem; padding: 6px 10px; }
  .admin-body { padding: 14px; }
  .add-form { padding: 24px 16px; }
  .settings-card { padding: 24px 16px; }
  .btn-add-project { padding: 12px 24px; font-size: .82rem; }
  .proj-row { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .proj-row-actions { flex-wrap: wrap; gap: 6px; }
  .admin-mode-bar { padding: 8px 16px; }
  .ambar-right { gap: 6px; }
  .ambar-btn { padding: 5px 12px; font-size: .68rem; }
}

/* ── 480px : très petit mobile ── */
@media (max-width: 480px) {
  .hero { padding-top: 115px; }
  .hero-title { font-size: clamp(42px, 12.5vw, 72px) !important; }
  .about-title { font-size: clamp(28px, 8vw, 44px); }
  .stat-num { font-size: 2rem; }
  .portfolio-title { font-size: clamp(30px, 10vw, 54px); }
  .contact-title { font-size: clamp(28px, 9.5vw, 44px); }
  .social-links { gap: 10px; }
  .social-link { padding: 12px 18px; font-size: .82rem; }
  .platform-grid { grid-template-columns: 1fr; }
  .about-stats { gap: 14px; }
  .service-card { padding: 24px 18px; }
  .testi-card { padding: 20px 16px; }
  .price-card { padding: 24px 18px; }
  .modal { padding: 24px 16px; }
}

/* ── Paysage mobile ── */
@media (max-width: 900px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 90px; padding-bottom: 40px; }
  .lb-gallery { grid-template-columns: 1fr 1fr; }
}

/* ── Écrans tactiles : désactiver curseur custom ── */
@media (hover: none) {
  body { cursor: auto; }
  #cursor, #cursor-ring { display: none; }
  a, button, [onclick] { cursor: pointer; }
}