/* ==========================================================================
   forms.css — myOptions Refonte 2026
   Système formulaires (variante A validée 27/04) + pages dédiées (login).
   À charger APRÈS header.css.
   ========================================================================== */


/* --- Font reset : forcer Stack Sans dans toute la zone login/form
       (le legacy myoptionsna.css fait font-family: Geist sur h4,h5,p,a,li,ol
       — on bat sa spécificité avec un sélecteur descendant) --- */
.mo-login,
.mo-login p,
.mo-login a,
.mo-login li,
.mo-login label,
.mo-login span,
.mo-form,
.mo-form p,
.mo-form a,
.mo-form label,
.mo-form input,
.mo-form button {
  font-family: var(--font-primary);
}
.mo-login__title,
.mo-login__aside-title {
  font-family: var(--font-secondary);
}

/* ==========================================================================
   11. PAGE LOGIN — refonte 27 avril 2026
   Composition sobre, palette validée v3 (ivoire, encre, ocre brûlé, pierre).
   Système formulaires variante A (border complète, radius 8px, focus ocre).
   Hex en dur ici car la migration vers tokens.css validés v3 est un chantier
   à part — pointer vers Refonte options/01-Charte/Palette-couleurs-validee-v3.md
   ========================================================================== */

.mo-login {
  background: var(--neutre-50);
  padding: 64px 0 80px;
  min-height: 60vh;
}

.mo-login__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter, 20px);
  box-sizing: border-box;
}

/* .mo-login__breadcrumb (déprécié 2026-04-27) — remplacé par .mo-breadcrumb
   dans header.css. Voir 01-Charte/Composants/Composants-critiques-v2.md §4. */

.mo-login__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

/* ----- Main column ----- */
.mo-login__title {
  font-family: var(--font-secondary, 'Stack Sans Headline Variable', 'Stack Sans Headline', sans-serif);
  font-size: 36px;
  font-weight: 500;
  color: #383E45;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.mo-login__subtitle {
  font-size: 15px;
  color: #5A5E63;
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 50ch;
}
.mo-login__signup-link {
  color: #383E45;
}
.mo-login__signup-link:hover {
  color: #C4892E;
}

/* ----- Form ----- */
.mo-form {
  margin-bottom: 36px;
}
.mo-form__field {
  margin-bottom: 18px;
}
/* Form 2-col responsive : 2 colonnes desktop, stack mobile */
.mo-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.mo-form__row > .mo-form__field {
  margin-bottom: 0;       /* le row gère le gap */
}
/* Variante 3 colonnes — pour SIRET + LEI + Ville d'immatriculation (Step 2 société tunnel porteur, etc.). */
.mo-form__row.mo-form__row--3col {
  grid-template-columns: 1fr 1fr 1fr;
}
/* Variantes asymetriques 1/3 - 2/3 ou 2/3 - 1/3 — refonte 2026-05-31.
   Cas d'usage : enum court + tooltip libre (Stade financement / Tooltip)
   ou label long + valeur courte. */
.mo-form__row.mo-form__row--1-2 {
  grid-template-columns: 1fr 2fr;
}
.mo-form__row.mo-form__row--2-1 {
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 960px) {
  .mo-form__row.mo-form__row--3col {
    grid-template-columns: 1fr 1fr;
  }
  .mo-form__row.mo-form__row--1-2,
  .mo-form__row.mo-form__row--2-1 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .mo-form__row,
  .mo-form__row.mo-form__row--3col {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
/* ==========================================================================
   CHAMPS « DOUX » — refonte 05/10/2026
   Remplace le pattern « trait bas » du 28/04/2026. Champs pleins sans contour,
   coins arrondis, anneau intérieur 2 px au focus. Ne lit que les tokens
   --field-* / --control-* de tokens.css (surface claire par défaut,
   .mo-surface-dark et .mo-form--compact les redéfinissent).
   Planche : Refonte options/03-Chantiers/Handoff-formulaires-doux.
   ========================================================================== */
.mo-form__field label {
  display: block;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--label-fg);
  margin: 0 0 8px;
}

/* Champ nu (input/select posé directement dans .mo-form__field) */
.mo-form__field input[type="text"],
.mo-form__field input[type="email"],
.mo-form__field input[type="password"],
.mo-form__field input[type="tel"],
.mo-form__field input[type="search"],
.mo-form__field input[type="number"],
.mo-form__field input[type="url"],
.mo-form__field input[type="date"],
.mo-form__field input.form-control,
.mo-form__field select,
.mo-form__field select.form-control {
  display: block;
  width: 100%;
  height: var(--field-h);
  padding: 0 16px;
  font-family: inherit;
  font-size: var(--field-font-size);
  color: var(--field-fg);
  background-color: var(--field-bg);
  border: 0;
  border-radius: var(--field-radius);
  box-shadow: none;
  box-sizing: border-box;
  transition: background-color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
  appearance: none;
  -webkit-appearance: none;
}

/* Liste déroulante native : chevron à droite (le menu reste celui du navigateur).
   Police explicite sur le select et ses options : la liste ouverte est rendue
   par l'OS et ignore souvent la police héritée. */
.mo-form__field select,
.mo-form__field select option {
  font-family: var(--font-primary);
}
.mo-form__field select,
.mo-form__field select.form-control {
  padding-right: 44px;
  cursor: pointer;
}
/* Chevron dessiné par le conteneur, en couleur du texte : suit la surface. */
.mo-form__input-wrap:has(> select)::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background: var(--field-fg);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.5'><path d='M3 5.5l4 4 4-4'/></svg>") center / 14px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.5'><path d='M3 5.5l4 4 4-4'/></svg>") center / 14px no-repeat;
  pointer-events: none;
}
/* Select nu (hors conteneur) : chevron en image de fond */
.mo-form__field > select,
.mo-form__field > select.form-control {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%231C1F24' stroke-width='1.5'><path d='M3 5.5l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.mo-surface-dark .mo-form__field > select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23FAFAF7' stroke-width='1.5'><path d='M3 5.5l4 4 4-4'/></svg>");
}

/* Zone de texte */
.mo-form__field textarea,
.mo-form__field textarea.form-control {
  display: block;
  width: 100%;
  min-height: 104px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: var(--field-font-size);
  line-height: 1.5;
  color: var(--field-fg);
  background: var(--field-bg);
  border: 0;
  border-radius: var(--field-radius);
  box-sizing: border-box;
  resize: vertical;
  transition: background-color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}

/* Texte indicatif */
.mo-form__field input::placeholder,
.mo-form__field textarea::placeholder {
  color: var(--field-placeholder);
  font-weight: 400;
  opacity: 1;                   /* Firefox ramène à 0.5 */
}

/* Focus : fond clair + anneau intérieur 2 px. Plus de trait bas, donc plus de
   « double barre » : le box-shadow est de nouveau autorisé. */
.mo-form__field input:focus,
.mo-form__field select:focus,
.mo-form__field textarea:focus {
  outline: none;
  background-color: var(--field-bg-focus);
  box-shadow: inset 0 0 0 var(--field-ring-width) var(--field-ring);
}

/* Conteneur de champ : porte le fond, le rayon et l'état ; l'élément saisi
   à l'intérieur est transparent (suffixe €, œil du mot de passe, chevron). */
.mo-form__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--field-h);
  background: var(--field-bg);
  border-radius: var(--field-radius);
  transition: background-color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
.mo-form__input-wrap > input,
.mo-form__input-wrap > select,
.mo-form__input-wrap > textarea {
  flex: 1;
  min-width: 0;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.mo-form__input-wrap:has(> textarea) {
  align-items: stretch;
}
/* Autoremplissage du navigateur : le fond reste celui du conteneur. */
.mo-form__input-wrap > input:-webkit-autofill,
.mo-form__input-wrap > input:-webkit-autofill:hover,
.mo-form__input-wrap > input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink-900);
  caret-color: var(--ink-900);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.mo-form__input-wrap:focus-within {
  background: var(--field-bg-focus);
  box-shadow: inset 0 0 0 var(--field-ring-width) var(--field-ring);
}

/* Erreur : anneau + fond terracotta. Déclenchée par la classe (has-error ou
   --error), par aria-invalid, ou automatiquement quand un .mo-form__error suit
   le champ (rendu serveur), sans avoir à modifier les templates. */
.mo-form__field.has-error .mo-form__input-wrap,
.mo-form__field--error .mo-form__input-wrap,
.mo-form__field:has(> .mo-form__error) .mo-form__input-wrap,
.mo-form__input-wrap:has([aria-invalid="true"]),
.mo-form__field.has-error > input,
.mo-form__field.has-error > select,
.mo-form__field.has-error > textarea,
.mo-form__field input[aria-invalid="true"],
.mo-form__field select[aria-invalid="true"],
.mo-form__field textarea[aria-invalid="true"] {
  background: var(--field-error-bg);
  box-shadow: inset 0 0 0 var(--field-ring-width) var(--field-error);
}

/* Désactivé */
.mo-form__field input:disabled,
.mo-form__field select:disabled,
.mo-form__field textarea:disabled,
.mo-form__input-wrap:has(:disabled),
.mo-form__input-wrap.is-disabled {
  background: var(--field-disabled-bg);
  color: var(--field-disabled-fg);
  cursor: not-allowed;
}
.mo-form__input-wrap:has(:disabled) > * {
  color: var(--field-disabled-fg);
  cursor: not-allowed;
}

/* Suffixe (€, %, unité) ou icône à droite du champ */
.mo-form__input-wrap .mo-form__suffix {
  flex-shrink: 0;
  padding: 0 16px 0 4px;
  font-size: var(--field-font-size);
  color: var(--help-fg);
}

/* Œil du mot de passe : zone cliquable 40 × 40 */
.mo-form__password-toggle {
  position: static;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-right: 6px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--help-fg);
  cursor: pointer;
  transition: color var(--duration-base) var(--ease);
}
.mo-form__password-toggle:hover,
.mo-form__password-toggle--active {
  color: var(--label-fg);
}
.mo-form__password-toggle:focus-visible {
  outline: 2px solid var(--field-ring);
  outline-offset: -2px;
}
/* Icône œil / œil barré selon l'état */
.mo-form__password-icon { display: none; }
.mo-form__password-icon--show { display: inline-block; }
.mo-form__password-toggle--active .mo-form__password-icon--show { display: none; }
.mo-form__password-toggle--active .mo-form__password-icon--hide { display: inline-block; }

/* Aide ou compteur sous le champ */
.mo-form__field .mo-form__help {
  font-size: 12px;
  color: var(--help-fg);
}

/* =============================================================================
   Liste des regles de mot de passe — refonte 2026-05-04
   =============================================================================
   Utilisee sur dashboard_password_change (form_password_change.html) et
   potentiellement signup. 5 regles : 8 caracteres / majusc / minusc / chiffre /
   special. Etat neutre (vide), is-invalid (rouge terracotta), is-valid (vert celadon).

   Markup attendu :
   <ul class="mo-pwd-rules">
     <li class="chars [is-valid|is-invalid]">
       <span class="mo-pwd-rules__icon"><svg .--check/><svg .--dot/></span>
       Texte de la regle
     </li>
   </ul>
   ============================================================================= */
.mo-pwd-rules {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px 16px;
}

.mo-pwd-rules li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary, sans-serif);
  font-size: 12px;
  color: var(--ink-500, #5A626B);
  line-height: 1.4;
  transition: color var(--duration-base, 0.18s) var(--ease, ease);
}

.mo-pwd-rules__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.mo-pwd-rules__icon--check { display: none; }
.mo-pwd-rules__icon--dot { display: inline-flex; opacity: 0.5; }

/* Etat valide : couleur celadon + check visible */
.mo-pwd-rules li.is-valid {
  color: var(--celadon-dark, #2E5E50);
}
.mo-pwd-rules li.is-valid .mo-pwd-rules__icon--check { display: inline-flex; }
.mo-pwd-rules li.is-valid .mo-pwd-rules__icon--dot { display: none; }

/* Etat invalide (l'user a tape mais la regle n'est pas remplie) :
   couleur terracotta + dot */
.mo-pwd-rules li.is-invalid {
  color: var(--terracotta-dark, #B5413B);
}
.mo-pwd-rules li.is-invalid .mo-pwd-rules__icon--check { display: none; }
.mo-pwd-rules li.is-invalid .mo-pwd-rules__icon--dot { display: inline-flex; opacity: 1; }


.mo-form__error {
  font-size: 12px;
  color: var(--field-error);
  margin: 6px 0 0;
}

.mo-form__forgot {
  text-align: right;
  margin: 8px 0 24px;
}
.mo-form__forgot-link {
  color: var(--ink-500);
  font-size: 13px;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease);
}
.mo-form__forgot-link:hover,
.mo-form__forgot-link:focus-visible {
  color: var(--ink-900);
  outline: none;
}

/* ----- Buttons ----- DÉPRÉCIÉ : utiliser .mo-btn / .mo-btn--primary du DS v2
   On garde .mo-button comme alias temporaire pendant la migration des templates. */
.mo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.005em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease);
  box-sizing: border-box;
}
.mo-button--primary {
  background-color: var(--ink-900);
  color: var(--neutre-50);
  border-color: var(--ink-900);
}
.mo-button--primary:hover,
.mo-button--primary:focus-visible {
  background-color: var(--ink-900);
  color: var(--neutre-50);
  border-color: var(--ink-900);
  outline: none;
}
/* Refonte 2026-05-02 : surclasser le `a { color: #212325 }` legacy de myoptions.css
   quand .mo-button(--primary|--ghost) est appliqué à un <a> (lien-bouton). */
