/* ===========================================================================
   Fallon — écrans d'entrée (connexion · inscription candidat · inscription recruteur)
   ===========================================================================

   🚨 POURQUOI CE FICHIER EXISTE

   Ces trois écrans sont **autonomes** : chacun a son propre `<!DOCTYPE>`, son propre
   `<head>`, son propre bloc `<style>`. Ils rendent pourtant exactement les mêmes
   composants — la même carte, les mêmes champs, le même séparateur « Ou », le même
   bouton Google, le même bouton d'action, le même œil de mot de passe.

   Recopiés dans deux fichiers, ils avaient déjà divergé :

   | | connexion | inscription |
   |---|---|---|
   | police | **Poppins** | Plus Jakarta Sans |
   | bleu de marque | **#2dbde7** (ancien, à 23 unités du vrai) | `--fl-blue` |
   | hauteur de champ | **48px** | 44px |
   | hauteur de bouton | **48px** | 46px |
   | feuilles mortes | selectize + nice-select | — (retirées le 31/08) |

   L'inscription avait été reprise le 31/08/2026 ; la connexion, non. Le futur
   utilisateur passait donc d'un écran à l'autre en changeant de police et de bleu, sur
   le premier parcours qu'il voit du produit.

   La règle vit donc ici plutôt que dans deux `<style>` : c'est le même geste sur les
   trois écrans, et deux copies finissent toujours par diverger — c'est ce qui vient
   d'arriver.

   ⚠️ AUCUNE COULEUR DE MARQUE EN DUR. Bleus, marine, gris et ombres viennent des
   variables de `fallon-ui-v2.css`, qui doit être chargée AVANT ce fichier. Les halos
   passent par `rgba(var(--fl-blue-rgb), …)` : un `rgba()` écrit à la main est invisible
   à qui cherche un `#hex`, et c'est exactement ainsi que l'ancien bleu a survécu **cinq
   fois** sur l'inscription après que son test l'a déclarée nette.
   Seule exception, assumée : les `rgba(255,255,255,…)` du panneau de présentation, qui
   ne sont pas une couleur mais un voile clair posé sur son dégradé.

   ⚠️ Le référentiel est chargé pour sa SEULE déclaration `:root` — tout le reste y est
   cadré sous `.fl-app`, que ces pages ne portent pas. Il ne restyle donc rien ici, et
   ces écrans gardent leur propre balisage Bootstrap 4 (celui du thème historique).
   =========================================================================== */

/* ── Fond de page ───────────────────────────────────────────────────────── */

.fl-auth-body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--fl-ink);
    background:
        radial-gradient(900px 500px at 100% -10%, rgba(var(--fl-blue-rgb), .18), transparent 60%),
        radial-gradient(700px 500px at -10% 110%, rgba(var(--fl-blue-rgb), .12), transparent 55%),
        var(--fl-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ── Bouton « retour accueil » ──────────────────────────────────────────── */

.fl-auth-home {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 50;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--fl-surface);
    color: var(--fl-blue-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: var(--fl-shadow-sm);
    transition: transform .15s ease;
}

.fl-auth-home:hover {
    transform: translateY(-2px);
    color: var(--fl-blue-600);
}

/* ── Carte ──────────────────────────────────────────────────────────────
   ⚠️ `min-height` et non `height` : sur un téléphone en portrait, une carte
   d'inscription dépasse l'écran et doit pouvoir défiler — c'est le défaut déjà
   corrigé sur la connexion, où `vh-100` renvoyait « Se connecter » sous la ligne
   de flottaison et obligeait à basculer en paysage pour l'atteindre. */

/* 🐛 `100vh` datait du temps où la page était un DOCUMENT AUTONOME : elle occupait
   l'écran entier, il n'y avait rien d'autre. Sous le shell public, l'en-tête (68 px) et
   le pied de page s'ajoutent — la page dépassait alors la fenêtre d'autant, et il fallait
   défiler pour rien sur un écran où tout tenait.
   `62vh` laisse la carte respirer sans imposer de défilement. */
.fl-auth-section {
    min-height: 62vh;
    display: flex;
    align-items: center;
    padding: 22px 16px;
}

.fl-auth-card {
    width: 100%;
    margin: 0 auto;
    background: var(--fl-surface);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--fl-shadow-lg);
}

