/* ==========================================================================
   header.css — myOptions Refonte 2026
   Header desktop : logo + nav + mega-menu + CTAs.
   Doit charger APRÈS tous les CSS legacy pour dominer la cascade.

   Maths du mega-menu :
     - Item  : 15px titre + 4 gap + 13px sous-titre = 44px texte
               padding 10/14px = boîte 64×~240px
     - Grille: 2 cols × (240 + 24 gap) = 504px utile
     - Menu  : 504 + 40 (padding) = 544 → arrondi 560px
     - Hauteur 2 rangées : 64×2 + 4 = 132px
     - Total menu : ~208px de haut selon eyebrow
     - Gap trigger → menu : 8px
   ========================================================================== */


/* ==========================================================================
   1. STRUCTURE : conteneurs, flex, spacing
   ========================================================================== */

.mo-header {
  background-color: var(--neutre-100);
  border-bottom: 0.5px solid var(--neutre-200);
  position: sticky;
  top: 0;
  z-index: 100;
  /* Hauteur FIXE 64px pour matcher le top: 64px de .mo-subnav.
     Sans ça, le contenu du header peut faire moins (60px en mobile),
     et une bande de 4px apparait entre le header et la sous-nav au scroll. */
  min-height: 64px;
}

.mo-header .navbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-12);                 /* 48px entre logo, nav, actions */
  padding: 14px var(--page-gutter);
  max-width: var(--container-max);
  margin: 0 auto;
  min-height: 64px;                     /* garantit hauteur totale cohérente */
  box-sizing: border-box;
}


/* ==========================================================================
   2. LOGO
   ========================================================================== */

.mo-header__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  text-decoration: none;
  border: none;
}
.mo-header__brand:hover {
  border: none;
}

.mo-header__brand .text-hide {
  width: 42px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  margin: 0;
  display: block;
}


/* ==========================================================================
   3. NAV PRINCIPALE : liste horizontale de triggers
   ========================================================================== */

.mo-nav {
  display: flex;
  flex: 1;
}

.mo-nav__list {
  display: flex;
  gap: var(--space-12);                 /* 48px entre "Placer", "Se financer", etc. */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* IMPORTANT : position relative pour que chaque mega-menu soit ancré
   à SON PROPRE nav-item, pas à un ancêtre commun. */
.mo-header .mo-nav__item,
.mo-header li.mo-nav__item.nav-item {
  position: relative !important;
  margin: 0;
}

.mo-nav__link,
.mo-header .mo-nav__link,
.mo-header .mo-nav__link.nav-link,
.mo-header .mo-nav__link.nav-link.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--ink-900);                 /* uniformisé ink-900 sur tous les états (parti-pris v2) */
  padding: 8px 0;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;                  /* empêche "Tous les projets" de casser */
  transition: border-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease);
}
.mo-header .mo-nav__link {
  background: none !important;
}

.mo-nav__link:hover,
.mo-nav__link:focus-visible {
  color: var(--ink-900);
  border-bottom-color: var(--neutre-200);
  outline: none;
}
.mo-nav__link.is-active,
.mo-nav__link.active,
.mo-nav__link[aria-expanded="true"],
.mo-nav__link.show {
  color: var(--ink-900);
  border-bottom-color: var(--ink-900);
}

/* Neutralise le caret Bootstrap natif */
.mo-header .mo-nav__link.dropdown-toggle::after {
  display: none;
}

/* Chevron custom */
.mo-nav__caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  display: inline-block;
  margin-left: 4px;
  margin-bottom: 2px;
  transition: transform var(--duration-base) var(--ease);
}
.mo-nav__link[aria-expanded="true"] .mo-nav__caret,
.mo-nav__link.show .mo-nav__caret {
  transform: rotate(-135deg);
  margin-bottom: -2px;
}


/* ==========================================================================
   4. MEGA-MENU : drawer blanc ancré sur chaque trigger
   ========================================================================== */

/* État fermé — on s'assure que le menu est caché même si le legacy dit block. */
.mo-header .dropdown-menu.mo-megamenu:not(.show) {
  display: none !important;
}

/* État ouvert — positionnement, forme, fond. Spécificité intentionnellement forte
   pour battre .navbar-expand-lg .navbar-nav .dropdown-menu.show du legacy. */
.mo-header .navbar-expand-lg .navbar-nav .dropdown-menu.mo-megamenu.show,
.mo-header .dropdown-menu.mo-megamenu.show {
  display: block;
  flex-direction: unset;
  overflow: visible;

  /* Largeur et taille par défaut — 4 items en grille 2×2 */
  min-width: 560px;
  max-width: 560px;

  /* Position : aligné à gauche du trigger, 8px sous, grâce à position:relative du li */
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  margin: 0;
  transform: none;

  /* Visuel : ivoire clair, bordure fine, radius uniforme */
  padding: 20px;
  background-color: var(--neutre-50);
  border: 0.5px solid var(--neutre-200);
  border-radius: var(--radius-lg);       /* 12px UNIFORME — tous coins */
  box-shadow: 0 4px 16px rgba(28, 31, 36, 0.06),
              0 1px 4px rgba(28, 31, 36, 0.04);

  /* Comportement */
  z-index: 500;
  transition: none;
}

/* Variations de largeur selon le nombre d'items pour éviter les vides.
   Actuellement tous les mega-menus (3 ou 4 items) sont en 2 colonnes 560px. */

/* Eyebrow — aligné sur le bord interne des items */
.mo-megamenu__eyebrow {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-600);
  margin: 0 0 16px 14px;        /* 14px pour aligner sur le padding interne des items */
}

/* Grille 2 colonnes — padding horizontal symétrique de chaque côté */
.mo-header .mo-megamenu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mo-megamenu__item {
  margin: 0;
  padding: 0;
}

/* Bloc cliquable d'un item — padding 10/14px, radius 8px, hover gris clair */
.mo-megamenu__link {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-md);       /* 8px */
  text-decoration: none;
  color: inherit;
  border: none;
  transition: background-color var(--duration-base) var(--ease);
}
.mo-megamenu__link:hover,
.mo-megamenu__link:focus-visible {
  background-color: var(--neutre-100);
  outline: none;
  border: none;
}

.mo-megamenu__link-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.mo-megamenu__title {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: var(--weight-medium);
  line-height: 1.35;
  color: var(--ink-900);
}

.mo-megamenu__arrow {
  color: var(--bronze-600);
  font-size: 13px;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}
.mo-megamenu__link:hover .mo-megamenu__arrow,
.mo-megamenu__link:focus-visible .mo-megamenu__arrow {
  opacity: 1;
  transform: translateX(2px);
}

