/* Pages d'authentification.
   .is-login    -> Security/login_content.html.twig
   .is-reset    -> Resetting/request_content.html.twig, Resetting/check_email.html.twig,
                   Resetting/reset_content.html.twig
   .is-register -> registration/usurer/register_content.html.twig + partials d'etape
   Inclusion : {% stylesheets "bundles/wduser/css/auth.css" %} */
#body {
  background: var(--cyan-bg-2); }

/* une regle globale force une autre police sur les balises de titre */
h1, h2, h3, h4, h5, h6 {
  font-family: inherit; }

.auth-page {
  font-family: 'Poppins', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  /* pas de rouge dans les tokens de theme.scss (aucune marque ne le parametre) */
  --red: #C0554A;
  --red-soft: #F7E9E7;
  /* l'oeil de visibilite est injecte par site.js (initDisplayShowPassword) :
     il enveloppe l'input dans un .password-wrapper + un .eye-icon absolu */
  /* conditions du mot de passe : meme brique que change_parameter/parameter.html.twig
     (les etats sont poses en JS via .valid + bascule de l'icone) */
  /* ===== CONSENTEMENTS =====
     communs a l'inscription et au nouveau mot de passe des clients CGP
     (Default/newPassword.html.twig) */
  /* case a cocher isolee (hors bloc de consentements) : le wrapper porte
     l'espacement, et n'est pas un .field car `.field > label` ecraserait la
     mise en forme de .check-row */
  /* liste de cases a cocher (choix multiple d'un champ) : l'espacement est
     porte par la liste, pas par les lignes */
  /* .alert / .alerts sont styles globalement dans SiteBundle style.scss */ }
  .auth-page *, .auth-page *::before, .auth-page *::after {
    box-sizing: border-box; }
  .auth-page a {
    text-decoration: none;
    color: inherit; }
  .auth-page .req {
    color: var(--red); }
  .auth-page .opt {
    font-weight: 400;
    color: var(--ink-muted); }
  .auth-page .page-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 24px 72px; }
  .auth-page .auth-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 44px 48px; }
  .auth-page .auth-title {
    margin: 0 0 20px;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--teal);
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: left; }
  .auth-page .auth-title--spaced {
    margin-bottom: 34px; }
  .auth-page .auth-intro {
    margin: 0 0 30px;
    max-width: 60ch;
    font-size: 14px !important;
    color: var(--ink-soft) !important;
    line-height: 1.6; }
    .auth-page .auth-intro strong {
      font-weight: 600;
      color: var(--ink); }
  .auth-page .auth-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px; }
    .auth-page .auth-head .auth-title,
    .auth-page .auth-head .auth-intro {
      margin: 0; }
  .auth-page .auth-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cyan-bg);
    color: var(--teal-dark);
    display: flex;
    align-items: center;
    justify-content: center; }
    .auth-page .auth-icon .material-icons {
      font-size: 24px; }
  .auth-page .auth-sub {
    margin: 6px 0 0;
    font-size: 13px !important;
    color: var(--ink-muted) !important;
    line-height: 1.6; }
  .auth-page .field {
    display: flex;
    flex-direction: column;
    min-width: 0; }
    .auth-page .field > label {
      display: block;
      margin: 0 0 10px !important;
      font-size: 13.5px !important;
      font-weight: 600;
      color: var(--ink-soft) !important; }
  .auth-page .field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid var(--line);
    padding-bottom: 9px;
    transition: border-color .2s ease;
    /* neutralisation du style Materialize */ }
    .auth-page .field-row:focus-within {
      border-color: var(--teal); }
    .auth-page .field-row input {
      border: 0 !important;
      outline: 0;
      box-shadow: none !important;
      background: transparent;
      margin: 0 !important;
      height: auto !important;
      padding: 0 !important;
      width: 100%;
      font-family: 'Poppins', sans-serif;
      font-size: 14.5px;
      font-weight: 500;
      color: var(--ink); }
      .auth-page .field-row input::placeholder {
        color: var(--ink-muted);
        font-weight: 400; }
  .auth-page .field-row .password-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    position: relative; }
    .auth-page .field-row .password-wrapper .eye-icon {
      position: static;
      transform: none;
      top: auto;
      right: auto;
      color: var(--ink-muted);
      font-size: 19px;
      flex-shrink: 0;
      margin-left: 10px; }
      .auth-page .field-row .password-wrapper .eye-icon:hover {
        color: var(--teal-darker); }
  .auth-page .auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    margin-bottom: 32px; }
  .auth-page .pwd-requirements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 40px;
    margin: 0 0 34px;
    padding: 18px 22px;
    background: var(--cyan-bg-2);
    border-radius: var(--radius); }
  .auth-page .pwd-req {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--ink-muted);
    transition: color .15s ease; }
    .auth-page .pwd-req .material-icons {
      font-size: 17px;
      color: var(--ink-muted);
      flex-shrink: 0;
      transition: color .15s ease; }
    .auth-page .pwd-req.valid {
      color: var(--green); }
      .auth-page .pwd-req.valid .material-icons {
        color: var(--green-light); }
  .auth-page .pwd-req--full {
    grid-column: 1 / -1; }
  .auth-page .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 44px;
    background: linear-gradient(135deg, var(--teal-dark), var(--teal-darker));
    color: #fff;
    border: 0;
    border-radius: var(--radius-pill);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--shadow-cta);
    transition: transform .15s ease;
    line-height: 1.2;
    height: auto;
    /* .disabled est pose/retire par le JS recaptcha ; on n'a pas la classe .btn
       de Materialize, l'etat est donc a gerer ici */
    /* spinner injecte dans le bouton pendant la soumission (loading() dans
       registration/register.html.twig) : le preloader "small" de Materialize fait
       36px + 9px de marge, ce qui doublerait la hauteur du bouton */ }
    .auth-page .btn-primary:hover {
      transform: translateY(-1px); }
    .auth-page .btn-primary.disabled, .auth-page .btn-primary:disabled {
      opacity: .55;
      box-shadow: none;
      pointer-events: none;
      transform: none; }
    .auth-page .btn-primary .preloader-wrapper {
      width: 18px;
      height: 18px;
      margin: 0;
      /* le bouton est bleu : le spinner y serait invisible dans sa couleur
         d'origine (.blueEP, posee par loading()) */
      /* le trait de 3px de Materialize est dessine pour un cercle de 36px */ }
      .auth-page .btn-primary .preloader-wrapper .spinner-layer {
        border-color: #fff; }
      .auth-page .btn-primary .preloader-wrapper .circle {
        border-width: 2px; }
  .auth-page .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    background: #fff;
    color: var(--teal-darker);
    border: 2px solid var(--teal-dark);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
    white-space: nowrap; }
    .auth-page .btn-outline:hover {
      background: var(--teal-dark);
      color: #fff; }
  .auth-page .auth-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 30px; }
  .auth-page .text-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 2px; }
    .auth-page .text-link:hover {
      color: var(--teal-darker); }
  .auth-page .auth-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 62ch;
    background: var(--cyan-bg-2);
    border-left: 3px solid var(--teal);
    border-radius: var(--radius);
    padding: 16px 20px; }
    .auth-page .auth-note .material-icons {
      font-size: 19px;
      color: var(--teal-darker);
      flex-shrink: 0;
      margin-top: 1px; }
    .auth-page .auth-note p {
      margin: 0;
      font-size: 13px !important;
      color: var(--ink-soft) !important;
      line-height: 1.6; }
      .auth-page .auth-note p b {
        font-weight: 600;
        color: var(--ink); }
  .auth-page .auth-help {
    font-size: 13.5px !important;
    color: var(--ink-muted) !important;
    line-height: 1.7; }
    .auth-page .auth-help a {
      color: var(--ink-soft);
      text-decoration: underline;
      text-underline-offset: 2px; }
      .auth-page .auth-help a:hover {
        color: var(--teal-darker); }
  .auth-page .auth-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--cyan-bg);
    border: 1.5px dashed var(--cyan-soft);
    border-radius: var(--radius);
    padding: 22px 26px;
    margin-top: 36px; }
    .auth-page .auth-banner h3 {
      margin: 0 0 4px;
      font-size: 14.5px !important;
      font-weight: 700 !important;
      color: var(--teal-darker); }
    .auth-page .auth-banner p {
      margin: 0;
      max-width: 46ch;
      font-size: 12.5px !important;
      color: var(--ink-soft) !important;
      line-height: 1.6; }
  .auth-page .consent-block {
    margin: 30px 0 8px;
    padding-top: 26px;
    border-top: 1px solid var(--line); }
  .auth-page .check-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    /* meme traitement que les radios du selecteur de type de compte */ }
    .auth-page .check-row:last-child {
      margin-bottom: 0; }
    .auth-page .check-row input[type="checkbox"] {
      position: absolute;
      width: 0;
      height: 0;
      opacity: 0;
      pointer-events: none; }
    .auth-page .check-row input:checked ~ .check-box {
      background: var(--teal-darker);
      border-color: var(--teal-darker); }
      .auth-page .check-row input:checked ~ .check-box::after {
        content: '';
        position: absolute;
        left: 5px;
        top: 1px;
        width: 5px;
        height: 9px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg); }
    .auth-page .check-row input:focus-visible ~ .check-box {
      box-shadow: 0 0 0 3px rgba(30, 160, 195, 0.25); }
  .auth-page .check-field {
    margin: 4px 0 26px; }
  .auth-page .check-list {
    display: flex;
    flex-direction: column;
    gap: 13px; }
    .auth-page .check-list .check-row {
      margin-bottom: 0; }
  .auth-page .check-box {
    position: relative;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    flex-shrink: 0;
    border: 2px solid var(--line);
    border-radius: 5px;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
  .auth-page .check-label {
    font-size: 13px !important;
    color: var(--ink-soft);
    line-height: 1.55; }
    .auth-page .check-label a {
      color: var(--teal-darker);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 2px; }
  .auth-page .alerts {
    margin-bottom: 24px; }
  .auth-page .alerts:empty {
    display: none; }
  @media (max-width: 760px) {
    .auth-page .page-wrap {
      padding: 28px 16px 48px; }
    .auth-page .auth-card {
      padding: 30px 24px; }
    .auth-page .auth-grid {
      grid-template-columns: 1fr;
      gap: 26px; }
    .auth-page .pwd-requirements {
      grid-template-columns: 1fr; }
    .auth-page .btn-primary,
    .auth-page .btn-outline {
      width: 100%; }
    .auth-page .auth-actions {
      justify-content: center; }
    .auth-page .auth-banner {
      flex-direction: column;
      align-items: stretch;
      text-align: center;
      gap: 16px; }
      .auth-page .auth-banner p {
        max-width: none; } }

.auth-page.is-login {
  /* la largeur des cases est en em et s'appuie sur le height + box-sizing
     content-box poses par Materialize : ne pas neutraliser son height */ }
  .auth-page.is-login .forgot-link {
    display: inline-block;
    align-self: flex-start;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 2px; }
    .auth-page.is-login .forgot-link:hover {
      color: var(--teal-darker); }
  .auth-page.is-login .twofa-form {
    max-width: 560px; }
    .auth-page.is-login .twofa-form > label {
      display: block;
      margin: 0 0 12px !important;
      font-size: 13.5px !important;
      font-weight: 600;
      color: var(--ink-soft) !important; }
  .auth-page.is-login .otp-field {
    display: flex;
    align-items: center;
    /* 2 groupes de 3 chiffres */ }
    .auth-page.is-login .otp-field input[type="number"] {
      width: .96em;
      margin: .1em;
      padding: 8px 0 8px;
      font-size: 2.65em;
      text-align: center;
      appearance: textfield;
      -moz-appearance: textfield;
      -webkit-appearance: textfield;
      color: var(--ink);
      border-radius: 8px;
      border: 1px solid var(--line) !important;
      box-shadow: none !important;
      background: #fff;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      transition: border-color .2s ease; }
      .auth-page.is-login .otp-field input[type="number"]:focus {
        border-color: var(--teal) !important;
        box-shadow: 0 0 0 3px rgba(30, 160, 195, 0.15) !important; }
    .auth-page.is-login .otp-field input::-webkit-outer-spin-button,
    .auth-page.is-login .otp-field input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0; }
    .auth-page.is-login .otp-field input[type="number"]:nth-child(n+4) {
      order: 2; }
    .auth-page.is-login .otp-field::before {
      content: '';
      height: 2px;
      width: 12px;
      margin: 0 .35em;
      order: 1;
      background: var(--line);
      border-radius: 2px; }
  @media (max-width: 480px) {
    .auth-page.is-login .otp-field input[type="number"] {
      font-size: 2.45em;
      margin: .08em; }
    .auth-page.is-login .otp-field::before {
      margin: 0 .2em;
      width: 8px; } }

.auth-page.is-reset .field-reset {
  max-width: 480px;
  margin-bottom: 32px; }
.auth-page.is-reset .auth-note {
  margin: 0 0 26px; }
.auth-page.is-reset .auth-help {
  margin: 0 0 30px; }

/* Inscription. Les briques de ce bloc sont communes a toutes les etapes du tunnel
   (fil d'avancement, champs, actions de bas de formulaire) sauf le selecteur de type
   de compte, propre a l'etape 1. */
.auth-page.is-register {
  /* ===== ETAPE HEBERGEE PAR LE PRESTATAIRE DE PAIEMENT (usurer/onboarding) =====
     Le widget d'identite bascule sur une seule colonne (le recapitulatif du
     parcours disparait) des que son iframe fait moins de 1200px : la carte est
     donc elargie au maximum de la largeur du site, et le widget deborde son
     padding horizontal pour recuperer les derniers pixels. Les deux colonnes
     tiennent ainsi jusqu'a ~1250px de fenetre, en dessous le responsive du
     widget prend le relais.

     Le debordement est porte par un conteneur a part (.widget-bleed) et non par
     #lemonway-widget : LemonwayWidget.init() lui pose un `width: 100%` en style
     inline, qui figerait sa largeur a celle du contenu de la carte et decalerait
     tout le widget vers la gauche. Meme raison de ne rien styler sur l'iframe :
     le script lui applique width/height/border/display en inline, et pilote la
     hauteur du conteneur au fil des ecrans (postMessage). */
  /* surtitre de chaque etape : reprend le libelle de la phase du fil d'avancement,
     le titre en dessous etant propre a l'etape (plusieurs etapes par phase) */
  /* ===== FIL D'AVANCEMENT ===== */
  /* ===== TYPE DE COMPTE (etape 1) ===== */
  /* ===== CHAMPS ===== */
  /* les selects natifs (classe browser-default, Materialize les ignore) sont
     habilles comme les inputs, chevron en Material Icons a cote */
  /* ===== ZONE DE TEXTE =====
     Contrairement aux inputs (filet bas), les champs libres multilignes sont
     encadres : la hauteur de la zone doit se lire d'un coup d'oeil. */
  /* ===== RADIOS EN PILULE (civilite) =====
     Materialize habille tout label voisin d'un input[type=radio] (:before/:after =
     la puce, padding-left, height) et style.css impose label{font-size:16px} :
     les deux sont neutralises avant de dessiner la pilule. */
  /* ===== RADIOS EN LISTE (situation personnelle) =====
     Meme puce que les pilules ci-dessus, mais empilees et sans cadre : les
     libelles y sont des phrases, trop longues pour tenir sur une ligne de
     pilules. Materialize est neutralise de la meme facon. */
  /* ===== VILLE DE NAISSANCE (select2 d'autocompletion) =====
     select2 remplace l'input par un .select2-choice : on l'habille comme le
     .combo-field de la maquette (champ encadre, chevron a droite). */
  /* ===== QUESTIONNAIRE DE QUALIFICATION (etape 5) =====
     Les trois questions qui decident du statut averti sont sorties du fil du
     formulaire : leurs libelles sont des phrases, et la reponse n'est pas une
     information de profil mais un test reglementaire. */
  /* ===== BLOC REPETABLE (societes actionnaires, etape 6 PM) =====
     Chaque societe saisie est une carte detachee du fil du formulaire : sans
     cadre, on ne voit plus ou s'arrete une societe et ou commence la suivante. */
  /* bouton secondaire compact (ajouter / supprimer une societe).
     Ce sont des <button type="button"> : comme .back-link, l'habillage natif du
     navigateur doit etre remis a zero. */
  /* ===== BOUTONS ===== */
  /* bas de formulaire des etapes suivantes : retour a gauche, suite a droite */ }
  .auth-page.is-register .auth-card {
    max-width: 680px;
    margin: 0 auto; }
  .auth-page.is-register.is-onboarding {
    /* l'intro n'est plus lue dans une colonne de 680px : la mesure de lecture
       par defaut la reduirait au tiers de la carte */
    /* Le widget reste dans le padding de la carte (il ne le deborde plus) : son
       iframe y perd un peu de largeur, mais le contenu ne vient pas coller au
       bord de la carte. Comme il porte en plus son propre padding interne de
       20px, c'est le bloc de titre qui est decale d'autant pour s'aligner sur
       lui. Contrepartie : le widget passe sur une colonne sous ~1330px de
       fenetre, faute de pouvoir offrir 1200px a l'iframe. */ }
    .auth-page.is-register.is-onboarding .page-wrap {
      max-width: 1360px; }
    .auth-page.is-register.is-onboarding .auth-card {
      max-width: 1360px;
      padding: 40px 32px; }
    .auth-page.is-register.is-onboarding .auth-intro {
      max-width: 96ch; }
    .auth-page.is-register.is-onboarding .eyebrow,
    .auth-page.is-register.is-onboarding .auth-title,
    .auth-page.is-register.is-onboarding .auth-intro {
      margin-left: 20px; }
  .auth-page.is-register .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--teal); }
    .auth-page.is-register .eyebrow::before {
      content: '';
      width: 22px;
      height: 1.5px;
      background: currentColor;
      border-radius: 1px; }
  .auth-page.is-register .auth-title {
    margin: 0 0 8px; }
  .auth-page.is-register .auth-intro {
    margin: 0 0 34px;
    font-size: 13.5px !important; }
  .auth-page.is-register .auth-note {
    margin-bottom: 26px; }
  .auth-page.is-register .stepper {
    display: flex;
    align-items: flex-start;
    margin-bottom: 38px; }
  .auth-page.is-register .step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* trait de liaison vers l'etape suivante */ }
    .auth-page.is-register .step:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 15px;
      left: calc(50% + 20px);
      right: calc(-50% + 20px);
      height: 2px;
      background: var(--line);
      z-index: 0; }
    .auth-page.is-register .step.done:not(:last-child)::after {
      background: var(--teal-dark); }
  .auth-page.is-register .step-circle {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    z-index: 1;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-muted); }
  .auth-page.is-register .step.active .step-circle,
  .auth-page.is-register .step.done .step-circle {
    border-color: var(--teal-dark);
    background: var(--teal-dark);
    color: #fff; }
  .auth-page.is-register .step.done .step-circle .material-icons {
    font-size: 17px; }
  .auth-page.is-register .step-label {
    max-width: 110px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-muted);
    text-align: center;
    line-height: 1.4; }
  .auth-page.is-register .step.active .step-label,
  .auth-page.is-register .step.done .step-label {
    color: var(--teal-darker); }
  .auth-page.is-register .stepper-mobile {
    display: none; }
  .auth-page.is-register .type-toggle {
    display: flex;
    gap: 12px;
    margin-bottom: 34px; }
  .auth-page.is-register .type-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    /* radio masque sans display:none : il reste focusable et la validation HTML5
       du groupe peut s'afficher */ }
    .auth-page.is-register .type-option input[type="radio"] {
      position: absolute;
      width: 0;
      height: 0;
      opacity: 0;
      pointer-events: none; }
    .auth-page.is-register .type-option .type-icon {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      border-radius: 50%;
      background: var(--cyan-bg);
      color: var(--teal-darker);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s ease, color .15s ease; }
      .auth-page.is-register .type-option .type-icon .material-icons {
        font-size: 21px; }
    .auth-page.is-register .type-option .type-text strong {
      display: block;
      font-size: 14px;
      font-weight: 700;
      color: var(--ink); }
    .auth-page.is-register .type-option .type-text span {
      font-size: 11.5px;
      color: var(--ink-muted);
      line-height: 1.5; }
    .auth-page.is-register .type-option:focus-within {
      border-color: var(--teal); }
    .auth-page.is-register .type-option.selected {
      border-color: var(--teal-dark);
      background: var(--cyan-bg-2); }
      .auth-page.is-register .type-option.selected .type-icon {
        background: var(--teal-dark);
        color: #fff; }
  .auth-page.is-register .field {
    margin-bottom: 26px; }
  .auth-page.is-register .field-hint {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--ink-muted); }
  .auth-page.is-register .field-row select {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer; }
  .auth-page.is-register .field-row > .material-icons {
    flex-shrink: 0;
    font-size: 19px;
    color: var(--ink-muted);
    pointer-events: none; }
  .auth-page.is-register .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    /* la marge basse est portee par la grille, pas par les champs qu'elle contient */
    margin-bottom: 26px; }
    .auth-page.is-register .form-grid-2 .field {
      margin-bottom: 0; }
  .auth-page.is-register .field-textarea {
    padding: 12px 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .2s ease; }
    .auth-page.is-register .field-textarea:focus-within {
      border-color: var(--teal); }
    .auth-page.is-register .field-textarea textarea {
      display: block;
      width: 100%;
      /* Materialize impose height:3rem a tout <textarea> */
      height: auto !important;
      min-height: 90px;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      outline: 0;
      box-shadow: none !important;
      background: transparent;
      resize: vertical;
      font-family: 'Poppins', sans-serif;
      font-size: 14.5px;
      font-weight: 500;
      color: var(--ink); }
      .auth-page.is-register .field-textarea textarea::placeholder {
        color: var(--ink-muted);
        font-weight: 400; }
  .auth-page.is-register .radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    /* sorti du flux (sinon le gap de la grille compte les inputs comme des items)
       mais laisse a sa place : le left:-9999px de Materialize fait defiler la page
       quand le navigateur veut y amener le focus */ }
    .auth-page.is-register .radio-group [type="radio"] {
      position: absolute;
      left: auto;
      width: 0;
      height: 0;
      opacity: 0;
      pointer-events: none; }
  .auth-page.is-register [type="radio"] + label.radio-row {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: auto;
    padding: 10px 18px 10px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 13.5px !important;
    line-height: 1.4;
    color: var(--ink-soft) !important;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease; }
    .auth-page.is-register [type="radio"] + label.radio-row:before, .auth-page.is-register [type="radio"] + label.radio-row:after {
      content: none;
      display: none; }
  .auth-page.is-register [type="radio"]:checked + label.radio-row {
    border-color: var(--teal-dark);
    background: var(--cyan-bg-2); }
  .auth-page.is-register .radio-list {
    display: flex;
    flex-direction: column;
    /* les libelles ne prennent que leur largeur : la zone cliquable ne deborde
       pas sur le reste de la ligne */
    align-items: flex-start;
    gap: 14px;
    /* reponses courtes (Oui / Non) : sur une seule ligne */ }
    .auth-page.is-register .radio-list [type="radio"] {
      position: absolute;
      left: auto;
      width: 0;
      height: 0;
      opacity: 0;
      pointer-events: none; }
    .auth-page.is-register .radio-list.is-inline {
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      gap: 28px; }
  .auth-page.is-register [type="radio"] + label.radio-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: auto;
    padding: 0;
    font-size: 13.5px !important;
    line-height: 1.4;
    color: var(--ink-soft) !important;
    cursor: pointer; }
    .auth-page.is-register [type="radio"] + label.radio-item:before, .auth-page.is-register [type="radio"] + label.radio-item:after {
      content: none;
      display: none; }
  .auth-page.is-register .radio-dot {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid var(--line);
    border-radius: 50%;
    transition: border-color .15s ease; }
  .auth-page.is-register [type="radio"]:checked + label.radio-row .radio-dot,
  .auth-page.is-register [type="radio"]:checked + label.radio-item .radio-dot {
    border-color: var(--teal-darker); }
    .auth-page.is-register [type="radio"]:checked + label.radio-row .radio-dot::after,
    .auth-page.is-register [type="radio"]:checked + label.radio-item .radio-dot::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--teal-darker); }
  .auth-page.is-register [type="radio"]:focus-visible + label.radio-row .radio-dot,
  .auth-page.is-register [type="radio"]:focus-visible + label.radio-item .radio-dot {
    box-shadow: 0 0 0 3px rgba(30, 160, 195, 0.25); }
  .auth-page.is-register .field .select2-container {
    width: 100% !important;
    max-width: none;
    /* rien de choisi : le libelle affiche est le placeholder */ }
    .auth-page.is-register .field .select2-container .select2-choice {
      display: flex;
      align-items: center;
      height: auto !important;
      padding: 12px 16px !important;
      border: 1.5px solid var(--line) !important;
      border-radius: var(--radius) !important;
      background: #fff !important;
      box-shadow: none !important;
      font-size: 14.5px;
      font-weight: 500;
      color: var(--ink); }
      .auth-page.is-register .field .select2-container .select2-choice .select2-chosen {
        margin-right: 10px; }
      .auth-page.is-register .field .select2-container .select2-choice .select2-arrow {
        background: transparent;
        border: 0; }
        .auth-page.is-register .field .select2-container .select2-choice .select2-arrow b {
          background-position: 0 1px; }
    .auth-page.is-register .field .select2-container.select2-default .select2-chosen {
      color: var(--ink-muted);
      font-weight: 400; }
    .auth-page.is-register .field .select2-container.select2-container-active .select2-choice {
      border-color: var(--teal) !important; }
    .auth-page.is-register .field .select2-container.select2-dropdown-open .select2-choice {
      border-bottom-left-radius: var(--radius) !important;
      border-bottom-right-radius: var(--radius) !important; }
  .auth-page.is-register .pwd-requirements {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0 0 26px;
    padding: 16px 18px; }
  .auth-page.is-register .pwd-req {
    font-size: 12.5px; }
  .auth-page.is-register .qualification-section {
    margin: 12px 0 32px;
    padding: 26px 28px 24px;
    background: var(--cyan-bg-2);
    border: 1.5px solid var(--cyan-soft);
    border-radius: var(--radius-lg); }
  .auth-page.is-register .qualification-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line); }
    .auth-page.is-register .qualification-intro .material-icons {
      flex-shrink: 0;
      margin-top: 1px;
      font-size: 21px;
      color: var(--teal-darker); }
    .auth-page.is-register .qualification-intro p {
      margin: 0;
      font-size: 13px !important;
      color: var(--ink-soft) !important;
      line-height: 1.65; }
      .auth-page.is-register .qualification-intro p strong {
        font-weight: 600;
        color: var(--teal-darker); }
  .auth-page.is-register .qualifying-question {
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line); }
    .auth-page.is-register .qualifying-question:last-of-type {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: 0; }
    .auth-page.is-register .qualifying-question > p {
      margin: 0 0 12px;
      font-size: 13.5px !important;
      font-weight: 600 !important;
      color: var(--ink-soft) !important;
      line-height: 1.55; }
  .auth-page.is-register .shareholder-card {
    margin: 8px 0 20px;
    padding: 28px 26px 26px;
    background: var(--cyan-bg-2);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg); }
    .auth-page.is-register .shareholder-card .field:last-of-type {
      margin-bottom: 22px; }
  .auth-page.is-register .btn-outline-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1.2;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease; }
    .auth-page.is-register .btn-outline-sm .material-icons {
      font-size: 16px; }
  .auth-page.is-register .btn-remove-shareholder {
    background: var(--red-soft);
    border-color: var(--red-soft);
    color: var(--red); }
    .auth-page.is-register .btn-remove-shareholder:hover {
      border-color: var(--red); }
  .auth-page.is-register .btn-add-shareholder {
    margin-bottom: 8px;
    background: #fff;
    border-color: var(--teal-dark);
    color: var(--teal-darker); }
    .auth-page.is-register .btn-add-shareholder:hover {
      background: var(--cyan-bg-2); }
  .auth-page.is-register .btn-primary {
    width: 100%;
    gap: 8px;
    margin-top: 8px;
    /* l'etat desactive dure tant que le formulaire est incomplet : il est affiche
       en gris plein et non en opacite reduite comme sur les autres pages d'auth */ }
    .auth-page.is-register .btn-primary .material-icons {
      font-size: 18px; }
    .auth-page.is-register .btn-primary.disabled, .auth-page.is-register .btn-primary:disabled {
      background: var(--line);
      color: var(--ink-muted);
      opacity: 1; }
  .auth-page.is-register .form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 36px;
    /* etape sans retour possible : le bouton reste a droite */ }
    .auth-page.is-register .form-actions .btn-primary {
      width: auto;
      margin-top: 0; }
    .auth-page.is-register .form-actions.is-single {
      justify-content: flex-end; }
  .auth-page.is-register .back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* le retour est un <button type="button"> (#form-previous-step, pilote par le
       JS de register.html.twig) : sans cette remise a zero il garde l'habillage
       natif du navigateur */
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink-soft);
    cursor: pointer;
    transition: color .15s ease;
    /* spinner injecte a la place du libelle pendant le chargement de l'etape
       precedente (loading() dans registration/register.html.twig) : meme reduction
       que dans .btn-primary, mais le trait blanc y serait invisible */ }
    .auth-page.is-register .back-link:hover {
      color: var(--teal-darker); }
    .auth-page.is-register .back-link .material-icons {
      font-size: 18px; }
    .auth-page.is-register .back-link .preloader-wrapper {
      width: 18px;
      height: 18px;
      margin: 0; }
      .auth-page.is-register .back-link .preloader-wrapper .spinner-layer {
        border-color: var(--teal-dark); }
      .auth-page.is-register .back-link .preloader-wrapper .circle {
        border-width: 2px; }
  @media (max-width: 760px) {
    .auth-page.is-register {
      /* sur mobile le widget est de toute facon sur une colonne : on lui rend
         toute la largeur (son padding interne tient lieu de marge) et le bloc de
         titre reprend l'alignement de la carte */ }
      .auth-page.is-register .stepper {
        display: none; }
      .auth-page.is-register.is-onboarding .auth-card {
        padding: 26px 16px; }
      .auth-page.is-register.is-onboarding .widget-bleed {
        margin: 0 -16px; }
      .auth-page.is-register.is-onboarding .eyebrow,
      .auth-page.is-register.is-onboarding .auth-title,
      .auth-page.is-register.is-onboarding .auth-intro {
        margin-left: 0; }
      .auth-page.is-register .stepper-mobile {
        display: block;
        margin-bottom: 30px; }
        .auth-page.is-register .stepper-mobile .sm-top {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 12px;
          margin-bottom: 10px;
          font-size: 12px;
          font-weight: 700;
          color: var(--teal-darker); }
          .auth-page.is-register .stepper-mobile .sm-top span:last-child {
            font-weight: 500;
            color: var(--ink-muted); }
        .auth-page.is-register .stepper-mobile .sm-bar {
          height: 6px;
          border-radius: var(--radius-pill);
          background: var(--line);
          overflow: hidden; }
        .auth-page.is-register .stepper-mobile .sm-bar-fill {
          height: 100%;
          border-radius: var(--radius-pill);
          background: linear-gradient(90deg, var(--teal-dark), var(--teal-bright)); }
      .auth-page.is-register .type-toggle {
        flex-direction: column; }
      .auth-page.is-register .form-grid-2 {
        grid-template-columns: 1fr;
        gap: 20px; }
      .auth-page.is-register .qualification-section {
        padding: 20px 18px; }
      .auth-page.is-register .shareholder-card {
        padding: 22px 18px 20px; }
      .auth-page.is-register .form-actions {
        flex-direction: column-reverse;
        align-items: stretch; }
        .auth-page.is-register .form-actions .btn-primary {
          width: 100%; }
      .auth-page.is-register .back-link {
        justify-content: center;
        padding: 10px 0; } }
  @media (max-width: 480px) {
    .auth-page.is-register .auth-title {
      font-size: 22px !important; }
    .auth-page.is-register .type-option {
      padding: 14px; } }

/*# sourceMappingURL=auth.css.map */