/* Inscription : deux colonnes, le pitch à gauche. */
.fl-auth-card--split {
    max-width: 1060px;
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
}

/* Connexion : une carte étroite et centrée.
   ⚠️ Pas de panneau de pitch ici, et c'est délibéré : sur `/connexion` on ne sait pas
   encore si le visiteur est candidat ou recruteur — le panneau ne pourrait donc lui
   promettre ni « un vivier de candidats » ni « faites évoluer votre carrière ». Un
   panneau neutre serait du remplissage. C'est la chrome partagée (fond, carte, champs,
   boutons, police, palette) qui fait la parenté, pas la silhouette. */
.fl-auth-card--etroit {
    max-width: 480px;
}

@media (max-width: 900px) {
    .fl-auth-card--split { grid-template-columns: 1fr; }
    .fl-auth-pitch { display: none; }
}

/* ── Panneau de présentation (inscription) ──────────────────────────────── */

.fl-auth-pitch {
    position: relative;
    color: var(--fl-surface);
    padding: 48px 42px;
    background:
        radial-gradient(420px 240px at 120% 0%, rgba(255, 255, 255, .16), transparent 60%),
        linear-gradient(160deg, var(--fl-blue) 0%, var(--fl-blue-600) 52%, var(--fl-navy) 145%);
    overflow: hidden;
}

.fl-auth-pitch::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.fl-auth-pitch__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 7px 14px;
    border-radius: var(--fl-r-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.fl-auth-pitch__title {
    font-size: 27px;
    font-weight: 800;
    line-height: 1.22;
    margin: 0 0 14px;
}

.fl-auth-pitch__sub {
    font-size: 14.5px;
    line-height: 1.6;
    opacity: .92;
    margin: 0 0 30px;
}

.fl-auth-pitch__list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1;
}

.fl-auth-pitch__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    line-height: 1.45;
    margin-bottom: 16px;
}

.fl-auth-pitch__list .ic {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-top: 1px;
}

/* ── Colonne formulaire ─────────────────────────────────────────────────── */

.fl-auth-col { padding: 30px 40px 26px; }

@media (max-width: 575.98px) {
    .fl-auth-col { padding: 28px 22px; }
}

.fl-auth-logo {
    text-align: center;
    margin-bottom: 8px;
}

.fl-auth-logo img {
    max-width: 150px;
    width: 100%;
    height: auto;
}

.fl-auth-heading {
    text-align: center;
    font-weight: 800;
    font-size: 20px;
    color: var(--fl-navy);
    margin: 0 0 4px;
}

.fl-auth-legal {
    text-align: center;
    font-size: 12px;
    color: var(--fl-ink-2);
    line-height: 1.5;
    margin: 0 auto 14px;
    max-width: 420px;
}

.fl-auth-legal a {
    color: var(--fl-blue-600);
    text-decoration: underline !important;
}

/* ── Séparateur « Ou » ──────────────────────────────────────────────────── */

.fl-auth-form .hr-text {
    position: relative;
    border: none;
    height: 1px;
    background: var(--fl-line);
    margin: 4px 0;
}

.fl-auth-form .hr-text::before {
    content: attr(data-content);
    display: inline-block;
    background: var(--fl-surface);
    font-weight: 600;
    font-size: .8rem;
    color: var(--fl-ink-2);
    border-radius: var(--fl-r-pill);
    padding: .2rem 1.4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ── Bouton Google ──────────────────────────────────────────────────────── */

.fl-auth-form .btn-light {
    background: var(--fl-surface);
    border: 1.5px solid var(--fl-line) !important;
    border-radius: 12px;
    height: 46px;
    font-weight: 600;
    color: var(--fl-ink);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.fl-auth-form .btn-light:hover {
    border-color: var(--fl-blue) !important;
    box-shadow: 0 8px 20px rgba(var(--fl-blue-rgb), .14);
    transform: translateY(-1px);
}

/* ── Champs ─────────────────────────────────────────────────────────────── */

.fl-auth-form label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fl-ink);
    margin-bottom: 5px;
}

