/* =============================================================================
   auth.css — PAGES /login ET /register (+ formulaires d'inscription par rôle)
   =============================================================================

   TOUTES les règles de ce fichier sont scopées sous `body.uft-auth-page`.
   Cette classe est posée via `{% set bodyClass = 'bg-cut-grey uft-auth-page' %}`
   dans :
     - templates/Connexion/Login.html.twig
     - templates/Inscription/Club.html.twig
     - templates/Inscription/Joueur.html.twig
     - templates/Inscription/Spectateur.html.twig
     - templates/Inscription/Arbitre.html.twig
     - templates/Inscription/Entreprise.html.twig

   => Aucune autre page du site n'est impactée, même si les classes utilisées
      ici (.btn-green-elec-md, .uft-input-text, .for-login-form, .uft-checkbox…)
      sont partagées avec le reste de l'application.

   Chargé en DERNIER dans base.html.twig (après fix/responsive.css) pour gagner
   la cascade sans avoir à empiler des !important.

   Breakpoints utilisés (alignés sur Bootstrap, cohérents avec les `col-md-*`
   des templates de formulaire) :
     - 991.98px : tablette   (le sélecteur de rôle devient trop serré à 4 col)
     - 767.98px : mobile     (les `col-md-6` passent en pleine largeur)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. ONGLETS "INSCRIPTION / CONNEXION"  (.for-login-form)
   -----------------------------------------------------------------------------
   AVANT : les 2 boutons faisaient `width: calc(50% - 4px)` en inline-block, et
   le nœud texte (retour à la ligne du HTML) entre les deux <a> ajoutait ~4-5px.
   Total = 100% - 8px + espace ≈ 100% - 3px → au moindre changement de police le
   2e bouton passait à la ligne. En mobile, `font-size: 21px` + `padding: 15px`
   faisait déborder le mot "INSCRIPTION" hors de son bouton.

   APRÈS : conteneur flex + gap explicite → répartition exacte 50/50 à toutes
   les largeurs, plus aucun nœud texte parasite. Taille de police fluide
   (clamp) pour que le libellé tienne toujours sur une ligne.
   -------------------------------------------------------------------------- */