.mo-megamenu__subtitle {
  display: block;
  font-family: var(--font-primary);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 32ch;
}
.mo-megamenu__subtitle .nums {
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-body);
  font-weight: var(--weight-medium);
}


/* ==========================================================================
   4 bis. PANNEAU PLEINE LARGEUR v4 (templates/_header_megapanel.html)
   Maquette validée le 01/10/2026. Codes du menu mobile : eyebrows bronze,
   titre semi-gras, sous-titre gris, survol crème. Le panneau s'ancre sur le
   header (sticky) : navbar et li repassent en position statique.
   ========================================================================== */
@media (min-width: 992px) {
  .mo-header .navbar,
  .mo-header li.mo-nav__item.nav-item.has-megapanel { position: static !important; }
}

.mo-header .dropdown-menu.mo-megapanel:not(.show) { display: none !important; }

.mo-header .navbar-expand-lg .navbar-nav .dropdown-menu.mo-megapanel.show,
.mo-header .dropdown-menu.mo-megapanel.show {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  transform: none;
  background-color: var(--cream-50);
  border: 0;
  border-top: 1px solid var(--neutre-200);
  border-bottom: 1px solid var(--neutre-200);
  border-radius: 0;
  box-shadow: var(--shadow-modal);
  z-index: 500;
}
/* Voile sur la page sous le panneau ; laisse passer le clic (fermeture Bootstrap). */
.mo-header .dropdown-menu.mo-megapanel.show::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
  background: color-mix(in srgb, var(--ink-900) 18%, transparent);
  pointer-events: none;
}

.mo-megapanel__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 320px;
  gap: var(--space-10);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-10) var(--page-gutter) var(--space-12);
}
.mo-megapanel__col + .mo-megapanel__col {
  border-left: 1px solid var(--neutre-200);
  padding-left: var(--space-10);
}

.mo-header .mo-megapanel p,
.mo-header .mo-megapanel a,
.mo-header .mo-megapanel li,
.mo-header .mo-megapanel span { font-family: var(--font-primary); }

.mo-header .mo-megapanel__eyebrow {
  font-size: var(--font-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--bronze-600);
  margin: 0 0 var(--space-3);
}

.mo-megapanel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.mo-megapanel__list li { margin: 0; padding: 0; }

.mo-header .mo-megapanel__link.dropdown-item {
  display: block;
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-3) var(--space-4);
  width: auto;
  white-space: normal;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-900);
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease);
}
.mo-header .mo-megapanel__link.dropdown-item:hover,
.mo-header .mo-megapanel__link.dropdown-item:focus-visible {
  background-color: var(--cream-100);
  color: var(--ink-900);
  outline: none;
}
.mo-header .mo-megapanel__title {
  display: block;
  font-size: var(--font-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.mo-header .mo-megapanel__subtitle {
  display: block;
  margin-top: 2px;
  font-size: var(--font-caption);
  line-height: var(--lh-caption);
  color: var(--ink-500);
}

.mo-megapanel__aside {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--bleuet-50);          /* encart bleu (01/10/2026) */
  border-radius: var(--radius-md);
  color: var(--bleuet-dark);
}
.mo-header .mo-megapanel__aside .mo-megapanel__eyebrow { margin: 0; color: var(--bleuet-dark); }
.mo-header .mo-megapanel__aside-title {
  margin: 0;
  font-size: var(--font-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-semibold);
  color: var(--bleuet-dark);
}
.mo-header .mo-megapanel__aside-text {
  margin: 0;
  font-size: var(--font-caption);
  line-height: var(--lh-caption);
  color: var(--bleuet-dark);
}
.mo-header .mo-megapanel__aside-tel { color: inherit; text-decoration: none; border: 0; }
.mo-header .mo-megapanel__aside-link {
  justify-self: start;
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
  color: var(--bleuet-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  border: 0;
}

@media (max-width: 1199px) {
  .mo-megapanel__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 260px; gap: var(--space-8); }
  .mo-megapanel__col + .mo-megapanel__col { padding-left: var(--space-8); }
}


/* ==========================================================================
   5. ACTIONS DROITE (auth CTAs via dashboardMenu)
   ========================================================================== */

.mo-header #dashboardMenu {
  margin-left: auto;
  flex-shrink: 0;
}
.mo-header #dashboardMenu .navbar-nav {
  flex-direction: row;
  gap: var(--space-6);
  align-items: center;
}
.mo-header #dashboardMenu .nav-item {
  display: flex;
  align-items: center;
}


/* ==========================================================================
   6. BOUTONS — déplacés vers static/css/components.css (refonte 2026-04-27)
   ========================================================================== */


/* ==========================================================================
   7. SURCHARGES LEGACY ciblées (toutes annotées de leur source)
   ========================================================================== */

/* Source : myoptionsna.css:804 header.not-connected{background:var(--neutre-100);padding:8px 0}
   NOTE : ne définit que le fond + padding. La border-bottom est gérée par
   .mo-header et .mo-header--connected pour éviter les conflits de spécificité
   qui créaient une ligne ivoire visible entre header et sous-nav. */
header.mo-header.not-connected,
header.mo-header.sticky-top-menu {
  background-color: var(--neutre-100);
  border-bottom: 0.5px solid var(--neutre-200);
  padding: 0;
}
/* En mode connecté, le fond et la bordure viennent exclusivement de
   .mo-header--connected (plus bas). La classe .connected (legacy) ne doit
   PAS imposer de border claire. */
header.mo-header.connected {
  padding: 0;
  /* background + border déclarés par .mo-header--connected avec !important */
}

/* Source : Bootstrap .navbar-brand + myoptions.css:3737 */
.mo-header .navbar-brand {
  padding: 0;
  margin: 0;
}

/* Source : Bootstrap .navbar-nav */
.mo-header .navbar-nav {
  flex-direction: row;
  gap: var(--space-12);
  align-items: center;
}

/* Source : myoptionsna.css:413  h4,h5,p,a,li,ol{font-family:Geist,...} */
.mo-header .mo-megamenu,
.mo-header .mo-megamenu p,
.mo-header .mo-megamenu a,
.mo-header .mo-megamenu li,
.mo-header .mo-megamenu span,
.mo-header .mo-megamenu__title,
.mo-header .mo-megamenu__subtitle,
.mo-header .mo-megamenu__eyebrow {
  font-family: var(--font-primary);
}

/* Source : myoptionsna.css:1027  .dropdown-toggle::after transform */
.mo-header .mo-nav__link.dropdown-toggle::after {
  display: none;
}