.fl-auth-form .form-group { margin-bottom: 12px; }
.fl-auth-form .form-group .input-group { margin-bottom: 0 !important; }

.fl-auth-form .form-control {
    border: 1.5px solid var(--fl-line);
    border-radius: 12px;
    height: 44px;
    background: var(--fl-surface-2);
    font-size: 14px;
    color: var(--fl-ink);
    box-shadow: none;
}

.fl-auth-form textarea.form-control { height: auto; }
.fl-auth-form .form-control::placeholder { color: var(--fl-ink-3); }

.fl-auth-form .input-group {
    border-radius: 12px;
    transition: box-shadow .15s ease;
}

.fl-auth-form .input-group-text {
    background: var(--fl-surface-2);
    border: 1.5px solid var(--fl-line);
    border-right: none;
    border-radius: 12px 0 0 12px;
    color: var(--fl-blue-600);
    min-width: 46px;
    justify-content: center;
    font-size: 17px;
}

.fl-auth-form .input-group .form-control {
    border-left: none;
    border-radius: 0 12px 12px 0;
}

/* Halo unifié au focus, sur tout le groupe — pas sur le seul `input`, sinon la
   pastille d'icône reste en dehors et le champ paraît coupé en deux. */
.fl-auth-form .input-group:focus-within { box-shadow: 0 0 0 4px rgba(var(--fl-blue-rgb), .15); }
.fl-auth-form .input-group:focus-within .input-group-text { border-color: var(--fl-blue); }
.fl-auth-form .input-group:focus-within .form-control { border-color: var(--fl-blue); background: var(--fl-surface); }

.fl-auth-form .form-control:focus {
    outline: none !important;
    border-color: var(--fl-blue) !important;
    box-shadow: none !important;
    background: var(--fl-surface);
}

/* Téléphone (intl-tel-input) : champ seul, bord complet. */
.fl-auth-form .phone-intl-input { border-radius: 12px; }
.fl-auth-form .iti:focus-within {
    box-shadow: 0 0 0 4px rgba(var(--fl-blue-rgb), .15);
    border-radius: 12px;
}

.fl-auth-form .iti { width: 100%; }
.fl-auth-form .iti__country-list { z-index: 2000; }

/* ── Mot de passe + œil ─────────────────────────────────────────────────── */

.password-group { position: relative; }

.password-group .form-control {
    padding-right: 42px;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* ⚠️ Un `<button>`, pas un `<i>` : l'œil est une commande, il doit être atteignable
   au clavier et porter un nom accessible. */
.password-group .eye-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--fl-ink-3);
    font-size: 18px;
    cursor: pointer;
}

.password-group .eye-toggle:hover { color: var(--fl-ink); }
.password-group .eye-toggle:focus-visible {
    outline: 2px solid var(--fl-blue);
    outline-offset: 1px;
}

/* ── Action principale ──────────────────────────────────────────────────── */

.connect-btn {
    border: none !important;
    color: var(--fl-surface) !important;
    background: var(--fl-grad-blue) !important;
    border-radius: 12px !important;
    height: 46px;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 10px 22px rgba(var(--fl-blue-rgb), .35);
    transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}

.connect-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(var(--fl-blue-rgb), .45);
    color: var(--fl-surface) !important;
}

.connect-btn:disabled {
    opacity: .55;
    box-shadow: none;
    cursor: not-allowed;
}

/* ── Bascule vers l'inscription (connexion) ─────────────────────────────── */

.fl-auth-trait {
    border: none;
    height: 1px;
    background: var(--fl-line);
    margin: 26px 0 16px;
}

.fl-auth-membre {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--fl-ink);
    margin: 0 0 14px;
}

/* ── Actions secondaires (Candidat / Recruteur sur la connexion) ────────── */

.fl-auth-choix {
    display: block;
    width: 100%;
    border: 1.5px solid var(--fl-line);
    border-radius: 12px;
    padding: 10px 0;
    font-weight: 600;
    color: var(--fl-navy);
    background: var(--fl-surface);
    text-align: center;
    transition: border-color .15s ease, color .15s ease, transform .15s ease;
}

