/* ==========================================================
   WIDE VISION — responsive.css
   Media queries globales · Typographie · Touch · Print
   ========================================================== */

/* ══════════════════════════════════════════
   BREAKPOINTS DE RÉFÉRENCE
   xs:  < 480px  — mobile petit
   sm:  < 640px  — mobile standard
   md:  < 768px  — tablette portrait
   lg:  < 1024px — tablette paysage / laptop
   xl:  < 1280px — desktop standard
══════════════════════════════════════════ */

/* ── LARGE — < 1280px ───────────────────── */
@media (max-width: 1280px) {
  :root {
    --max-w: 1060px;
  }

  .footer__grid {
    gap: var(--sp-8);
  }
}

/* ── DESKTOP — < 1024px ─────────────────── */
@media (max-width: 1024px) {
  :root {
    --pad: clamp(1.25rem, 4vw, 2rem);
  }

  /* Typographie */
  .hero__title {
    font-size: clamp(2.8rem, 7.5vw, 5rem);
  }

  /* Sections */
  .section {
    padding: var(--sp-24) 0;
  }

  /* Grilles */
  .testi-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  /* About */
  .about-intro-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }

  .about-photo {
    max-width: 340px;
    margin: 0 auto;
  }
}

/* ── TABLETTE — < 768px ─────────────────── */
@media (max-width: 768px) {
  :root {
    --pad:   1.25rem;
    --nav-h: 64px;
  }

  /* ── Typographie scale mobile ── */
  .s-title {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
  }

  .s-sub {
    font-size: 0.95rem;
  }

  .page-hero-title {
    font-size: clamp(2.2rem, 8vw, 3.5rem);
  }

  /* ── Section headers ── */
  .s-head {
    margin-bottom: var(--sp-10);
  }

  /* ── Sections padding ── */
  .section,
  .section-services,
  .section-reach,
  .section-portfolio,
  .section-testi,
  .section-pricing,
  .section-faq,
  .section-contact {
    padding: var(--sp-20) 0;
  }

  /* ── Grilles → 1 colonne ── */
  .srv-grid          { grid-template-columns: 1fr }
  .port-grid         { grid-template-columns: 1fr }
  .testi-grid        { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto }
  .price-grid        { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto }
  .about-values-grid { grid-template-columns: 1fr }
  .reach-grid        { grid-template-columns: 1fr; gap: var(--sp-12) }
  .contact-grid      { grid-template-columns: 1fr; gap: var(--sp-10) }

  /* ── Footer ── */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  /* ── Metrics hero ── */
  .hero__metric-divider { display: none }
  .hero__metrics        { gap: var(--sp-8) }

  /* ── Scroll indicator ── */
  .hero__scroll { display: none }

  /* ── Social proof ── */
  .hero__proof-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
  .hero__proof-divider { display: none }

  /* ── Pricing : carte featured en premier ── */
  .price-card--hi {
    order: -1;
  }

  /* ── Contact ── */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* ── Section eyebrow ── */
  .s-eyebrow {
    font-size: 0.62rem;
  }

  /* ── Portfolio filtres ── */
  .portfolio-filters {
    gap: var(--sp-2);
  }
  .portfolio-filter {
    padding: 0.35rem 0.9rem;
    font-size: 0.65rem;
  }

  /* ── Footer bottom ── */
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-4);
  }

  /* ── CTA strip ── */
  .footer__cta-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-6);
    padding: var(--sp-8);
  }
  .footer__cta-strip-actions {
    flex-direction: column;
    width: 100%;
  }
  .footer__cta-strip-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Services page ── */
  .service-row {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    padding: var(--sp-8);
  }
  .service-row--reverse .service-row__visual { order: 0 }
  .service-row__bg-num { display: none }
  .service-row__visual { aspect-ratio: 16/9 }

  /* ── Portfolio page ── */
  .portfolio-full-grid {
    grid-template-columns: 1fr;
  }
}

/* ── MOBILE — < 640px ───────────────────── */
@media (max-width: 640px) {

  /* ── Hero ── */
  .hero__body {
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-12);
  }

  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__rings { display: none }

  /* ── Section headers ── */
  .s-head {
    margin-bottom: var(--sp-8);
  }

  /* ── Cards padding ── */
  .srv-card         { padding: var(--sp-8) var(--sp-6) }
  .testi-card       { padding: var(--sp-6) }
  .price-card       { padding: var(--sp-6) }
  .form-box         { padding: var(--sp-6) }
  .port-card__inner { padding: var(--sp-6) }

  /* ── FAQs ── */
  .faq-question {
    font-size: 0.88rem;
    gap: var(--sp-4);
  }

  /* ── Reach chips ── */
  .reach-chips { flex-direction: column }

  /* ── Témoignages ── */
  .testi-card__text { font-size: 0.84rem }

  /* ── Footer ── */
  .footer       { padding-top: var(--sp-12) }
  .footer__grid { grid-template-columns: 1fr }
  .footer__logo { font-size: 1.3rem }

  /* ── Page hero ── */
  .page-hero {
    padding-top: calc(var(--nav-h) + var(--sp-16));
    padding-bottom: var(--sp-16);
  }

  /* ── Metrics ── */
  .hero__metric-value {
    font-size: 1.8rem;
  }
}

/* ── PETIT MOBILE — < 480px ─────────────── */
@media (max-width: 480px) {
  :root {
    --pad: 1rem;
  }

  /* ── Grille hero metrics ── */
  .hero__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }

  /* ── Badges nav ── */
  .nav__btn-wa  { display: none }

  /* ── Contact meta ── */
  .contact-meta { gap: var(--sp-3) }

  /* ── Reach stats ── */
  .reach-stats { gap: var(--sp-8) }

  /* ── Footer legal ── */
  .footer__legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
  }
  .footer__legal-sep { display: none }

  /* ── Mobile menu CTA ── */
  .nav__mobile-ctas { flex-direction: column }
  .nav__mobile-ctas .btn { width: 100%; justify-content: center }
}

/* ══════════════════════════════════════════
   TOUCH TARGETS — min 44×44px (WCAG 2.5.5)
══════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  /* Curseur normal sur mobile */
  body, button, a { cursor: auto !important }
  .c-dot, .c-ring { display: none }

  /* Agrandir tous les éléments cliquables */
  .btn {
    min-height: 44px;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }

  .nav__links a {
    padding: var(--sp-3) 0;
  }

  .faq-question {
    padding: var(--sp-5) 0;
    min-height: 44px;
  }

  .portfolio-filter {
    min-height: 44px;
    padding: 0.6rem 1.1rem;
  }

  .c-opt {
    min-height: 60px;
  }

  /* Hover effects désactivés — trop lents sur touch */
  .srv-card:hover,
  .port-card:hover,
  .testi-card:hover,
  .price-card:hover {
    transform: none;
  }
}

/* ══════════════════════════════════════════
   ACCESSIBILITÉ — prefers-reduced-motion
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .ticker-track { animation: none }
  .grain        { animation: none }
  .geo-ring,
  .hero__ring   { animation: none }
  .particle     { display: none }
}

/* ══════════════════════════════════════════
   PRINT
══════════════════════════════════════════ */
@media print {
  .nav,
  .footer__cta-strip,
  .hero__scroll,
  .hero__rings,
  #particles,
  .grain,
  .c-dot,
  .c-ring,
  .btt,
  .ticker-wrap {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  .hero {
    min-height: auto;
    padding: 2rem 0;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }
}