@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap");
@import url("css/variables.css");
@import url("css/components.css");
@import url("css/sections.css");
@import url("css/responsive.css");

/* ═══════════════════════════════════════════════════════════════════════════
   STYLES POST-IMPORT (priorité maximale dans la cascade)
   ═══════════════════════════════════════════════════════════════════════════ */

.lovable-landing .lp-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lovable-landing .lp-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.lovable-landing .team-card__photo {
  filter: grayscale(10%) contrast(1.05);
}

.lovable-landing .team-card__photo {
  aspect-ratio: 1 / 1;
  min-height: 0;
  display: block;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.lovable-landing .team-card__photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.lovable-landing .lp-avatars__stack {
  display: flex;
  align-items: center;
}

.lovable-landing .lp-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(30, 191, 217, 0.45), rgba(92, 160, 238, 0.45));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.lovable-landing .lp-avatar + .lp-avatar {
  margin-left: -12px;
}

.lovable-landing .lp-avatar--more {
  background: rgba(92, 160, 238, 0.2);
  color: rgba(255, 255, 255, 0.85);
}

.lovable-landing .lp-btn__icon {
  display: inline-flex;
  align-items: center;
}

.lovable-landing .lp-btn__icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX FORMULAIRE CONTACT - MOBILE
   Placé ici pour surcharger tous les styles importés
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix 1: Le formulaire doit être position relative pour contenir le honeypot */
.lovable-landing .contact-form,
.lovable-landing.md-landing .contact-form {
  position: relative;
}

/* Fix 2: Le honeypot doit être complètement sorti du flux */
.lovable-landing .lp-field--honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

/* Fix 3: Font-size 16px minimum pour éviter le zoom iOS */
.lovable-landing .section--contact input,
.lovable-landing .section--contact select,
.lovable-landing .section--contact textarea {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  
  /* Fix 4: Formulaire - forcer display grid et largeur totale */
  .lovable-landing .contact-form,
  .lovable-landing.md-landing .contact-form,
  .md-landing .contact-form {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  /* Fix 5: Grid interne - forcer une seule colonne et largeur totale */
  .lovable-landing .contact-form__grid,
  .lovable-landing.md-landing .contact-form__grid,
  .md-landing .contact-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    gap: 18px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  /* Fix 6: Champs de formulaire - forcer largeur totale */
  .lovable-landing .contact-form .form-field,
  .lovable-landing .contact-form .lp-field,
  .lovable-landing.md-landing .contact-form .form-field,
  .lovable-landing.md-landing .contact-form .lp-field,
  .md-landing .contact-form .form-field,
  .md-landing .contact-form .lp-field {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  /* Fix 7: Inputs/Select/Textarea - forcer largeur totale et reset iOS */
  .lovable-landing .section--contact input,
  .lovable-landing .section--contact select,
  .lovable-landing .section--contact textarea,
  .lovable-landing.md-landing .section--contact input,
  .lovable-landing.md-landing .section--contact select,
  .lovable-landing.md-landing .section--contact textarea,
  .md-landing .section--contact input,
  .md-landing .section--contact select,
  .md-landing .section--contact textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 12px;
  }
  
  /* Fix 8: Select - restaurer la flèche après reset appearance */
  .lovable-landing .section--contact select,
  .lovable-landing.md-landing .section--contact select,
  .md-landing .section--contact select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' fill-opacity='0.6' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    padding-right: 40px;
  }
  
  /* Fix 9: Bouton - CRITIQUE: passer de inline-flex à flex (block-level) */
  .lovable-landing .section--contact .btn,
  .lovable-landing .section--contact .btn.btn--primary,
  .lovable-landing .section--contact button.btn,
  .lovable-landing .section--contact button.btn--primary,
  .lovable-landing.md-landing .section--contact .btn,
  .lovable-landing.md-landing .section--contact .btn.btn--primary,
  .md-landing .section--contact .btn,
  .md-landing .section--contact .btn.btn--primary,
  .md-landing .section--contact button.btn,
  .md-landing .section--contact button.btn--primary {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: center;
    align-items: center;
    padding: 14px 20px;
    font-size: 12px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  /* Fix 10: Message de formulaire - largeur totale */
  .lovable-landing .contact-form .lp-form-message,
  .lovable-landing.md-landing .contact-form .lp-form-message,
  .md-landing .contact-form .lp-form-message {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  
  /* Fix 11: Labels - assurer qu'ils prennent toute la largeur */
  .lovable-landing .section--contact label,
  .lovable-landing.md-landing .section--contact label,
  .md-landing .section--contact label {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}