.fl-auth-choix:hover {
    border-color: var(--fl-blue);
    color: var(--fl-blue-600);
    transform: translateY(-1px);
    text-decoration: none;
}

/* ── Renvoi vers l'écran jumeau ─────────────────────────────────────────── */

.fl-auth-bascule {
    text-align: center;
    margin-top: 18px;
    font-size: 14px;
    color: var(--fl-ink-2);
}

/* ⚠️ Même traitement que « Mot de passe oublié ? ». Celui-ci est un lien au fil d'une
   phrase — l'exception « inline » de WCAG 2.5.8 s'y applique — mais c'est le seul geste
   de sortie de la page, et il se prend au pouce. Rembourrage repris sur la marge : la
   cible passe à 30 px, la ligne ne bouge pas. */
.fl-auth-bascule a {
    display: inline-block;
    padding: 5px 4px;
    margin: -5px -4px;
    color: var(--fl-blue-600);
    font-weight: 600;
    text-decoration: none;
}

.fl-auth-bascule a:hover { text-decoration: underline; }

/* Lien discret posé sur une rangée de champ (« Mot de passe oublié ? »).
   🐛 Mesuré à **20 px** de haut, sous les 24 px de WCAG 2.2 (SC 2.5.8). Ce n'est pas un
   lien au fil d'une phrase — l'exception ne s'applique pas : c'est une action isolée, au
   bout d'une rangée, qu'on atteint au pouce. Le rembourrage l'amène à 30 px SANS rien
   changer à l'aspect (le fond est transparent) ; la marge négative le reprend sur la
   rangée pour que la hauteur de celle-ci ne bouge pas d'un pixel.
   Même correctif que `.btn-link-fallon` sur « Offres & Tarifs » et que les liens du pied
   de page du shell public. */
.fl-auth-bascule-lien {
    display: inline-block;
    padding: 5px 4px;
    margin: -5px -4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fl-blue-600);
    text-decoration: none;
}

.fl-auth-bascule-lien:hover {
    color: var(--fl-blue-600);
    text-decoration: underline;
}

/* ── Divers ─────────────────────────────────────────────────────────────── */

.double-bounce1,
.double-bounce2 { background-color: var(--fl-blue) !important; }

/* --------------------------------------------------------------------------
   Pont Bootstrap 4 → 5
   --------------------------------------------------------------------------
   🚨 Les écrans d'entrée chargeaient `theme/css/bootstrap.min.css` et
   `theme/css/style.css` — le thème du site ANTILLES. Sous le shell public, ces
   deux feuilles viennent après le référentiel et gagnent : mesuré sur /connexion,
   le titre repassait en « Nunito » et le `min-height` de l'en-tête tombait à 0.
   Elles sont retirées.

   `.form-group` était la seule classe de Bootstrap 4 dont le balisage dépendait
   encore et que Bootstrap 5 ne fournit plus. Elle ne valait qu'une marge basse :
   on la repose ici plutôt que de recharger 190 Ko de feuille pour une déclaration.
   -------------------------------------------------------------------------- */
.fl-auth-body .form-group { margin-bottom: 1rem; }
.fl-auth-body .form-group:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Les deux cartes de profil (bas de la connexion) et les trois bénéfices
   (bas de l'inscription) — repris d'asako.mg.
   --------------------------------------------------------------------------
   Deux liens nommant un statut (« Candidat », « Recruteur ») disaient QUI on est ;
   deux cartes nommant le geste disent ce qu'on VIENT FAIRE. C'est ce que cherche
   quelqu'un qui n'a pas encore de compte.
   -------------------------------------------------------------------------- */
.fl-auth-profils {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.fl-auth-profil {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 14px;
    border: 1px solid var(--fl-line);
    border-radius: 14px;
    background: var(--fl-surface);
    text-align: center;
    text-decoration: none;
    transition: border-color .18s var(--fl-ease), transform .18s var(--fl-ease), box-shadow .18s var(--fl-ease);
}
.fl-auth-profil:hover {
    border-color: rgba(var(--fl-blue-rgb), .5);
    transform: translateY(-2px);
    box-shadow: var(--fl-shadow-sm);
    text-decoration: none;
}
.fl-auth-profil__i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--fl-pink-soft);
    color: var(--fl-pink);
}
.fl-auth-profil__i--bleu { background: var(--fl-blue-soft); color: var(--fl-blue-600); }
.fl-auth-profil__i svg { width: 20px; height: 20px; }
.fl-auth-profil__t { font-size: 14px; font-weight: 700; color: var(--fl-ink); }
.fl-auth-profil__s { font-size: 12px; font-weight: 500; color: var(--fl-ink-3); line-height: 1.4; }

