/* ============================================================================
   CAP Lapeyrouse-Fossat — Corrections responsive consolidées
   ============================================================================
   Ce fichier est CHARGÉ EN DERNIER. Il contient :
     1. Garde-fous globaux anti-débordement (priorité maximale)
     2. Corrections ciblées pour les zones problématiques connues
     3. Breakpoints harmonisés (480 / 568 / 768 / 980)
   
   Les autres fichiers CSS contiennent leurs propres media queries pour les
   réglages locaux ; ce fichier traite les CAS TRANSVERSAUX qui touchent
   plusieurs composants à la fois ou nécessitent une priorité supérieure.
   
   Breakpoints :
     ≤ 980px : tablette portrait
     ≤ 768px : mobile large
     ≤ 568px : mobile standard (iPhone récents)
     ≤ 480px : petit mobile (iPhone SE)
     ≤ 360px : très petits écrans
   ============================================================================ */

/* ============================================================================
   1. GARDE-FOUS GLOBAUX
   ============================================================================
   Ces règles s'appliquent à TOUTES tailles d'écran et empêchent les
   débordements horizontaux. Priorité haute via spécificité naturelle. */

html, body {
  /* Empêche tout débordement horizontal du document.
     Stratégie en 2 temps :
       1. overflow-x: hidden — fallback compatible tous navigateurs
       2. overflow-x: clip — préféré (n'établit pas de contexte de défilement,
          permet position: sticky de fonctionner correctement)
     Le navigateur applique la dernière déclaration valide. */
  max-width: 100vw;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Ceinture-bretelle : tout élément <main> ne doit jamais déborder de body */
main {
  max-width: 100%;
  overflow-x: hidden;
}

/* Tous les inputs/textarea/select : empêcher le débordement intrinsèque
   (le navigateur peut imposer une largeur minimale par défaut, en
   particulier sur les widgets natifs iOS) */
input, textarea, select {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ============================================================================
   2. MODALE D'ADHÉSION (problème connu : étape 2)
   ============================================================================
   La modale .member-modal contient le formulaire d'adhésion en 5 étapes.
   Sur mobile, l'étape 2 (Entreprise + Fonction côte-à-côte, puis select
   Secteur, puis textarea) provoquait un décalage horizontal sur certains
   appareils, principalement à cause de :
     a) padding latéral trop large dans .member-modal-content
     b) animation translateX sur .adhesion-step-panel
     c) form-row qui restait en 2 colonnes jusqu'à 568px (trop tard)
   
   Stratégie :
     - Réduire progressivement le padding modal selon la largeur d'écran
     - Désactiver l'animation translateX sur mobile (juste fade)
     - Passer .form-row en 1 colonne dès 640px (avant 568) DANS la modale
       d'adhésion uniquement (pour ne pas casser le profil/relations)
   ============================================================================ */

/* Désactive l'animation translateX sur mobile : elle peut créer un effet
   de "scroll horizontal" pendant la transition vers une étape suivante.
   On garde uniquement le fade (opacity) qui ne bouge rien latéralement. */
@media (max-width: 768px) {
  .adhesion-step-panel {
    animation: stepFadeOnly 0.25s ease-out;
  }
}