/* ==========================================================================
   7avant. FIX STICKY GLOBAL
   Le legacy myoptions3.css:28 met body {overflow-x: hidden; height: 100%}
   ce qui force implicitement overflow-y: auto sur body et crée un scroll
   container interne. Résultat : position:sticky sur .mo-header et .mo-subnav
   ne fonctionne pas — ils scrollent avec le contenu au lieu de rester collés.
   On remet html en scroll root et body en flow normal.
   ========================================================================== */

html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body {
  overflow-x: clip !important;
  overflow-y: visible !important;
  height: auto !important;
  max-width: 100% !important;
}


/* ==========================================================================
   7bis. MODE CONNECTÉ — variant .mo-header--connected
   Repère visuel fort : quand l'utilisateur est logué, le header bascule en
   encre (ink-700). Le contraste front cream / back encre signale le contexte.
   ========================================================================== */

/* Fond encre + texte inversé + AUCUNE bordure visible entre header et sous-nav.
   La sous-nav (ink-900) étant collée juste après, un trait clair ferait un
   repère visuel parasite. On neutralise la bordure en la rendant invisible. */
header.mo-header--connected,
header.mo-header.connected,
header.mo-header.mo-header--connected.not-connected {
  background-color: var(--ink-900) !important;
  border-bottom: 0 !important;
  color: var(--neutre-50);
}

/* Logo : on suppose que user.is_authenticated bascule sur la version blanche
   (déjà géré dans base.html, voir le block {% if user.is_authenticated %}). */
.mo-header--connected .mo-header__brand .text-hide {
  /* Le logo SVG blanc se lit correctement, pas besoin d'override. */
}

/* Nav publique : texte BLANC PUR sur fond encre, spécificité forte pour
   battre les règles legacy qui redéfinissent la couleur en mode connecté. */
.mo-header.mo-header--connected .mo-nav__link,
.mo-header.mo-header--connected .mo-nav__link.nav-link,
.mo-header.mo-header--connected .mo-nav__link.nav-link.dropdown-toggle {
  color: #FFFFFF !important;
  border-bottom-color: transparent !important;
}
/* Hover / focus / active / open : pas de trait bronze disgracieux —
   on signale l'état uniquement par la légère variation de texte et par
   le caret qui tourne. */
.mo-header.mo-header--connected .mo-nav__link:hover,
.mo-header.mo-header--connected .mo-nav__link:focus-visible,
.mo-header.mo-header--connected .mo-nav__link.is-active,
.mo-header.mo-header--connected .mo-nav__link.active,
.mo-header.mo-header--connected .mo-nav__link[aria-expanded="true"],
.mo-header.mo-header--connected .mo-nav__link.show {
  color: #FFFFFF !important;
  border-bottom-color: transparent !important;
  outline: none;
}

/* Mega-menu : reste clair (cream-50) pour contraster fort avec le header encre */
.mo-header--connected .dropdown-menu.mo-megamenu.show {
  background-color: var(--neutre-50);
  border-color: var(--neutre-200);
  /* Ombre plus prononcée pour détacher du fond sombre */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24),
              0 2px 8px rgba(0, 0, 0, 0.16);
}

/* ===== ZONE UTILISATEUR DROITE EN MODE CONNECTÉ ===== */

.mo-header--connected #dashboardMenu {
  margin-left: auto;
}
.mo-header--connected #dashboardMenu .navbar-nav {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);                    /* 16px */
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Sélecteur de langue intégré dans le header connecté */
.mo-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-300);
}
.mo-lang__sep {
  color: var(--ink-500);
  user-select: none;
}
.mo-lang__btn {
  background: none;
  border: none;
  padding: 4px 2px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: 0.12em;
  transition: color var(--duration-base) var(--ease);
}
.mo-lang__btn.is-active {
  color: var(--neutre-50);
  font-weight: var(--weight-medium);
}
.mo-lang__btn:hover {
  color: var(--neutre-50);
}

/* Wallet (montant cliquable) */
.mo-wallet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 0.5px solid var(--ink-500);
  border-radius: var(--radius-full);
  color: var(--neutre-50);
  font-family: var(--font-primary);
  font-size: 13px;
  font-variant-numeric: tabular-nums lining-nums;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease),
              background-color var(--duration-base) var(--ease);
}
.mo-wallet:hover {
  border-color: var(--bronze-200);
  color: #FFFFFF;
}
.mo-wallet__icon {
  font-size: 12px;
  color: var(--bronze-200);
}
.mo-wallet__amount {
  font-weight: var(--weight-medium);
}

/* Notifications (cloche + badge) */
.mo-notif {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--neutre-50);
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease);
}
.mo-notif:hover {
  background-color: var(--ink-900);
  color: #FFFFFF;
}
.mo-notif__icon {
  width: 18px;
  height: 18px;
}
.mo-notif__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background-color: var(--bronze-200);
  color: var(--ink-900);
  border-radius: 8px;
  font-size: 10px;
  font-weight: var(--weight-medium);
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Cloche de l'équipe (29/10/2026) : bouton du menu déroulant + lignes. */
button.mo-notif { border: 0; background: transparent; padding: 0; cursor: pointer; }
.mo-notif__count { flex: none; min-width: 26px; height: 22px; padding: 0 7px; border-radius: var(--radius-full); background: var(--cream-200); font-size: 12.5px; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.mo-notif__arrow { margin-left: auto; color: var(--ink-500); }

/* Avatar utilisateur (initiales sur fond bronze) */
.mo-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--bronze-200);
  color: var(--ink-900);
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  border: none;
  transition: background-color var(--duration-base) var(--ease);
}
.mo-avatar:hover {
  background-color: var(--bronze-200);
}

/* Avatar menu ouvert : anneau bronze séparé de 2 px (handoff menu de l'avatar, 27/10/2026). */
.mo-avatar[aria-expanded="true"],
.show > .mo-avatar {
  box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--bronze-200);
}
.mo-avatar:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--bronze-200);
}

/* Menu de l'avatar (_header_user_menu.html) — handoff « En-tête connecté ›
   Menu de l'avatar », maquette MenuUtilisateur (27/10/2026). Surcharges
   spécifiques pour battre .navbar-expand-lg .navbar-nav .dropdown-menu.show
   (legacy myoptionsna.css). */
