/* ═══════════════════════════════════════════════════════════════
   ATLAS Visio — CSS RESPONSIVE MOBILE (V3 — refait le 06/08/2026)
   Objectifs :
     • zéro débordement horizontal sur téléphone
     • header : logo à gauche, bouton ☰ à droite (voir hamburger.css)
     • textes lisibles, cibles tactiles ≥ 48 px, cartes empilées
     • hero vidéo et formulaire « Rejoindre » utilisables au pouce
     • pages longues (souveraineté, mentions, confidentialité) lisibles
   ═══════════════════════════════════════════════════════════════ */

/* ── Gardes anti-débordement (toutes tailles) ── */
html { overflow-x: hidden; }
body { overflow-x: clip; overflow-wrap: break-word; }
img, video, svg, canvas { max-width: 100%; }

/* ── Header mobile : une seule ligne, jamais de retour à la ligne ── */
@media (max-width: 900px) {
  .sv-container { padding: 0 20px; }
  .sv-nav-inner { flex-wrap: nowrap; gap: 8px; }
  .sv-brand { white-space: nowrap; }
  .sv-brand-text { font-size: 1rem; }
  .sv-nav-actions { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   TÉLÉPHONE (<= 600 px) : tout en une colonne, cibles tactiles
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .sv-container { padding: 0 16px; }

  /* Titres & texte */
  .sv-page-title { font-size: 1.65rem; }
  .sv-section-title { font-size: 1.4rem; }
  .sv-section-sub { font-size: 0.98rem; margin-bottom: 24px; }
  .sv-page-sub { font-size: 0.98rem; }
  .sv-hero-title { font-size: 1.9rem !important; }
  .sv-hero-video__title { font-size: 2rem !important; }
  .sv-hero-video__sub { font-size: 1rem; }
  .sv-hero-video__badge { font-size: 0.68rem; padding: 6px 12px; }
  .sv-hero-video__note { font-size: 0.85rem; }
  .sv-hero-video__inner { padding: 0 16px; }

  /* Hero vidéo : ne casse pas le layout, formulaire empilé */
  .sv-hero-video { min-height: calc(100vh - var(--nav-h)); }
  .sv-hero-video__join { flex-direction: column; align-items: stretch; max-width: 100%; }
  .sv-hero-video__join .sv-input { width: 100%; min-height: 52px; font-size: 16px; }
  .sv-hero-video__join .sv-btn { width: 100%; min-height: 52px; }
  .sv-hero-video__trust { flex-direction: column; gap: 10px; font-size: 0.9rem; }
  .sv-scroll-hint { display: none; }

  /* Formulaire « code de salle » (variante accueil sans vidéo) */
  .sv-join-box { flex-direction: column; align-items: stretch; }
  .sv-join-box .sv-input { width: 100%; min-height: 50px; font-size: 16px; }
  .sv-join-box .sv-btn { width: 100%; min-height: 50px; }

  /* Cartes empilées */
  .sv-cards { grid-template-columns: 1fr !important; gap: 14px; }
  .sv-card { padding: 22px 18px; }
  .sv-card h3 { font-size: 1.08rem; }
  .sv-card p { font-size: 0.95rem; }
  .sv-card-num { font-size: 0.8rem; }

  /* Boutons & champs : cibles tactiles confortables */
  .sv-btn { min-height: 44px; }
  .sv-btn--lg, .sv-btn--ghost-lg { width: 100%; min-height: 52px; padding: 14px 20px; font-size: 1rem; }
  .sv-input { min-height: 48px; font-size: 16px; }

  /* Connexion / formulaire d'authentification */
  .sv-auth { margin: 24px 16px; max-width: none; }
  .sv-auth-card { padding: 26px 20px; }
  .sv-auth-title { font-size: 1.35rem; }
  .sv-auth .sv-btn { width: 100%; min-height: 52px; font-size: 1rem; }
  .sv-auth-note { font-size: 0.82rem; }
  .sv-auth-links { font-size: 0.85rem; }

  /* Page entreprise : tableau en blocs */
  .sv-company-card { padding: 24px 18px; }
  .sv-company-text { font-size: 0.95rem; }
  .sv-company-table td { display: block; width: 100% !important; padding: 6px 0; }
  .sv-company-table td:first-child { padding-top: 14px; }

  /* Pages éditoriales (souveraineté, mentions, confidentialité) */
  .sv-article h2 { font-size: 1.35rem; margin: 30px 0 12px; }
  .sv-article h3 { font-size: 1.1rem; }
  .sv-article p { font-size: 0.98rem; }
  .sv-lead { font-size: 1.05rem; }
  .sv-pull { padding: 14px 16px; font-size: 0.98rem; }
  .sv-fact { grid-template-columns: 1fr !important; gap: 12px; }
  .sv-fact-item { padding: 16px; }
  .sv-timeline { padding-left: 20px; }
  .sv-timeline-item::before { left: -26px; }
  .sv-timeline-item span { font-size: 0.9rem; }
  .sv-list li { font-size: 0.95rem; padding: 10px 0; }

  /* Pages avec vidéo de fond */
  .sv-page-video__media { opacity: 0.12; }
  .sv-page-hero { padding: 32px 0 14px; }
  .sv-section { padding: 40px 0; }

  /* Footer */
  .sv-footer { padding: 18px 0; }
  .sv-footer-inner { flex-direction: column; gap: 8px; text-align: center; }
  .sv-footer-links { flex-wrap: wrap; justify-content: center; gap: 12px; font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════════════════════════
   TABLETTE (601 px - 900 px)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 601px) and (max-width: 900px) {
  .sv-container { padding: 0 20px; }
  .sv-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .sv-fact { grid-template-columns: 1fr 1fr; }
  .sv-hero-video__title { font-size: 2.6rem; }
  .sv-hero-video__join { flex-direction: column; }
  .sv-hero-video__join .sv-input { min-height: 52px; font-size: 16px; }
  .sv-hero-video__join .sv-btn { min-height: 52px; }
  .sv-auth { margin: 40px 20px; }
  .sv-company-table td { display: block; width: 100% !important; padding: 6px 0; }
  .sv-company-table td:first-child { padding-top: 14px; }
}

/* ── Très grands écrans (>= 1400px) ── */
@media (min-width: 1400px) {
  .sv-container { max-width: 1200px; }
}