/* Sous 380 px, deux cartes côte à côte laissent quatre mots par ligne : elles s'empilent. */
@media (max-width: 379.98px) {
    .fl-auth-profils { grid-template-columns: minmax(0, 1fr); }
}

/* Les trois bénéfices : ce que le formulaire rapporte, à l'endroit où l'on hésite. */
.fl-auth-benefices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    margin: 18px 0 0;
    padding: 14px 8px;
    border-top: 1px solid var(--fl-line);
}
.fl-auth-benefices li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fl-ink-2);
    line-height: 1.35;
}
.fl-auth-benefices span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--fl-pink-soft);
    color: var(--fl-pink);
}
.fl-auth-benefices svg { width: 16px; height: 16px; }

/* L'écran de CHOIX du profil (`/inscription/type`) : ce sont les mêmes cartes qu'au bas de
   la connexion, mais elles y sont l'objet de la page et non un renvoi. Elles respirent
   davantage — c'est le seul geste qu'on y fait. */
.fl-auth-profils--large { gap: 16px; margin-top: 6px; }
.fl-auth-profils--large .fl-auth-profil { padding: 26px 18px; gap: 8px; }
.fl-auth-profils--large .fl-auth-profil__i { width: 52px; height: 52px; border-radius: 14px; }
.fl-auth-profils--large .fl-auth-profil__i svg { width: 24px; height: 24px; }
.fl-auth-profils--large .fl-auth-profil__t { font-size: 15px; }
.fl-auth-profils--large .fl-auth-profil__s { font-size: 12.5px; }

/* --------------------------------------------------------------------------
   Bandeau de réassurance, chiffres du panneau, et sous-titre du bouton
   --------------------------------------------------------------------------
   Repris de la maquette du 04/09/2026 (`public/vitrine-v2/inscription-*.html`).
   Trois éléments seulement : ce sont ceux qui répondent aux objections qu'on se
   fait devant un formulaire — combien de temps, combien ça coûte, et qu'est-ce
   qui se passe quand je clique.
   -------------------------------------------------------------------------- */

.fl-trustbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 30px;
    padding: 16px 20px 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fl-ink-2);
}
.fl-trustbar span { display: inline-flex; align-items: center; gap: 7px; }
.fl-trustbar i { color: var(--fl-green); font-size: 15px; }

/* Sous 576 px, trois affirmations côte à côte deviennent trois fragments illisibles :
   elles s'empilent, alignées à gauche pour se lire comme une liste. */
@media (max-width: 575.98px) {
    .fl-trustbar { flex-direction: column; align-items: flex-start; gap: 7px; padding: 14px 18px 0; font-size: 12.5px; }
}

/* Les chiffres du bas de panneau. ⚠️ `margin-top: auto` : le panneau est plus haut que
   son contenu, et ils doivent se poser au BAS — pas flotter sous la liste. */
.fl-auth-pitch__preuves {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    margin-top: auto;
    padding-top: 30px;
    position: relative;
    z-index: 1;
}
.fl-auth-pitch__preuves .v {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    /* Chiffres à chasse fixe : sans cela, deux nombres de même longueur n'ont pas la même
       largeur et les trois colonnes dansent d'un écran à l'autre. */
    font-variant-numeric: tabular-nums;
}
.fl-auth-pitch__preuves .l {
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 600;
    opacity: .82;
    line-height: 1.3;
}