.mo-header .dropdown-menu.mo-user-menu,
.mo-header .navbar-expand-lg .navbar-nav .dropdown-menu.mo-user-menu,
.mo-header .navbar-expand-lg .navbar-nav .dropdown-menu.mo-user-menu.show,
.mo-header .dropdown-menu.mo-user-menu.show {
  display: block;
  flex-direction: unset;
  overflow: visible;
  box-sizing: border-box;
  width: 296px;
  min-width: 296px;
  max-width: calc(100vw - 32px);
  margin: 8px 0 0 0;
  padding: 8px;
  background-color: var(--surface-card);
  border: 1px solid var(--ink-900-08);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(28, 31, 36, 0.14), 0 2px 6px rgba(28, 31, 36, 0.06);
  color: var(--ink-body);
  font-family: var(--font-primary);
  transform: none;
  top: 100%;
  left: auto;
  right: 0;
  z-index: 500;
}
.mo-header .dropdown-menu.mo-user-menu:not(.show) {
  display: none !important;
}

/* Identité */
.mo-user-menu__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 14px;
}
.mo-user-menu__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--bronze-200);
  color: var(--ink-900);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mo-user-menu__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mo-user-menu__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: var(--weight-medium);
  line-height: 1.3;
  color: var(--ink-900);
}
.mo-user-menu__email {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--ink-500);
}
.mo-user-menu__role { padding: 0 12px 12px; }
.mo-user-menu__pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background-color: var(--cream-100);
  color: var(--ink-body);
  font-size: 12px;
  font-weight: var(--weight-medium);
}
.mo-user-menu__divider {
  height: 1px;
  margin: 6px 4px;
  background-color: var(--cream-200);
}
.mo-user-menu__eyebrow {
  margin: 6px 12px 4px;
  max-width: none;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-700);
}
.mo-user-menu__note {
  margin: 8px 12px;
  max-width: none;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-500);
}

/* Lignes */
.mo-user-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mo-user-menu__item {
  margin: 0;
}
.mo-user-menu__link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--ink-900);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease);
}
.mo-user-menu__link:hover,
.mo-user-menu__link:focus-visible,
.mo-user-menu__link:focus {
  background-color: var(--cream-100);
  color: var(--ink-900);
  outline: none;
  text-decoration: none;
}
/* Liens marqués dropdown-item (navigation aux flèches de Bootstrap) : on
   neutralise ses styles (largeur, fond bleu à l'appui). */
.mo-user-menu .dropdown-item { width: auto; clear: none; }
.mo-user-menu__link:active,
.mo-user-menu__link.active { background-color: var(--cream-100); color: var(--ink-900); }
.mo-user-menu__back:active { background-color: var(--terracotta-50); color: var(--terracotta-600); }
.mo-user-menu__link--muted,
.mo-user-menu__link--muted:hover,
.mo-user-menu__link--muted:focus { color: var(--ink-500); }
.mo-user-menu__icon {
  flex: none;
  display: inline-flex;
  color: var(--ink-500);
}
.mo-user-menu__aside {
  margin-left: auto;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-500);
}

/* Connexion déléguée : encart terracotta clair, retour à la session admin */
.mo-user-menu__delegated {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px;
  padding: 12px;
  border-radius: 12px;
  background-color: var(--terracotta-50);
}
.mo-user-menu__delegated-text {
  margin: 0;
  max-width: none;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--terracotta-600);
}
.mo-user-menu__back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  border-radius: var(--radius-full);
  background-color: var(--surface-card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--terracotta-600) 35%, transparent);
  color: var(--terracotta-600);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.mo-user-menu__back .mo-user-menu__icon { color: var(--terracotta-600); }
.mo-user-menu__back:hover,
.mo-user-menu__back:focus-visible {
  background-color: var(--terracotta-50);
  color: var(--terracotta-600);
  text-decoration: none;
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--terracotta-600);
}

/* ==========================================================================
   DISCLAIMER AMF
   Bandeau réglementaire pré-footer. Fond ink-900 + label bronze + corps cream.
   Surcharge les règles legacy (myoptionsna.css #disclaimer fond purple,
   myoptions3.css .disclaimer line-height 2em font-weight 600).
   ========================================================================== */
.mo-disclaimer {
  background: var(--ink-900);
  color: var(--neutre-50);
  padding: 56px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.mo-disclaimer__label {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-200);
  margin: 0 0 14px;
  line-height: 1.4;
}

.mo-disclaimer__body {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--neutre-50);
  margin: 0;
  max-width: 880px;
}

@media (max-width: 767px) {
  .mo-disclaimer { padding: 40px 0; }
  .mo-disclaimer__label { font-size: 10px; margin-bottom: 12px; }
  .mo-disclaimer__body { font-size: 13px; line-height: 1.6; }
}

/* --- Surcharges legacy (myoptionsna.css, myoptions3.css, archcss) --- */
section#disclaimer.mo-disclaimer,
section#disclaimer.o--disclaimer.mo-disclaimer {
  background-color: var(--ink-900) !important;
  padding: 56px 0 !important;
}
section#disclaimer.mo-disclaimer .mo-disclaimer__body,
section#disclaimer.mo-disclaimer p {
  color: var(--neutre-50) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}
section#disclaimer.mo-disclaimer .mo-disclaimer__label {
  color: var(--bronze-200) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
@media (max-width: 767px) {
  section#disclaimer.mo-disclaimer,
  section#disclaimer.o--disclaimer.mo-disclaimer {
    padding: 40px 0 !important;
  }
}

/* --- Padding latéral responsive (fix : sur mobile/tablette le contenu collait au bord)
       Mobile-first basé sur tokens --container-gutter*
       (20px mobile / 32px tablet / 48px desktop) --- */
.mo-disclaimer {
  padding-left: var(--container-gutter);
  padding-right: var(--container-gutter);
}
section#disclaimer.mo-disclaimer,
section#disclaimer.o--disclaimer.mo-disclaimer {
  padding-left: var(--container-gutter) !important;
  padding-right: var(--container-gutter) !important;
}

@media (min-width: 768px) {
  .mo-disclaimer {
    padding-left: var(--container-gutter-md);
    padding-right: var(--container-gutter-md);
    padding-top: 48px;
    padding-bottom: 48px;
  }
  section#disclaimer.mo-disclaimer,
  section#disclaimer.o--disclaimer.mo-disclaimer {
    padding: 48px var(--container-gutter-md) !important;
  }
}

@media (min-width: 1024px) {
  .mo-disclaimer {
    padding-left: var(--container-gutter-lg);
    padding-right: var(--container-gutter-lg);
    padding-top: 56px;
    padding-bottom: 56px;
  }
  section#disclaimer.mo-disclaimer,
  section#disclaimer.o--disclaimer.mo-disclaimer {
    padding: 56px var(--container-gutter-lg) !important;
  }
}

