/* 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) */
  /* .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: 0.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 0.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 0.15s ease;
}
.auth-page .pwd-req .material-icons {
  font-size: 17px;
  color: var(--ink-muted);
  flex-shrink: 0;
  transition: color 0.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: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform 0.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: 0.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: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.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 .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: 0.96em;
  margin: 0.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 0.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, .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 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: 0.08em;
  }
  .auth-page.is-login .otp-field::before {
    margin: 0 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). */
  /* ===== CONSENTEMENTS ===== */
  /* 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 */
  /* ===== 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: 0.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 0.15s ease, background 0.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 0.15s ease, color 0.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 0.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 0.15s ease, background 0.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 0.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, .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 .consent-block {
  margin: 30px 0 8px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.auth-page.is-register .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.is-register .check-row:last-child {
  margin-bottom: 0;
}
.auth-page.is-register .check-row input[type="checkbox"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.auth-page.is-register .check-row input:checked ~ .check-box {
  background: var(--teal-darker);
  border-color: var(--teal-darker);
}
.auth-page.is-register .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.is-register .check-row input:focus-visible ~ .check-box {
  box-shadow: 0 0 0 3px rgba(30, 160, 195, .25);
}
.auth-page.is-register .check-field {
  margin: 4px 0 26px;
}
.auth-page.is-register .check-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.auth-page.is-register .check-list .check-row {
  margin-bottom: 0;
}
.auth-page.is-register .check-box {
  position: relative;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  flex-shrink: 0;
  border: 2px solid var(--line);
  border-radius: 5px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-page.is-register .check-label {
  font-size: 13px !important;
  color: var(--ink-soft);
  line-height: 1.55;
}
.auth-page.is-register .check-label a {
  color: var(--teal-darker);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.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: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.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 0.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;
  }
}