/* Styles spécifiques Mobile et Media Queries */

/* Background décoratif optimisé pour mobile */
@media (max-width: 767px) {
  body::before {
    top: -27%;
    right: -60%;
    width: 100%;
    height: 120%;
    background: var(--gradient-form-bg);
    transform: rotate(12deg);
    opacity: 0.1;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
  }

  body::after {
    top: -15%;
    right: -85%;
    width: 100%;
    transform: rotate(17deg);
  }
  .main-content {
    text-align: center;
  }
  .logo-section .logo-svg {
    max-width: 200px;
  }

  .logo-section .tagline {
    font-size: clamp(0.85rem, 2vw, 1.125rem);
  }
}

/* Illustrations - Cachées sur mobile */
@media (max-width: 767px) {
  .illustrations-container {
    display: none; /* Hide illustrations on mobile for better form visibility */
  }
}

/* Newsletter Form Mobile */
@media (max-width: 767px) {
  .inline-newsletter {
    flex-direction: column;
    gap: 16px;
    align-items: center; /* Centré sur mobile */
    justify-content: center;
    width: 100%;
  }

  .inline-email-input {
    width: 90%; /* Utilise 90% de l'écran pour l'input */
    max-width: 350px;
    min-width: unset; /* Supprime la contrainte min-width */
  }

  .inline-submit-button {
    width: 90%; /* Même largeur que l'input */
    max-width: 350px;
    min-width: unset;
    text-align: center;
  }
}

/* Brevo Form Mobile - Force avec priorité maximale */
@media (max-width: 767px) {
  #sib-form {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* Force la largeur de l'input avec tous les sélecteurs possibles */
  #sib-container .input,
  #sib-form .input,
  .sib-input .input,
  #EMAIL {
    width: 90vw !important;
    max-width: 350px !important;
    min-width: 280px !important;
    box-sizing: border-box !important;
  }

  /* Force la largeur du bouton avec tous les sélecteurs possibles */
  .sib-form-block__button,
  #sib-form button,
  button[type='submit'] {
    width: 90vw !important;
    max-width: 350px !important;
    min-width: 280px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Force aussi les containers parents */
  .sib-input,
  .sib-form-block,
  .form__entry {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Container pour le feedback sur mobile */
@media (max-width: 767px) {
  .newsletter-feedback {
    position: relative;
    top: auto;
    margin-top: 1rem;
    margin-bottom: 0;
  }
}

/* Success/Error messages mobile */
@media (max-width: 767px) {
  /* Force le message d'erreur générique à rester masqué sur mobile aussi */
  #error-message {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Message de succès mobile - se superpose avec la largeur mobile */
  #success-message {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 350px !important;
  }

  /* Pas de triangle sur mobile non plus */
  #success-message:before {
    display: none !important;
  }
}

/* Desktop responsive adjustments */
@media (max-width: 1200px) {
  .laptop-illustration {
    right: -150px;
    transform: scale(0.56);
  }

  .smartphone-illustration {
    right: calc(-150px + 160px);
    transform: scale(0.28);
  }

  .inline-email-input {
    width: 320px;
    min-width: 280px;
  }
}

@media (max-width: 992px) {
  .laptop-illustration {
    transform: scale(0.42);
    right: -100px;
  }

  .smartphone-illustration {
    right: calc(-100px + 120px);
    transform: scale(0.21);
  }
}

/* Brevo Form Mobile Adjustments */
@media (max-width: 767px) {
  #sib-form {
    flex-wrap: wrap;
  }

  /* Badge d'erreur mobile - affiché AU-DESSUS de l'input avec la même largeur */
  .sib-input .entry__error.entry__error--primary {
    position: absolute !important;
    top: auto !important;
    bottom: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: none !important;
    margin-bottom: 4px !important;
    transform: translateY(-10px) !important;
  }

  /* Quand le badge est visible - animation de chute vers le haut */
  .sib-input .entry__error.entry__error--primary[style*='block'] {
    transform: translateY(-10px) !important;
    opacity: 1 !important;
  }

  /* Triangle pointant vers l'input - maintenant vers le bas, centré */
  .sib-input .entry__error.entry__error--primary:before {
    top: auto !important;
    bottom: -4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-top: 4px solid #ef4444 !important;
    border-bottom: none !important;
  }

  /* S'assurer que le conteneur de l'input a position relative */
  .sib-input {
    position: relative !important;
  }
}

/* Desktop-only widths for Brevo form */
@media (min-width: 768px) {
  #sib-container .input {
    width: 364px !important;
    min-width: 312px !important;
  }

  .sib-form-block__button {
    min-width: fit-content !important;
  }
}

/* Force maximale sur tous les mobiles - utilise vw pour forcer la largeur */
@media (max-width: 767px) {
  /* Input email - force avec vw */
  #sib-container .input[type='text'],
  #EMAIL {
    width: calc(100vw - 2rem) !important;
    max-width: 350px !important;
    min-width: 280px !important;
  }

  /* Bouton submit - force avec vw */
  .sib-form-block__button[type='submit'] {
    width: calc(100vw - 2rem) !important;
    max-width: 350px !important;
    min-width: 280px !important;
  }
}

/* Footer mobile - réduire encore plus la marge */
@media (max-width: 767px) {
  .footer {
    margin-top: 1rem;
  }

  /* Newsletter disclaimer centered on mobile */
  .newsletter-disclaimer {
    text-align: center;
  }
}

/* Fine-tuning pour très petits écrans */
@media (max-width: 320px) {
  .main-container {
    padding: 1rem 0.5rem;
  }

  .content-wrapper {
    gap: 1.5rem;
  }

  .inline-email-input,
  .inline-submit-button,
  #sib-container .input,
  .sib-form-block__button {
    width: calc(100vw - 1rem) !important;
    max-width: 280px !important;
  }
}

/* Ajustements pour tablettes en portrait */
@media (min-width: 568px) and (max-width: 767px) {
  .content-wrapper {
    gap: 2.5rem;
    max-width: 600px;
  }

  .inline-email-input {
    width: 300px;
    min-width: 250px;
  }

  .inline-submit-button {
    min-width: 120px;
  }
}

/* Ajustements pour écrans moyens */
@media (min-width: 768px) and (max-width: 991px) {
  .content-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 700px;
  }

  .main-content {
    text-align: center;
  }

  .inline-newsletter {
    justify-content: center;
  }
}