/**
 * Styles spécifiques pour mobile uniquement
 * Cette feuille de style remplace complètement les styles sur mobile
 */

@media (max-width: 768px) {
  /* Reset global */
  * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  
  html, body {
    width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Conteneurs */
  .container {
    width: 100% !important;
    padding: 0 15px !important;
    margin: 0 auto !important;
  }
  
  /* Section demande */
  #demande {
    padding: 30px 0 !important;
  }
  
  #demande .container {
    display: block !important;
  }
  
  #demande .section-heading {
    margin-bottom: 20px !important;
  }
  
  #demande h2 {
    font-size: 24px !important;
    margin-bottom: 10px !important;
  }
  
  #demande p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  
  /* Formulaire */
  .form-container {
    display: block !important;
  }
  
  .form-info {
    margin-bottom: 20px !important;
  }
  
  .info-item {
    background: #2a2a2a !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .info-icon {
    margin-right: 15px !important;
    font-size: 24px !important;
    color: #ffc107 !important;
  }
  
  .info-content h4 {
    margin: 0 0 5px 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  
  .info-content p {
    margin: 0 !important;
    font-size: 14px !important;
  }
  
  /* Formulaire principal */
  form {
    background: #fff !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
    color: #333 !important;
  }
  
  .form-header {
    margin-bottom: 20px !important;
  }
  
  .form-header h3 {
    font-size: 18px !important;
    color: #333 !important;
    margin: 0 !important;
  }
  
  .form-section {
    margin-bottom: 20px !important;
  }
  
  .form-section h4 {
    font-size: 16px !important;
    margin: 0 0 15px 0 !important;
    color: #333 !important;
  }
  
  .form-group {
    margin-bottom: 15px !important;
  }
  
  label {
    display: block !important;
    margin-bottom: 5px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
  }
  
  input, select, textarea {
    width: 100% !important;
    padding: 12px !important;
    border: 2px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    background: #fff !important;
  }
  
  .form-row {
    display: block !important;
  }
  
  .form-group.half {
    width: 100% !important;
  }
  
  /* Boutons */
  button[type="submit"] {
    background: #ffc107 !important;
    color: #333 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 15px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    width: 100% !important;
    cursor: pointer !important;
    margin-top: 10px !important;
  }
  
  /* Corrections spécifiques pour très petits écrans */
  @media (max-width: 375px) {
    .container {
      padding: 0 10px !important;
    }
    
    #demande h2 {
      font-size: 22px !important;
    }
    
    form {
      padding: 10px !important;
    }
    
    input, select, textarea {
      padding: 10px !important;
    }
  }
}