/* --- Conformité AMF : taille corps disclaimer = corps site (16px)
       Règlement UE 2020/1503 + reco AMF : avertissement risque
       lisible au moins à la taille du body général. Pas de réduction
       en mobile. Ligne 14px était sous-conforme. --- */
.mo-disclaimer__body,
section#disclaimer.mo-disclaimer .mo-disclaimer__body,
section#disclaimer.mo-disclaimer p {
  font-size: 16px !important;
  line-height: 1.6 !important;
}
@media (max-width: 767px) {
  .mo-disclaimer__body,
  section#disclaimer.mo-disclaimer .mo-disclaimer__body,
  section#disclaimer.mo-disclaimer p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}

/* Override : mobile 14px (choix UX validé) */
@media (max-width: 767px) {
  .mo-disclaimer__body,
  section#disclaimer.mo-disclaimer .mo-disclaimer__body,
  section#disclaimer.mo-disclaimer p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}

/* Override final : 14px sur tous viewports (choix UX validé) */
.mo-disclaimer__body,
section#disclaimer.mo-disclaimer .mo-disclaimer__body,
section#disclaimer.mo-disclaimer p {
  font-size: 14px !important;
  line-height: 1.6 !important;
}


/* --- Bas de page commun (08/10/2026) : libellé à gauche, texte + lien
       « Lire la notice de risque » à droite à partir de 900 px. --- */
.mo-disclaimer__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
section#disclaimer.mo-disclaimer .mo-disclaimer__body {
  color: var(--ink-200) !important;
}
/* le libellé est un <p> : il subissait le 14px !important des surcharges ci-dessus */
section#disclaimer.mo-disclaimer .mo-disclaimer__label {
  font-size: 11px !important;
  letter-spacing: 0.18em;
}
.mo-disclaimer__link {
  font-family: var(--font-primary);
  font-size: 13px;
  color: var(--bronze-200);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mo-disclaimer__link:hover,
.mo-disclaimer__link:focus-visible {
  color: var(--neutre-50);
}
.mo-disclaimer__link:focus-visible {
  outline: 2px solid var(--bronze-200);
  outline-offset: 3px;
}
@media (min-width: 900px) {
  .mo-disclaimer .mo-disclaimer__inner {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 48px;
  }
  /* le conteneur legacy (.o-large-container) porte des ::before/::after de
     clearfix qui deviendraient des cellules de grille */
  .mo-disclaimer .mo-disclaimer__inner::before,
  .mo-disclaimer .mo-disclaimer__inner::after {
    display: none;
  }
  section#disclaimer.mo-disclaimer .mo-disclaimer__label {
    margin: 0;
    padding-top: 3px;
  }
}


/* ==========================================================================
   SUB-NAV DASHBOARD — specs Lucile 25/04/2026
   - fond encre (ink-900)
   - texte cream graisse 400 (pas épaisse), casse normale, 14px
   - hover bronze
   - actif : bronze + font-weight 600 (plus prononcée), JAMAIS de soulignement
   ========================================================================== */
.mo-subnav {
  background-color: var(--ink-body);    /* un cran plus clair que .mo-header--connected (ink-900) */
  position: sticky;
  top: 64px;
  z-index: 90;
  width: 100%;
}

.mo-subnav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mo-subnav__inner::-webkit-scrollbar { display: none; }

.mo-subnav__list {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0 0 0 -2px;  /* compense le padding 0 2px des liens : texte sur l'axe du logo */
  min-height: 48px;
}

.mo-subnav__item {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.mo-subnav__link {
  display: inline-flex;
  align-items: center;
  height: 48px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  color: var(--neutre-50);
  text-transform: none;
  letter-spacing: normal;
  padding: 0 2px;
  text-decoration: none !important;
  border: none !important;
  border-bottom: none !important;
  transition: color var(--duration-base, 0.2s) var(--ease, ease),
              font-weight var(--duration-base, 0.2s) var(--ease, ease);
}

.mo-subnav__link:hover,
.mo-subnav__link:focus-visible {
  color: var(--bronze-200);
  outline: none;
  text-decoration: none !important;
}

.mo-subnav__link.is-active,
.mo-subnav__link.active {
  color: var(--bronze-200) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: none !important;
  border-bottom: none !important;
}

@media (max-width: 767px) {
  .mo-subnav__list {
    gap: 24px;
    min-height: 44px;
  }
  .mo-subnav__link {
    height: 44px;
  }
}

/* ==========================================================================
   SUB-NAV ADMIN (.mo-subnav--admin) — refonte 2026-09-30
   19/10/2026 : le porteur connecté reprend le design de l'en-tête et du sous-menu
   admin (.mo-header--porteur, .mo-subnav--porteur), avec ses propres entrées ;
   22/10/2026 : le financeur aussi (.mo-header--financeur, .mo-subnav--financeur).
   Fond encre, onglets en pastilles ; actif = pastille ink-700 + texte clair 600.
   « Plus » = menu déroulant (<details>). Les !important répondent à ceux du
   .mo-subnav de base (bronze/actif) : périmètre limité à la barre admin.
   ========================================================================== */
:is(.mo-subnav--admin, .mo-subnav--porteur, .mo-subnav--financeur) {
  background-color: var(--ink-900);
  /* Filet de séparation avec le menu principal (token « séparateurs sur ink-900 »).
     box-shadow inset : 1 px visible sans décaler la hauteur de la barre sticky. */
  box-shadow: inset 0 1px 0 var(--ink-700);
}
:is(.mo-subnav--admin, .mo-subnav--porteur, .mo-subnav--financeur) .mo-subnav__inner { overflow: visible; }
/* En-tête des admins : même gouttière 24px que le sous-menu et le contenu admin
   (admin-leads.css) — largeur utile maximale, un seul axe gauche, à toutes les
   largeurs. Hauteur EXACTE 64px (= top du sous-menu sticky) : sinon l'en-tête
   (67,5px avec padding 14px + avatar) recouvre le haut du sous-menu au scroll
   et masque le filet de séparation. */
.mo-header:is(.mo-header--admin, .mo-header--porteur, .mo-header--financeur) .navbar {
  height: 64px; min-height: 64px;
  padding: 0 var(--page-gutter);
  max-width: var(--container-wide);
}
.mo-subnav:is(.mo-subnav--admin, .mo-subnav--porteur, .mo-subnav--financeur) .mo-subnav__inner { max-width: var(--container-wide); }
:is(.mo-subnav--admin, .mo-subnav--porteur, .mo-subnav--financeur) .mo-subnav__list {
  gap: 4px;
  /* Compense le padding horizontal des pastilles (14px) : le TEXTE du premier
     onglet s'aligne sur le logo du menu principal, la pastille déborde à gauche. */
  margin-left: -14px;
}
:is(.mo-subnav--admin, .mo-subnav--porteur, .mo-subnav--financeur) .mo-subnav__link {
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  color: var(--ink-200);
  font-weight: 500;
  transition: background-color var(--duration-base, 0.2s) var(--ease, ease),
              color var(--duration-base, 0.2s) var(--ease, ease);
}
:is(.mo-subnav--admin, .mo-subnav--porteur, .mo-subnav--financeur) .mo-subnav__link:hover,
:is(.mo-subnav--admin, .mo-subnav--porteur, .mo-subnav--financeur) .mo-subnav__link:focus-visible {
  color: var(--neutre-50);
  background-color: var(--ink-800);
}
:is(.mo-subnav--admin, .mo-subnav--porteur, .mo-subnav--financeur) .mo-subnav__link:focus-visible { outline: 2px solid var(--ink-200); outline-offset: 2px; }
:is(.mo-subnav--admin, .mo-subnav--porteur, .mo-subnav--financeur) .mo-subnav__link.is-active {
  color: var(--neutre-50) !important;
  font-weight: 600 !important;
  background-color: var(--ink-700);
}

/* Menu « Plus » */
.mo-subnav__more { position: relative; }
.mo-subnav__details > summary { list-style: none; cursor: pointer; gap: 6px; }
.mo-subnav__details > summary::-webkit-details-marker { display: none; }
.mo-subnav__details > summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration-base, 0.2s) var(--ease, ease);
}
.mo-subnav__details[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.mo-subnav__details[open] > summary { color: var(--neutre-50); background-color: var(--ink-800); }
.mo-subnav__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 95;
  min-width: 220px; margin: 0; padding: 6px; list-style: none;
  background-color: var(--ink-800);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
}
.mo-subnav__menu-link {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  font-family: var(--font-primary); font-size: 14px; font-weight: 500;
  color: var(--ink-200); text-decoration: none !important; white-space: nowrap;
}
.mo-subnav__menu-link:hover,
.mo-subnav__menu-link:focus-visible { color: var(--neutre-50); background-color: var(--ink-700); outline: none; }
.mo-subnav__menu-link.is-active { color: var(--neutre-50); font-weight: 600; background-color: var(--ink-700); }