body.uft-auth-page .for-login-form.btns-container-cutted {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

body.uft-auth-page .for-login-form.btns-container-cutted > a,
body.uft-auth-page .for-login-form.btns-container-cutted > .btn {
    flex: 1 1 0;
    min-width: 0;
}

body.uft-auth-page .for-login-form.btns-container-cutted > a {
    display: block;
}

/* Remplace le `calc(50% - 4px)` : c'est le flex qui gère désormais la largeur */
body.uft-auth-page .for-login-form .btn-green-elec-md {
    width: 100%;
}

/* Taille fluide — exclut `.uft-md` (variante compacte utilisée dans la modale
   "Ajouter une équipe", qui doit rester à 14px) */
body.uft-auth-page .for-login-form:not(.uft-md) .btn-green-elec-md {
    font-size: clamp(13px, 3.9vw, 21px);
    padding: 15px 10px;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    body.uft-auth-page .for-login-form.btns-container-cutted {
        padding: 10px;
        gap: 6px;
    }
}


/* -----------------------------------------------------------------------------
   2. LABELS DE CHAMPS (.uft-input-label)
   -----------------------------------------------------------------------------
   AVANT : les icônes SVG posées en background font 24-26px de haut alors que la
   boîte du <label> ne fait que ~19px (line-height normal) → l'icône était
   rognée en haut et en bas, et le texte n'était pas aligné verticalement
   dessus. Aucun `margin-bottom` non plus → le label collait à l'input.

   APRÈS : boîte de 20px de haut, icône contrainte à 18px, espace sous le label.
   La taille de police n'est PAS touchée (identique desktop qu'avant).
   -------------------------------------------------------------------------- */
body.uft-auth-page .uft-input-label {
    display: inline-block;
    line-height: 20px;
    margin-bottom: 6px;
    background-size: 18px auto;
    background-position: left center;
}

/* Décale le texte juste ce qu'il faut après l'icône de 18px */
body.uft-auth-page .uft-input-label.uft-pdl-30 {
    padding-left: 26px;
}


/* -----------------------------------------------------------------------------
   3. CHAMPS DE SAISIE
   -----------------------------------------------------------------------------
   - font-size 16px explicite : en dessous de 16px, iOS Safari zoome
     automatiquement sur le champ au focus et casse le layout.
   - input[type=date] : iOS ignore `height` sur les champs date, d'où `min-height`
     + `appearance: none` pour retrouver la même hauteur que les autres champs.
   - Les inputs ont `border: 0` : sans style de focus, on ne sait plus où on
     tape (surtout au clavier). On ajoute un contour vert UFT.
   -------------------------------------------------------------------------- */
body.uft-auth-page .uft-input-text,
body.uft-auth-page .uft-input-select {
    font-size: 16px;
    width: 100%;
}

body.uft-auth-page input[type="date"].uft-input-text {
    -webkit-appearance: none;
    appearance: none;
    min-height: 45px;
}

body.uft-auth-page .uft-input-text:focus,
body.uft-auth-page .uft-input-select:focus,
body.uft-auth-page .form-control:focus {
    outline: 2px solid #026633;
    outline-offset: -2px;
}


/* -----------------------------------------------------------------------------
   4. ŒIL "AFFICHER LE MOT DE PASSE" (.view-pass)
   -----------------------------------------------------------------------------
   AVANT : `top: calc(50% - 12px)`, centré sur le wrapper `position:relative`.
   Or jQuery-validate insère son `<label class="error">` À L'INTÉRIEUR de ce
   wrapper, après l'input → le wrapper grandit → l'œil descendait et se
   retrouvait par-dessus le message d'erreur.

   APRÈS : position fixe calculée sur l'input lui-même — (45px - 25px) / 2 = 10px.
   L'œil reste parfaitement centré sur le champ, avec ou sans erreur affichée.
   -------------------------------------------------------------------------- */
body.uft-auth-page .view-pass {
    top: 10px;
}


/* -----------------------------------------------------------------------------
   5. GROUPE TÉLÉPHONE (.uft-group-input-tel)
   -----------------------------------------------------------------------------
   Le champ numéro porte `width: 100%` (Bootstrap .form-control) dans un
   conteneur flex : sans `min-width: 0` il refuse de se compresser et écrase
   le sélecteur d'indicatif intl-tel-input sur les petits écrans.
   -------------------------------------------------------------------------- */
body.uft-auth-page .uft-group-input-tel {
    align-items: stretch;
}

body.uft-auth-page .uft-group-input-tel > .intl-tel-input {
    flex: 0 0 auto;
}

body.uft-auth-page .uft-group-input-tel .phone-input-text {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}


/* -----------------------------------------------------------------------------
   6. SELECT2 (position joueur, rôle, club…)
   -----------------------------------------------------------------------------
   Le sélecteur `+` ne cible QUE le conteneur inséré juste après le <select>
   dans le formulaire. Le panneau déroulant, lui, est déplacé dans <body> par
   Select2 et porte aussi `.select2-container` : il ne doit surtout pas être
   forcé à 100% (sa largeur inline est calculée pour coller au champ).
   -------------------------------------------------------------------------- */
body.uft-auth-page .uft-input-select + .select2-container {
    width: 100% !important;
    max-width: 100%;
}


/* -----------------------------------------------------------------------------
   7. CASE À COCHER "SE SOUVENIR DE MOI" / "J'AI LU LES CGU"
   -----------------------------------------------------------------------------
   AVANT : `.uft-checkbox` remet `margin: 0 1rem 0 0`, ce qui annule le
   `margin-left: -1.5em` de Bootstrap. La case flottait donc À L'INTÉRIEUR du
   `padding-left: 1.5em` de `.form-check`, et le texte de la 1re ligne démarrait
   ~56px plus loin que celui des lignes suivantes. Très visible sur la page
   d'inscription (libellé CGU long → 2-3 lignes en mobile, complètement
   désalignées).

   APRÈS : on rétablit une gouttière propre (padding 44px + margin négatif
   équivalent). La case sort du flux texte, toutes les lignes du libellé sont
   alignées sur la même verticale. `top: 2px` recentre la fausse case de 20px
   sur la première ligne de texte.
   -------------------------------------------------------------------------- */
body.uft-auth-page .form-check.keep_me_logged_in {
    padding-left: 44px;
}

body.uft-auth-page .form-check.keep_me_logged_in .uft-checkbox {
    margin-left: -44px;
    top: 2px;
}

body.uft-auth-page .form-check.keep_me_logged_in .form-check-label {
    display: block;
    line-height: 1.45;
}


/* -----------------------------------------------------------------------------
   8. LIEN "MOT DE PASSE OUBLIÉ ?"
   -----------------------------------------------------------------------------
   Aligné à droite (comportement existant conservé), on ajoute juste la marge
   qui manquait avant la case à cocher + une zone de tap confortable en mobile.
   -------------------------------------------------------------------------- */
body.uft-auth-page .forget-password-link {
    margin-top: 10px;
    margin-bottom: 18px;
    padding: 4px 0;
}


/* -----------------------------------------------------------------------------
   9. BOUTON DE SOUMISSION
   -----------------------------------------------------------------------------
   Desktop : inchangé.
   Mobile  : pleine largeur (cible de tap), police réduite pour que
   "TERMINER L'INSCRIPTION" tienne sur une ligne, padding droit suffisant pour
   ne pas passer sous la flèche `.uft-btn-arrow` (positionnée à 15px du bord).

   `:not(.uft-btn-md)` exclut le bouton "Terminer l'ajout" de la modale
   "Ajouter une équipe", qui doit rester compact.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body.uft-auth-page .btn-green-elec-md-active:not(.uft-btn-md) {
        width: 100%;
        font-size: 16px;
        padding: 14px 42px;
        text-align: center;
    }
}


/* -----------------------------------------------------------------------------
   10. SÉLECTEUR DE TYPE DE COMPTE (page /register)
   -----------------------------------------------------------------------------
   AVANT (bug de débordement horizontal réel) : `.registration-role-select` est
   un flex de 4 items, dans un bloc à `padding: 30px 70px`. Sur un écran 360px :
     336px (largeur dispo) − 140px (padding) = 196px pour 4 icônes de 60px fixes
     = 240px minimum → débordement de ~44px → scroll horizontal sur toute la page
     et libellés ("ENTREPRISE / ASSOCIATION") illisibles sur 4-5 lignes.

   APRÈS :
     - ≤991px : padding latéral réduit à 40px (4 colonnes respirent en tablette)
     - ≤767px : grille 2×2, padding 24px, découpe clip-path réduite de 50→20px,
                icônes plafonnées à 52px.
     - À toutes les tailles : les icônes ne peuvent plus dépasser leur cellule.
   -------------------------------------------------------------------------- */
body.uft-auth-page .registration-role-select > div {
    min-width: 0;
}

body.uft-auth-page .registration-role-select > div img {
    max-width: 100%;
    height: auto;
}

body.uft-auth-page .register-account-type-selector span {
    word-break: break-word;
}

@media (max-width: 991.98px) {
    body.uft-auth-page .register-account-type-selector {
        padding: 26px 40px;
    }

    body.uft-auth-page .registration-role-select > div {
        padding: 10px 6px;
    }
}

@media (max-width: 767.98px) {
    body.uft-auth-page .register-account-type-selector {
        padding: 22px 24px;
        -webkit-clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
        clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
    }

    body.uft-auth-page .registration-role-select {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    body.uft-auth-page .registration-role-select > div {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 12px 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    body.uft-auth-page .registration-role-select > div img {
        width: 52px;
        height: 52px;
    }

    body.uft-auth-page .register-account-type-selector span {
        font-size: 12px;
        margin-top: 8px;
        line-height: 1.25;
    }

    /* "SELECTIONNE LE TYPE DE COMPTE" : 1.5rem par défaut, trop gros à 360px */
    body.uft-auth-page .uft-title-h4 {
        font-size: 1.15rem;
    }
}


/* -----------------------------------------------------------------------------
   11. SÉLECTEUR HOMME / FEMME (#pills-tab) — MOBILE / TABLETTE UNIQUEMENT
   -----------------------------------------------------------------------------
   Quatre défauts cumulés sous 991px, tous corrigés ici. Le desktop (≥992px)
   n'est touché par AUCUNE de ces règles.

   a) LIBELLÉ NON CENTRÉ
      Le <button> porte `d-flex flex-row align-items-center w-100`. `display:flex`
      neutralise le `text-align: center` de `.top-nav-container .nav-link` : le
      texte devient un item flex placé en flex-start. "HOMME" et "FEMME" sont
      donc collés à gauche de leur onglet.
      -> on ajoute `justify-content: center`.

   b) ONGLET ACTIF ILLISIBLE (le plus visible)
      `.nav-pills .nav-link.active` pose `background-color: #006f3a` (fix/style.css)
      et `.top-nav-container .nav-link` pose `color: #006f3a` — même spécificité
      (0,2,0), mais notre CSS est chargé après le CDN Bootstrap, donc il écrase
      le `color: #fff` de Bootstrap. Résultat : vert foncé sur vert foncé.
      Sur desktop le problème n'existe pas car responsive.css rétablit
      `color: #fff` dans un bloc `@media (min-width: 991px)` — qui ne s'applique
      justement PAS en mobile.
      -> on rétablit le blanc sous 991px.

   c) LARGEUR DES ONGLETS INCOHÉRENTE
      `responsive.css` applique `.padding-tab-event-mobile { width: calc(100%/3) }`,
      une règle écrite pour un jeu de 3 onglets. Ici il n'y en a que 2.
      De plus `.top-nav-container .nav-link { width: auto !important }` (≤991px)
      empêche le bouton de remplir son <li> : la pastille verte de l'onglet actif
      ne couvre que la largeur du texte, décalée à gauche dans un onglet plus large.
      -> barre en pleine largeur, 2 onglets à parts égales, bouton à 100% du <li>.

   d) PAS DE GOUTTIÈRE ENTRE LES DEUX ONGLETS
      Les `me-3 ms-2` du markup sont annulés par `margin: 0 !important` de
      `.padding-tab-event-mobile`.
      -> on remet 8px entre les deux, uniquement entre eux.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* (c) `align-items-start` fait rétrécir la <ul> à la largeur de son contenu :
       on la laisse s'étirer pour occuper la largeur du formulaire. */
    body.uft-auth-page .tabs-container-event.align-items-start {
        align-items: stretch !important;
    }

    body.uft-auth-page #pills-tab {
        width: 100%;
        flex-wrap: nowrap;
    }

    /* (c) Deux onglets strictement égaux, quelle que soit la longueur du libellé */
    body.uft-auth-page #pills-tab .padding-tab-event-mobile {
        width: auto !important;
        flex: 1 1 0;
        min-width: 0;
    }

    /* (d) Gouttière entre les onglets seulement (pas de marge sur les bords) */
    body.uft-auth-page #pills-tab .padding-tab-event-mobile + .padding-tab-event-mobile {
        margin-left: 8px !important;
    }

    /* (a) + (c) Le bouton remplit son onglet et centre son libellé */
    body.uft-auth-page #pills-tab .nav-link {
        width: 100% !important;
        justify-content: center;
        font-size: 1rem;
        padding: 11px 6px;
    }

    /* (b) Texte blanc sur la pastille verte de l'onglet sélectionné */
    body.uft-auth-page #pills-tab .nav-link.active {
        color: #ffffff;
    }
}


