/**
 * Mobile Optimizations - ÉcoSwitch
 * Optimisations pour améliorer les conversions sur mobile UNIQUEMENT
 */

/* === Validation visuelle (global) === */
#energyForm .form-input:invalid:not(:placeholder-shown):not(:focus),
#energyForm select:invalid:not(:focus) {
  border-color: #ef4444;
  background-color: #fef2f2;
}

#energyForm .form-input:valid:not(:placeholder-shown),
#energyForm select:valid:not(:focus) {
  border-color: #10b981;
  background-color: #f0fdf4;
}

/* === MOBILE UNIQUEMENT (< 768px) === */
@media (max-width: 767px) {

  /* === Champs de formulaire plus grands === */
  #energyForm .form-input,
  #energyForm select {
    font-size: 16px !important; /* Évite le zoom automatique iOS */
    padding: 16px !important;
    min-height: 52px;
    border-width: 2px;
    border-radius: 12px;
  }

  /* === Labels plus visibles === */
  #energyForm label {
    font-size: 15px;
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 8px;
    display: block;
  }

  /* === Focus amélioré === */
  #energyForm .form-input:focus,
  #energyForm select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    transform: scale(1.02);
    transition: all 0.2s ease;
  }

  /* === Checkboxes plus grandes === */
  #energyForm .big-checkbox {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    min-height: 24px;
    border-width: 2px;
  }

  #energyForm label[for="cgu"],
  #energyForm label[for="rendez-vous"] {
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
  }

  /* === Bouton submit TRÈS visible === */
  #energyForm button[type="submit"] {
    width: 100%;
    padding: 18px 24px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
    min-height: 60px;
  }

  #energyForm button[type="submit"]:active {
    transform: scale(0.98);
  }

  /* === Espacements optimisés === */
  #energyForm .space-y-6 > * + * {
    margin-top: 20px !important;
  }

  #energyForm .gap-6 {
    gap: 20px !important;
  }

  /* === Container du formulaire === */
  #energyForm {
    padding: 20px !important;
  }

  .bg-white.rounded-2xl.shadow-2xl {
    padding: 20px !important;
  }

  /* === Placeholders plus lisibles === */
  #energyForm ::placeholder {
    color: #9ca3af;
    font-size: 15px;
  }

  /* === Autocomplete suggestions === */
  #suggestions li {
    font-size: 15px;
    padding: 14px 16px;
    min-height: 48px;
  }


  /* === Modale de confirmation téléphone === */
  #phoneConfirmModal .bg-white {
    padding: 24px !important;
    margin: 16px;
    border-radius: 16px;
  }

  #phoneConfirmModal h3 {
    font-size: 20px !important;
  }

  #phoneConfirmModal p {
    font-size: 15px !important;
  }

  #phoneConfirmModal #phoneDisplay {
    font-size: 24px !important;
    padding: 16px;
  }

  #phoneConfirmModal button {
    padding: 16px 20px !important;
    font-size: 16px !important;
    min-height: 52px;
    border-radius: 10px;
  }

  #phoneConfirmModal input[type="tel"] {
    font-size: 18px !important;
    padding: 16px !important;
    min-height: 52px;
  }

  /* === Message de succès === */
  #confirmationMessage {
    padding: 24px !important;
    border-radius: 16px;
    margin-top: 24px !important;
  }

  #confirmationMessage h3 {
    font-size: 20px !important;
  }

  #confirmationMessage p {
    font-size: 15px !important;
    line-height: 1.6;
  }

  /* === Indicateur de chargement === */
  .submit-spinner {
    font-size: 16px;
  }

  /* === Amélioration du contraste === */
  #energyForm .text-gray-700 {
    color: #374151 !important;
  }

  /* === Zone de saisie numéro === */
  #energyForm input[type="tel"],
  #energyForm input[inputmode="numeric"] {
    font-size: 18px !important;
    letter-spacing: 0.5px;
    font-weight: 500;
  }

  /* === Grid responsive === */
  #energyForm .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* === Scroll smooth === */
  html {
    scroll-behavior: smooth;
  }

  /* === Amélioration tactile === */
  #energyForm a,
  #energyForm button,
  #energyForm input,
  #energyForm select,
  #energyForm .big-checkbox {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.1);
  }

  /* === Feedback visuel au tap === */
  #energyForm button:active,
  #energyForm .big-checkbox:active {
    opacity: 0.8;
  }

  /* === Message d'erreur plus visible === */
  #cguWarning {
    font-size: 14px;
    padding: 12px;
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    border-radius: 6px;
    margin-top: 12px !important;
  }

  /* === Liens plus visibles === */
  #energyForm a {
    text-decoration: underline;
    font-weight: 600;
  }

  /* === Animations subtiles === */
  #energyForm .form-input,
  #energyForm select {
    transition: all 0.2s ease-in-out;
  }

  /* === Focus ring amélioré === */
  #energyForm *:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
  }
}

/* === TABLET (768px - 1024px) - Pas de changements === */
@media (min-width: 768px) {
  /* PC reste inchangé */
}

/* === Animation de chargement du formulaire === */
@media (max-width: 767px) {
  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  #energyForm {
    animation: slideInUp 0.4s ease-out;
  }

  #energyForm > div {
    animation: slideInUp 0.4s ease-out;
    animation-fill-mode: both;
  }

  #energyForm > div:nth-child(1) { animation-delay: 0.05s; }
  #energyForm > div:nth-child(2) { animation-delay: 0.1s; }
  #energyForm > div:nth-child(3) { animation-delay: 0.15s; }
  #energyForm > div:nth-child(4) { animation-delay: 0.2s; }
  #energyForm > div:nth-child(5) { animation-delay: 0.25s; }
  #energyForm > div:nth-child(6) { animation-delay: 0.3s; }
}

/* === Accessibilité mobile === */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}