@media (max-width: 767px) {
  :is(.mo-subnav--admin, .mo-subnav--porteur, .mo-subnav--financeur) .mo-subnav__inner { overflow-x: auto; overflow-y: visible; }
  .mo-subnav__menu { position: fixed; top: auto; left: var(--container-gutter); right: var(--container-gutter); }
}

/* ==========================================================================
   ALIGNEMENT GLOBAL (2026-09-30) — conteneur legacy recalé sur la charte
   .o-large-container (myoptionsna / myoptionsmq, legacy) : 1280px sans marge,
   et 728px sous 992px. On le recale sur --container-max + --page-gutter pour
   que les ~40 pages legacy partagent l'axe de l'en-tête. header.css se charge
   après les feuilles legacy : ces règles l'emportent sans !important.
   ========================================================================== */
.o-large-container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  box-sizing: border-box;
}
/* Enveloppe de l'en-tête : neutre, c'est .mo-header .navbar qui porte la largeur. */
.mo-header > .o-large-container { max-width: none; margin: 0; padding: 0; }
/* Bandeau réglementaire : la section porte déjà la gouttière ; l'intérieur est
   borné à 1280 - gouttières pour tomber sur l'axe de l'en-tête. */
.mo-disclaimer .mo-disclaimer__inner.o-large-container {
  max-width: calc(var(--container-max) - 2 * var(--page-gutter));
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   BREADCRUMB — déplacé vers static/css/components.css (refonte 2026-04-27)
   ========================================================================== */

/* --- Burger mobile : couleur selon mode (mode connecté = blanc/cream) --- */
.mo-header .navbar-toggler.mo-burger,
.mo-header .navbar-toggler.mo-burger:focus,
.mo-header .navbar-toggler.mo-burger:hover {
  color: var(--ink-body);          /* mode public : encre foncé sur cream */
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  padding: 8px;
}

.mo-header.mo-header--connected .navbar-toggler.mo-burger,
.mo-header.connected .navbar-toggler.mo-burger,
.mo-header.mo-header--connected .navbar-toggler.mo-burger:focus,
.mo-header.connected .navbar-toggler.mo-burger:focus,
.mo-header.mo-header--connected .navbar-toggler.mo-burger:hover,
.mo-header.connected .navbar-toggler.mo-burger:hover {
  color: var(--neutre-50) !important;   /* mode connecté : blanc/cream sur fond ink */
}

.mo-burger__icon {
  display: block;
  stroke: currentColor;
}

/* ==========================================================================
   9. MENU MOBILE MODAL (#modal-menu-aside-left)
   Restoré depuis transcript session précédente — état final consolidé
   (tasks #33 + #34 + #35 + #37 fusionnées).
   ========================================================================== */

#modal-menu-aside-left .modal-content {
  background-color: var(--neutre-50) !important;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  display: flex !important;
  flex-direction: column;
  height: 100vh !important;
  overflow-y: auto;
}
#modal-menu-aside-left .modal-dialog-aside {
  background-color: var(--neutre-50) !important;
  height: 100vh !important;
}
#modal-menu-aside-left .modal-body {
  flex: 0 0 auto !important;
  height: auto !important;
  overflow-y: visible !important;
}
#modal-menu-aside-left .modal-connector {
  flex: 0 0 auto !important;
}

#modal-menu-aside-left .modal-header {
  border: 0;
  padding: 20px 24px 0;
}
#modal-menu-aside-left .modal-header .close {
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0.5px solid transparent;
  border-radius: var(--radius-md);
  color: var(--ink-body);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  opacity: 1;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease);
}
#modal-menu-aside-left .modal-header .close:hover,
#modal-menu-aside-left .modal-header .close:focus {
  background-color: var(--neutre-100);
  border-color: var(--neutre-200);
  outline: none;
  opacity: 1;
}
#modal-menu-aside-left .modal-header .close span {
  color: inherit;
  text-shadow: none;
}

#modal-menu-aside-left .modal-body,
#modal-menu-aside-left .nav-primary {
  padding: 24px 0 !important;
  background: none;
  color: var(--ink-body);
}

