/* Feuille de styles responsive pour le module d'adhésion
   Breakpoints principaux :
   - large desktop: > 992px (règles par défaut)
   - tablet: <= 992px
   - small tablet / large phone: <= 768px
   - phone: <= 576px
*/

/* Améliorations globales pour petits écrans */
@media (max-width: 992px) {
  .formulaire {
    max-width: 720px;
    margin: 30px auto;
    padding: 24px;
  }
  .en-tete-formulaire {
    padding: 10px 12px;
  }
}

@media (max-width: 768px) {
  /* Formulaire occuppe presque toute la largeur */
  .formulaire {
    max-width: 95%;
    margin: 18px auto;
    padding: 18px;
    border-radius: 8px;
  }

  /* En-tête : empiler verticalement et centrer */
  .en-tete-formulaire {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px;
    border-bottom: none;
    margin-bottom: 18px;
  }
  .texte-en-tete {
    padding: 0 8px;
  }
  .texte-en-tete p, .texte-en-tete a {
    font-size: 14px;
  }

  /* Logos reduits */
  .logo-gauche, .logo-droite {
    max-width: 90px;
    height: auto;
  }

  /* Inputs plus grands et plus lisibles */
  .formulaire input,
  .formulaire textarea,
  .formulaire select {
    font-size: 16px;
    padding: 10px 12px;
  }

  /* Radios et options affichés en colonne */
  .radio-paiement, .radio-adhesion, .type-paiement {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
  }
  .radio-paiement label, .radio-paiement p, .type-paiement label {
    width: 100% !important;
    justify-content: space-between;
    padding: 10px 12px;
  }

  /* Boutons pleine largeur pour facilité tactile */
  .formulaire button, .formulaire input[type=submit], .button {
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 16px;
  }

  /* Titres et textes */
  .titre-principal {
    font-size: 18px;
  }
}

@media (max-width: 576px) {
  /* Ajustements supplémentaires pour petits téléphones */
  .formulaire {
    padding: 14px;
    border-radius: 6px;
    margin: 12px auto;
  }
  .texte-en-tete p {
    font-size: 13px;
    margin: 2px 0;
  }
  .logo-gauche, .logo-droite {
    max-width: 72px;
  }

  /* Réduire la densité des champs pour éviter le scroll horizontal */
  .formulaire label {
    font-size: 14px;
  }
  .formulaire input,
  .formulaire textarea,
  .formulaire select {
    font-size: 15px;
    padding: 10px;
  }

  /* S’assurer que le carousel et autres grands éléments s’adaptent */
  #head { padding: 4.5rem 1.5rem 3rem; }
  #content { padding: 2.5rem 1rem; }

  /* Espacement des boutons en haut (sélecteur de formulaire) */
  #content .line > .button {
    display: block;
    width: 100%;
    margin: 8px 0;
  }
}

/* Quelques petites améliorations sur tous les écrans pour accessibilité */
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus {
  outline: 3px solid rgba(47, 203, 224, 0.12);
  box-shadow: 0 0 0 3px rgba(47, 203, 224, 0.06);
}

/* Forcer un wrapping correct des labels longs */
.radio-paiement label strong { margin-left: 8px; }

/* Fin du fichier responsive */