a.mo-button,
a.mo-button:link,
a.mo-button:visited {
  color: var(--neutre-50);
}
a.mo-button--ghost,
a.mo-button--ghost:link,
a.mo-button--ghost:visited {
  color: var(--ink-body, #424A55);
}
a.mo-button:hover,
a.mo-button:focus-visible {
  color: var(--neutre-50);
}
a.mo-button--ghost:hover,
a.mo-button--ghost:focus-visible {
  color: var(--ink-900);
}
.mo-button--block {
  display: flex;
  width: 100%;
}

/* ----- AMF reassurance ----- */
.mo-login__amf {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-top: 22px;
  margin-top: 32px;
  border-top: 0.5px solid rgba(28, 31, 36, 0.10);
}
.mo-login__amf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px 10px;
  background: var(--ink-900);
  color: var(--bronze-200);
  border-radius: 4px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
}
.mo-login__amf-text {
  font-size: 12px;
  margin: 0;
  line-height: 1.5;
  color: var(--ink-500);
}
.mo-login__amf-label {
  display: block;
  color: var(--ink-900);
  font-weight: var(--weight-medium);
}
.mo-login__amf-detail {
  display: block;
  color: var(--ink-500);
}

/* ----- Aside (help) ----- */
.mo-login__aside {
  margin: 0;
}
.mo-login__aside-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C4892E;
  font-weight: 500;
  margin: 0 0 6px;
}
.mo-login__aside-title {
  font-size: 18px;
  font-weight: 500;
  color: #383E45;
  margin: 0 0 24px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.mo-login__aside-block {
  padding: 0 0 20px;
  border-bottom: 0.5px solid #DFD6C2;
  margin-bottom: 20px;
}
.mo-login__aside-block--last {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.mo-login__aside-label {
  font-size: 11px;
  color: #5A5E63;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}
.mo-login__aside-phone {
  display: block;
  color: #383E45;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  font-feature-settings: 'tnum';
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
  transition: color 0.15s ease;
}
.mo-login__aside-phone:hover {
  color: #C4892E;
}
.mo-login__aside-hours {
  font-size: 12px;
  color: #5A5E63;
  margin: 0;
}
.mo-login__aside-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #383E45;
  font-size: 14px;
  text-decoration: none;
  transition: gap 0.15s ease, color 0.15s ease;
}
.mo-login__aside-link:hover {
  gap: 10px;
  color: #C4892E;
}
.mo-login__aside-link svg {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.mo-login__aside-social {
  list-style: none;
  display: flex;
  gap: 14px;
  padding: 0;
  margin: 0;
}
.mo-login__aside-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #5A5E63;
  text-decoration: none;
  transition: color 0.15s ease;
}
.mo-login__aside-social a:hover {
  color: #383E45;
}

/* ----- Desktop layout ----- */
@media (min-width: 900px) {
  .mo-login {
    padding: 80px 0 96px;
  }
  .mo-login__title {
    font-size: 42px;
  }
  .mo-login__subtitle {
    font-size: 16px;
  }
  .mo-login__layout {
    grid-template-columns: 1.4fr 380px;
    gap: 64px;
  }
  .mo-login__inner {
    padding: 0 var(--container-gutter-md, 32px);
  }
}

@media (min-width: 1280px) {
  .mo-login__inner {
    padding: 0 var(--container-gutter-lg, 48px);
  }
}

/* ----- Mobile fine-tuning ----- */
@media (max-width: 767px) {
  .mo-login {
    padding: 40px 0 56px;
  }
  .mo-login__title {
    font-size: 30px;
    line-height: 1.1;
  }
  .mo-login__subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }
  .mo-form__field input,
  .mo-form__field input.form-control {
    height: 48px;
    font-size: 16px;
  }
  .mo-button {
    height: 50px;
    line-height: 50px;
  }
  .mo-login__aside-title {
    font-size: 17px;
  }
  .mo-login__aside-phone {
    font-size: 17px;
  }
}


/* ==========================================================================
   Fieldset / Legend (groupe de champs comme radio cards user_type)
   ========================================================================== */
.mo-form__fieldset {
  border: none;
  padding: 0;
  margin: 0 0 22px;
}
.mo-form__legend {
  display: block;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--label-fg);
  margin: 0 0 12px;
  padding: 0;
}


/* ==========================================================================
   Cartes de choix — « Doux » (05/10/2026)
   Radius 14, fond --field-bg, sans picto ni bordure. Titre 15 px + détail
   12 px. Choisie : fond --control-on, texte --control-on-fg.
   ========================================================================== */
.mo-form__radio-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mo-form__radio-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--field-bg);
  border: 0;
  border-radius: 14px;
  color: var(--label-fg);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
.mo-form__radio-card:hover {
  box-shadow: inset 0 0 0 1.5px var(--control-off);
}
/* Radio natif masqué visuellement, mais accessible (clavier, lecteur d'écran). */
.mo-form__radio-card input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
  appearance: none !important;
  -webkit-appearance: none !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.mo-form__radio-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mo-form__radio-card-title {
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: inherit;
}
.mo-form__radio-card-detail {
  font-size: 12px;
  color: var(--help-fg);
  line-height: 1.45;
}
.mo-form__radio-card:has(input[type="radio"]:checked) {
  background: var(--control-on);
  color: var(--control-on-fg);
  box-shadow: none;
}
.mo-form__radio-card:has(input[type="radio"]:checked) .mo-form__radio-card-detail {
  color: inherit;
  opacity: 0.75;
}
.mo-form__radio-card:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--field-ring);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .mo-form__radio-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Variante à 3 colonnes avec surtitre (page Créance attendue, admin) :
   même grammaire « Doux », seule la typographie interne diffère. */
.mo-form__radio-cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mo-form__radio-card--editorial {
  display: block;
  padding: 14px 18px;
}
.mo-form__radio-card__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--help-fg);
  margin: 0 0 8px;
}
.mo-form__radio-card__heading {
  display: block;
  font-family: var(--font-headline);
  font-size: 15px;
  font-weight: 500;
  color: inherit;
  line-height: 1.3;
  margin: 0 0 6px;
}
.mo-form__radio-card__support {
  display: block;
  font-size: 12px;
  color: var(--help-fg);
  line-height: 1.55;
  margin: 0;
}
.mo-form__radio-card--editorial:has(input[type="radio"]:checked) .mo-form__radio-card__eyebrow,
.mo-form__radio-card--editorial:has(input[type="radio"]:checked) .mo-form__radio-card__support {
  color: inherit;
  opacity: 0.75;
}
@media (max-width: 980px) {
  .mo-form__radio-cards--3 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Checkbox (CGU, optin, etc.)
   ========================================================================== */
.mo-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  cursor: pointer;
}
.mo-form__checkbox input[type="checkbox"] {
  position: relative;
  flex-shrink: 0;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  margin: 1px 0 0 !important;
  background: var(--field-bg) !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 0 1.5px var(--control-off) !important;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
.mo-form__checkbox input[type="checkbox"]:checked,
.mo-form__checkbox input[type="checkbox"]:indeterminate {
  background: var(--control-on) !important;
  box-shadow: none !important;
}
/* Coche (cochée) ou tiret (indéterminée), en --control-on-fg */
.mo-form__checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--control-on-fg);
  border-bottom: 2px solid var(--control-on-fg);
  transform: rotate(45deg);
}
.mo-form__checkbox input[type="checkbox"]:indeterminate::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  width: 10px;
  height: 2px;
  background: var(--control-on-fg);
}
.mo-form__checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--field-ring);
  outline-offset: 2px;
}
.mo-form__checkbox input[type="checkbox"]:disabled {
  background: var(--field-disabled-bg) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
.mo-form__checkbox:has(input[type="checkbox"]:disabled) {
  color: var(--field-disabled-fg);
  cursor: not-allowed;
}
.mo-form__checkbox-label {
  flex: 1 1 0;                 /* prend toute la largeur dispo, wrap correctement */
  min-width: 0;
  display: block;              /* force block pour éviter tout flex/grid hérité */
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-body);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
/* Forcer les liens dans le label en inline (pas inline-block) pour éviter le wrap items */
.mo-form__checkbox-label a {
  display: inline !important;
}
/* Reset pour éviter qu'une rule legacy mette les enfants du label en flex/grid */
.mo-form__checkbox-label * {
  display: inline;
}
.mo-surface-dark .mo-form__checkbox-label { color: var(--ink-200); }
.mo-form__checkbox-label a {
  color: var(--label-fg);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--ink-300);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-base) var(--ease);
}
.mo-form__checkbox-label a:hover {
  text-decoration-color: var(--ink-900);
}


/* ==========================================================================
   Upload hybride desktop drag-drop / mobile camera (KYC pièce d'identité).
   Pattern : un seul <input type="file" capture="environment" hidden>, un seul HTML,
   2 visuels via @media. Sur desktop ≥768 → zone dashed large. Sur mobile <768 →
   bouton plein ink-900. Drag-drop JS désactivé naturellement sur mobile (no-op).
   ========================================================================== */
.mo-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0 0;
}
@media (max-width: 600px) {
  .mo-upload-grid { grid-template-columns: 1fr; gap: 12px; }
}
.mo-upload-field { display: flex; flex-direction: column; gap: 8px; }
.mo-upload__field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-900, #1C1F24);
  margin: 0;
}
.mo-upload {
  display: block;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
  transition: border-color var(--duration-base, 200ms) var(--ease, ease),
              background-color var(--duration-base, 200ms) var(--ease, ease);
}
/* Input file visually hidden — reste cliquable via label, pas display:none qui bloque
   le click virtuel sur certains navigateurs (Safari notamment). */