#modal-menu-aside-left #main-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 0 16px;
  list-style: none;
  margin: 0;
  width: 100%;
  height: auto;
}

#modal-menu-aside-left .mo-mobile-menu__eyebrow {
  display: block;
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-600);
  padding: 18px 12px 6px;
  margin: 0 !important;
  list-style: none;
  pointer-events: none;
  user-select: none;
}
#modal-menu-aside-left .mo-mobile-menu__eyebrow:first-child {
  padding-top: 8px;
}
#modal-menu-aside-left .menu-item + .mo-mobile-menu__eyebrow,
#modal-menu-aside-left .menu-item-solo + .mo-mobile-menu__eyebrow {
  border-top: 0.5px solid var(--neutre-200);
  margin-top: 4px !important;
}

#modal-menu-aside-left .menu-item,
#modal-menu-aside-left .menu-item-solo,
#modal-menu-aside-left .has-children,
#modal-menu-aside-left .has-no-children {
  width: 100%;
  margin: 0 !important;
  padding: 0;
  list-style: none;
  position: static;
}

#modal-menu-aside-left .menu-item > a,
#modal-menu-aside-left .menu-item-solo > a,
#modal-menu-aside-left a.menu-item,
#modal-menu-aside-left a.menu-item-solo {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px !important;
  width: 100%;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--ink-900) !important;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease);
}
#modal-menu-aside-left .menu-item > a:hover,
#modal-menu-aside-left .menu-item-solo > a:hover,
#modal-menu-aside-left a.menu-item:hover,
#modal-menu-aside-left a.menu-item-solo:hover {
  color: var(--bronze-600) !important;
}

#modal-menu-aside-left .menu-item__link {
  display: contents !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
}
#modal-menu-aside-left .menu-item__link::after {
  content: "›";
  color: var(--bronze-200);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  margin-left: 12px;
}

#modal-menu-aside-left .has-no-children.outline .menu-item__link,
#modal-menu-aside-left .has-no-children.outline a {
  border: 0 !important;
  border-radius: 0 !important;
}
#modal-menu-aside-left .has-no-children.outline {
  border-top: 0.5px solid var(--neutre-200);
  margin-top: 8px !important;
  padding-top: 8px !important;
}

#modal-menu-aside-left .modal-submenu {
  position: static !important;
  width: 100%;
  padding: 0 16px !important;
  list-style: none;
  margin: 0;
  background-color: transparent;
  display: none;
  flex-direction: column;
  gap: 2px;
  transform: none !important;
  transition: none !important;
}
#modal-menu-aside-left .modal-submenu.d-none {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
#modal-menu-aside-left .modal-submenu.show {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#modal-menu-aside-left li a.back-to-menu,
#modal-menu-aside-left a.back-to-menu {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 10px 12px !important;
  margin: 0 0 16px 0 !important;
  color: var(--ink-500) !important;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
#modal-menu-aside-left .back-to-menu:hover {
  color: var(--ink-900) !important;
}
#modal-menu-aside-left .back-to-menu::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%239A835C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6.5,2 3,5 6.5,8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#modal-menu-aside-left .submenu-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 !important;
  list-style: none;
  margin: 0;
  width: 100%;
}
#modal-menu-aside-left .submenu-group .submenu-item {
  background: none !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100%;
  transition: background-color var(--duration-base) var(--ease);
}
#modal-menu-aside-left .submenu-group .submenu-item:hover {
  background-color: var(--neutre-100) !important;
}
#modal-menu-aside-left .submenu-group .submenu-item__link {
  display: block !important;
  padding: 14px 12px !important;
  text-decoration: none;
  color: inherit;
  flex-direction: unset;
  height: auto;
  width: 100%;
  background: none !important;
  border: 0 !important;
}
#modal-menu-aside-left .submenu-group .submenu-item__link::after {
  content: none !important;
}
#modal-menu-aside-left .submenu-group .submenu-item__title {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--ink-900);
  line-height: 1.3;
  margin: 0 0 4px 0;
  width: 100%;
}
#modal-menu-aside-left .submenu-group .submenu-item__description {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: var(--weight-regular);
  color: var(--ink-500);
  line-height: 1.55;
  text-align: left;
  margin: 0;
}
#modal-menu-aside-left .submenu-group .submenu-item__description:empty {
  display: none;
}

#modal-menu-aside-left .modal-connector {
  padding: 24px 16px 24px !important;
  border: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
#modal-menu-aside-left .modal-connector ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
#modal-menu-aside-left .modal-connector .nav-item {
  display: block;
  width: 100%;
  margin: 0 !important;
}

#modal-menu-aside-left .modal-connector .nav-underscore-link,
#modal-menu-aside-left .modal-connector .nav-item:first-child a {
  display: block !important;
  width: 100%;
  text-align: center;
  padding: 12px 22px !important;
  background-color: var(--btn-secondary-bg) !important;   /* pattern v4 secondary : fond couleur adoucie */
  color: var(--btn-secondary-fg) !important;               /* texte foncé même teinte */
  border: 1px solid transparent !important;          /* pill plein, pas d'outline visible */
  border-radius: var(--radius-full) !important;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-sizing: border-box;
  transition: background-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease),
              font-weight var(--duration-base) var(--ease);
}
#modal-menu-aside-left .modal-connector .nav-underscore-link:hover,
#modal-menu-aside-left .modal-connector .nav-item:first-child a:hover {
  background-color: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-fg) !important;
  box-shadow: inset 0 0 0 1px var(--btn-secondary-fg);     /* +1px d'épaisseur sans layout shift */
  font-weight: var(--weight-semibold);                /* 500 → 600 */
}

#modal-menu-aside-left .modal-connector .nav-button-black,
#modal-menu-aside-left .modal-connector .nav-item:last-child a {
  display: block !important;
  width: 100%;
  text-align: center;
  padding: 13px 22px !important;
  background-color: var(--ink-900) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--ink-900) !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  box-sizing: border-box;
  transition: background-color var(--duration-base) var(--ease);
}
#modal-menu-aside-left .modal-connector .nav-button-black:hover,
#modal-menu-aside-left .modal-connector .nav-item:last-child a:hover {
  background-color: var(--ink-900) !important;
}

#modal-menu-aside-left .modal-connector .mo-mobile-logout {
  display: block !important;
  width: 100%;
  text-align: center;
  padding: 13px 22px !important;
  background-color: var(--ink-900) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--ink-900) !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  box-sizing: border-box;
  transition: background-color var(--duration-base) var(--ease);
}
#modal-menu-aside-left .modal-connector .mo-mobile-logout:hover {
  background-color: var(--ink-900) !important;
}