/* ⚠️ Le panneau devient une colonne pour que `margin-top: auto` ait un sens : sans
   `flex-direction: column`, la marge automatique pousserait horizontalement.

   🐛 **Cadrée au-dessus de 900 px.** Écrite sans media query, cette règle venait APRÈS
   `@media (max-width: 900px) { .fl-auth-pitch { display: none } }` et gagnait donc : le
   panneau réapparaissait sur téléphone, ajoutant huit cents pixels de défilement avant
   le premier champ. Mesuré — `display` valait `flex` à 375 px. */
@media (min-width: 901px) {
    .fl-auth-pitch { display: flex; flex-direction: column; }
}

/* La ligne sous l'action. `display: block` : dans un `<button>`, un `<small>` reste sinon
   sur la même ligne que le libellé et se lit comme une incise. */
.connect-btn small {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 500;
    opacity: .85;
}

/* --------------------------------------------------------------------------
   Trois correctifs du 04/09/2026, signalés sur capture
   -------------------------------------------------------------------------- */

/* 🐛 **La pastille d'icône ne se replie plus, même sans icône.**
   `mdi-account-tie` n'existe pas dans la version de Material Design Icons servie :
   son `::before` vaut `content: none` et l'élément mesure 0 × 0. La pastille de la
   civilité tombait donc à **15 px** quand ses voisines faisaient 41 — la « boîte
   vide » à gauche du champ.

   Le glyphe est corrigé dans la vue, mais la règle reste : c'est la garde. Une icône
   absente ne lève aucune erreur, et la prochaine passera aussi inaperçue.
   `align-self: stretch` fait suivre la hauteur du groupe, quel que soit le contenu. */
.fl-auth-body .input-group-prepend { display: flex; }
.fl-auth-body .input-group-text { align-self: stretch; align-items: center; height: auto; }

/* 🐛 **Le sous-titre du bouton était coupé.** `.connect-btn` avait une hauteur FIXE de
   46 px, héritée du temps où il ne portait qu'un libellé sur une ligne. Depuis qu'il
   porte « Sans engagement · aucune carte bancaire », son contenu déborde — mesuré :
   `scrollHeight > clientHeight`, et la seconde ligne passait sous le bord.
   `min-height` conserve la mesure d'origine pour les boutons d'une seule ligne. */
.connect-btn {
    height: auto !important;
    min-height: 46px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.25;
}

/* Le panneau de présentation s'éclaircit — demande de Ladina (04/09/2026), qui trouvait
   la v1 plus juste en couleur. Le dégradé descendait jusqu'au marine (`--fl-navy` à
   145 %), ce qui assombrissait tout le bas du panneau et écrasait les chiffres qu'on y a
   posés. Il reste maintenant dans les deux bleus de la charte.
   ⚠️ Les couleurs viennent des variables, comme partout : c'est la COURSE du dégradé qui
   change, pas la palette. */
.fl-auth-pitch {
    background:
        radial-gradient(420px 240px at 120% 0%, rgba(255, 255, 255, .22), transparent 62%),
        linear-gradient(160deg, var(--fl-blue) 0%, var(--fl-blue-600) 100%);
}

/* --------------------------------------------------------------------------
   Quatre correctifs du 04/09/2026, signalés sur capture
   -------------------------------------------------------------------------- */

/* 🐛 **Le titre du panneau ressortait en MARINE sur le bleu.**
   Le panneau déclare bien sa couleur (`.fl-auth-pitch { color: var(--fl-surface) }`),
   mais le titre est un `<h2>` et le référentiel pose
   `.fl-app h2 { color: var(--fl-navy) }` — une couleur EXPLICITE bat toujours une
   couleur héritée, quelle que soit la spécificité. Mesuré : `rgb(15, 42, 71)` sur un
   panneau dont la couleur de texte est `rgb(255, 255, 255)`.

   ⚠️ `color: inherit` plutôt qu'un blanc écrit ici : la couleur du panneau reste
   déclarée à UN seul endroit, et un panneau clair (thème futur) suivrait tout seul. */
.fl-auth-pitch :is(h1, h2, h3) { color: inherit; }