/* -----------------------------------------------------------------------------
   13. CODE OTP (/validate-otp) — MOBILE
   -----------------------------------------------------------------------------
   AVANT : les 6 cases sont dans des `<div class="col-md-2">`. Or `col-md-2` ne
   définit `width: 16.6667%` qu'à partir de 768px. En dessous, ces div n'ont
   AUCUNE règle de largeur : ce sont de simples items flex en `width: auto`,
   donc dimensionnés par leur contenu. Et l'<input> à `width: 100%` dans un
   parent de largeur auto est une référence circulaire -> le navigateur retombe
   sur la largeur intrinsèque de l'input (attribut `size` par défaut = 20,
   soit ~180px).
   Résultat en mobile : 6 cases de ~180px dans une `.row` en `flex-wrap: wrap`
   -> elles s'empilaient sur 3 lignes de 2, énormes, au lieu d'une ligne de 6.

   APRÈS : `--bs-gutter-x: 8px` resserre la gouttière (Bootstrap en dérive tout
   seul les marges négatives de la row ET le padding des cellules, donc les
   bords restent alignés sur le conteneur), `flex: 1 1 0` répartit les 6 cases
   à parts strictement égales, `min-width: 0` autorise l'input à se compresser
   sous sa taille intrinsèque, et la taille de police devient fluide.

   Le desktop (≥768px) n'est pas touché : `col-md-2` reprend la main.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body.uft-auth-page .otp-inputs-row {
        --bs-gutter-x: 8px;
        flex-wrap: nowrap;
    }

    body.uft-auth-page .otp-inputs-row > .col-md-2 {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    body.uft-auth-page .otp-inputs-row .uft-input-text-otp {
        width: 100%;
        min-width: 0;
        padding: 0 2px;
        font-size: clamp(20px, 6.5vw, 34px);
    }

    /* `col-md-5` n'a pas non plus de largeur sous 768px : la colonne du
       formulaire se dimensionnait sur son contenu au lieu de remplir l'écran. */
    body.uft-auth-page .otp-inputs-row,
    body.uft-auth-page .otp-inputs-row ~ * {
        max-width: 100%;
    }
}


/* -----------------------------------------------------------------------------
   12. ZONE D'UPLOAD DE LICENCE (inscription ARBITRE)
   -----------------------------------------------------------------------------
   `padding: 20px 40px` + un libellé long : trop serré en mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body.uft-auth-page .uft-upload-documents-ctnr {
        padding: 18px 14px;
    }

    body.uft-auth-page .uft-upload-documents-ctnr .uft-note-text {
        line-height: 1.35;
    }
}