@keyframes stepFadeOnly {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Empile les champs Entreprise/Fonction en 1 colonne dès 640px DANS la
   modale d'adhésion (les champs sont longs, donc 1 col = mieux). On
   conserve les 2 colonnes pour les autres .form-row du site (profil
   membre, etc.) qui ont plus d'espace. */
@media (max-width: 640px) {
  #adhesionModal .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Réduction progressive du padding latéral de la modale.
   À 360px, on optimise au maximum l'espace disponible. */
@media (max-width: 568px) {
  .member-modal {
    padding: 1.5rem 0.8rem;
  }
  .member-modal-content {
    padding: 1.8rem 1.3rem 2rem;
  }
}

@media (max-width: 380px) {
  .member-modal {
    padding: 1rem 0.5rem;
  }
  .member-modal-content {
    padding: 1.5rem 1rem 1.7rem;
  }
}

/* ============================================================================
   3. INPUTS, SELECT, TEXTAREA — comportement mobile
   ============================================================================ */

/* Sur mobile, on s'assure que les contrôles natifs ne provoquent jamais de
   scroll horizontal et restent confortables au touch */
@media (max-width: 568px) {
  .form-input,
  .form-select,
  .form-textarea {
    /* Padding réduit pour gagner de l'espace tout en restant cliquable */
    padding: 0.85rem 1rem;
    /* font-size minimum 16px sur mobile pour empêcher iOS de zoomer
       automatiquement au focus (déjà fait sur form-textarea/select via
       font-size max(16px, ...) mais on le confirme aussi pour form-input) */
    font-size: max(16px, 0.95rem);
  }

  /* Le select garde un padding-right plus large pour la flèche */
  .form-select {
    padding-right: 2.5rem;
    background-position: right 1rem center;
  }

  /* Inputs avec icône password (œil) : on garde la place pour le bouton */
  .password-input-wrap .form-input {
    padding-right: 2.8rem;
  }
}

/* ============================================================================
   4. STEPPER MOBILE D'ADHÉSION
   ============================================================================
   Le stepper compact (visible < 720px) doit s'adapter aux très petits
   écrans sans tronquer l'info essentielle. */

@media (max-width: 380px) {
  .stepper-mobile {
    padding: 0.7rem 0.9rem;
  }
  .stepper-mobile-info {
    font-size: 0.78rem;
  }
  .stepper-mobile-total {
    font-size: 0.72rem;
  }
}

/* ============================================================================
   5. CARTES DASHBOARD ET STATS
   ============================================================================
   Les grilles de stat-cards passent en 1 colonne progressivement. */

@media (max-width: 480px) {
  /* Top contributeurs business : avatar plus petit, infos compactes */
  .business-top-origins {
    padding: 1rem 1.1rem;
  }
  .business-top-origin-row {
    gap: 0.65rem;
    padding: 0.4rem 0;
  }
  .business-top-origin-amount {
    font-size: 1rem;
  }
  .business-top-origin-meta {
    font-size: 0.72rem;
  }

  /* Badge "via mise en relation" : passe en dessous au lieu de à côté
     pour ne pas serrer le texte */
  .business-top-via-connection {
    margin-left: 0;
    margin-top: 0.15rem;
    flex-basis: 100%;
  }
}

/* ============================================================================
   6. LISTE BUSINESS (côté membre + admin)
   ============================================================================
   Les lignes business sont en grid avec colonnes fixes ; sur mobile elles
   doivent se transformer en cartes empilées pour rester lisibles. */

@media (max-width: 568px) {
  /* Réduire les paddings des badges business */
  .biz-status-badge {
    font-size: 0.7rem;
    padding: 0.18rem 0.5rem;
  }

  /* Le badge "Issue d'une mise en relation" sous l'avatar peut être très
     long ; on le wrappe correctement */
  .business-row-connection-link {
    font-size: 0.65rem;
    padding: 0.18rem 0.4rem;
    white-space: normal;
    line-height: 1.3;
  }
}

/* ============================================================================
   7. RELATIONS — bloc business summary
   ============================================================================ */

@media (max-width: 480px) {
  .relation-business-block {
    padding: 0.7rem 0.9rem;
    gap: 0.4rem;
  }
  .relation-business-amount {
    font-size: 1rem;
  }
  .relation-business-label {
    font-size: 0.7rem;
  }
  .relation-business-detail {
    font-size: 0.7rem;
    flex-basis: 100%;
  }
}

/* ============================================================================
   8. BANDEAU OUTILS DE TEST (admin staging)
   ============================================================================ */

@media (max-width: 480px) {
  .admin-test-tools-banner {
    padding: 0.85rem 1rem;
    gap: 0.7rem;
  }
  .admin-test-tools-icon {
    width: 32px;
    height: 32px;
  }
  .admin-test-tools-title {
    font-size: 0.72rem;
  }
  .admin-test-tools-text p {
    font-size: 0.78rem;
  }
}

/* ============================================================================
   9. MODALES DE CONFIRMATION (action-confirm-modal)
   ============================================================================
   Padding réduit sur très petits écrans pour ne pas perdre de l'espace. */

@media (max-width: 380px) {
  .action-confirm-content {
    padding: 1.5rem 1.2rem;
  }
  .action-confirm-title {
    font-size: 1.1rem;
  }
  .action-confirm-text {
    font-size: 0.85rem;
  }
}

/* ============================================================================
   10. ANIMATIONS — respecter la préférence utilisateur
   ============================================================================
   Si l'utilisateur a activé "réduire les animations" dans son OS,
   on désactive toutes les animations décoratives pour respecter ce choix
   (accessibilité). */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   8. MODALE FORMULAIRE ÉVÉNEMENT (admin)
   ============================================================================
   La modale #adminEventFormModal contient un long formulaire de création/
   édition d'événement avec plusieurs .form-row à 2 colonnes (date début/fin,
   code postal/ville, capacité/délai, montant/info tarifaire).

   Sur mobile, ces 2 colonnes deviennent trop serrées et les inputs natifs
   (notamment datetime-local) créent un débordement horizontal — la modale
   ne respecte plus la largeur de l'écran et offre un scroll latéral
   indésirable.

   Stratégie :
     - Garde-fou défensif : pas de scroll horizontal possible sur la modale
     - Passer .form-row en 1 colonne dès 640px DANS cette modale uniquement
       (mêmes critères que la modale d'adhésion)
     - Réduire le padding interne sur très petits écrans
     - Empiler les actions cover (boutons "Choisir une image" / "Supprimer")
       qui peuvent être longs avec leur icône + texte
   ============================================================================ */

/* Garde-fou défensif : aucun enfant ne peut créer de scroll horizontal */
.admin-event-form-modal .member-modal-content {
  overflow-x: hidden;
}

@media (max-width: 640px) {
  /* .form-row en 1 colonne dans la modale event admin (les inputs
     datetime-local et les longs labels sont trop serrés en 2 col). */
  #adminEventFormModal .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Empile les boutons du bloc "Image de couverture" : ils contiennent
     une icône + un label de plusieurs mots ("Choisir une image", "Supprimer
     l'image") et tiennent mal en ligne sur petit écran. */
  #adminEventFormModal .event-form-cover-actions {
    flex-direction: column;
    align-items: stretch;
  }
  #adminEventFormModal .event-form-cover-btn {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 480px) {
  /* Le bandeau d'info "Cet événement est publié" est un flex horizontal avec
     un SVG flex-shrink:0. Sur très petits écrans il prend trop de hauteur
     avec son padding par défaut, on le compacte un peu. */
  #adminEventFormModal .event-form-banner {
    padding: 0.7rem 0.85rem;
    font-size: 0.82rem;
    gap: 0.55rem;
  }

  /* Les <label> .event-form-radio ont du texte sur 2 lignes (titre + hint).
     Sur petits écrans on réduit le padding latéral pour gagner de la place
     sans dégrader la zone cliquable verticale. */
  #adminEventFormModal .event-form-radio {
    padding: 0.6rem 0.7rem;
  }
}