/* Menu mobile aligné sur le menu de l'avatar (27/10/2026) : pastille de rôle,
   message du porteur en ouverture, encart de connexion déléguée (styles
   .mo-user-menu__*, protégés des règles forcées des boutons du bas). */
#modal-menu-aside-left .mo-mobile-menu__role {
  list-style: none;
  padding: 2px 12px 8px;
}
#modal-menu-aside-left .mo-mobile-menu__note {
  list-style: none;
  padding: 8px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-500);
}
#modal-menu-aside-left .modal-connector .mo-user-menu__delegated {
  margin: 0;
}
#modal-menu-aside-left .modal-connector .mo-user-menu__delegated-text {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal !important;
  text-transform: none !important;
}
#modal-menu-aside-left .modal-connector .mo-user-menu__delegated .nav-item a.mo-user-menu__back,
#modal-menu-aside-left .modal-connector .mo-user-menu__delegated a.mo-user-menu__back {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px !important;
  background-color: var(--surface-card) !important;
  color: var(--terracotta-600) !important;
  border: 0 !important;
  border-radius: var(--radius-full) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--terracotta-600) 35%, transparent);
  font-family: var(--font-primary);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: nowrap;
}

/* ==========================================================================
   10. FOOTER — bas de page commun (refonte 08/10/2026, canvas « Home myOptions »,
   artboard « Bas de page commun »). Une seule surface cream :
     1. identité (nom, téléphone, email, horaires, réseaux) + 3 colonnes de nav
     2. cadre réglementaire : 3 logos (PSFP, Mangopay, France Fintech) + textes
     3. ligne groupe : texte Options / Asteryos + lien « Le groupe Asteryos »
     4. barre légale (neutre-200) : liens légaux + copyright
   ========================================================================== */

.mo-footer {
  font-family: var(--font-primary);
  color: var(--ink-body);
  background-color: var(--neutre-100);
}

/* Wrapper interne commun : centrage + max-width + gouttière */
.mo-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  box-sizing: border-box;
}

/* ===== 1. Identité + navigation ===== */
.mo-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 56px 0 40px;
}
.mo-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.mo-footer__brand-name {
  font-family: var(--font-secondary) !important;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-900);
  margin: 0;
}
.mo-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-style: normal;
}
.mo-footer__phone {
  font-family: var(--font-secondary);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-900);
  text-decoration: none;
}
.mo-footer__email {
  font-size: 14px;
  color: var(--ink-900);
  text-decoration: none;
}
.mo-footer__phone:hover,
.mo-footer__email:hover {
  color: var(--ink-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mo-footer__hours {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-500);
}
.mo-footer__social-list {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mo-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-full);
  color: var(--ink-900);
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease);
}
.mo-footer__social-link:hover {
  color: var(--ink-900);
  background-color: var(--neutre-200);
  border-color: var(--ink-200);
}

.mo-footer__nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.mo-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mo-footer__nav-title {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-900);
  margin: 0;
}
.mo-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mo-footer__nav-link {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-body);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease);
}
.mo-footer__nav-link:hover {
  color: var(--ink-900);
}

/* Hauteur de ligne legacy (32px) sur les <li> neutralisée */
.mo-footer .mo-footer__nav-list > li,
.mo-footer .mo-footer__legal-list > li,
.mo-footer .mo-footer__social-list > li {
  line-height: 1.4;
  margin: 0;
}

/* ===== 2. Cadre réglementaire ===== */
.mo-footer__certifications {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--ink-100);
}
.mo-footer__cert {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mo-footer__cert-logo {
  flex-shrink: 0;
  display: block;
  width: auto;
  height: auto;
  max-width: 56px;
  max-height: 56px;
  filter: grayscale(1); /* rendu actuel des logos conservé */
}
.mo-footer__cert-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-body);
  margin: 0;
}

/* ===== 3. Ligne groupe ===== */
.mo-footer__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--ink-100);
}
.mo-footer__group-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-500);
  margin: 0;
  max-width: 860px;
}
.mo-footer__group-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--ink-900);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-900);
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease);
}
.mo-footer__group-link:hover,
.mo-footer__group-link:focus-visible {
  background-color: var(--ink-900);
  color: var(--neutre-50);
}

/* ===== 4. Barre légale ===== */
.mo-footer__legal {
  background-color: var(--neutre-200);
}
.mo-footer__legal-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.mo-footer__legal-list {
  display: flex;
  flex-direction: row; /* legacy « footer nav ul » : colonne */
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mo-footer__legal-link {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-body);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease);
}
.mo-footer__legal-link:hover {
  color: var(--ink-900);
}
.mo-footer__copyright {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--ink-500);
  margin: 0;
}

/* Focus clavier visible sur tous les liens du bas de page */
.mo-footer a:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 3px;
}

/* ===== Tablette ===== */
@media (min-width: 600px) {
  .mo-footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .mo-footer__certifications {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* ===== Desktop ===== */
@media (min-width: 900px) {
  .mo-footer__top {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7.8fr);
    gap: 40px;
    padding: 72px 0 56px;
  }
  .mo-footer__nav {
    gap: 40px;
  }
  .mo-footer__certifications {
    gap: 40px;
  }
  .mo-footer__group {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }
}

/* Liens légaux et copyright sur une ligne seulement quand les 8 liens tiennent. */
@media (min-width: 1200px) {
  .mo-footer__legal-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
  }
}

/* --- Surcharges legacy : neutralise règles ancien footer --- */
footer.mo-footer .o-large-container,
footer.mo-footer .dual__content__3__9,
footer.mo-footer ._3-col-grid,
footer.mo-footer ._3-steps-grid,
footer.mo-footer .footer-identity {
  all: unset;
}



/* Bouton « Ouvrir un compte » (ex « S'inscrire », revue de marque 02/10/2026) plus long :
   on resserre la navigation entre 992 et 1279 px pour que le header tienne. */
@media (min-width: 992px) and (max-width: 1279px) {
  .mo-header .navbar-nav { gap: var(--space-6); }
  .mo-header .mo-nav__link, .mo-header .mo-nav__link.nav-link { font-size: 14px; }
}

/* Méga-menu myOptions à trois colonnes (+ encart) depuis l'ajout de « Comprendre »
   (centre de ressources public, 22/10/2026) ; pied de page à quatre colonnes. */
.mo-megapanel__inner--3col { grid-template-columns: repeat(3, minmax(0, 1fr)) 260px; gap: var(--space-8); }
@media (min-width: 900px) {
  .mo-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}