/* ============================================================
   ZÉTERO — Responsive
   Mobile / tablette / desktop · garde-fous anti-débordement
   Chargé APRÈS styles.css
   ============================================================ */

/* ---------- Garde-fous globaux (toutes tailles) ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { min-width: 0; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
.machine-img img, .hero-photo img, .split-media img { height: auto; }
h1, h2, h3, h4, p, a, li, span, strong, em, button, label, blockquote {
  overflow-wrap: break-word; word-break: break-word; hyphens: auto;
}
.container { overflow-x: clip; }

/* ============================================================
   <= 1024px — petit écran / tablette paysage
   ============================================================ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 460px; margin-inline: auto; width: 100%; }
  .hero-sub { max-width: none; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1rem; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ============================================================
   <= 900px — tablette portrait : bascule menu burger
   ============================================================ */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .burger { display: block; }

  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 2.2rem; }
  .split.rev .split-media { order: 0; }
  .split-media { max-width: 540px; margin-inline: auto; width: 100%; }

  .process { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.2rem; }
  .process::before { display: none; }

  .contact-grid { grid-template-columns: 1fr; gap: 2.4rem; }
}

/* ============================================================
   <= 768px — grande mobile / petite tablette
   ============================================================ */
@media (max-width: 768px) {
  h1 { font-size: clamp(2.1rem, 8vw, 3rem); }
  h2 { font-size: clamp(1.7rem, 6vw, 2.3rem); }

  .machine-img { height: 260px; }

  /* Cartes flottantes du hero : plus compactes, bien dans le cadre */
  .hero-card { padding: .7rem .85rem; gap: .6rem; }
  .hero-card .ic { width: 36px; height: 36px; }
  .hero-card .ic svg { width: 18px; height: 18px; }
  .hero-card strong { font-size: .95rem; }
  .hero-card span { font-size: .72rem; }
  .hero-card--1 { left: 0; }
  .hero-card--2 { right: 0; }

  .quote-mark { font-size: 4rem; }
}

/* ============================================================
   <= 600px — mobile
   ============================================================ */
@media (max-width: 600px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 1.8rem 1rem; }
  .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .process { grid-template-columns: 1fr; gap: 1.6rem; }

  /* CTA & actions : boutons pleine largeur */
  .hero-actions { width: 100%; }
  .hero-actions .btn,
  .cta-actions .btn,
  .section-head .btn { width: 100%; justify-content: center; }
  .cta-actions { flex-direction: column; }

  /* Cartes flottantes : un peu plus haut/bas pour ne pas masquer la machine */
  .hero-card--1 { top: 4%; }
  .hero-card--2 { bottom: 5%; }

  .footer-top { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-bottom .fb-links { justify-content: center; }

  .form { padding: 1.4rem 1.2rem; }
  .section-head p { font-size: 1rem; }
}

/* ============================================================
   <= 400px — petits téléphones
   ============================================================ */
@media (max-width: 400px) {
  :root { --gutter: 1.1rem; }
  h1 { font-size: clamp(1.9rem, 9vw, 2.4rem); }

  .hero-badge { font-size: .78rem; padding: .45rem .8rem; }
  .machine-img { height: 230px; }

  /* Sur très petit écran, on retire les badges flottants pour éviter
     toute superposition gênante avec la photo */
  .hero-card { display: none; }

  .stat .num { font-size: clamp(1.9rem, 11vw, 2.4rem); }
  .btn { font-size: .95rem; padding: .9rem 1.3rem; }
  .nav .btn-nav { padding: .55rem 1rem; font-size: .9rem; }
  .totop { right: 1rem; bottom: 1rem; width: 44px; height: 44px; }
}

/* ============================================================
   Téléphone en mode paysage (faible hauteur)
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding-top: 6.5rem; }
  .mobile-menu { padding-top: 4.5rem; overflow-y: auto; }
  #loader .loader-logo { width: 150px; }
}

/* ============================================================
   Confort tactile : cibles de clic suffisantes
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .nav-links a, .footer-col a, .qa-q { min-height: 44px; }
  .card:hover, .feature:hover, .machine-card:hover, .aud:hover, .bev:hover { transform: none; }
}