/* 🐛 **La bordure intérieure de la civilité.**
   select2 remplace le `<select>` par sa propre boîte, qui porte sa bordure et son
   rayon de 12 px — À L'INTÉRIEUR d'un `.input-group` qui a déjà les siens. On lisait
   donc deux traits et deux arrondis, et la pastille d'icône paraissait détachée du
   champ. Mesuré avant : `.select2-selection` à `1px solid var(--fl-line)` et
   `border-radius: 12px`, posée à 45 px du bord gauche du groupe.

   Même traitement que `.input-group .form-control` juste au-dessus : le bord gauche
   part, le rayon gauche aussi, le groupe redevient un seul objet. La largeur de trait
   passe à 1.5 px pour que la civilité ait exactement le même trait que ses voisines.

   ⚠️ Spécificité : (0,4,0) — il faut battre `.reg-body .select2-container--default
   .select2-selection--single` (0,3,0) du référentiel, qui vient après dans la cascade. */
.fl-auth-form .input-group .select2-container .select2-selection {
    border-width: 1.5px;
    border-left: none;
    border-radius: 0 12px 12px 0;
}

/* L'état ouvert/focus de select2 repose ses bordures : sans ce jumeau, le bord gauche
   et le rayon reviendraient au premier clic. Et le halo est déjà porté par le GROUPE
   (`:focus-within`) — celui de select2 ferait un second anneau, décalé. */
.fl-auth-form .input-group .select2-container--open .select2-selection,
.fl-auth-form .input-group .select2-container--focus .select2-selection {
    border-left: none;
    border-radius: 0 12px 12px 0;
    box-shadow: none;
}

/* ── Le rythme vertical du formulaire ───────────────────────────────────────
   🐛 Les rangées de champs se TOUCHAIENT : mesuré, le libellé d'une rangée commençait
   exactement où finissait le champ de la précédente (0 px), pendant que la rangée
   « Civilité / Date de naissance » en laissait 62 (sa phrase d'aide) et que le bouton
   se collait à 8 px du mot de passe pour 18 px sous lui. Quatre écarts différents sur
   la même colonne.

   Le rythme vit sur la RANGÉE (`row-gap`) et non sur chaque champ : une seule valeur,
   et un champ ajouté demain hérite du bon écart sans qu'on y pense. C'est la règle déjà
   posée pour « Mon profil » candidat (`d-grid gap-4` sur le formulaire).

   🚨 Les `mb-*` de Bootstrap ont dû partir du BALISAGE, ils ne peuvent pas être
   surchargés : ils sont en `!important` et S'AJOUTAIENT à la gouttière. Mesuré — la
   rangée « Civilité / Date de naissance » faisait 105 px contre 68 pour ses voisines,
   dont 16 px de `mb-3` oublié sur un seul des deux `.form-group`. C'est le piège déjà
   documenté pour `mt-4` sur les barres d'actions.

   La règle ci-dessous neutralise, elle, les 12 px hérités de `.fl-auth-form .form-group`
   plus haut dans cette feuille — celle-là n'est pas en `!important`, elle se surcharge. */
.fl-auth-form form .row { row-gap: 16px; }
.fl-auth-form form .row > [class*="col-"] > .form-group { margin-bottom: 0; }

/* Le bloc de saisie manuelle de l'entreprise (SIRET non diffusible) n'est pas une rangée
   de grille : sans gouttière propre, ses quatre champs se toucheraient. Il portait ses
   propres `mb-2` (8 px), soit une TROISIÈME valeur d'espacement dans le même formulaire.
   ⚠️ `display: grid` ne rouvre pas le bloc : `.d-none` est en `!important`. */
.fl-auth-form #company-manual { display: grid; gap: 14px; }

/* La phrase d'aide sous la date se resserre : à deux lignes elle faisait de sa rangée
   la plus haute du formulaire de 63 px, et la colonne voisine (Civilité) se retrouvait
   avec autant de vide sous son champ. */
.fl-auth-form .fl-auth-aide {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--fl-ink-2);
}

/* Le trait des bénéfices : la MÊME gouttière de part et d'autre du trait — 16 px, celle
   du reste de la colonne. Il portait 18 px au-dessus pour 14 px en dessous : l'écart ne
   valait donc celui d'aucune autre rangée, ni des deux côtés du trait qu'il dessine. */
.fl-auth-benefices { margin-top: 16px; padding: 16px 8px 0; }
