/* ================================================================
   mobile.css — Adaptation responsive globale AgentiqAI
   Chargé APRÈS tous les autres CSS sur chaque page publique.
   Contient UNIQUEMENT des @media queries :
   - ≤768px  : tablette
   - ≤480px  : mobile (cible principale : iPhone SE → Pro Max)
   Desktop non affecté — aucune règle hors media query.
   ================================================================ */


/* ================================================================
   GLOBAL — éléments communs à toutes les pages
   ================================================================ */

/* Boutons : touch target 44px minimum (Apple HIG / WCAG 2.5.5) */
@media (max-width: 480px) {
  .btn {
    height: 44px;
    padding: 0 18px;
    font-size: 0.9375rem;
  }

  /* Footer : colonne sur mobile */
  .footer-inner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  /* Section headings : moins de margin-bottom */
  .section-head {
    margin-bottom: 28px;
  }

  /* Steps : 1 colonne et pas de ligne décorative */
  .steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .steps::before {
    display: none;
  }

  /* Process section : padding réduit */
  .process-inner {
    padding: 48px clamp(16px, 4vw, 56px);
  }
}


/* ================================================================
   LANDING — landing.html + landing.css + landing-page.css
   ================================================================ */

/* Tablette 768px : hero un peu moins généreux */
@media (max-width: 768px) {
  .hero-left {
    padding: 56px 0 40px;
  }
  .loi25-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .loi25-box {
    padding: 36px 24px;
  }
}

/* Mobile 480px : tout ce qui est spécifique landing */
@media (max-width: 480px) {
  /* hero-wrap : pas de min-height 100dvh, laisser le contenu dicter la hauteur */
  .hero-wrap {
    min-height: auto;
  }
  .hero {
    min-height: auto;
    padding: 0 clamp(16px, 4vw, 24px);
  }

  /* Sections pleine largeur : padding réduit */
  .features,
  .loi25,
  .usecases-inner,
  .depts,
  .cta-section {
    padding: 48px clamp(16px, 4vw, 24px);
  }
  .process-inner {
    padding: 48px clamp(16px, 4vw, 24px);
  }

  /* CTA box : padding compact */
  .cta-box {
    padding: 36px 20px;
  }
  .cta-box h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  /* Feature grid : 1 colonne */
  .feat-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Use cases grid : 1 colonne */
  .uc-cards.active {
    grid-template-columns: 1fr;
  }

  /* Tabs use cases : scroll horizontal */
  .uc-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 6px;
  }
  .uc-tabs::-webkit-scrollbar { display: none; }
  .uc-tab { flex-shrink: 0; min-height: 44px; }

  /* Depts : 1 colonne */
  .depts-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Loi 25 box */
  .loi25-box {
    padding: 28px 16px;
  }
  .loi25-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}


/* ================================================================
   FONCTIONNALITÉS — fonctionnalites.html + fonctionnalites.css
   ================================================================ */

@media (max-width: 768px) {
  .fn-hero {
    padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 32px) clamp(32px, 4vw, 48px);
  }
  .fn-cta-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .fn-cta-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  /* Hero : titre lisible */
  .fn-hero h1 {
    font-size: clamp(1.75rem, 7vw, 2.4rem);
    max-width: 100%;
  }

  /* Section intro : empilé */
  .fn-section-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* CTA actions : colonne */
  .fn-cta-actions {
    flex-direction: column;
  }
  .fn-cta-inner {
    padding: 48px clamp(16px, 4vw, 24px);
  }

  /* Contenu : padding réduit */
  .fn-content {
    padding: 32px clamp(16px, 4vw, 24px) 56px;
  }
}


/* ================================================================
   CAS D'USAGE — cas-usage.html + cas-usage.css
   ================================================================ */

@media (max-width: 768px) {
  .cu-hero {
    padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 32px) clamp(32px, 4vw, 48px);
  }
  .cu-cta-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cu-cta-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .cu-hero h1 {
    font-size: clamp(1.75rem, 7vw, 2.4rem);
    max-width: 100%;
  }

  .cu-section-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .cu-cta-actions {
    flex-direction: column;
  }
  .cu-cta-inner {
    padding: 48px clamp(16px, 4vw, 24px);
  }

  .cu-content {
    padding: 32px clamp(16px, 4vw, 24px) 56px;
  }
}


/* ================================================================
   CONTACT — contact.html + contact.css
   ================================================================ */

/* La scène gauche est déjà cachée à 860px via contact.css.
   On règle uniquement les détails du formulaire. */

@media (max-width: 480px) {
  .form-panel {
    padding: 28px 16px;
  }

  /* Radio group : scroll horizontal si trop de choix */
  .radio-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .radio-group::-webkit-scrollbar { display: none; }
  .radio-opt { flex-shrink: 0; }

  /* Champs : hauteur confortable */
  .field input,
  .field select {
    height: 48px;
  }

  /* Bouton submit déjà à 44px dans contact.css — on s'assure */
  .submit-btn {
    height: 48px;
    font-size: 1rem;
  }
}


/* ================================================================
   PAGES LÉGALES — conditions.html, confidentialite.html,
                   vos-donnees.html
   ================================================================ */

@media (max-width: 480px) {
  /* Réduire les paddings des sections légales */
  .legal-wrap,
  .legal-inner,
  .vd-wrap,
  .vd-inner {
    padding-left: clamp(16px, 4vw, 24px);
    padding-right: clamp(16px, 4vw, 24px);
  }

  /* Tailles de police lisibles sur petit écran */
  .legal-body h2,
  .vd-body h2 {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
  }
}