.mo-upload__input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.mo-upload__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mo-upload__preview {
  display: none;
  align-items: center;
  gap: 12px;
  width: 100%;
  pointer-events: none;
}
.mo-upload.is-selected .mo-upload__inner { display: none; }
.mo-upload.is-selected .mo-upload__preview { display: flex; }
.mo-upload__preview-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--bronze-200, #D9C8A6);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-900, #1C1F24);
}
.mo-upload__preview-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mo-upload__preview-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-900, #1C1F24);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mo-upload__preview-size {
  font-size: 11px;
  color: var(--ink-500, #5F5E5A);
}
.mo-upload__preview-clear {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-500, #5F5E5A);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
  transition: background-color var(--duration-base, 200ms) var(--ease, ease),
              color var(--duration-base, 200ms) var(--ease, ease);
}
.mo-upload__preview-clear:hover {
  background: var(--neutre-100, #F0EEE8);
  color: var(--ink-900, #1C1F24);
}

/* Mobile (< 768px) : bouton plein ink-900 + icône caméra */
.mo-upload {
  background: var(--ink-900, #1C1F24);
  color: var(--neutre-50, #F8F6F0);
  padding: 16px 18px;
  min-height: 56px;
  border: 1px solid var(--ink-900, #1C1F24);
}
.mo-upload:hover { background: #2C2F34; border-color: #2C2F34; }
.mo-upload__icon--desktop,
.mo-upload__text--desktop { display: none; }
.mo-upload__icon--mobile { color: var(--neutre-50, #F8F6F0); }
.mo-upload__text--mobile { font-size: 14px; font-weight: 500; }
.mo-upload .mo-upload__inner { flex-direction: row; }
.mo-upload.is-selected {
  background: var(--neutre-50, #F8F6F0);
  color: var(--ink-900, #1C1F24);
  border: 1px solid var(--ink-300, #B8BCC4);
  padding: 12px 14px;
}

/* Desktop (≥ 768px) : zone dashed large + icône upload-arrow */
@media (min-width: 768px) {
  .mo-upload {
    background: var(--neutre-50, #F8F6F0);
    color: var(--ink-500, #5F5E5A);
    border: 2px dashed var(--ink-300, #B8BCC4);
    padding: 28px 18px;
    min-height: 140px;
  }
  .mo-upload:hover {
    background: white;
    color: var(--ink-900, #1C1F24);
    border-color: var(--ink-900, #1C1F24);
  }
  .mo-upload.is-dragover {
    background: var(--bronze-200, #D9C8A6);
    border-color: var(--ink-900, #1C1F24);
    color: var(--ink-900, #1C1F24);
  }
  .mo-upload__icon--mobile,
  .mo-upload__text--mobile { display: none; }
  .mo-upload__icon--desktop { display: inline-flex; }
  .mo-upload__text--desktop {
    display: inline-block;
    font-size: 12px;
    color: var(--ink-500, #5F5E5A);
    line-height: 1.45;
  }
  .mo-upload .mo-upload__inner { flex-direction: column; }
  .mo-upload.is-selected {
    background: white;
    border: 1px solid var(--ink-300, #B8BCC4);
    padding: 14px 16px;
    min-height: 0;
  }
}

.mo-form__hint {
  font-size: 11px;
  color: var(--ink-500, #5F5E5A);
  margin: 14px 0 0;
}

/* Status block (KYC validé/refusé/en cours) */
.mo-form__status {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 6px;
  /* Aligné en haut du conteneur (pas de margin-top), respiration en dessous
     pour le séparer de la card suivante. Pattern consistant avec
     .mo-ubo-status. */
  margin: 0 0 24px;
}
.mo-form__status--success {
  background: var(--celadon-50, #EAF3EE);
  color: var(--celadon-dark, #5C8A75);
}
.mo-form__status--info {
  background: var(--bleuet-light, #E8EEF7);
  color: var(--bleuet-dark, #2D4A78);
}
.mo-form__status--warning {
  background: var(--lilas-light, #EFEAF5);
  color: var(--lilas-dark, #5C4778);
}
.mo-form__status--error {
  background: var(--terracotta-light, #F4E5E2);
  color: var(--terracotta-dark, #B5413B);
}
.mo-form__status-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: currentColor;
  color: white !important;
}
.mo-form__status--success .mo-form__status-icon { color: var(--celadon-dark, #5C8A75) !important; }
.mo-form__status--success .mo-form__status-icon svg { color: white; }
.mo-form__status--info .mo-form__status-icon { color: var(--bleuet-dark, #2D4A78) !important; }
.mo-form__status--info .mo-form__status-icon svg { color: white; }
.mo-form__status-body { flex: 1; min-width: 0; }
.mo-form__status-title {
  font-family: var(--font-secondary, "Stack Sans Headline"), system-ui, sans-serif;
  font-size: 15px;
  font-weight: var(--weight-medium, 500);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
  color: var(--ink-900, #1C1F24);
}
.mo-form__status-detail {
  font-size: 13px;
  margin: 4px 0 0;
  opacity: 0.85;
  line-height: 1.45;
}
.mo-form__status-link,
.mo-form__status-action {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin: 4px 16px 0 0;
}
.mo-form__status-link:hover,
.mo-form__status-action:hover { text-decoration-thickness: 2px; }

/* Zone de upload masquée quand l'identité est déjà validée (toggle JS) */
.mo-kyc-upload-zone--hidden { display: none; }

/* Toggle CNI / Passeport — pure CSS via :has(). Pas de dépendance JS.
   - Quand CNI checked : verso visible, label "Recto"
   - Quand Passeport checked : verso masqué, label "Page principale" */
.mo-when-passport { display: none; }
.mo-kyc-upload-zone:has(input#id_proof_passport:checked) #upload-verso { display: none; }
.mo-kyc-upload-zone:has(input#id_proof_passport:checked) .mo-when-cni { display: none; }
.mo-kyc-upload-zone:has(input#id_proof_passport:checked) .mo-when-passport { display: inline; }

/* Loader fullscreen pendant transmission Mangopay */
#loader {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28, 31, 36, 0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
/* 22/10/2026 : affiché par mo-kyc-docs.js (pièces porteur et financeur personne morale). */
#loader.is-visible { display: flex; }
.mo-kyc-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 32px 40px;
  background: white;
  border-radius: 8px;
}
.mo-kyc-loader__spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--ink-100, #E5E7EB);
  border-top-color: var(--bronze-600, #9A835C);
  border-radius: 50%;
  animation: mo-spin 0.8s linear infinite;
}
@keyframes mo-spin { to { transform: rotate(360deg); } }
.mo-kyc-loader__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-900, #1C1F24);
  margin: 0;
}


/* Bouton-link sobre (Étape précédente, alignement gauche) */
.mo-button-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-body, #424A55);
  padding: 8px 0;
  font-family: var(--font-primary); /* 22/10/2026 : Stack partout (inherit donnait la police système) */
  transition: color var(--duration-base, 200ms) var(--ease, ease);
}
.mo-button-link:hover { color: var(--ink-900, #1C1F24); }


/* ==========================================================================
   Multi-checkbox : Django CheckboxSelectMultiple rend <ul><li><label><input>...
   On reset la liste et on style les checkboxes comme .mo-form__checkbox.
   Layout 2 colonnes en desktop, 1 col mobile.
   ========================================================================== */
.mo-form__multi-checkbox ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}
@media (max-width: 600px) {
  .mo-form__multi-checkbox ul { grid-template-columns: 1fr; }
}
.mo-form__multi-checkbox li { list-style: none; }
.mo-form__multi-checkbox li label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-body, #424A55);
  cursor: pointer;
  line-height: 1.4;
  font-weight: 400;
  padding: 4px 0;
}
.mo-form__multi-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  background: white !important;
  border: 1px solid var(--ink-300, #B8BCC4) !important;
  border-radius: 3px !important;
  cursor: pointer;
  position: relative;
  box-shadow: none !important;
  transition: background-color var(--duration-base, 200ms) var(--ease, ease),
              border-color var(--duration-base, 200ms) var(--ease, ease);
}
.mo-form__multi-checkbox input[type="checkbox"]:hover {
  border-color: var(--ink-900, #1C1F24);
}
.mo-form__multi-checkbox input[type="checkbox"]:checked {
  background: var(--ink-900, #1C1F24) !important;
  border-color: var(--ink-900, #1C1F24) !important;
}
.mo-form__multi-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--neutre-50, #F8F6F0);
  border-bottom: 2px solid var(--neutre-50, #F8F6F0);
  transform: rotate(45deg);
}
.mo-form__multi-checkbox input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(28, 31, 36, 0.18) !important;
}


/* ============================================================
   Radio row standard charte v2 (Mme/M., choix simple inline)
   Dot bronze-600 sur selection. Different des radio-cards icones
   signature qui sont pour les choix structurants (perso phys/mor).
   ============================================================ */
.mo-form__radio-row { display: flex; gap: 32px; flex-wrap: wrap; align-items: center; }
.mo-form__radio-row__option {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; padding: 6px 0;
  font-size: 14px; color: var(--label-fg);
}
.mo-form__radio-row input[type="radio"] {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none;
  appearance: none !important; -webkit-appearance: none !important;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
.mo-form__radio-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--field-bg);
  box-shadow: inset 0 0 0 1.5px var(--control-off);
  transition: box-shadow var(--duration-base) var(--ease),
              background-color var(--duration-base) var(--ease);
}
.mo-form__radio-row__option:has(input[type="radio"]:checked) .mo-form__radio-dot {
  background: var(--field-bg-focus);
  box-shadow: inset 0 0 0 6px var(--control-on);
}
.mo-form__radio-row__option:has(input[type="radio"]:focus-visible) .mo-form__radio-dot {
  outline: 2px solid var(--field-ring);
  outline-offset: 2px;
}
.mo-form__radio-row__option:has(input[type="radio"]:disabled) {
  color: var(--field-disabled-fg);
  cursor: not-allowed;
}
.mo-form__radio-row__option:has(input[type="radio"]:disabled) .mo-form__radio-dot {
  background: var(--field-disabled-bg);
  box-shadow: none;
}

/* Readonly inline (ex: email du compte) */
.mo-form__readonly {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 6px 0 0;
  padding: 12px 14px;
  background: var(--neutre-100);
  border-radius: 4px;
  font-size: 14px;
  color: var(--ink-900);
}
.mo-form__readonly strong { font-weight: 500; }
.mo-form__readonly-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease);
}
.mo-form__readonly-link:hover { color: var(--ink-900); }

/* Mention "optionnel" sur les labels de champs non requis */
.mo-form__optional {
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-500);
  margin-left: 6px;
}

/* Override chirurgical 28/04 v4 : ne cible QUE les labels enfants directs d'un .mo-form__field
   (= label descripteur d'input). N'AFFECTE PAS les <label class="mo-form__radio-card">,
   ni .mo-form__radio-row__option ni .mo-form__checkbox qui sont des labels compounds
   ayant leur propre styling (padding, background, position:relative pour contenir le radio absolute). */
.mo-form .mo-form__field > label,
.mo-dashboard-card .mo-form__field > label,
.mo-form .mo-form__fieldset > .mo-form__legend,
.mo-dashboard-card .mo-form__fieldset > .mo-form__legend {
  background: transparent;
  color: var(--label-fg);
  padding: 0;
  margin-left: 0;
  position: static;
  top: auto;
  font-family: var(--font-primary, sans-serif);
  font-weight: 500;
  font-size: 13px;
}
/* Optional mention discrete */
.mo-form__optional { color: var(--help-fg) !important; font-weight: 400 !important; font-size: 12px !important; }


/* ::selection custom dans .mo-form/dashboard : moins agressif que le legacy noir */
.mo-form ::selection, .mo-dashboard ::selection {
  background: var(--bronze-200, #D9C8A6);
  color: var(--ink-900);
  text-shadow: none;
}


/* Gap vertical entre rows successifs (inputs ligne 1 vs labels ligne 2) */
.mo-form__row { margin-bottom: 24px; }
.mo-form__row:last-child { margin-bottom: 0; }

/* === Override 28/04 v4 : neutralise max-width: 68ch du <p> global (base.css:118)
   qui empechait .mo-form__readonly de prendre toute la largeur de la card === */
.mo-form__readonly {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   Help text — micro-explication sous une question (ex : definition AMF de PEP).
   Apparait entre le legend et le toggle. Sobre, max-width pour lisibilite.
   ============================================================ */
.mo-form__help {
  font-family: var(--font-primary, sans-serif);
  font-size: 13px;
  color: var(--ink-body, #424A55);
  line-height: 1.55;
  margin: 6px 0 14px;
}
.mo-form__help--soft {
  background: var(--neutre-100, #F0EEE8);
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--ink-500, #5F5E5A);
  margin: 14px 0 18px;
}
/* Neutralise le max-width: 68ch du <p> global (base.css) pour un help text qui
   doit prendre toute la largeur de la card (même précédent que .mo-form__readonly). */
.mo-form__help--full {
  max-width: none;
}

/* Liste à puces charte dans un formulaire (puce bronze) — même pattern validé
   que .mo-modal__list, mais namespacée form. */
.mo-form__list {
  list-style: none;
  margin: 4px 0 16px;
  padding: 0;
  max-width: none;
}
.mo-form__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-body, #424A55);
}
.mo-form__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--bronze-500, #A87C3D);
  border-radius: 50%;
}

/* ============================================================
   Reveal — sous-form revele par toggle Oui (PEP, representant legal).
   Indente 24px a gauche avec border-left subtle pour signifier la hierarchie.
   Animation slide-down 250ms cubic-bezier sortie quart d'arc.
   ============================================================ */
.mo-form__reveal {
  margin: 0;
  padding-left: 24px;
  border-left: 2px solid var(--ink-100, #E5E7EB);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 250ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 200ms ease,
              margin-top 200ms ease,
              padding-top 200ms ease,
              padding-bottom 200ms ease;
}
.mo-form__reveal--open,
.mo-form__fieldset:has(input[data-reveal]:checked) + .mo-form__reveal {
  max-height: 800px;
  opacity: 1;
  margin: 16px 0 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Fieldset toggle — espacement vertical entre legend, help, et radio-row */
.mo-form__fieldset--toggle { margin: 0 0 24px; padding: 0; border: none; }
.mo-form__fieldset--toggle:last-child { margin-bottom: 0; }
.mo-form__fieldset--toggle .mo-form__legend {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-900);
  margin: 0 0 4px;
  padding: 0;
}
/* Le wrapper input-wrap qui contient un select doit aussi etre en pleine largeur */
.mo-dashboard-card .mo-form__field,
.mo-dashboard-card .mo-form__input-wrap {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}
/* mais .mo-form__field n est pas un flex container, c est un block */
.mo-dashboard-card .mo-form__field { display: block !important; }
/* mo-form__input-wrap reste flex (pour permettre asterisque a droite) mais en pleine largeur */
/* Force le select Django a remplir toute la largeur du wrapper */
.mo-dashboard-card .mo-form__input-wrap > select,
.mo-dashboard-card .mo-form__field > select {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* === Override Select2 (lib JS legacy Bootstrap) dans dashboard cards === */
/* Le select natif est masque par .select2-hidden-accessible et remplace par un span. */
.mo-dashboard-card .select2,
.mo-dashboard-card .select2-container,
.mo-dashboard-card .select2-conteneur {
  width: 100% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.mo-dashboard-card .select2-selection,
.mo-dashboard-card .select2-selection--single {
  height: 48px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}
.mo-dashboard-card .select2-selection__rendered {
  padding: 0 !important;
  line-height: 48px !important;
  color: var(--ink-900) !important;
  font-size: 15px !important;
  flex: 1 1 auto !important;
}
.mo-dashboard-card .select2-selection__arrow {
  height: 48px !important;
  top: 0 !important;
  right: 36px !important;
  width: 20px !important;
}

/* ==========================================================================
   Refonte 2026-04-29 — Select2 dropdown list (non scoped car render au body)
   La liste dropdown est rendue hors du parent .mo-dashboard-card, il faut donc
   des sélecteurs globaux pour aligner la typo sur Inter myOptions.
   ========================================================================== */
.select2-dropdown,
.select2-results,
.select2-results__option {
  font-family: var(--font-sans, 'Inter', sans-serif) !important;
  font-size: 15px !important;
  color: var(--ink-body, #424A55) !important;
}
.select2-dropdown {
  border: 1px solid var(--ink-200, #D6D9DD) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(28, 31, 36, 0.10) !important;
  background: var(--neutre-50, #FAFAF7) !important;
}
.select2-results__option {
  padding: 10px 14px !important;
  line-height: 1.5 !important;
}
.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--ink-50, #F1F1ED) !important;
  color: var(--ink-900, #1C1F24) !important;
}
.select2-search--dropdown .select2-search__field {
  font-family: var(--font-sans, 'Inter', sans-serif) !important;
  font-size: 14px !important;
  border: 1px solid var(--ink-200, #D6D9DD) !important;
  border-radius: 4px !important;
  padding: 8px !important;
}

/* ==========================================================================
   Refonte 2026-04-29 — Checkbox grid (financial_xp et autres multi-choix)
   Pattern cards form v2 : grille 2 colonnes, chaque option = label compound
   avec input visuel custom .mo-form__checkbox-box + texte aligné inline.
   ========================================================================== */
.mo-form__checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .mo-form__checkbox-grid {
    grid-template-columns: 1fr;
  }
}
.mo-form__checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 12px;
  margin: 0;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background-color var(--duration-base, 180ms) var(--ease, ease),
              border-color var(--duration-base, 180ms) var(--ease, ease);
}
.mo-form__checkbox-option:hover {
  background: var(--neutre-50, #FAFAF7);
  border-color: var(--ink-100, #E8E9E5);
}
.mo-form__checkbox-option:has(input[type="checkbox"]:checked) {
  background: var(--neutre-50, #FAFAF7);
  border-color: var(--ink-200, #D6D9DD);
}

/* Refonte 2026-05-05 : ligne legend + actions "Tout cocher / Tout décocher" */
.mo-form__legend-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.mo-form__legend-row .mo-form__legend {
  flex: 1 1 auto;
  margin: 0;
}
.mo-form__checkbox-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mo-form__checkbox-action {
  background: transparent;
  border: none;
  padding: 4px 6px;
  margin: 0;
  font-family: var(--font-primary, sans-serif);
  font-size: 12px;
  color: var(--ink-500, #5A626B);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-300, #B0B6BD);
  transition: color var(--duration-base, 180ms) var(--ease, ease),
              text-decoration-color var(--duration-base, 180ms) var(--ease, ease);
}
.mo-form__checkbox-action:hover {
  color: var(--ink-900);
  text-decoration-color: var(--ink-900);
}
.mo-form__checkbox-action:focus-visible {
  outline: 2px solid var(--bleuet-dark, #2D4A78);
  outline-offset: 2px;
  border-radius: 3px;
}
.mo-form__checkbox-actions-sep {
  color: var(--ink-300, #B0B6BD);
  font-size: 12px;
  user-select: none;
}
.mo-form__checkbox-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.mo-form__checkbox-option .mo-form__checkbox-box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: var(--neutre-100, #FFFFFF);
  border: 1px solid var(--ink-300, #B5BAC1);
  border-radius: 3px;
  position: relative;
  transition: background-color var(--duration-base, 180ms) var(--ease, ease),
              border-color var(--duration-base, 180ms) var(--ease, ease);
}
.mo-form__checkbox-option:hover .mo-form__checkbox-box {
  border-color: var(--ink-900, #1C1F24);
}
.mo-form__checkbox-option input[type="checkbox"]:checked ~ .mo-form__checkbox-box {
  background: var(--ink-900, #1C1F24);
  border-color: var(--ink-900, #1C1F24);
}
.mo-form__checkbox-option input[type="checkbox"]:checked ~ .mo-form__checkbox-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--neutre-50, #FAFAF7);
  border-bottom: 2px solid var(--neutre-50, #FAFAF7);
  transform: rotate(45deg);
}
.mo-form__checkbox-option input[type="checkbox"]:focus-visible ~ .mo-form__checkbox-box {
  outline: none;
  box-shadow: 0 0 0 2px rgba(28, 31, 36, 0.18);
}
.mo-form__checkbox-option .mo-form__checkbox-label {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-body, #424A55);
}

/* ==========================================================================
   Refonte 2026-04-29 — Wrapper select natif/Select2 dans card form v2
   .mo-form__select-wrap entoure le {{ form.field }} pour appliquer bordure
   bas + states focus, en cohérence avec les autres champs.
   ========================================================================== */
.mo-form__field {
  margin-bottom: 18px;
}
/* Base : standard des étiquettes de formulaire, appliqué à TOUT .mo-form__label
   (y compris hors .mo-form__field, sinon le legacy fait fuiter une police et une
   taille serif). Les règles scopées plus spécifiques ci-dessous peuvent surcharger. */
.mo-form__label {
  display: block;
  font-family: var(--font-primary, 'Stack Sans Text', sans-serif);
  font-size: 14px;
  font-weight: var(--weight-medium, 500);
  color: var(--label-fg);
  margin-bottom: 6px;
}
.mo-form__field .mo-form__label {
  display: block;
  font-size: 13px;
  font-weight: var(--weight-medium, 500);
  color: var(--label-fg);
  margin-bottom: 6px;
}
.mo-form__select-wrap {
  position: relative;
  background: var(--field-bg);
  border-radius: var(--field-radius);
  transition: background-color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
.mo-form__select-wrap:focus-within {
  background: var(--field-bg-focus);
  box-shadow: inset 0 0 0 var(--field-ring-width) var(--field-ring);
}
.mo-form__select-wrap select {
  width: 100%;
  height: var(--field-h);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  padding: 0 44px 0 16px;
  font-family: var(--font-primary);
  font-size: var(--field-font-size);
  color: var(--field-fg);
  cursor: pointer;
}
.mo-form__select-wrap::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--field-fg);
  border-bottom: 1.5px solid var(--field-fg);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
/* Quand Select2 remplace le select natif : un seul rendu (celui de Select2). */
.mo-form__select-wrap:has(.select2)::after,
.mo-form__select-wrap:has(.select2-container)::after {
  display: none;
}
.mo-form__select-wrap:has(.select2),
.mo-form__select-wrap:has(.select2-container) {
  background: transparent;
  box-shadow: none;
}
.select2-results__option {
  padding: 8px 12px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   Refonte 2026-04-29 — Bouton ghost (CTA secondaire) + variant prev
   .mo-button--ghost : background transparent, border ink-200, color ink-body.
   .mo-button--prev  : flèche pointant vers la gauche (à la place du → par défaut).
   ========================================================================== */
.mo-button--ghost {
  background: transparent;
  color: var(--ink-body, #424A55);
  border-color: var(--ink-200, #D6D9DD);
}
.mo-button--ghost:hover,
.mo-button--ghost:focus-visible {
  background: var(--ink-50, #F1F1ED);
  color: var(--ink-900, #1C1F24);
  border-color: var(--ink-300, #B5BAC1);
  outline: none;
}
/* Bouton de désinscription « Me désinscrire de tout » (21/10/2026) :
 bien visible, sans être le bouton principal. */
.mo-button--danger {
  background: transparent;
  color: var(--terracotta-dark);
  border-color: var(--terracotta-dark);
}
.mo-button--danger:hover,
.mo-button--danger:focus-visible {
  background: var(--terracotta-dark);
  color: var(--neutre-50);
  outline: none;
}
.mo-button--prev::after {
  content: none;
}
.mo-button--prev::before {
  content: "\2190 ";
  font-weight: 500;
  margin-right: 4px;
}

/* ==========================================================================
   Contrôle segmenté — « Doux » (05/10/2026)
   Conteneur pastille --field-bg, padding 4. Segment actif : fond
   --field-bg-focus + légère ombre ; sur surface foncée, --control-on.
   Radios natifs dessous (ChoiceField à 2 ou 3 options courtes).
   ========================================================================== */
.mo-form__fieldset--segmented {
  margin: 0 0 18px;
  padding: 0;
  border: none;
}
.mo-form__segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 8px;
  padding: 4px;
  background: var(--field-bg);
  border-radius: 9999px;
}
.mo-form__segmented__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  margin: 0;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--help-fg);
  text-align: center;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease);
}
.mo-form__segmented__option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.mo-form__segmented__option:hover {
  color: var(--label-fg);
}
.mo-form__segmented__option:has(input[type="radio"]:checked) {
  background: var(--field-bg-focus);
  color: var(--label-fg);
  box-shadow: 0 1px 3px var(--ink-900-10);
}
.mo-surface-dark .mo-form__segmented__option:has(input[type="radio"]:checked) {
  background: var(--control-on);
  color: var(--control-on-fg);
  box-shadow: none;
}
.mo-form__segmented__option:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--field-ring);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .mo-form__segmented {
    grid-auto-flow: row;
    border-radius: var(--field-radius);
  }
  .mo-form__segmented__option {
    justify-content: flex-start;
    border-radius: calc(var(--field-radius) - 4px);
  }
}

/* ==========================================================================
   Refonte 2026-04-29 — Pattern radio stacked (cards verticales)
   Pour ChoiceField à options longues ou nombreuses : RISK_PROFILE, INTERESTS.
   Chaque option = card pleine largeur avec dot + label, fond ink-50 si selected.
   ========================================================================== */
.mo-form__fieldset--stack {
  margin: 0 0 18px;
  padding: 0;
  border: none;
}
.mo-form__radio-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.mo-form__radio-stack__option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin: 0;
  cursor: pointer;
  border: 1px solid var(--ink-200, #D6D9DD);
  border-radius: 8px;
  background: var(--neutre-100, #FFFFFF);
  transition: border-color var(--duration-base, 180ms) var(--ease, ease),
              background-color var(--duration-base, 180ms) var(--ease, ease);
}
.mo-form__radio-stack__option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.mo-form__radio-stack__dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1.5px solid var(--ink-300, #B5BAC1);
  border-radius: 50%;
  background: var(--neutre-100, #FFFFFF);
  position: relative;
  transition: border-color var(--duration-base, 180ms) var(--ease, ease);
}
.mo-form__radio-stack__option:hover {
  border-color: var(--ink-400, #8E939B);
}
.mo-form__radio-stack__option:hover .mo-form__radio-stack__dot {
  border-color: var(--ink-900, #1C1F24);
}
.mo-form__radio-stack__option:has(input[type="radio"]:checked) {
  border-color: var(--ink-900, #1C1F24);
  background: var(--ink-50, #F1F1ED);
}
.mo-form__radio-stack__option:has(input[type="radio"]:checked) .mo-form__radio-stack__dot {
  border-color: var(--ink-900, #1C1F24);
}
.mo-form__radio-stack__option:has(input[type="radio"]:checked) .mo-form__radio-stack__dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--ink-900, #1C1F24);
  border-radius: 50%;
}
.mo-form__radio-stack__option:has(input[type="radio"]:focus-visible) {
  box-shadow: 0 0 0 2px rgba(28, 31, 36, 0.18);
}
.mo-form__radio-stack__label {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-body, #424A55);
}
.mo-form__radio-stack__option:has(input[type="radio"]:checked) .mo-form__radio-stack__label {
  color: var(--ink-900, #1C1F24);
  font-weight: var(--weight-medium, 500);
}

/* ==========================================================================
   Refonte 2026-04-29 — Modal pattern v2 (sobre, pas Bootstrap)
   Utilisation : avertissement non-averti après validation PSFP.
   Visible par défaut quand le HTML est rendu (pas de display:none, garde
   compatibilité avec $('#AdvertiseModal').show() jQuery legacy).
   ========================================================================== */
.mo-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28, 31, 36, 0.32);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}
.mo-modal[hidden] { display: none; }
.mo-modal__panel {
  width: 100%;
  max-width: 580px;
  background: var(--neutre-50, #FAFAF7);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(28, 31, 36, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: mo-modal-in var(--duration-base, 220ms) var(--ease, ease) both;
}
@keyframes mo-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mo-modal__header {
  padding: 28px 32px 16px;
  border-bottom: 1px solid var(--ink-100, #E8E9E5);
}
.mo-modal__eyebrow {
  /* 29/10/2026 : sur-titre standard V4 (tokens), plus de bronze-500 en 12 px. */
  font-family: var(--font-primary);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bronze-700);
  margin: 0 0 8px;
  font-weight: var(--weight-medium);
}
.mo-modal__title {
  /* 29/10/2026 : titre standard V4 (Stack Sans Headline), plus de Fraunces. */
  font-family: var(--font-secondary);
  font-size: 22px;
  font-weight: var(--weight-medium);
  color: var(--ink-900);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.mo-modal__body {
  padding: 20px 32px 24px;
  font-family: var(--font-primary);
  color: var(--ink-body, #424A55);
  font-size: 14px;
  line-height: 1.55;
}
.mo-modal__lead {
  margin: 0 0 12px;
}
.mo-modal__lead strong {
  color: var(--ink-900, #1C1F24);
  font-weight: var(--weight-medium, 500);
}
.mo-modal__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.mo-modal__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
}
.mo-modal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--bronze-500, #A87C3D);
  border-radius: 50%;
}
.mo-modal__notice {
  margin: 0 0 12px;
  padding: 14px 16px;
  background: var(--ink-50, #F1F1ED);
  font-style: italic;
  color: var(--ink-900, #1C1F24);
  border-radius: 6px;
}
.mo-modal__contact {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--ink-500, #6E747C);
}
.mo-modal__footer {
  padding: 18px 32px 28px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--ink-100, #E8E9E5);
}

@media (max-width: 600px) {
  .mo-modal {
    padding: 12px;
    align-items: flex-end;
  }
  .mo-modal__panel {
    max-width: 100%;
    border-radius: 14px 14px 0 0;
  }
  .mo-modal__header,
  .mo-modal__body,
  .mo-modal__footer {
    padding-left: 22px;
    padding-right: 22px;
  }
  .mo-modal__footer button {
    width: 100%;
  }
}

/* ==========================================================================
   Refonte 2026-05-05 — Loss simulator : suffix € + icône info inline + utils.
   Pattern aligné sur v2 stabilisé : .mo-form__row + .mo-form__input-wrap
   avec background neutre-100 + border-bottom ink-900 (cf. forms.css:194).
   On ajoute juste le suffix € et l'icône info qui n'existaient pas encore.
   ========================================================================== */

/* Suffix € à droite dans le wrapper input — flex-shrink 0 pour ne pas se compresser */
.mo-form__suffix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px 0 10px;
  font-size: 15px;
  color: var(--ink-500, #6E747C);
  font-weight: var(--weight-medium, 500);
  flex-shrink: 0;
}
.mo-form__input-wrap:focus-within .mo-form__suffix {
  color: var(--ink-900, #1C1F24);
}

/* Icône info inline dans le label — petit "i" sobre, hover = bronze chartée.
   Le tooltip natif (attr title) est conservé pour l'accessibilité ; un vrai
   tooltip popover sera implémenté plus tard si besoin. */
.mo-form__label-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--ink-300, #B8BCC4);
  color: var(--ink-500, #6E747C);
  background: transparent;
  cursor: help;
  vertical-align: -3px;
  transition: border-color var(--duration-fast, 140ms) var(--ease, ease),
              color var(--duration-fast, 140ms) var(--ease, ease);
}
.mo-form__label-info:hover,
.mo-form__label-info:focus-visible {
  border-color: var(--bronze-500, #A87C3D);
  color: var(--bronze-500, #A87C3D);
  outline: none;
}
.mo-form__label-info svg {
  width: 10px;
  height: 10px;
}

/* Masquage du form quand la modal est ouverte (post-calcul) */
.mo-form__hidden-during-modal {
  display: none;
}

/* Bouton small variant — actions inline dans alert/modal */
.mo-button--sm {
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 4px;
}

/* ==========================================================================
   Refonte 2026-05-05 — Wizard 3 étapes pour calcul du seuil d'investissement.
   Layout : main (form steps) + aside (récap sticky desktop).
   Mockup v4 validé. JS vanilla léger : voir form_loss_simulator.html.
   ========================================================================== */
.mo-wizard {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mo-wizard__progress {
  display: flex;
  gap: 6px;
}
.mo-wizard__progress-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--ink-200, #D6D8DC);
  transition: background var(--duration-base, 180ms) var(--ease, ease);
}
.mo-wizard__progress-bar.is-done {
  background: var(--bronze-500, #A87C3D);
}
.mo-wizard__progress-bar.is-active {
  background: var(--ink-900, #1C1F24);
}
.mo-wizard__tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mo-wizard__tab {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 4px;
  border: 1px solid var(--ink-200, #D6D8DC);
  background: white;
  color: var(--ink-500, #6E747C);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--duration-fast, 140ms) var(--ease, ease),
              color var(--duration-fast, 140ms) var(--ease, ease),
              background var(--duration-fast, 140ms) var(--ease, ease);
}
.mo-wizard__tab:hover {
  border-color: var(--ink-400, #9AA0A8);
  color: var(--ink-900, #1C1F24);
}
.mo-wizard__tab.is-active {
  background: var(--ink-900, #1C1F24);
  color: white;
  border-color: var(--ink-900, #1C1F24);
}
.mo-wizard__tab.is-done {
  color: var(--bronze-500, #A87C3D);
  border-color: var(--bronze-200, #E8D9B8);
}
.mo-wizard__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  align-items: start;
}
.mo-wizard__main {
  min-width: 0;
}
.mo-wizard__step {
  display: block;
}
.mo-wizard__step[hidden] {
  display: none;
}
.mo-wizard__aside {
  background: var(--neutre-50, #FAFAF7);
  border: 1px solid var(--ink-100, #E8E9E5);
  border-radius: 8px;
  padding: 18px 20px;
  position: sticky;
  top: 16px;
  font-family: var(--font-primary);
}
.mo-wizard__aside-eyebrow {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500, #6E747C);
  margin: 0 0 12px;
  font-weight: var(--weight-medium, 500);
}
.mo-wizard__aside-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ink-100, #E8E9E5);
}
.mo-wizard__aside-row:last-of-type {
  border-bottom: 0;
}
.mo-wizard__aside-row > span:first-child {
  color: var(--ink-body, #424A55);
}
.mo-wizard__aside-row > span:last-child {
  color: var(--ink-900, #1C1F24);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium, 500);
}
.mo-wizard__aside-cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-200, #D6D8DC);
  gap: 12px;
}
.mo-wizard__aside-cap-label {
  font-size: 12px;
  color: var(--ink-body, #424A55);
  line-height: 1.4;
  flex: 1 1 auto;
}
.mo-wizard__aside-cap-amount {
  font-size: 22px;
  font-weight: var(--weight-medium, 500);
  font-variant-numeric: tabular-nums;
  color: var(--ink-900, #1C1F24);
  font-family: var(--font-secondary, var(--font-primary));
  flex-shrink: 0;
}
.mo-wizard__aside-formula {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--ink-100, #E8E9E5);
  border-radius: 6px;
  font-size: 11px;
  color: var(--ink-500, #6E747C);
  font-style: italic;
  line-height: 1.55;
}

/* Wizard 2 cols avec subgrid : labels / inputs / helpers s'alignent exactement
   à la même hauteur dans les 2 colonnes, peu importe la longueur du helper.
   Subgrid supporté Chrome 117+, Firefox 71+, Safari 16+ (largement déployé en 2026).
   Fallback : si subgrid pas supporté, le grid 2-cols reste mais alignement
   imparfait (acceptable). */
.mo-wizard .mo-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 4px 24px;
  margin-bottom: 22px;
  align-items: start;
}
.mo-wizard .mo-form__row > .mo-form__field {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 6px;
}
.mo-wizard .mo-form__row > .mo-form__field[aria-hidden="true"] {
  display: none;
}
.mo-wizard .mo-form__field > label {
  margin: 0;
}
.mo-wizard .mo-form__field > .mo-form__input-wrap {
  margin: 0;
}
.mo-wizard .mo-form__field > .mo-form__field-explain {
  margin: 0;
  align-self: start;
}
.mo-wizard .mo-form__field > .mo-form__error {
  margin: 0;
}
@media (max-width: 720px) {
  .mo-wizard .mo-form__row {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .mo-wizard .mo-form__row > .mo-form__field {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    gap: 6px;
  }
}
.mo-form__field-explain {
  margin: 6px 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-500, #6E747C);
  line-height: 1.5;
}

/* Variantes actions-row : split (ghost à gauche, primary à droite) ou end */
.mo-form__actions-row--split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mo-form__actions-row--end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Mobile : aside passe en dessous, position normale */
@media (max-width: 900px) {
  .mo-wizard__layout {
    grid-template-columns: 1fr;
  }
  .mo-wizard__aside {
    position: static;
  }
}

/* ==========================================================================
   Refonte 2026-04-29 — Pattern mo-alert (Django messages framework)
   Pour afficher messages.error/.success/.warning de manière sobre dans le
   tunnel signup. Variantes : --error (rouge sienne), --warning (bronze),
   --success (céladon). Iconographie inline SVG via classe mo-alert__icon.
   ========================================================================== */
.mo-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  margin: 0 0 18px;
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.5;
  background: var(--ink-50, #F1F1ED);
  color: var(--ink-900, #1C1F24);
  border: 1px solid var(--ink-200, #D6D9DD);
}
.mo-alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mo-alert__icon svg {
  width: 100%;
  height: 100%;
}
.mo-alert__body {
  flex: 1 1 auto;
  min-width: 0;
}
.mo-alert__title {
  display: block;
  font-weight: var(--weight-medium, 500);
  margin: 0 0 2px;
  color: var(--ink-900, #1C1F24);
}
.mo-alert__message {
  margin: 0;
  color: var(--ink-body, #424A55);
  /* Neutralise le max-width: 68ch du <p> global (base.css) : le message doit
     remplir la boîte d'alerte (déjà bornée par son padding), pas se couper à
     mi-largeur. */
  max-width: none;
}
.mo-alert--error {
  background: #FBF2EE;
  border-color: #E5B4A5;
  color: #7A2E15;
}
.mo-alert--error .mo-alert__title,
.mo-alert--error .mo-alert__message {
  color: #7A2E15;
}
.mo-alert--error .mo-alert__icon {
  color: #B14A22;
}
.mo-alert--warning {
  background: #FAF1E2;
  border-color: var(--bronze-200, #D9B98A);
  color: var(--bronze-700, #6E4F1F);
}
.mo-alert--warning .mo-alert__title,
.mo-alert--warning .mo-alert__message {
  color: var(--bronze-700, #6E4F1F);
}
.mo-alert--warning .mo-alert__icon {
  color: var(--bronze-500, #A87C3D);
}
.mo-alert--success {
  background: #EAF3EE;
  border-color: #B2D6BF;
  color: #1F5638;
}
.mo-alert--success .mo-alert__title,
.mo-alert--success .mo-alert__message {
  color: #1F5638;
}
.mo-alert--success .mo-alert__icon {
  color: #2E7A4D;
}

/* Hint (texte secondaire dans le body, plus petit et grisé) */
.mo-alert__hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-500, #6E747C);
  line-height: 1.5;
}

/* Variante : encart pédagogique sous un champ de formulaire (LEI, etc.).
   Spacing top pour aérer du field, font-size légèrement réduit. */
.mo-form__field .mo-alert--field-hint {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 13px;
}
.mo-form__field .mo-alert--field-hint .mo-alert__title {
  font-size: 13px;
}

/* Variante standalone : l'encart vit en dehors d'un mo-form__field
   (entre deux rows par exemple). On lui donne un vrai écart top/bottom
   pour qu'il respire visuellement entre le row précédent et le suivant. */
/* Variante bronze sable — alignée sur le pattern .mo-ubo-finalize : fond bronze
   translucide ultra-light + border bronze-200 + textes bronze-700. Permet aux
   encarts pédagogiques (hints LEI, mentions réglementaires, etc.) de se distinguer
   visuellement du reste du formulaire en restant doux. */
/* Pattern bronze sable inline — override de .mo-alert (qui a sa propre palette
   ink). Spécificité 2 (.mo-alert--field-hint.mo-alert--standalone) qui bat la
   spécificité 1 de .mo-alert. La composition .mo-bronze-card ne marcherait
   pas ici à cause du conflit avec .mo-alert sur bg/border/color.
   Pour rester DRY : reprend explicitement les mêmes tokens que .mo-bronze-card. */
.mo-alert--field-hint.mo-alert--standalone {
  margin-top: 20px;
  margin-bottom: 24px;
  font-size: 13px;
  background: var(--bronze-card-bg, rgba(168, 124, 61, 0.06));
  border: 1px solid var(--bronze-200, #E8D9B8);
  border-radius: var(--radius-md, 8px);
  color: var(--bronze-700, #6E4F1F);
}
.mo-alert--field-hint.mo-alert--standalone .mo-alert__title {
  font-size: 13px;
  color: var(--bronze-700, #6E4F1F);
}
.mo-alert--field-hint.mo-alert--standalone .mo-alert__message {
  color: var(--bronze-700, #6E4F1F);
}
.mo-alert--field-hint.mo-alert--standalone .mo-alert__icon {
  color: var(--bronze-600, #9A835C);
}

/* ==========================================================================
   Refonte 2026-05-05 — Choix de partage avec conseiller (loss_simulator).
   Bloc inline dans le mo-alert--success pour basculer share_with_advisor
   sans recalculer la simulation. Pattern : status + bouton ghost small.
   ========================================================================== */
.mo-alert__share {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(31, 86, 56, 0.25);
}
.mo-alert__share-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--ink-body, #424A55);
  flex: 1 1 240px;
  min-width: 0;
}
.mo-alert__share-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mo-alert__share-dot--on {
  background: #2E7A4D;
  box-shadow: 0 0 0 3px rgba(46, 122, 77, 0.16);
}
.mo-alert__share-dot--off {
  background: var(--ink-300, #B8BCC4);
}
.mo-alert__share-form {
  margin: 0;
  flex-shrink: 0;
}

/* ==========================================================================
   Refonte 2026-05-06 — Étape 5 signup PM : Bénéficiaires effectifs (UBO).
   Layout main + aside notice sticky droite. Sub-grid à l'intérieur de
   .mo-dashboard__main pour ne pas casser le pattern stepper sidebar.
   ========================================================================== */
.mo-ubo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 22px;
  align-items: start;
}
.mo-ubo-main {
  min-width: 0;
}
@media (max-width: 900px) {
  .mo-ubo-layout {
    grid-template-columns: 1fr;
  }
}

/* Aside notice sticky — pédagogie UBO/LCB-FT, toujours visible en scrollant */
.mo-ubo-aside {
  background: var(--neutre-50, #FAFAF7);
  border: 1px solid var(--ink-100, #E8E9E5);
  border-radius: 8px;
  padding: 18px 20px;
  position: sticky;
  top: 16px;
  align-self: start;
  font-family: var(--font-primary);
}
@media (max-width: 900px) {
  .mo-ubo-aside {
    position: static;
  }
}
.mo-ubo-aside__eyebrow {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500, #6E747C);
  margin: 0 0 8px;
  font-weight: var(--weight-medium, 500);
}
.mo-ubo-aside__title {
  font-family: var(--font-secondary, "Stack Sans Headline"), system-ui, sans-serif;
  font-size: 15px;
  font-weight: var(--weight-medium, 500);
  margin: 0 0 8px;
  line-height: 1.3;
  color: var(--ink-900, #1C1F24);
}
.mo-ubo-aside__text {
  font-size: 12px;
  color: var(--ink-body, #424A55);
  line-height: 1.6;
  margin: 0 0 12px;
}
.mo-ubo-aside__text strong {
  color: var(--ink-900, #1C1F24);
  font-weight: var(--weight-medium, 500);
}
.mo-ubo-aside__section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-100, #E8E9E5);
}
.mo-ubo-aside__section h4 {
  font-size: 12px;
  font-weight: var(--weight-medium, 500);
  margin: 0 0 6px;
  color: var(--ink-900, #1C1F24);
}
.mo-ubo-aside__section ul {
  margin: 0;
  padding-left: 16px;
  font-size: 11px;
  color: var(--ink-body, #424A55);
  line-height: 1.6;
}
.mo-ubo-aside__section li {
  margin-bottom: 4px;
}
.mo-ubo-aside__link {
  font-size: 12px;
  color: var(--bronze-500, #A87C3D);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-block;
  margin-top: 12px;
}
.mo-ubo-aside__link:hover {
  color: var(--bronze-600, #8E6730);
}

/* Status compact UBOD — pour l'état "en édition".
   Aligné en haut du main column (pas d'espace au-dessus), respiration en
   dessous pour le séparer de la card du form. */
.mo-ubo-status {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--neutre-50, #FAFAF7);
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 13px;
}
.mo-ubo-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bronze-500, #A87C3D);
  flex-shrink: 0;
}
.mo-ubo-status__text {
  color: var(--ink-body, #424A55);
}
.mo-ubo-status__text strong {
  color: var(--ink-900, #1C1F24);
  font-weight: var(--weight-medium, 500);
}

/* Listing bénéficiaires déclarés */
.mo-ubo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Refonte 2026-05-12 — force la stack V2 sinon hérite du body legacy
     (Webflow Open Sans) sur les pages workspace admin. Cascade naturellement
     sur tous les enfants : name, modify, dt, dd. */
  font-family: var(--font-primary, sans-serif);
}
.mo-ubo-item {
  background: var(--neutre-50, #FAFAF7);
  border-radius: 6px;
  padding: 14px 16px;
}
.mo-ubo-item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.mo-ubo-item__name {
  font-size: 15px;
  font-weight: var(--weight-medium, 500);
  margin: 0;
  color: var(--ink-900, #1C1F24);
}
.mo-ubo-item__modify {
  font-size: 12px;
  color: var(--bronze-500, #A87C3D);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mo-ubo-item__modify:hover {
  color: var(--bronze-600, #8E6730);
}
.mo-ubo-item__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  font-size: 12px;
  margin: 0;
}
.mo-ubo-item__grid > div {
  min-width: 0;
}
.mo-ubo-item__grid dt {
  color: var(--ink-500, #6E747C);
  margin: 0;
}
.mo-ubo-item__grid dd {
  margin: 0;
  color: var(--ink-900, #1C1F24);
}
@media (max-width: 600px) {
  .mo-ubo-item__grid {
    grid-template-columns: 1fr;
  }
}

/* Bloc Finaliser — accent warning bronze, action critique MP */
/* Composition pattern bronze sable : compose .mo-bronze-card + .mo-ubo-finalize.
   Ne reste ici que ce qui est spécifique au contexte (padding, margin). */
.mo-ubo-finalize {
  padding: 18px 22px;
  margin: 14px 0;
}
.mo-ubo-finalize__title {
  font-family: var(--font-secondary, "Stack Sans Headline"), system-ui, sans-serif;
  font-size: 16px;
  font-weight: var(--weight-medium, 500);
  color: var(--bronze-700, #6E4F1F);
  margin: 0 0 6px;
  line-height: 1.3;
}
.mo-ubo-finalize__text {
  font-size: 13px;
  color: var(--bronze-700, #6E4F1F);
  margin: 0 0 14px;
  line-height: 1.55;
}

/* Bouton dépliant "+ Ajouter un bénéficiaire" — pattern progressive disclosure
   via <details> HTML natif. Le summary s'affiche comme un bouton/card cliquable.
   Une fois ouvert, le contenu (card form ajout) apparaît dessous. */
.mo-ubo-add {
  margin-bottom: 14px;
}
.mo-ubo-add[open] > summary {
  border-radius: 8px 8px 0 0;
  border-bottom: 0;
}
.mo-ubo-add > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: white;
  border: 1px dashed var(--ink-200, #D6D8DC);
  border-radius: 8px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--weight-medium, 500);
  color: var(--ink-900, #1C1F24);
  transition: border-color var(--duration-fast, 140ms) ease,
              background var(--duration-fast, 140ms) ease;
}
.mo-ubo-add > summary::-webkit-details-marker { display: none; }
.mo-ubo-add > summary:hover {
  border-color: var(--bronze-500, #A87C3D);
  background: var(--neutre-50, #FAFAF7);
}
.mo-ubo-add__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bronze-200, #E8D9B8);
  color: var(--bronze-700, #6E4F1F);
  font-size: 16px;
  font-weight: var(--weight-medium, 500);
  flex-shrink: 0;
  line-height: 1;
}
.mo-ubo-add__icon::before {
  content: "+";
}
.mo-ubo-add__label {
  flex: 1;
}
.mo-ubo-add[open] > summary .mo-ubo-add__icon {
  background: var(--ink-900, #1C1F24);
  color: white;
}
.mo-ubo-add[open] > summary .mo-ubo-add__icon::before {
  content: "−";
}
.mo-ubo-add__content {
  margin-top: -1px;
}
.mo-ubo-add[open] > .mo-ubo-add__content > .mo-dashboard-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}


/* ==========================================================================
   Refonte 2026-05-06 — KYC personne morale (4 documents).
   Layout : header avec progression + 4 cards numérotées + actions row.
   Charte : ink-900 / cream-50 / bronze-500 / céladon-dark / terracotta-dark.
   ========================================================================== */

/* Header avec progression */
.mo-kyc-pm-header {
  margin-bottom: 18px;
}
.mo-kyc-pm-title {
  font-family: var(--font-secondary, "Stack Sans Headline"), system-ui, sans-serif;
  font-size: 24px;
  font-weight: var(--weight-medium, 500);
  color: var(--ink-900, #1C1F24);
  margin: 4px 0 6px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.mo-kyc-pm-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--neutre-50, #FAFAF7);
  border: 1px solid var(--ink-100, #E8E9E5);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 14px;
}
.mo-kyc-pm-progress__text {
  font-size: 13px;
  font-weight: var(--weight-medium, 500);
  color: var(--ink-900, #1C1F24);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.mo-kyc-pm-progress__bar {
  flex: 1;
  height: 6px;
  background: var(--ink-100, #E8E9E5);
  border-radius: 3px;
  overflow: hidden;
}
.mo-kyc-pm-progress__fill {
  height: 100%;
  background: var(--bronze-500, #A87C3D);
  transition: width 220ms ease;
}

/* Card document */
.mo-kyc-pm-card {
  background: white;
  border: 1px solid var(--ink-100, #E8E9E5);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 14px;
}
.mo-kyc-pm-card.is-validated {
  border-color: rgba(46, 122, 77, 0.25);
  background: linear-gradient(white, white) padding-box, rgba(46, 122, 77, 0.04);
}
.mo-kyc-pm-card.is-refused {
  border-color: rgba(177, 74, 34, 0.3);
}
.mo-kyc-pm-card.is-outdated {
  border-color: rgba(168, 124, 61, 0.35);
}

.mo-kyc-pm-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mo-kyc-pm-card__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink-100, #E8E9E5);
  color: var(--ink-500, #6E747C);
  font-size: 13px;
  font-weight: var(--weight-medium, 500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mo-kyc-pm-card.is-validated .mo-kyc-pm-card__num {
  background: rgba(46, 122, 77, 0.12);
  color: #1F5638;
}
.mo-kyc-pm-card.is-pending .mo-kyc-pm-card__num {
  background: rgba(55, 138, 221, 0.1);
  color: #185FA5;
}
.mo-kyc-pm-card.is-refused .mo-kyc-pm-card__num {
  background: rgba(177, 74, 34, 0.1);
  color: #B14A22;
}
.mo-kyc-pm-card.is-outdated .mo-kyc-pm-card__num {
  background: rgba(168, 124, 61, 0.14);
  color: var(--bronze-700, #6E4F1F);
}
.mo-kyc-pm-card__heading {
  flex: 1;
  min-width: 0;
}
.mo-kyc-pm-card__title {
  font-family: var(--font-secondary, "Stack Sans Headline"), system-ui, sans-serif;
  font-size: 17px;
  font-weight: var(--weight-medium, 500);
  color: var(--ink-900, #1C1F24);
  margin: 0;
  line-height: 1.3;
}
.mo-kyc-pm-card__hint {
  font-size: 13px;
  color: var(--ink-500, #6E747C);
  margin: 4px 0 0;
  line-height: 1.5;
  font-style: italic;
}
.mo-kyc-pm-card__body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-100, #E8E9E5);
}

/* Pill de statut */
.mo-kyc-pm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: var(--weight-medium, 500);
  padding: 4px 12px;
  border-radius: 99em;
  flex-shrink: 0;
  white-space: nowrap;
}
.mo-kyc-pm-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mo-kyc-pm-pill--todo {
  background: var(--ink-100, #E8E9E5);
  color: var(--ink-500, #6E747C);
}
.mo-kyc-pm-pill--todo .mo-kyc-pm-pill__dot {
  background: var(--ink-400, #9AA0A8);
}
.mo-kyc-pm-pill--pending {
  background: rgba(55, 138, 221, 0.1);
  color: #185FA5;
}
.mo-kyc-pm-pill--pending .mo-kyc-pm-pill__dot {
  background: #378ADD;
}
.mo-kyc-pm-pill--validated {
  background: rgba(46, 122, 77, 0.12);
  color: #1F5638;
}
.mo-kyc-pm-pill--validated .mo-kyc-pm-pill__dot {
  background: #2E7A4D;
}
.mo-kyc-pm-pill--refused {
  background: rgba(177, 74, 34, 0.1);
  color: #B14A22;
}
.mo-kyc-pm-pill--refused .mo-kyc-pm-pill__dot {
  background: #B14A22;
}
.mo-kyc-pm-pill--outdated {
  background: rgba(168, 124, 61, 0.16);
  color: var(--bronze-700, #6E4F1F);
}
.mo-kyc-pm-pill--outdated .mo-kyc-pm-pill__dot {
  background: var(--bronze-500, #A87C3D);
}

/* Card UBO (formulaire dédié, pas un upload) */
.mo-kyc-pm-card--ubo {
  border-color: rgba(168, 124, 61, 0.25);
  background: linear-gradient(white, white) padding-box, rgba(168, 124, 61, 0.04);
}
.mo-kyc-pm-ubo__lead {
  font-size: 13px;
  color: var(--ink-body, #424A55);
  line-height: 1.6;
  margin: 0 0 14px;
}
.mo-kyc-pm-ubo__action {
  display: flex;
  justify-content: flex-start;
}

/* Footer note conformité LCB-FT */
.mo-kyc-pm-footer-note {
  font-size: 12px;
  color: var(--ink-500, #6E747C);
  font-style: italic;
  margin: 18px 0 14px;
  line-height: 1.55;
}

/* Mobile : pill passe en dessous du title si manque de place */
@media (max-width: 600px) {
  .mo-kyc-pm-card__head {
    flex-wrap: wrap;
  }
  .mo-kyc-pm-pill {
    margin-top: 4px;
  }
}


/* ==========================================================================
   NOUVEAUX COMPOSANTS « DOUX » — 05/10/2026
   Interrupteur, curseur, pastilles de filtre, variantes de bouton, dépôt
   de fichier et Select2. Tokens --field-* / --control-* uniquement.
   ========================================================================== */

/* --- Interrupteur ---------------------------------------------------------
   <label class="mo-switch">
     <input type="checkbox" role="switch" name="…">
     <span class="mo-switch__track" aria-hidden="true"></span>
     <span class="mo-switch__label">Libellé</span>
   </label>                                                                 */
.mo-switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 28px;
  font-size: 14px;
  color: var(--label-fg);
  cursor: pointer;
}
.mo-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.mo-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  border-radius: 9999px;
  background: var(--control-off);
  transition: background-color var(--duration-base) var(--ease);
}
.mo-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform var(--duration-base) var(--ease);
}
.mo-switch input:checked + .mo-switch__track {
  background: var(--switch-on);
}
.mo-switch input:checked + .mo-switch__track::after {
  transform: translateX(18px);
}
.mo-switch input:focus-visible + .mo-switch__track {
  outline: 2px solid var(--field-ring);
  outline-offset: 2px;
}
.mo-switch:has(input:disabled) {
  color: var(--field-disabled-fg);
  cursor: not-allowed;
}
.mo-switch input:disabled + .mo-switch__track {
  background: var(--field-disabled-bg);
}
.mo-switch input:disabled + .mo-switch__track::after {
  background: var(--field-bg);
}
.mo-form--compact .mo-switch__track {
  width: 36px;
  height: 22px;
}
.mo-form--compact .mo-switch__track::after {
  width: 16px;
  height: 16px;
}
.mo-form--compact .mo-switch input:checked + .mo-switch__track::after {
  transform: translateX(14px);
}

/* --- Curseur --------------------------------------------------------------
   <div class="mo-range">
     <div class="mo-range__head"><label for="x">Durée souhaitée</label>
       <output class="mo-range__value" for="x">12 mois</output></div>
     <input type="range" id="x" class="mo-range__input">
     <div class="mo-range__scale"><span>4 mois</span><span>36 mois</span></div>
   </div>
   Le remplissage suit --range-fill, tenu à jour par static/js/mo-range.js. */
.mo-range {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mo-range__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--label-fg);
}
.mo-range__head label { margin: 0; }
.mo-range__value {
  font-family: var(--font-headline);
  font-size: 15px;
  color: var(--label-fg);
}
.mo-range__input {
  --range-fill: 50%;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.mo-range__input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--control-on) var(--range-fill), var(--control-off) var(--range-fill));
}
.mo-range__input::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--control-off);
}
.mo-range__input::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--control-on);
}
.mo-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 2px var(--control-on), 0 2px 6px var(--ink-900-18);
}
.mo-range__input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 2px var(--control-on), 0 2px 6px var(--ink-900-18);
}
.mo-range__input:focus-visible {
  outline: 2px solid var(--field-ring);
  outline-offset: 4px;
  border-radius: 4px;
}
.mo-range__scale {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--help-fg);
}

/* --- Pastilles de filtre --------------------------------------------------
   <button type="button" class="mo-filter-chip" aria-pressed="true">Sérénité</button>
   (Ne pas confondre avec .mo-chip, réservé aux statuts de projet.)          */
.mo-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mo-filter-chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 9999px;
  background: var(--field-bg);
  color: var(--label-fg);
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease);
}
.mo-filter-chip[aria-pressed="true"] {
  background: var(--control-on);
  color: var(--control-on-fg);
}
.mo-filter-chip:focus-visible {
  outline: 2px solid var(--field-ring);
  outline-offset: 2px;
}

/* --- Boutons : hauteurs, secondaire, tertiaire, désactivé, chargement ---- */
.mo-button {
  min-height: 48px;
  padding: 0 22px;
}
.mo-button--block {
  min-height: 52px;
  font-size: 15px;
}
.mo-form--compact .mo-button {
  min-height: 40px;
  padding: 0 18px;
}
.mo-button--secondary,
a.mo-button--secondary,
a.mo-button--secondary:link,
a.mo-button--secondary:visited {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border-color: var(--btn-secondary-bg);
}
.mo-button--secondary:hover,
.mo-button--secondary:focus-visible,
a.mo-button--secondary:hover,
a.mo-button--secondary:focus-visible {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  filter: brightness(0.97);
}
.mo-button--tertiary,
a.mo-button--tertiary,
a.mo-button--tertiary:link,
a.mo-button--tertiary:visited {
  background: transparent;
  border-color: transparent;
  color: var(--label-fg);
  padding: 0 8px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mo-surface-dark .mo-button--primary,
.mo-surface-dark a.mo-button--primary {
  background-color: var(--neutre-50);
  border-color: var(--neutre-50);
  color: var(--ink-900);
}
.mo-button:disabled,
.mo-button.is-disabled {
  background-color: var(--neutre-200);
  border-color: var(--neutre-200);
  color: var(--ink-300);
  cursor: not-allowed;
}
.mo-button:focus-visible {
  outline: 2px solid var(--field-ring);
  outline-offset: 2px;
}
.mo-button--loading {
  opacity: 0.85;
  cursor: progress;
}
.mo-button--loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  box-sizing: border-box;
  animation: mo-button-spin 0.8s linear infinite;
}
@keyframes mo-button-spin {
  to { transform: rotate(360deg); }
}

/* --- Dépôt de fichier (zone de dépôt, bureau) ---------------------------- */
@media (min-width: 768px) {
  .mo-upload {
    background: var(--upload-bg);
    color: var(--label-fg);
    border: 1.5px dashed var(--control-off);
    border-radius: 14px;
  }
  .mo-upload:hover {
    background: var(--field-bg-focus);
    border-color: var(--control-on);
  }
}

/* --- Select2 (legacy) : mêmes tokens, sans nouveau JS ------------------- */
.mo-form__field .select2-container--default .select2-selection--single,
.mo-form__field .select2-container--default .select2-selection--multiple {
  min-height: var(--field-h);
  border: 0 !important;
  border-radius: var(--field-radius) !important;
  background: var(--field-bg);
  display: flex;
  align-items: center;
  padding: 0 12px;
}
.mo-form__field .select2-container--default.select2-container--focus .select2-selection,
.mo-form__field .select2-container--default.select2-container--open .select2-selection {
  background: var(--field-bg-focus);
  box-shadow: inset 0 0 0 var(--field-ring-width) var(--field-ring);
}
.select2-dropdown {
  background: var(--menu-bg);
  border: 1px solid var(--neutre-200) !important;
  border-radius: 14px !important;
  padding: 6px;
  box-shadow: 0 8px 24px var(--ink-900-10);
}
.select2-results__option {
  border-radius: 10px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--menu-active) !important;
  color: var(--label-fg) !important;
}


/* ==========================================================================
   PAGES D'AUTHENTIFICATION « DOUX » — connexion et inscription (05/10/2026)
   Maquettes Connexion.dc.html / Inscription.dc.html. En-tête allégé
   (_auth_header.html) et pied compact (_auth_footer.html).
   ========================================================================== */
/* Typographie de la charte imposée sur tout le gabarit : sans cela, la feuille
   legacy (myoptionsna.css) rabat p, a, li, dl… sur une police système. */
.mo-auth,
.mo-auth p,
.mo-auth a,
.mo-auth li,
.mo-auth dt,
.mo-auth dd,
.mo-auth span,
.mo-auth label,
.mo-auth legend,
.mo-auth input,
.mo-auth button {
  font-family: var(--font-primary);
}
.mo-auth .mo-auth__title,
.mo-auth .mo-auth-card__title,
.mo-auth .mo-auth-panel__phone,
.mo-auth .mo-auth-card__num {
  font-family: var(--font-headline);
}
/* Pas de césure automatique (base.css l'active sur les paragraphes) ;
   titres équilibrés sur leurs lignes. */
.mo-auth,
.mo-auth p,
.mo-auth li,
.mo-auth dd {
  hyphens: manual;
  -webkit-hyphens: manual;
}
.mo-auth .mo-auth__title,
.mo-auth .mo-auth-card__title {
  text-wrap: balance;
}

.mo-auth {
  background: var(--neutre-50);
  padding: 88px 0;
}
.mo-auth__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 96px;
  align-items: start;
}
/* Même largeur de colonne sur toutes les pages d'authentification (connexion,
   inscription, mot de passe, compte créé) : placement identique d'une page à
   l'autre, et les pastilles du mot de passe tiennent sur une ligne. */
.mo-auth__main {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.mo-auth__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mo-auth__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-700, var(--bronze-600));
}
.mo-auth__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: var(--font-h1);
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--ink-900);
}
.mo-auth__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-body);
}
.mo-auth__lead a { color: var(--ink-900); font-weight: 500; }

.mo-auth__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
}
.mo-auth__form .mo-form__field,
.mo-auth__form .mo-form__fieldset,
.mo-auth__form .mo-form__checkbox { margin: 0; }
.mo-auth__form .mo-form__row { margin: 0; gap: 22px 16px; }
.mo-auth__form .mo-form__legend { margin-bottom: 10px; }
.mo-auth__label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
}
.mo-auth__label-row label { margin: 0 !important; }
.mo-auth__label-row a {
  font-size: 13px;
  color: var(--ink-500);
}
.mo-auth__label-row a:hover { color: var(--ink-900); }
.mo-auth__checks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 6px;
}
.mo-auth__form .mo-button--block { margin-top: 4px; }

.mo-auth__assurance {
  padding-top: 24px;
  border-top: 1px solid var(--neutre-200);
}
.mo-auth__assurance p {
  margin: 0;
  max-width: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-500);
}
.mo-auth__assurance strong { font-weight: 500; color: var(--ink-900); }
.mo-auth__assurance a { color: var(--ink-900); }

/* Colonne droite */
.mo-auth__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mo-auth-card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mo-auth-card__eyebrow,
.mo-auth-panel__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-600);
}
.mo-auth-card__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink-900);
}
.mo-auth-card__facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-body);
}
.mo-auth-card__facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--neutre-200);
}
.mo-auth-card__facts div:last-child { padding-bottom: 0; border-bottom: 0; }
.mo-auth-card__facts dt { font-weight: 400; }
.mo-auth-card__facts dd { margin: 0; font-weight: 500; color: var(--ink-900); text-align: right; }
.mo-auth-card .mo-button { align-self: flex-start; margin-top: 4px; }
.mo-auth-card__note {
  margin: 0;
  font-size: 12px;
  color: var(--ink-500);
}
.mo-auth-card__note a { color: var(--ink-900); }

.mo-auth-panel {
  background: var(--ink-900);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink-300);
}
.mo-auth-panel__eyebrow { color: var(--bronze-200); margin-bottom: 8px; }
.mo-auth-panel__row {
  padding: 16px 0;
  border-bottom: 1px solid var(--ink-700);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.mo-auth-panel__row--inline {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
/* Téléphone : sobre (retour Lucile 05/10 — le bleuet en 26 px était trop voyant). */
.mo-auth-panel__phone {
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 500;
  color: var(--neutre-50);
  text-decoration: none;
}
.mo-auth-panel__phone:hover { color: var(--neutre-50); text-decoration: underline; text-underline-offset: 3px; }
.mo-auth-panel__strong { font-size: 15px; color: var(--neutre-50); }
.mo-auth-panel__chat {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 9999px;
  background: var(--neutre-50);
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.mo-auth-panel__chat:hover { color: var(--ink-900); }
.mo-auth-panel__link {
  padding: 16px 0 0;
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: var(--neutre-50);
  text-decoration: none;
}
.mo-auth-panel__link:hover { color: var(--neutre-50); }
.mo-auth-panel__link span { color: var(--bronze-200); }
/* Étapes « Et ensuite » (inscription) : dans une carte blanche, comme la carte
   « Nouveau sur myOptions ? » de la connexion. */
.mo-auth-card__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mo-auth-card__steps li {
  padding: 14px 0;
  border-top: 1px solid var(--neutre-200);
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
}
.mo-auth-card__steps li:last-child { padding-bottom: 0; }
.mo-auth-card__num {
  font-size: 13px;
  color: var(--bronze-600);
}
.mo-auth-card__step-title { display: block; font-size: 15px; font-weight: 500; color: var(--ink-900); }
.mo-auth-card__step-text { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-500); }


@media (max-width: 1024px) {
  .mo-auth { padding: 56px 0 72px; }
  .mo-auth__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .mo-auth__main { max-width: none; }
}
@media (max-width: 640px) {
  .mo-auth-card, .mo-auth-panel { padding: 24px; }
}

/* Règles du mot de passe en pastilles (inscription, réinitialisation) :
   neutres au repos, celadon quand la règle est remplie. */
.mo-form__pwd-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mo-form__pwd-rule {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 9999px;
  background: var(--field-bg);
  font-size: 12px;
  font-weight: 500;
  color: var(--help-fg);
  transition: background-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}
.mo-form__pwd-rule::before {
  content: "";
  display: none;
  width: 4px;
  height: 8px;
  margin: -2px 1px 0 1px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
}
/* La coche prend sa place sur le padding gauche : la pastille ne s'élargit
   presque pas et la rangée tient sur une ligne une fois les règles remplies. */
.mo-form__pwd-rule--ok {
  padding-left: 6px;
  background: var(--celadon-50);
  color: var(--celadon-700);
}
.mo-form__pwd-rule--ok::before { display: inline-block; }

/* =============================================================================
   Listes dynamiques — bouton d'ajout standard et suppression de ligne
   (handoff « champs workspace », 08/10/2026). Logique : static/js/mo-dyn-table.js.
   Un seul « + Ajouter … » sous la liste, aligné à gauche ; un × discret en fin
   de chaque ligne. Remplace les boutons ronds + / − .
   ============================================================================= */
.mo-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  margin-top: 10px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--bleuet-50);
  color: var(--bleuet-dark);
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mo-add-btn svg {
  width: 14px;
  height: 14px;
}
.mo-add-btn:hover {
  background: var(--bleuet-dark);
  color: var(--cream-50);
}
.mo-add-btn:focus-visible {
  outline: 2px solid var(--bleuet-dark);
  outline-offset: 2px;
}

.mo-row-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-300);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mo-row-remove svg {
  width: 14px;
  height: 14px;
}
.mo-row-remove:hover {
  background: var(--cream-100);
  color: var(--ink-900);
}
.mo-row-remove:focus-visible {
  outline: 2px solid var(--ink-300);
  outline-offset: 1px;
}


/* =============================================================================
   .mo-select — liste déroulante de la charte (handoff « champs workspace »,
   08/10/2026). Logique : static/js/mo-select.js (amélioration progressive :
   le <select> natif reste dans le DOM, masqué). Aucun bleu système.
   ============================================================================= */
.mo-select {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  font-family: var(--font-primary);
}
/* Le conteneur de champ s'efface : fond, anneau de focus et chevron sont portés
   par le bouton de la liste (sinon double cadre). */
.mo-form__input-wrap:has(> .mo-select),
.mo-form__input-wrap:has(> .mo-select):focus-within,
.mo-project-workspace .mo-form__field .mo-form__input-wrap:has(> .mo-select) {
  background: transparent;
  box-shadow: none;
  min-height: 0;
  padding: 0; /* aligne la liste sur son libellé */
}
.mo-form__input-wrap:has(> .mo-select)::after {
  display: none;
}
/* Erreur : portée par le bouton. */
.mo-form__field.has-error .mo-select__trigger,
.mo-form__field:has(> .mo-form__error) .mo-select__trigger {
  background: var(--field-error-bg);
  box-shadow: inset 0 0 0 1px var(--field-error);
}
/* Spécificité suffisante pour primer sur « .mo-form__field select » sans !important. */
.mo-select > select.mo-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  opacity: 0;
  pointer-events: none;
  border: 0;
}
.mo-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: var(--field-h);
  padding: 0 16px;
  border: 0;
  border-radius: var(--field-radius);
  background: var(--field-bg);
  color: var(--ink-900);
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
.mo-select__value {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mo-select.is-empty .mo-select__value {
  color: var(--ink-300);
}
.mo-select__chevron {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--ink-500);
  transition: transform .15s ease;
}
.mo-select__trigger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--field-ring);
}
/* Ouvert : même anneau fin que les champs texte sélectionnés (cadre adouci). */
.mo-select.is-open .mo-select__trigger {
  background: var(--field-bg-focus);
  box-shadow: inset 0 0 0 var(--field-ring-width) var(--field-ring);
}
.mo-select.is-open .mo-select__chevron {
  transform: rotate(180deg);
}
.mo-select.is-disabled {
  opacity: .55;
}
.mo-select.is-disabled .mo-select__trigger {
  cursor: default;
}

.mo-select__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 180px;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface-card);
  box-shadow: 0 12px 32px rgba(28, 31, 36, .12);
}
.mo-select__search {
  padding: 2px 2px 6px;
}
/* Sélecteur renforcé : prime sur les règles « input[type="search"] » des champs. */
.mo-select .mo-select__search input.mo-select__search-input[type="search"] {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--neutre-100);
  box-shadow: none;
  font-family: var(--font-primary);
  font-size: 13px;
  color: var(--ink-900);
}
.mo-select .mo-select__search input.mo-select__search-input[type="search"]::placeholder {
  color: var(--ink-300);
}
.mo-select .mo-select__search input.mo-select__search-input[type="search"]:focus {
  outline: none;
  background: var(--neutre-100);
  box-shadow: inset 0 0 0 1px var(--field-ring);
}
.mo-select__list {
  max-height: 280px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.mo-select__list:focus {
  outline: none;
}
.mo-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-900);
  cursor: pointer;
}
.mo-select__option.is-empty {
  color: var(--ink-300);
}
.mo-select__option.is-active {
  background: var(--neutre-100);
}
.mo-select__option.is-selected {
  background: var(--cream-100);
  font-weight: 500;
}
.mo-select__option[aria-disabled="true"] {
  opacity: .5;
  cursor: default;
}
.mo-select__check {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--ink-900);
}
.mo-select__group {
  padding: 10px 12px 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.mo-select__none {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-500);
}

/* Lignes compactes (liens sociaux) : 44 px. */
.mo-social-row .mo-select__trigger {
  height: 44px;
}

/* =============================================================================
   .mo-chips — choix exclusif en pastilles (radios natifs masqués), réutilisable
   (handoff « Représentant légal », 08/10/2026). Aucune valeur par défaut.
   ============================================================================= */
.mo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: var(--field-h);
  align-items: center;
}
.mo-chips__item {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.mo-chips__item input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.mo-chips__item span {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--field-bg);
  color: var(--ink-700);
  font-family: var(--font-primary);
  font-size: 13.5px;
  font-weight: 400;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.mo-chips__item:hover span {
  background: var(--cream-200);
}
.mo-chips__item input:checked + span {
  background: var(--ink-900);
  color: var(--cream-50);
  font-weight: 500;
}
.mo-chips__item input:focus-visible + span {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
}

/* =============================================================================
   .mo-switch — interrupteur Oui / Non (bouton role="switch"), réutilisable.
   Oui = piste ink-900, Non = piste ink-100 ; jamais de bleu. État « Non
   renseigné » quand aucune réponse n'existe. La soumission reste portée par
   deux radios natifs (.mo-switch__native, masqués).
   ============================================================================= */
.mo-switch__native {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.mo-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-primary);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.mo-switch__label {
  min-width: 30px;
  text-align: right;
  color: var(--ink-500);
  white-space: nowrap;
}
.mo-switch.is-on .mo-switch__label {
  color: var(--ink-900);
}
.mo-switch.is-unset .mo-switch__label {
  color: var(--ink-300);
  font-weight: 400;
}
.mo-switch__track {
  position: relative;
  display: inline-block;
  flex: none;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--ink-100);
  transition: background .15s ease;
}
.mo-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(28, 31, 36, .18);
  transition: transform .15s ease;
}
.mo-switch[role="switch"] .mo-switch__track::after {
  content: none;
}
.mo-switch.is-on .mo-switch__track {
  background: var(--ink-900);
}
.mo-switch.is-on .mo-switch__thumb {
  transform: translateX(18px);
}
.mo-switch:focus-visible {
  outline: none;
}
.mo-switch:focus-visible .mo-switch__track {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
}

/* =============================================================================
   .xdsoft_datetimepicker.mo-datepicker — habillage v4 du calendrier jQuery datetimepicker.
   Activé par l'option className: 'mo-datepicker' (les autres pages gardent
   le rendu d'origine). Locale fr, semaine commençant le lundi côté JS.
   ============================================================================= */
.xdsoft_datetimepicker.mo-datepicker {
  margin-top: 6px;
  padding: 12px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-modal);
  color: var(--ink-900);
  font-family: var(--font-primary);
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_datepicker {
  float: none;
  width: 260px;
  margin: 0;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_mounthpicker {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  margin-bottom: 8px;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_today_button {
  display: none !important;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_prev,
.xdsoft_datetimepicker.mo-datepicker .xdsoft_next {
  float: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-image: none;
  opacity: 1;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_next {
  order: 9;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_prev:hover,
.xdsoft_datetimepicker.mo-datepicker .xdsoft_next:hover {
  background-color: var(--neutre-200);
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_prev::before,
.xdsoft_datetimepicker.mo-datepicker .xdsoft_next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-left: 1.5px solid var(--ink-500);
  border-bottom: 1.5px solid var(--ink-500);
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_prev::before {
  transform: translate(-30%, -50%) rotate(45deg);
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_next::before {
  transform: translate(-70%, -50%) rotate(-135deg);
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_label {
  float: none;
  width: auto;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_label.xdsoft_month {
  margin-left: auto;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_label.xdsoft_year {
  margin-right: auto;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_label:hover {
  background: var(--neutre-200);
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_label:hover > span {
  text-decoration: none;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_label i {
  width: 6px;
  height: 6px;
  margin: -4px 0 0 7px;
  border-right: 1.5px solid var(--ink-500);
  border-bottom: 1.5px solid var(--ink-500);
  background-image: none;
  opacity: 1;
  transform: rotate(45deg);
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_label > .xdsoft_select {
  top: 34px;
  right: auto;
  left: 0;
  min-width: 100%;
  padding: 4px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-modal);
  font-weight: 400;
  text-align: left;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
  background: var(--neutre-200);
  color: var(--ink-900);
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
  background: var(--ink-900);
  box-shadow: none;
  color: var(--surface-card);
  font-weight: 500;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_calendar table {
  border-collapse: separate;
  border-spacing: 2px;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_calendar th,
.xdsoft_datetimepicker.mo-datepicker .xdsoft_calendar td {
  border: 0;
  background: none;
  text-align: center;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_calendar th {
  height: 28px;
  color: var(--ink-500);
  font-size: 11.5px;
  font-weight: 500;
  cursor: default;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_calendar td {
  height: 34px;
  border-radius: var(--radius-full);
  color: var(--ink-900);
  font-size: 13px;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_calendar td > div {
  padding: 0;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_calendar td.xdsoft_other_month {
  opacity: 0.35;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_calendar td.xdsoft_today {
  box-shadow: inset 0 0 0 1px var(--ink-200);
  color: var(--ink-900);
  font-weight: 600;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_calendar td:hover {
  background: var(--neutre-200) !important;
  color: var(--ink-900) !important;
}
.xdsoft_datetimepicker.mo-datepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker.mo-datepicker .xdsoft_calendar td.xdsoft_current:hover {
  background: var(--ink-900) !important;
  box-shadow: none !important;
  color: var(--surface-card) !important;
  font-weight: 600;
}