:root {
  --tirelire-primary: #244fba;
  --tirelire-primary-soft: #eef4ff;
  --tirelire-text: #263248;
  --tirelire-muted: #748199;
  --tirelire-border: #dfe7f0;
  --tirelire-page: #f7f9fc;
  --tirelire-surface: #ffffff;
  --tirelire-surface-soft: #f3f7fb;
  --tirelire-success: #20b77a;
  --tirelire-shell-pad: clamp(14px, 1.2vw, 18px);
  --tirelire-max-width: 1900px;
  --tirelire-header-main-height: 56px;
  --tirelire-nav-height: 44px;
  --tirelire-footer-height: 58px;

  /* Corps applicatif : une seule source de vérité pour l'espace vertical. */
  --tirelire-content-pad-y: 12px;
  --tirelire-content-available-height:
    calc(
      100dvh
      - var(
          --header-offset,
          calc(var(--tirelire-header-main-height) + var(--tirelire-nav-height))
        )
      - var(--tirelire-footer-height)
    );
}

body { background: var(--tirelire-page); color: var(--tirelire-text); }
.tirelire-shell {
  width: 100%;
  max-width: none;
  padding-left: var(--tirelire-shell-pad);
  padding-right: var(--tirelire-shell-pad);
  margin: 0 auto;
}

/* =========================================================
   CORPS APPLICATIF
   ---------------------------------------------------------
   Le template devient propriétaire :
   - de la largeur utile,
   - de l'espace entre header et footer,
   - du padding extérieur de la zone métier.

   Les vues métier n'ont plus à connaître la hauteur du header
   ni celle du footer.
   ========================================================= */

/* Le shell applicatif utilise toute la largeur disponible. */
#main-wrapper .page-wrapper > .container-fluid {
  width: 100%;
  max-width: none;
  padding-left: var(--tirelire-shell-pad);
  padding-right: var(--tirelire-shell-pad);
}

/* Le contenu remplit au minimum l'espace restant jusqu'au footer.
   Si une vue est plus grande, la page continue naturellement à grandir. */
#blocContent.tirelire-content {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: var(--tirelire-content-available-height);
  padding-top: var(--tirelire-content-pad-y) !important;
  padding-bottom: var(--tirelire-content-pad-y) !important;
}

/* Les spacers Wrappixel n'ont plus de rôle dans le nouveau template.
   On les neutralise uniquement lorsqu'ils sont appliqués à blocContent,
   afin de ne pas modifier une éventuelle utilisation métier interne. */
#blocContent.tirelire-content.spacer-p-130,
#blocContent.tirelire-content.spacer-p-260 {
  padding-top: var(--tirelire-content-pad-y) !important;
  padding-bottom: var(--tirelire-content-pad-y) !important;
}

/* Mode workspace générique.
   Une fonctionnalité qui veut un scroll interne peut utiliser cette classe
   (ou data-tirelire-workspace) sans recalculer window.innerHeight/header/footer. */
#blocContent.tirelire-content > .tirelire-workspace,
#blocContent.tirelire-content > [data-tirelire-workspace] {
  box-sizing: border-box;
  height: calc(
    var(--tirelire-content-available-height)
    - (2 * var(--tirelire-content-pad-y))
  );
  min-height: 0;
  overflow: hidden;
}

/* =========================================================
   HEADER PRINCIPAL
   ========================================================= */
.tirelire-header {
  position: relative;
  z-index: 1040;
  width: 100%;
  background: var(--tirelire-surface);
}
.tirelire-header-main {
  height: var(--tirelire-header-main-height);
  min-height: var(--tirelire-header-main-height);
  background: var(--tirelire-surface);
}
.tirelire-header-row {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: var(--tirelire-header-main-height);
  min-height: var(--tirelire-header-main-height);
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center !important;
  align-content: center !important;
  gap: 16px;
  position: relative;
}
.tirelire-header-row > * {
  align-self: center;
}
.tirelire-account {
  justify-self: start;
  display: flex;
  align-items: center !important;
  height: 100%;
  min-width: 0;
  color: var(--tirelire-muted);
  font-size: 12px;
  line-height: 1;
}
.tirelire-account:not(.d-none) { display: flex !important; }
.tirelire-user-icon {
    width: 28px;
    height: 28px;
    margin-right: 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    color: var(--tirelire-primary);

    background: var(--tirelire-primary-soft);
    border-radius: 50%;
}
.tirelire-user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px;
  text-transform: lowercase;
}
.tirelire-account-separator {
  width: 1px;
  height: 16px;
  background: var(--tirelire-border);
  margin: 0 12px;
}
.tirelire-platform-link {
  color: var(--tirelire-muted);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
}
.tirelire-platform-link:hover { color: var(--tirelire-primary); text-decoration: none; }

.tirelire-logo {
  justify-self: center;
  display: flex;
  align-items: center !important;
  justify-content: center;
  height: var(--tirelire-header-main-height);
  padding: 1px 10px;
  border-radius: 12px;
  background: var(--tirelire-surface);
}
.tirelire-logo img {
  display: block;
  width: auto;
  height: 44px;
  max-width: 230px;
  object-fit: contain;
}

.tirelire-auth {
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  height: 100%;
}
.tirelire-auth > div {
  align-items: center;
}
.tirelire-auth > div:not(.d-none) {
  display: flex !important;
}
.tirelire-logout, .tirelire-login {
  border: 1px solid var(--tirelire-success);
  color: var(--tirelire-success);
  background: #fff;
  border-radius: 5px;
  line-height: 1.2;
  padding: .28rem .58rem;
}
.tirelire-logout:hover, .tirelire-login:hover { background: #effcf7; color: #16875b; }

.tirelire-menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  padding: 8px;
  border-radius: 8px;
}
.tirelire-menu-toggle span {
  display: block;
  height: 2px;
  background: var(--tirelire-text);
  margin: 4px 0;
  transition: transform .2s ease, opacity .2s ease;
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.tirelire-nav {
  background: #f1f8ff;
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #e7eef6;
}
.tirelire-nav-inner {
  min-height: var(--tirelire-nav-height);
  height: var(--tirelire-nav-height);
  padding: 0;
  background: transparent !important;
}
.tirelire-nav-panel {
  display: flex !important;
  width: 100%;
  min-width: 0;
  height: var(--tirelire-nav-height);
  align-items: stretch;
  /* Le JS calcule l'overflow avant de révéler la barre : aucun saut visuel. */
  visibility: hidden;
}
.tirelire-header.tirelire-nav-ready .tirelire-nav-panel { visibility: visible; }
/* IMPORTANT : après calcul de PLUS, on ré-autorise le débordement vertical
   afin que les dropdowns puissent sortir de la barre de navigation. */
.tirelire-header.tirelire-nav-ready .tirelire-primary-menus {
  overflow: visible;
}
.tirelire-primary-menus,
.tirelire-overflow-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  flex-direction: row;
  flex-wrap: nowrap;
}
.tirelire-primary-menus {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.tirelire-overflow-menu { flex: 0 0 auto; }

/* Quand aucun item n'est déplacé dans « Plus », le groupe de menus principal
   est centré dans toute la largeur de la barre. Dès que « Plus » est requis,
   la disposition historique reprend automatiquement. */
.tirelire-nav-panel.tirelire-nav-centered {
  justify-content: center;
}
.tirelire-nav-panel.tirelire-nav-centered .tirelire-primary-menus {
  flex: 0 1 auto;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

.tirelire-primary-menus > .nav-item,
.tirelire-overflow-menu > .nav-item { flex: 0 0 auto; }

.tirelire-nav .nav-link {
  position: relative;
  height: var(--tirelire-nav-height);
  box-sizing: border-box;
  border: 0 !important;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px !important;
  margin: 0;
  color: #64748b !important;
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  transform: none !important;
  transition: color .12s ease, background-color .12s ease;
}
.tirelire-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--tirelire-primary);
  opacity: 0;
  transform: none;
  transition: opacity .12s ease;
  border: 0 !important;
  margin: 0 !important;
  vertical-align: initial !important;
}
.tirelire-nav .nav-link:hover {
  color: var(--tirelire-primary) !important;
  background: rgba(255,255,255,.72);
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.tirelire-nav .nav-item.show > .nav-link,
.tirelire-nav .nav-item.tirelire-menu-open > .nav-link {
  color: #174ea6 !important;
  background: #dcecff !important;
  border: 0 !important;
  box-shadow: inset 0 -2px 0 var(--tirelire-primary) !important;
  transform: none !important;
}
.tirelire-nav .nav-link:hover::after,
.tirelire-nav .nav-item.show > .nav-link::after {
  opacity: 1;
}

/* Le template Tirelire fournit ses propres chevrons.
   On neutralise celui injecté par Bootstrap / l'ancien thème. */
.tirelire-nav .dropdown-toggle::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  margin: 0 !important;
}
.tirelire-menu-icon {
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  color: currentColor;
}
.tirelire-menu-label { display: inline-block; }
.tirelire-menu-caret { margin-left: 1px; font-size: 11px; }
.tirelire-submenu-icon {
  width: 18px;
  margin-right: 7px;
  text-align: center;
  color: var(--tirelire-muted);
}

.tirelire-nav .dropdown-menu {
  margin: 0;
  min-width: 0 !important;
  width: max-content;
  max-width: min(420px, calc(100vw - 24px));
  padding: 6px 0;
  border: 1px solid var(--tirelire-border);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 10px 26px rgba(36,54,84,.12);
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

/* Menu racine : toujours sous son bouton, jamais forcé vers la gauche. */
.tirelire-primary-menus > .nav-item.dropdown,
.tirelire-overflow-menu > .nav-item.dropdown {
  position: relative;
}
.tirelire-primary-menus > .nav-item.dropdown > .dropdown-menu {
  top: 100%;
  left: 0;
  right: auto;
}
.tirelire-primary-menus > .nav-item.dropdown.tirelire-align-right > .dropdown-menu {
  left: auto;
  right: 0;
}

/* Sous-menu : droite par défaut, gauche uniquement si le JS détecte un manque de place. */
.tirelire-nav .dropdown-submenu {
  position: relative;
}
.tirelire-nav .dropdown-submenu > .dropdown-menu {
  top: -7px;
  left: 100% !important;
  right: auto !important;
  margin-left: 0;
  border-radius: 6px;
}
.tirelire-nav .dropdown-submenu.tirelire-open-left > .dropdown-menu {
  left: auto !important;
  right: 100% !important;
}

.tirelire-nav .dropdown-item {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--tirelire-text);
  background: transparent;
}
.tirelire-nav .tirelire-submenu-caret {
  flex: 0 0 14px;
  width: 14px;
  margin-left: auto;
  color: #6b7c91;
  font-size: 12px;
  text-align: center;
  order: 99;
}
.tirelire-nav .dropdown-submenu.tirelire-menu-open > .dropdown-item .tirelire-submenu-caret,
.tirelire-nav .dropdown-submenu.show > .dropdown-item .tirelire-submenu-caret {
  color: var(--tirelire-primary);
}

/* Cas normal : sous-menu ouvert à DROITE => ">" après le libellé. */
.tirelire-nav .dropdown-submenu:not(.tirelire-open-left) > .dropdown-item .tirelire-submenu-caret {
  margin-left: 10px;
  margin-right: 0;
  order: 99;
}

/* Si le sous-menu doit s'ouvrir à GAUCHE :
   "<" avant le libellé, exactement comme une navigation classique. */
.tirelire-nav .dropdown-submenu.tirelire-open-left > .dropdown-item .tirelire-submenu-caret {
  margin-left: 0;
  margin-right: 10px;
  order: -1;
}
.tirelire-nav .dropdown-item:hover,
.tirelire-nav .dropdown-item:focus {
  color: var(--tirelire-primary);
  background: #f4f8fc;
}
.tirelire-nav .dropdown-item.active,
.tirelire-nav .dropdown-item:active {
  color: var(--tirelire-primary) !important;
  background: #eaf2fb !important;
}
/* =========================================================
   PLUS / OVERFLOW
   Les éléments déplacés dans PLUS restent des MENUS RACINES.
   Leur identité visuelle doit donc rester proche de la barre.
   ========================================================= */
#tirelireMoreMenu {
  min-width: 260px;
  padding: 6px;
  border-radius: 6px;
}

#tirelireMoreMenu > .nav-item {
  list-style: none;
  position: relative;
  margin: 0;
}

#tirelireMoreMenu > .nav-item + .nav-item {
  border-top: 1px solid #e6edf5;
}

#tirelireMoreMenu > .nav-item > .nav-link {
  min-height: 42px;
  height: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px !important;
  color: #526175 !important;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
  border-radius: 4px;
}

#tirelireMoreMenu > .nav-item > .nav-link:hover {
  color: var(--tirelire-primary) !important;
  background: #f3f7fc !important;
}

#tirelireMoreMenu > .nav-item.tirelire-menu-open > .nav-link,
#tirelireMoreMenu > .nav-item.show > .nav-link {
  color: #174ea6 !important;
  background: #dcecff !important;
  /* Par défaut le menu racine de PLUS s'ouvre à droite :
     le filet reste donc à gauche. */
  box-shadow: inset 3px 0 0 var(--tirelire-primary) !important;
}

/* Si le menu racine de PLUS doit s'ouvrir à gauche,
   on déplace UNIQUEMENT son filet bleu à droite. */
#tirelireMoreMenu > .nav-item.tirelire-root-open-left.tirelire-menu-open > .nav-link,
#tirelireMoreMenu > .nav-item.tirelire-root-open-left.show > .nav-link {
  box-shadow: inset -3px 0 0 var(--tirelire-primary) !important;
}

#tirelireMoreMenu > .nav-item > .nav-link .tirelire-menu-icon {
  color: var(--tirelire-primary);
  flex: 0 0 18px;
}

#tirelireMoreMenu > .nav-item > .nav-link .tirelire-menu-caret {
  position: static;
  order: -2;
  width: 14px;
  margin: 0 2px 0 0;
  transform: rotate(90deg);
  color: #6b7c91;
}

/* Dans PLUS, le sous-menu sort vers la gauche car PLUS est placé à droite.
   Un espace et une bordure plus nette séparent visuellement les niveaux. */
#tirelireMoreMenu > .nav-item > .dropdown-menu {
  top: 0;
  left: calc(100% + 6px) !important;
  right: auto !important;
  min-width: 0 !important;
  width: max-content;
  border-radius: 6px;
  border-color: #cbd7e5;
  box-shadow: 0 12px 30px rgba(36,54,84,.16);
}

#tirelireMoreMenu > .nav-item.tirelire-root-open-left > .dropdown-menu {
  left: auto !important;
  right: calc(100% + 6px) !important;
}


/* Hiérarchie des niveaux :
   chaque panneau enfant est légèrement décalé et détaché de son parent. */
.tirelire-nav .dropdown-submenu > .dropdown-menu {
  margin-left: 8px;
}
.tirelire-nav .dropdown-submenu.tirelire-open-left > .dropdown-menu {
  margin-left: 0;
  margin-right: 8px;
}
.tirelire-nav .dropdown-submenu > .dropdown-menu::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -9px;
  width: 9px;
  background: transparent;
}
.tirelire-nav .dropdown-submenu.tirelire-open-left > .dropdown-menu::before {
  left: auto;
  right: -9px;
}

/* Niveau sélectionné : fond plus franc pour qu'on sache où on se trouve. */
.tirelire-nav .dropdown-item.active,
.tirelire-nav .dropdown-item:active,
.tirelire-nav .dropdown-submenu.tirelire-menu-open > .dropdown-item,
.tirelire-nav .dropdown-submenu.show > .dropdown-item {
  color: #174ea6 !important;
  background: #dfeeff !important;
}

/* Les icônes restent alignées même avec le chevron placé avant le titre. */
.tirelire-nav .dropdown-item .tirelire-menu-icon {
  flex: 0 0 18px;
  width: 18px;
  text-align: center;
}

/* Hiérarchie plus lisible : un sous-menu a un fond légèrement différent
   et son parent reste marqué pendant toute l'ouverture. */
.tirelire-nav .dropdown-submenu.tirelire-menu-open > .dropdown-item,
.tirelire-nav .dropdown-submenu.show > .dropdown-item {
  color: #174ea6 !important;
  background: #edf5ff !important;
  font-weight: 500;
}

.tirelire-nav .dropdown-submenu > .dropdown-menu {
  background: #ffffff;
  border-color: #cbd7e5;
}

.tirelire-mobile-account, .tirelire-mobile-footer { display: none; }

/* =========================================================
   FOOTER TIRELIRE
   ========================================================= */
#siteFooter.tirelire-footer {
  flex: 0 0 auto;
  width: 100%;
  min-height: var(--tirelire-footer-height);
  margin-top: auto;
  padding: 0 !important;
  background: #edf3f8;
  border-top: 1px solid #c5d1dd;
  box-shadow: 0 -2px 8px rgba(35, 55, 85, .045);
  color: #5f6f84;
}
.tirelire-footer-inner {
  min-height: var(--tirelire-footer-height);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 16px;
}
.tirelire-footer-brand {
  justify-self: start;
  display: flex;
  align-items: center;
  height: 100%;
}
.tirelire-footer-brand img {
  display: block;
  width: auto;
  height: 34px;
  max-width: 170px;
  object-fit: contain;
}
.tirelire-footer-copy {
  justify-self: center;
  color: #526175;
  font-size: 12px;
  font-weight: 500;
}
.tirelire-footer-home {
  justify-self: end;
  color: #526175;
  font-size: 12px;
  font-weight: 500;
}
.tirelire-footer-home:hover { color: var(--tirelire-primary); text-decoration: none; }


/* =========================================================
   SUPPORTS / STRUCTURE RESPONSIVE
   ---------------------------------------------------------
   1) TV / PC / tablette paysage : structure desktop.
   2) Tablette portrait : 2 lignes (compte puis logo/menu).
   3) Mobile paysage : même structure que tablette portrait,
      mais sans footer.
   4) Mobile portrait : 2 lignes compactes ; email cliquable,
      plateforme/déconnexion dans "Mon compte", sans footer.
   ========================================================= */

/* ---------------------------------------------------------
   SEPARATION BASSE DU HEADER - STRUCTURE DESKTOP
   ---------------------------------------------------------
   La séparation ne doit plus appartenir au header pleine largeur.
   Elle est portée par le shell de navigation afin de suivre la
   largeur utile Tirelire (var(--tirelire-max-width) sur les grands écrans).
   Les modes compacts/hamburger gardent leur comportement dédié.
   --------------------------------------------------------- */
@media (min-width: 1024px) {
  .tirelire-nav > .tirelire-shell {
    border-bottom: 1px solid var(--tirelire-border);
  }
}

@media (min-width: 1800px) {
  :root { --tirelire-shell-pad: 18px; }
  .tirelire-nav .nav-link {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ---------------------------------------------------------
   FAMILLE COMPACTE :
   - tablette portrait
   - mobile paysage
   - mobile portrait
   La navigation principale est ouverte via le hamburger.
   --------------------------------------------------------- */
@media
  (min-width: 600px) and (max-width: 1023.98px) and (orientation: portrait),
  (max-width: 1023.98px) and (max-height: 600px) and (orientation: landscape),
  (max-width: 599.98px) and (orientation: portrait) {

  :root {
    --tirelire-shell-pad: 14px;
    --tirelire-header-main-height: 106px;
    --tirelire-nav-height: 0px;
  }

  .tirelire-header-main {
    height: var(--tirelire-header-main-height);
    min-height: var(--tirelire-header-main-height);
  }

  .tirelire-header-row {
    height: var(--tirelire-header-main-height);
    min-height: var(--tirelire-header-main-height);
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: 50px 56px;
    gap: 0 12px;
    position: relative;
  }

  /* Bande visuelle de la seconde ligne. */
  .tirelire-header-row::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: calc(-1 * var(--tirelire-shell-pad));
    right: calc(-1 * var(--tirelire-shell-pad));
    top: 50px;
    height: 56px;
    background: #eef7ff;
    border-top: 1px solid #e4edf6;
  }

  .tirelire-header-row > * {
    position: relative;
    z-index: 1;
  }

  .tirelire-account {
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: start;
    height: 50px;
  }

  .tirelire-auth {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    height: 50px;
  }

  .tirelire-logo {
    grid-column: 1 / 3;
    grid-row: 2;
    justify-self: start;
    height: 56px;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }

  .tirelire-logo img {
    height: 48px;
    max-width: 245px;
  }

  .tirelire-menu-toggle {
    display: block !important;
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: center;
  }

  /* La ligne de navigation desktop disparaît.
     Le panneau n'existe visuellement qu'à l'ouverture. */
  .tirelire-nav {
    height: 0;
    min-height: 0;
    border: 0;
    background: transparent;
  }

  .tirelire-nav .tirelire-shell {
    padding: 0;
  }

  .tirelire-nav-inner {
    min-height: 0;
    height: 0;
  }

  .tirelire-nav-panel {
    visibility: visible;
    display: none !important;
    position: fixed;
    z-index: 1055;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(410px, 92vw);
    height: 100dvh;
    background: #fff;
    box-shadow: -12px 0 35px rgba(23, 36, 58, .18);
    overflow-y: auto;
    padding: 18px 0 28px;
  }

  body.tirelire-menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    /*
      Le header Tirelire crée déjà un contexte d'empilement à z-index:1040.
      Le voile doit donc rester SOUS ce contexte ; sinon il recouvre aussi
      le drawer et intercepte tous les clics.
    */
    z-index: 1035;
    background: rgba(22, 32, 50, .32);
  }

  body.tirelire-menu-open .tirelire-nav-panel {
    display: block !important;
  }

  body.tirelire-menu-open {
    overflow: hidden;
  }

  /* Le drawer sert exclusivement à la navigation.
     Le compte reste dans le header / sa modale dédiée. */
  .tirelire-mobile-account,
  .tirelire-mobile-footer {
    display: none !important;
  }

  .tirelire-primary-menus {
    display: block;
    overflow: visible;
    padding: 8px 0;
  }

  .tirelire-primary-menus > .nav-item {
    display: block;
    width: 100%;
  }

  .tirelire-nav .nav-link {
    height: auto;
    min-height: 46px;
    padding: 10px 20px !important;
    justify-content: flex-start;
    color: var(--tirelire-text) !important;
    font-size: 13px;
    text-transform: none;
  }

  .tirelire-menu-caret {
    margin-left: auto;
  }

  .tirelire-nav .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 8px 16px;
    transform: none !important;
  }

  .tirelire-nav .dropdown-item {
    white-space: normal;
    padding: 9px 20px;
  }

  .tirelire-overflow-menu {
    display: none !important;
  }
}

/* ---------------------------------------------------------
   TABLETTE PORTRAIT :
   compte + plateforme + déconnexion visibles.
   Footer conservé.
   --------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1023.98px) and (orientation: portrait) {
  :root {
    --tirelire-content-pad-y: 10px;
  }

  .tirelire-user-email {
    max-width: 310px;
    font-size: 13px;
  }

  .tirelire-platform-link {
    font-size: 12px;
  }

  .tirelire-logout,
  .tirelire-login {
    padding: .34rem .68rem;
  }

  .tirelire-footer-inner {
    min-height: 52px;
  }

  .tirelire-footer-brand img {
    height: 30px;
  }
}

/* ---------------------------------------------------------
   MOBILE PAYSAGE :
   une seule ligne compacte.
   Logo gauche | compte + plateforme + déconnexion | menu droite.
   Footer supprimé.
   --------------------------------------------------------- */
@media (max-width: 1023.98px) and (max-height: 600px) and (orientation: landscape) {
  :root {
    --tirelire-shell-pad: 10px;
    --tirelire-header-main-height: 62px;
    --tirelire-nav-height: 0px;
    --tirelire-footer-height: 0px;
    --tirelire-content-pad-y: 8px;
  }

  .tirelire-header-main {
    height: 62px;
    min-height: 62px;
    background: #eef7ff;
    border-bottom: 1px solid #d8e6f2;
  }

  .tirelire-header-row {
    height: 62px;
    min-height: 62px;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: 62px;
    gap: 10px;
    align-items: center;
  }

  .tirelire-header-row::before {
    display: none;
  }

  .tirelire-logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    height: 62px;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }

  .tirelire-logo img {
    height: 46px;
    max-width: 180px;
  }

  .tirelire-account {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    min-width: 0;
    height: 42px;
    padding: 0 10px;
    border: 1px solid #bdd9ee;
    border-right: 0;
    border-radius: 7px 0 0 7px;
    background: rgba(255, 255, 255, .72);
    overflow: visible;
    position: relative;
    z-index: 30;
  }

  .tirelire-user-email {
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }

  .tirelire-account-separator {
    flex: 0 0 auto;
  }

  .tirelire-platform-dropdown {
    flex: 0 0 auto;
    position: relative;
    z-index: 40;
  }

  .tirelire-platform-dropdown .dropdown-menu {
    z-index: 1065;
    min-width: 150px;
    margin-top: 6px;
  }

  .tirelire-platform-link {
    font-size: 11px;
    white-space: nowrap;
  }

  .tirelire-auth {
    grid-column: 3;
    grid-row: 1;
    justify-self: stretch;
    align-self: center;
    height: 42px;
    margin-left: -10px;
    padding: 0 8px 0 4px;
    border: 1px solid #bdd9ee;
    border-left: 0;
    border-radius: 0 7px 7px 0;
    background: rgba(255, 255, 255, .72);
  }

  .tirelire-auth > div:not(.d-none) {
    width: 100%;
    justify-content: flex-end;
  }

  .tirelire-logout,
  .tirelire-login {
    padding: .28rem .52rem;
    font-size: 12px;
    white-space: nowrap;
  }

  .tirelire-menu-toggle {
    display: block !important;
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  #siteFooter.tirelire-footer {
    display: none !important;
  }
}

/* ---------------------------------------------------------
   MOBILE PORTRAIT :
   email cliquable sur la première ligne.
   Plateforme et déconnexion passent dans "Mon compte".
   Footer supprimé.
   --------------------------------------------------------- */
@media (max-width: 599.98px) and (orientation: portrait) {
  :root {
    --tirelire-shell-pad: 12px;
    --tirelire-header-main-height: 100px;
    --tirelire-footer-height: 0px;
    --tirelire-content-pad-y: 8px;
  }

  .tirelire-header-row {
    height: 100px;
    min-height: 100px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 46px 54px;
    column-gap: 8px;
  }

  .tirelire-header-row::before {
    top: 46px;
    height: 54px;
  }

  .tirelire-account {
    grid-column: 1;
    grid-row: 1;
    justify-self: stretch;
    height: 38px;
    min-width: 0;
    margin-top: 4px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
  }

  /* L'email devient visuellement cliquable uniquement si plusieurs
     plateformes sont réellement disponibles. */
  .tirelire-account[data-has-platforms="1"] {
    cursor: pointer;
    border-color: #c8d8e6;
    background: #fff;
  }

  .tirelire-account[data-has-platforms="1"]:hover,
  .tirelire-account[data-has-platforms="1"]:focus-within {
    border-color: #9fbdd5;
    background: #fafcff;
  }

  .tirelire-user-email {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
  }

  .tirelire-account-separator,
  #tirelireHeader:not(.tirelire-header-v2) .tirelire-platform-dropdown {
    display: none !important;
  }

  .tirelire-auth {
    display: flex !important;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    height: 38px;
    margin-top: 4px;
  }

  .tirelire-auth .tirelire-logout,
  .tirelire-auth .tirelire-login {
    padding: .28rem .48rem;
    font-size: 11px;
    white-space: nowrap;
  }

  /* En portrait, la déconnexion est dans le header :
     la modale sert uniquement au choix de plateforme. */
  #UserQuickActionsModal #mobileLogoutBtn {
    display: none !important;
  }

  .tirelire-logo {
    grid-column: 1;
    grid-row: 2;
    height: 54px;
  }

  .tirelire-logo img {
    height: 46px;
    max-width: min(230px, 70vw);
  }

  .tirelire-menu-toggle {
    grid-column: 2;
    grid-row: 2;
  }

  .tirelire-nav-panel {
    width: min(390px, 94vw);
  }

  #siteFooter.tirelire-footer {
    display: none !important;
  }
}

/* Petite hauteur mobile : préserver le contenu utile. */
@media (max-width: 599.98px) and (orientation: portrait) and (max-height: 700px) {
  :root {
    --tirelire-header-main-height: 92px;
  }

  .tirelire-header-row {
    height: 92px;
    min-height: 92px;
    grid-template-rows: 42px 50px;
  }

  .tirelire-header-row::before {
    top: 42px;
    height: 50px;
  }

  .tirelire-account {
    height: 36px;
    margin-top: 3px;
  }

  .tirelire-logo {
    height: 50px;
  }

  .tirelire-logo img {
    height: 42px;
  }
}

/* =========================================================
   AUTONOMIE DU TEMPLATE TIRELIRE
   Aucune géométrie du nouveau header ne dépend des classes
   h3-topbar / h3-navbar / navbar du template Wrappixel.
   ========================================================= */
#tirelireHeader .tirelire-header-main,
#tirelireHeader .tirelire-header-row,
#tirelireHeader .tirelire-account,
#tirelireHeader .tirelire-logo,
#tirelireHeader .tirelire-auth {
  box-sizing: border-box;
}
#tirelireHeader .tirelire-header-row {
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}
#tirelireHeader .tirelire-account,
#tirelireHeader .tirelire-logo,
#tirelireHeader .tirelire-auth {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
}
#tirelireHeader .tirelire-nav-panel,
#tirelireHeader .tirelire-primary-menus,
#tirelireHeader .tirelire-overflow-menu {
  box-sizing: border-box;
}



/* Desktop / TV / tablette paysage : menus déroulants gérés par TirelireNavigation.js */
@media
  (min-width: 1024px),
  (orientation: landscape) and (min-height: 601px) {
  #tirelireHeader .dropdown-menu {
    display: none;
  }

  #tirelireHeader .nav-item.tirelire-menu-open > .dropdown-menu,
  #tirelireHeader .dropdown-submenu.tirelire-menu-open > .dropdown-menu,
  #tirelireHeader .nav-item.show > .dropdown-menu,
  #tirelireHeader .dropdown-submenu.show > .dropdown-menu,
  #tirelireHeader .tirelire-platform-dropdown.show > .dropdown-menu {
    display: block;
  }
}

/* Le sélecteur de plateforme appartient au header, mais son menu doit pouvoir
   sortir de la hauteur de la barre sur les supports horizontaux. */
#tirelireHeader,
#tirelireHeader .tirelire-header-main,
#tirelireHeader .tirelire-header-row {
  overflow: visible;
}


/* ==========================================================================
   TIRELIRE - MENUS / REGLE 01 (CORRIGEE)
   - Le dropdown racine ne peut jamais être plus étroit que son menu parent.
   - Il s'élargit uniquement si le contenu le plus long le nécessite.
   - Tous les chevrons ">" sont alignés sur le bord droit du panneau.
   ========================================================================== */

/* La vraie liste racine du template est .tirelire-primary-menus. */
#tirelireHeader .tirelire-primary-menus > .nav-item.dropdown > .dropdown-menu {
  min-width: 100% !important;
  width: max-content;
  max-width: min(420px, calc(100vw - 24px));
  box-sizing: border-box;
}

/* Tous les items remplissent la largeur calculée du panneau. */
#tirelireHeader .tirelire-primary-menus > .nav-item.dropdown > .dropdown-menu > li > .dropdown-item,
#tirelireHeader .tirelire-primary-menus > .nav-item.dropdown > .dropdown-menu > .dropdown-item {
  width: 100%;
  box-sizing: border-box;
}

/* Sous-menu à droite : chevron collé à la colonne de droite du panneau. */
#tirelireHeader .dropdown-submenu:not(.tirelire-open-left) > .dropdown-item > .tirelire-submenu-caret {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Sous-menu à gauche : "<" reste placé avant le titre. */
#tirelireHeader .dropdown-submenu.tirelire-open-left > .dropdown-item > .tirelire-submenu-caret {
  margin-left: 0 !important;
  margin-right: 10px !important;
}

#tirelireMoreMenu > .nav-item > .dropdown-menu {
  border-radius: 6px !important;
}

/* Mobile / tablette portrait : le drawer et le header restent interactifs
   au-dessus du voile de fond. */
body.tirelire-menu-open #tirelireHeader {
  z-index: 1040;
}


/* ==========================================================================
   TIRELIRE - MOBILE MENU / PORTRAIT
   En portrait, le drawer ne prend plus systématiquement toute la hauteur.
   Il s'adapte au contenu tout en restant scrollable si nécessaire.
   ========================================================================== */
@media (max-width: 599.98px) and (orientation: portrait) {
  .tirelire-nav-panel {
    top: 0;
    bottom: auto;
    height: auto;
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    border-radius: 0 0 10px 10px;
  }
}


/* ==========================================================================
   TIRELIRE - MOBILE MENU / ACCORDION
   Les niveaux du drawer sont pilotés exclusivement par TirelireNavigation.js.
   ========================================================================== */
@media
  (min-width: 600px) and (max-width: 1023.98px) and (orientation: portrait),
  (max-width: 1023.98px) and (max-height: 600px) and (orientation: landscape),
  (max-width: 599.98px) and (orientation: portrait) {

  #tirelireHeader #header3 .dropdown-menu {
    display: none !important;
  }

  #tirelireHeader #header3 .nav-item.tirelire-mobile-open > .dropdown-menu,
  #tirelireHeader #header3 .dropdown-submenu.tirelire-mobile-open > .dropdown-menu {
    display: block !important;
  }

  /* Un état Bootstrap résiduel ne doit jamais décider de l'affichage mobile. */
  #tirelireHeader #header3 .show > .dropdown-menu:not(:where(
    .tirelire-mobile-open > .dropdown-menu
  )) {
    display: none !important;
  }

  #tirelireHeader #header3 .tirelire-mobile-open > .dropdown-toggle {
    background: #eef5fc;
    color: var(--tirelire-primary) !important;
  }
}


/* ==========================================================================
   TIRELIRE - CORPS / REGLE 02
   Le shell gère l'espacement extérieur vertical.
   Un conteneur fonctionnel placé directement dans #blocContent ne doit donc
   pas recréer un second padding en haut (ex. Bootstrap py-3 => 16px).
   On ne touche qu'au TOP : les paddings internes et le bas restent à la vue.
   ========================================================================== */
#blocContent.tirelire-content > section.container-fluid,
#blocContent.tirelire-content > .container-fluid {
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* ==========================================================================
   TIRELIRE - FOOTER / HAUTEUR DETERMINISTE
   La variable --tirelire-footer-height doit correspondre exactement
   à la hauteur réellement rendue par le DOM. On évite ainsi le dépassement
   fractionnaire de 1 px observé entre viewport et document.
   ========================================================================== */
#siteFooter.tirelire-footer {
  box-sizing: border-box !important;
  height: var(--tirelire-footer-height) !important;
  min-height: var(--tirelire-footer-height) !important;
  max-height: var(--tirelire-footer-height) !important;
  flex: 0 0 var(--tirelire-footer-height) !important;
  overflow: hidden;
}

#siteFooter.tirelire-footer .tirelire-footer-inner {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

/* Mobile : le footer est absent, aucune hauteur à réserver. */
@media (max-width: 599.98px),
       (max-width: 1023.98px) and (max-height: 600px) and (orientation: landscape) {
  #siteFooter.tirelire-footer {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    flex-basis: 0 !important;
  }
}


/* ==========================================================================
   TIRELIRE - CORPS / HAUTEUR RACINE
   L'ancien thème impose un min-height:100vh au body. En émulation Chrome,
   100vh peut être fractionnaire (ex. 811.333px pour un viewport de 811px),
   puis être arrondi à 812px pour le scrollHeight : scrollbar extérieur de 1px.

   Le nouveau shell calcule déjà lui-même header + contenu + footer.
   On neutralise donc uniquement ce min-height historique.
   IMPORTANT : on ne masque PAS l'overflow ; les vraies pages longues
   continuent à défiler normalement.
   ========================================================================== */
html,
body {
  min-height: 0 !important;
}

body {
  height: auto !important;
  overflow-y: auto;
}


/* ==========================================================================
   TIRELIRE - CORPS / SOURCE DE VERITE HEADER
   --header-offset est mesuré dynamiquement par CustomUserUI.js à partir
   de la hauteur réellement rendue du header (bordures comprises).
   Le calcul du corps doit donc utiliser cette valeur réelle plutôt que
   l'addition théorique --tirelire-header-main-height + --tirelire-nav-height.

   Exemple constaté :
     variables théoriques : 56 + 44 = 100px
     header DOM réel      : 102px
   Les 2px manquants provoquaient exactement le scrollbar extérieur.
   ========================================================================== */


/* ==========================================================================
   TIRELIRE LAYOUT ENGINE - STEP 1
   --------------------------------------------------------------------------
   Deux modes seulement :
   - natural   : la vue suit naturellement la hauteur de son contenu ;
   - workspace : la vue occupe l'espace utile fourni par le shell.

   Aucun écran existant n'est migré automatiquement dans ce Step 1.
   Ces sélecteurs ne s'activent que lorsqu'une vue les demande explicitement.
   ========================================================================== */

:root {
  --tirelire-layout-viewport-height: 100dvh;
  --tirelire-layout-header-height:
    var(--header-offset, calc(var(--tirelire-header-main-height) + var(--tirelire-nav-height)));
  --tirelire-layout-footer-height: var(--tirelire-footer-height);
  --tirelire-layout-content-height: var(--tirelire-content-available-height);
  --tirelire-layout-content-inner-height:
    calc(var(--tirelire-content-available-height) - (2 * var(--tirelire-content-pad-y)));
}

/* Mode naturel : explicite mais volontairement non contraignant. */
[data-tirelire-layout="natural"],
.tirelire-layout-natural {
  min-height: 0;
}

/* Mode workspace : le shell fournit la hauteur, la fonctionnalité gère
   ensuite uniquement son propre scroll interne. */
[data-tirelire-layout="workspace"],
.tirelire-layout-workspace {
  box-sizing: border-box;
  height: var(--tirelire-layout-content-inner-height);
  min-height: 0;
  overflow: hidden;
}

/* Variante pour un composant qui commence plus bas dans une vue :
   TirelireLayout.applyAvailableHeight() positionne cette variable localement. */
[data-tirelire-available-height],
.tirelire-layout-available {
  height: var(--tirelire-available-height, auto);
  min-height: 0;
}


/* ==========================================================================
   TIRELIRE LAYOUT ENGINE - FOOTER AUTO-HIDE
   --------------------------------------------------------------------------
   Si conserver le footer laisse moins de cette hauteur utile au corps,
   le moteur TirelireLayout masque automatiquement le footer.

   Cette valeur est volontairement centralisée et facilement ajustable.
   ========================================================================== */
:root {
  --tirelire-min-content-height-with-footer: 480px;
}

html.tirelire-footer-auto-hidden #siteFooter.tirelire-footer {
  display: none !important;
}
/* =========================================================
   LARGEUR DU SHELL SUR GRANDS ECRANS
   ---------------------------------------------------------
   Cette règle doit rester APRES les règles de base du corps :
   sinon le max-width:none de .container-fluid la réécrit.
   ========================================================= */
@media (min-width: 1920px) {
  .tirelire-shell {
    max-width: var(--tirelire-max-width);
  }

  #main-wrapper .page-wrapper > .container-fluid {
    max-width: var(--tirelire-max-width);
    margin-left: auto;
    margin-right: auto;
  }

  /* La couleur de navigation appartient visuellement au shell applicatif.
     On limite donc aussi son fond, contrairement au TopBar/Footer dont le
     fond neutre peut rester pleine largeur. */
  .tirelire-nav {
    width: 100%;
    max-width: var(--tirelire-max-width);
    margin-left: auto;
    margin-right: auto;
  }
}


/* =========================================================
   GRANDS ECRANS : FOND EXTERIEUR DU CONTENU
   ---------------------------------------------------------
   A partir de 1920px, la zone applicative reste limitee a var(--tirelire-max-width).
   Les marges laterales appartiennent au viewport et restent neutres,
   tandis que le fond de page Tirelire reste porte par la zone contenu.
   ========================================================= */
@media (min-width: 1920px) {
  body {
    background: var(--tirelire-surface);
  }

  #main-wrapper .page-wrapper {
    background: transparent;
  }

  #main-wrapper .page-wrapper > .container-fluid {
    background: var(--tirelire-page);
  }
}


/* =========================================================
   GRANDS ECRANS : FOOTER LIMITE AU SHELL
   ---------------------------------------------------------
   Comme la NavBar et le contenu, le fond visuel du Footer
   ne doit pas s'etendre dans les marges laterales au-dela
   de var(--tirelire-max-width). Les marges exterieures restent neutres.
   ========================================================= */
@media (min-width: 1920px) {
  #siteFooter.tirelire-footer {
    width: 100%;
    max-width: var(--tirelire-max-width);
    margin-left: auto;
    margin-right: auto;
  }
}


/* ==========================================================================
   TIRELIRE HEADER V2 - BARRE UNIQUE
   --------------------------------------------------------------------------
   V1 reste intacte. Ces règles ne s'appliquent qu'à .tirelire-header-v2.
   Desktop : [plateforme + logo] [menus centrés] [compte]
   Compact : [plateforme + logo] [compte + hamburger], menus dans le drawer.
   ========================================================================== */

.tirelire-header-v2 {
  --tirelire-nav-height: 58px;
}

.tirelire-header-v2 .tirelire-nav-v2 {
  height: var(--tirelire-nav-height);
  min-height: var(--tirelire-nav-height);
  background: #f1f8ff;
  border-top: 0;
  border-bottom: 0;
}

.tirelire-header-v2 .tirelire-nav-inner-v2 {
  height: var(--tirelire-nav-height);
  min-height: var(--tirelire-nav-height);
}

.tirelire-v2-bar-row {
  width: 100%;
  height: var(--tirelire-nav-height);
  min-height: var(--tirelire-nav-height);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.tirelire-v2-left,
.tirelire-v2-right {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
}

.tirelire-v2-left {
  justify-self: start;
  gap: 8px;
}

.tirelire-v2-right {
  justify-self: end;
  gap: 8px;
}

.tirelire-v2-platform {
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
}

.tirelire-v2-platform-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  min-width: max-content;
  min-height: 36px;
  max-width: none;
  padding: 0 4px;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: #526175;
}

.tirelire-v2-platform-label {
  display: inline-block;
  white-space: nowrap;
}


.tirelire-v2-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 4px;
}

.tirelire-v2-logo img {
  display: block;
  width: auto;
  height: 36px;
  max-width: min(150px, 100%);
  object-fit: contain;
}

.tirelire-header-v2 .tirelire-nav-panel-v2 {
  height: var(--tirelire-nav-height);
  min-height: var(--tirelire-nav-height);
  min-width: 0;
  display: flex !important;
  align-items: stretch;
}

.tirelire-header-v2 .tirelire-nav-panel-v2.tirelire-nav-centered {
  justify-content: center;
}

.tirelire-v2-account {
  position: relative;
  height: 100%;
  align-items: center;
}

.tirelire-v2-account:not(.d-none) {
  display: flex !important;
}

.tirelire-v2-account-trigger {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #cbdbea;
  border-radius: 50%;
  background: var(--tirelire-primary-soft);
  color: var(--tirelire-primary);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(35, 55, 85, .08);
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.tirelire-v2-account-trigger:hover,
.tirelire-v2-account-trigger:focus,
.tirelire-v2-account.is-open .tirelire-v2-account-trigger {
  outline: 0;
  border-color: #9ebbe0;
  background: #e2edff;
  box-shadow: 0 2px 8px rgba(36, 79, 186, .16);
}

.tirelire-v2-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--tirelire-primary);
  color: #fff;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
}

.tirelire-v2-avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.tirelire-v2-avatar-lg {
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  font-size: 27px;
}

.tirelire-v2-avatar-xl {
  width: 96px;
  height: 96px;
  font-size: 32px;
}

.tirelire-v2-avatar-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tirelire-v2-avatar-initials {
  position: relative;
  z-index: 1;
}

.tirelire-v2-account-panel {
  display: none;
  position: absolute;
  z-index: 1090;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: #fff;
  color: var(--tirelire-text);
  border: 1px solid var(--tirelire-border);
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(23, 36, 58, .18);
  overflow: hidden;
}

.tirelire-v2-account.is-open .tirelire-v2-account-panel {
  display: block;
}

.tirelire-v2-account-panel-top {
  min-height: 54px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #edf1f5;
}

.tirelire-v2-panel-logo {
  width: auto;
  height: 34px;
  max-width: 150px;
  object-fit: contain;
}

.tirelire-v2-panel-logout {
  padding: 4px 0;
  color: #334155;
  text-decoration: none !important;
  white-space: nowrap;
}

.tirelire-v2-panel-logout:hover {
  color: var(--tirelire-primary);
}

.tirelire-v2-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 18px;
}

.tirelire-v2-identity-text {
  min-width: 0;
}

.tirelire-v2-fullname {
  font-size: 17px;
  font-weight: 600;
  color: var(--tirelire-text);
}

.tirelire-v2-email {
  margin-top: 4px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #526175;
  font-size: 13px;
}

.tirelire-v2-profile-link {
  margin-top: 8px;
  color: var(--tirelire-primary);
  font-size: 13px;
  text-decoration: none !important;
}

.tirelire-v2-account-separator-line {
  height: 1px;
  background: #edf1f5;
}

.tirelire-v2-account-meta {
  padding: 12px 18px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
}

.tirelire-v2-login-zone:not(.d-none) {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

/* Desktop : la séparation suit la largeur utile du shell. */
@media (min-width: 1024px) {
  .tirelire-header-v2 .tirelire-nav-v2 > .tirelire-shell {
    border-bottom: 1px solid var(--tirelire-border);
  }
}


/* Supports compacts : la barre reste unique ; seuls les menus passent en drawer. */
@media
  (min-width: 600px) and (max-width: 1023.98px) and (orientation: portrait),
  (max-width: 1023.98px) and (max-height: 600px) and (orientation: landscape),
  (max-width: 599.98px) and (orientation: portrait) {

  .tirelire-header-v2 {
    --tirelire-nav-height: 58px;
  }

  .tirelire-header-v2 .tirelire-nav-v2 {
    height: 58px !important;
    min-height: 58px !important;
    background: #f1f8ff !important;
    border: 0;
  }

  .tirelire-header-v2 .tirelire-nav-v2 > .tirelire-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .tirelire-header-v2 .tirelire-nav-inner-v2 {
    height: 58px !important;
    min-height: 58px !important;
  }

  .tirelire-v2-bar-row {
    height: 58px;
    min-height: 58px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .tirelire-v2-left {
    grid-column: 1;
    gap: 8px;
    /* Le dropdown de plateforme appartient à cette zone : il doit pouvoir
       sortir de la hauteur/largeur de la barre sur mobile. */
    overflow: visible;
  }

  .tirelire-v2-platform {
    position: relative;
    z-index: 1080;
  }

  .tirelire-v2-platform .dropdown-menu {
    z-index: 1085;
  }

  .tirelire-v2-right {
    grid-column: 2;
  }

  .tirelire-v2-logo {
    height: 48px;
    min-width: 0;
  }

  .tirelire-v2-logo img {
    height: 40px;
    max-width: min(135px, 38vw);
  }

  .tirelire-v2-platform-link {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  .tirelire-header-v2 .tirelire-nav-panel-v2 {
    /* En compact le panneau V2 est un vrai drawer : fermé par défaut.
       Cette règle doit surcharger le display:flex !important du mode desktop. */
    display: none !important;
    height: 100dvh;
    min-height: 0;
    padding-top: 0;
  }

  body.tirelire-menu-open .tirelire-header-v2 .tirelire-nav-panel-v2 {
    display: block !important;
  }

  .tirelire-v2-menu-toggle {
    display: block !important;
    position: relative;
    z-index: 1;
    grid-column: auto;
    grid-row: auto;
  }

  /* Un seul contrôle mobile : le hamburger reste accessible quand le drawer
     est ouvert et sert alors de bouton de fermeture. */
  body.tirelire-menu-open .tirelire-v2-menu-toggle {
    position: fixed;
    z-index: 1065;
    top: 10px;
    right: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(23, 36, 58, .12);
  }

  body.tirelire-menu-open .tirelire-header-v2 .tirelire-nav-panel-v2 {
    padding-top: 58px;
  }

  .tirelire-v2-account-trigger {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .tirelire-v2-account-panel {
    position: fixed;
    top: 66px;
    right: 12px;
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
  }
}

@media (max-width: 420px) {
  .tirelire-v2-left {
    gap: 5px;
  }

  .tirelire-v2-platform-link {
    max-width: none;
    font-size: 10px;
  }

  .tirelire-v2-logo img {
    max-width: 112px;
  }

  .tirelire-v2-identity {
    gap: 14px;
    padding: 18px 14px;
  }

  .tirelire-v2-avatar-lg {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
    font-size: 23px;
  }

  .tirelire-v2-account-panel {
    left: 12px;
    right: 12px;
    width: auto;
  }
}

/* V2 : le premier menu se rapproche du logo sans modifier l'espacement
   entre les autres menus. */
@media (min-width: 1024px) {
  .tirelire-header-v2 .tirelire-primary-menus > .nav-item:first-child > .nav-link {
    padding-left: 6px !important;
  }
}

/* V2 - plateforme : contexte global clairement identifiable comme sélectionnable. */
.tirelire-header-v2 .tirelire-v2-platform-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-decoration: none !important;
}
.tirelire-header-v2 .tirelire-v2-platform-action {
  padding: 6px 8px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.tirelire-header-v2 .tirelire-v2-platform-action:hover,
.tirelire-header-v2 .tirelire-v2-platform-action:focus,
.tirelire-header-v2 .tirelire-v2-platform-action[aria-expanded="true"] {
  background: rgba(38, 50, 72, .06);
  color: var(--tirelire-text);
  outline: 0;
}

/* Chevron volontairement visible : sur tactile, le libellé seul ne suffit pas
   à indiquer que la plateforme peut être changée. */
.tirelire-header-v2 .tirelire-v2-platform-action::after {
  display: inline-block !important;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  content: "" !important;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  transition: transform .15s ease;
}
.tirelire-header-v2 .tirelire-v2-platform-action[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.tirelire-header-v2 .tirelire-v2-platform .dropdown-menu {
  min-width: 132px;
  padding: 5px 0;
}
.tirelire-header-v2 .tirelire-v2-platform-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
}
.tirelire-header-v2 .tirelire-v2-platform-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  flex: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
}
.tirelire-header-v2 .tirelire-v2-platform-item.active-platform {
  background: rgba(38, 50, 72, .05);
  color: var(--tirelire-text);
}


/* ==========================================================================
   TIRELIRE HEADER V2 - MENUS COMPACTS DYNAMIQUES
   --------------------------------------------------------------------------
   TirelireNavigation.js active cette classe uniquement si les menus ne
   tiennent pas dans leur largeur normale. On gagne de la place avant de
   déplacer un menu dans « Plus », sans réduire la taille de police.
   ========================================================================== */
@media (min-width: 1024px) {
  .tirelire-header-v2.tirelire-nav-tight .tirelire-nav .nav-link {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .tirelire-header-v2.tirelire-nav-tight
  .tirelire-primary-menus > .nav-item:first-child > .nav-link {
    padding-left: 4px !important;
  }
}

/* Header V2 - détails de la fenêtre Mon profil */
.tirelire-v2-profile-details {
  border-top: 1px solid #edf1f5;
}

.tirelire-v2-profile-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid #f1f4f7;
  font-size: 13px;
}

.tirelire-v2-profile-row:last-child {
  border-bottom: 0;
}

.tirelire-v2-profile-row > strong {
  max-width: 62%;
  text-align: right;
  overflow-wrap: anywhere;
}

.tirelire-v2-profile-label {
  flex: 0 0 auto;
  color: #6b7788;
}

.tirelire-v2-profile-row-stack {
  display: block;
}

.tirelire-v2-profile-row-stack .tirelire-v2-profile-label {
  display: block;
  margin-bottom: 7px;
}

.tirelire-v2-profile-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tirelire-v2-profile-platform-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid #d8e3ef;
  border-radius: 999px;
  background: #f6f9fc;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
}

/* Header V2 - gestion de la photo de profil */
.tirelire-v2-avatar-edit-btn {
  margin-top: -2px;
  padding: 2px 8px;
  font-size: 12px;
  text-decoration: none !important;
}

.tirelire-v2-avatar-upload-zone {
  padding: 14px 12px;
  border: 1px dashed #c7d5e5;
  border-radius: 8px;
  background: #f8fafc;
}

.tirelire-v2-avatar-modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#TirelireAvatarModalV2 .tirelire-v2-avatar-xl {
  box-shadow: 0 0 0 4px #f3f6fa;
}

#TirelireAvatarModalV2 .alert {
  font-size: 12px;
  padding: 8px 10px;
}


/* Header V2 - footer stable de la gestion d'avatar */
.tirelire-v2-avatar-modal-footer {
  display: block;
}

.tirelire-v2-avatar-footer-delete {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.tirelire-v2-avatar-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ==========================================================================
   HEADER V2 - RESPONSIVE CONSOLIDE PLATEFORME / BARRE MOBILE
   La barre reste sur une seule ligne. Le menu de plateforme est un overlay :
   il ne participe jamais au flux et ne modifie jamais la hauteur du header.
   ========================================================================== */
@media
  (min-width: 600px) and (max-width: 1023.98px) and (orientation: portrait),
  (max-width: 1023.98px) and (max-height: 600px) and (orientation: landscape),
  (max-width: 599.98px) and (orientation: portrait) {

  .tirelire-header-v2 .tirelire-nav-v2,
  .tirelire-header-v2 .tirelire-nav-v2 > .tirelire-shell,
  .tirelire-header-v2 .tirelire-nav-inner-v2,
  .tirelire-header-v2 .tirelire-v2-bar-row,
  .tirelire-header-v2 .tirelire-v2-left,
  .tirelire-header-v2 .tirelire-v2-right {
    overflow: visible !important;
  }

  .tirelire-header-v2 .tirelire-v2-bar-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    align-items: center !important;
  }

  .tirelire-header-v2 .tirelire-v2-left {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0;
    height: 58px !important;
  }

  .tirelire-header-v2 .tirelire-v2-right {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 7px !important;
    height: 58px !important;
  }

  .tirelire-header-v2 .tirelire-v2-platform.tirelire-platform-dropdown {
    display: block !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px;
    z-index: 1095;
  }

  .tirelire-header-v2 .tirelire-v2-platform-link {
    box-sizing: border-box;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #526175;
    font: inherit;
    font-size: 11px !important;
    font-weight: 600;
    line-height: 32px !important;
    appearance: none;
    -webkit-appearance: none;
  }

  .tirelire-header-v2 .tirelire-v2-platform-action:hover,
  .tirelire-header-v2 .tirelire-v2-platform-action:focus,
  .tirelire-header-v2 .tirelire-v2-platform-action[aria-expanded="true"] {
    border-color: #d5e1ec;
    background: #fff;
  }

  .tirelire-header-v2 .tirelire-v2-platform .tirelire-v2-platform-menu {
    position: absolute !important;
    top: calc(100% + 5px) !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;
    min-width: 132px !important;
    width: max-content !important;
    max-width: min(220px, calc(100vw - 24px));
    margin: 0 !important;
    padding: 5px 0 !important;
    border: 1px solid #dce5ee;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(23, 36, 58, .16);
    z-index: 1100 !important;
  }

  .tirelire-header-v2 .tirelire-v2-logo {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .tirelire-header-v2 .tirelire-v2-logo img {
    width: auto !important;
    height: 34px !important;
    max-width: 118px !important;
    object-fit: contain;
  }
}

@media (max-width: 480px) and (orientation: portrait) {
  .tirelire-header-v2 .tirelire-nav-v2 > .tirelire-shell {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .tirelire-header-v2 .tirelire-v2-bar-row {
    gap: 6px !important;
  }

  .tirelire-header-v2 .tirelire-v2-left,
  .tirelire-header-v2 .tirelire-v2-right {
    gap: 5px !important;
  }

  .tirelire-header-v2 .tirelire-v2-platform-link {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 10.5px !important;
  }

  .tirelire-header-v2 .tirelire-v2-logo img {
    height: 32px !important;
    max-width: 105px !important;
  }

  .tirelire-header-v2 .tirelire-v2-account-trigger {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  .tirelire-header-v2 .tirelire-v2-menu-toggle {
    width: 38px;
    height: 38px;
  }
}



/* Header V2 - finition visuelle de la fenêtre Mon profil */
#TirelireProfileModalV2 .modal-content {
  overflow: hidden;
  border: 0;
  box-shadow: 0 16px 44px rgba(34, 50, 74, .18);
}

.tirelire-v2-profile-modal-body {
  padding-top: 18px;
}

.tirelire-v2-profile-hero {
  margin: -18px -16px 0;
  padding: 24px 20px 20px;
  background: linear-gradient(180deg, #f3f8ff 0%, #fbfdff 100%);
  border-bottom: 1px solid #e7eef7;
}

.tirelire-v2-profile-name {
  color: #24324a;
  font-size: 18px;
  font-weight: 700;
}

.tirelire-v2-profile-email {
  color: #7d8da7;
  font-size: 13px;
}

.tirelire-v2-avatar-edit-btn {
  margin-top: 4px;
  padding: 4px 10px;
  border: 1px solid #d7e6fb;
  border-radius: 999px;
  background: #fff;
  color: var(--tirelire-primary);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(34, 82, 140, .06);
}

.tirelire-v2-avatar-edit-btn:hover,
.tirelire-v2-avatar-edit-btn:focus {
  border-color: #b9d3f5;
  background: #f7fbff;
  color: var(--tirelire-primary);
  text-decoration: none;
}

.tirelire-v2-avatar-edit-btn .fa {
  margin-right: 4px;
}

.tirelire-v2-profile-details {
  border-top: 0;
}

.tirelire-v2-profile-row {
  min-height: 48px;
  align-items: center;
  padding: 11px 0;
}

.tirelire-v2-profile-label {
  color: #718198;
  font-weight: 500;
}

#tirelireV2ProfileRoles:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 3px 10px;
  border: 1px solid #cfdff5;
  border-radius: 999px;
  background: #edf5ff;
  color: #315f9c;
  font-size: 12px;
  font-weight: 700;
}

.tirelire-v2-profile-platform-badge {
  min-height: 26px;
  padding: 4px 10px;
  border-color: #cfdff5;
  background: #f0f6ff;
  color: #314f76;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.tirelire-v2-profile-modal-footer {
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid #e7edf4;
  background: #fbfcfe;
}

@media (max-width: 599.98px) {
  .tirelire-v2-profile-hero {
    margin-left: -16px;
    margin-right: -16px;
  }

  .tirelire-v2-profile-modal-footer .btn {
    min-width: 110px;
  }
}

/* ==========================================================================
   HEADER V2 - PLATEFORME COMME CONTROLE VISUEL
   --------------------------------------------------------------------------
   La plateforme active est toujours identifiée comme un bloc du Header.
   Les états interactifs ne s'appliquent que lorsqu'un changement de
   plateforme est réellement disponible (.tirelire-v2-platform-action).
   ========================================================================== */
.tirelire-header-v2 .tirelire-v2-platform-link {
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid #cbdbea;
  border-radius: 8px;
  background: var(--tirelire-primary-soft);
  color: #526175;
  box-shadow: 0 1px 3px rgba(35, 55, 85, .08);
  cursor: default;
  transition: none;
}

.tirelire-header-v2 .tirelire-v2-platform-action {
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease, color .14s ease;
}

.tirelire-header-v2 .tirelire-v2-platform-action:hover,
.tirelire-header-v2 .tirelire-v2-platform-action:focus,
.tirelire-header-v2 .tirelire-v2-platform-action[aria-expanded="true"] {
  outline: 0;
  border-color: #9ebbe0;
  background: #e2edff;
  color: var(--tirelire-text);
  box-shadow: 0 2px 8px rgba(36, 79, 186, .16);
}

/* Le simple libellé d'une plateforme unique ne simule jamais un bouton. */
.tirelire-header-v2 .tirelire-v2-platform-link:not(.tirelire-v2-platform-action):hover,
.tirelire-header-v2 .tirelire-v2-platform-link:not(.tirelire-v2-platform-action):focus {
  border-color: #cbdbea;
  background: var(--tirelire-primary-soft);
  color: #526175;
  box-shadow: 0 1px 3px rgba(35, 55, 85, .08);
  outline: 0;
}

@media
  (min-width: 600px) and (max-width: 1023.98px) and (orientation: portrait),
  (max-width: 1023.98px) and (max-height: 600px) and (orientation: landscape),
  (max-width: 599.98px) and (orientation: portrait) {

  .tirelire-header-v2 .tirelire-v2-platform-link {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 8px !important;
    border-color: #cbdbea !important;
    border-radius: 7px !important;
    background: var(--tirelire-primary-soft) !important;
    box-shadow: 0 1px 3px rgba(35, 55, 85, .08) !important;
  }

  .tirelire-header-v2 .tirelire-v2-platform-action:hover,
  .tirelire-header-v2 .tirelire-v2-platform-action:focus,
  .tirelire-header-v2 .tirelire-v2-platform-action[aria-expanded="true"] {
    border-color: #9ebbe0 !important;
    background: #e2edff !important;
    box-shadow: 0 2px 8px rgba(36, 79, 186, .16) !important;
  }
}

/* =========================================================
   Identification - derniers comptes utilisés (localStorage)
   ========================================================= */
#FrmUserLogin /* =========================================================
   MODE INVITÉ / CONNEXION
   - aucun header applicatif avant authentification
   - footer public minimal
   ========================================================= */
body.tirelire-guest {
  --header-offset: 0px;
  --tirelire-header-main-height: 0px;
  --tirelire-nav-height: 0px;
  --tirelire-footer-height: 48px;
  --tirelire-content-available-height: calc(100dvh - 48px);
}

body.tirelire-guest #main-wrapper .page-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.tirelire-guest #blocContent.tirelire-content {
  min-height: calc(100dvh - 48px) !important;
}

#siteFooter.tirelire-footer-public {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  flex: 0 0 48px !important;
}

#siteFooter.tirelire-footer-public .tirelire-footer-inner-public {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 48px;
}

#siteFooter.tirelire-footer-public .tirelire-footer-brand img {
  height: 28px;
}

@media (max-width: 599.98px),
       (max-width: 1023.98px) and (max-height: 600px) and (orientation: landscape) {
  body.tirelire-guest {
    --tirelire-footer-height: 44px;
    --tirelire-content-available-height: calc(100dvh - 44px);
  }

  body.tirelire-guest #blocContent.tirelire-content {
    min-height: calc(100dvh - 44px) !important;
  }

  #siteFooter.tirelire-footer-public {
    display: block !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    overflow: hidden !important;
  }

  #siteFooter.tirelire-footer-public .tirelire-footer-inner-public {
    height: 44px !important;
    min-height: 44px !important;
  }

  #siteFooter.tirelire-footer-public .tirelire-footer-brand img {
    height: 24px;
  }
}

/* =========================================================
   IDENTIFICATION - SÉLECTEUR DE COMPTE COMPACT
   - 3 comptes récents maximum
   - "Autre compte" sélectionné par défaut
   ========================================================= */
#FrmUserLogin .tirelire-login-account-chooser {
  margin-bottom: 16px;
}

#FrmUserLogin .tirelire-login-account-chooser > .control-label {
  display: block;
}

#FrmUserLogin .tirelire-login-account-chooser .dropdown {
  width: 100%;
}

#FrmUserLogin .tirelire-login-account-trigger {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 38px 7px 10px;
  position: relative;
  border: 1px solid #dfe7f0;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

#FrmUserLogin .tirelire-login-account-trigger:hover,
#FrmUserLogin .tirelire-login-account-trigger:focus,
#FrmUserLogin .tirelire-login-account-trigger[aria-expanded="true"] {
  border-color: #9ec5ee;
  background: #fbfdff;
  box-shadow: 0 2px 8px rgba(31, 78, 121, .10);
  outline: none;
}

#FrmUserLogin .tirelire-login-account-trigger::after {
  position: absolute;
  right: 14px;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  color: #7b8794;
}

#FrmUserLogin .tirelire-login-account-trigger-avatar,
#FrmUserLogin .tirelire-login-account-option-avatar {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e7f0fa;
  color: #2f6fa5;
  font-weight: 700;
}

#FrmUserLogin .tirelire-login-account-trigger-avatar {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  font-size: 12px;
}

#FrmUserLogin .tirelire-login-account-option-avatar {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  font-size: 11px;
}

#FrmUserLogin .tirelire-login-account-trigger-avatar > img,
#FrmUserLogin .tirelire-login-account-option-avatar > img,
#FrmUserLogin .tirelire-account-avatar-initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

#FrmUserLogin .tirelire-login-account-trigger-avatar > img,
#FrmUserLogin .tirelire-login-account-option-avatar > img {
  display: block;
  object-fit: cover;
}

#FrmUserLogin .tirelire-account-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

#FrmUserLogin .tirelire-login-account-trigger-avatar-other,
#FrmUserLogin .tirelire-login-account-option-avatar-other {
  border: 1px solid #d7e1ec;
  background: #fff;
  color: #60738a;
}

#FrmUserLogin .tirelire-login-account-trigger-text,
#FrmUserLogin .tirelire-login-account-option-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

#FrmUserLogin .tirelire-login-account-trigger-text strong,
#FrmUserLogin .tirelire-login-account-trigger-text small,
#FrmUserLogin .tirelire-login-account-option-text strong,
#FrmUserLogin .tirelire-login-account-option-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#FrmUserLogin .tirelire-login-account-trigger-text strong {
  color: #26384a;
  font-size: 13px;
  font-weight: 700;
}

#FrmUserLogin .tirelire-login-account-trigger-text small {
  margin-top: 3px;
  color: #7b8794;
  font-size: 10px;
}

#FrmUserLogin .tirelire-login-account-menu {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding: 6px;
  border: 1px solid #dfe7f0;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(23, 36, 58, .16);
}

#FrmUserLogin .tirelire-login-account-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 8px;
  border-radius: 6px;
  white-space: normal;
}

#FrmUserLogin .tirelire-login-account-option:hover,
#FrmUserLogin .tirelire-login-account-option:focus {
  background: #f3f7fd;
  outline: none;
}

#FrmUserLogin .tirelire-login-account-option-text strong {
  color: #26384a;
  font-size: 12px;
  font-weight: 700;
}

#FrmUserLogin .tirelire-login-account-option-text small {
  margin-top: 2px;
  color: #7b8794;
  font-size: 10px;
}

/* =========================================================
   HEADER V2 - CHANGEMENT RAPIDE DE COMPTE
   Liste type "Microsoft" dans le panneau profil.
   Le compte courant reste affiché dans le bloc identité.
   ========================================================= */
.tirelire-v2-account-switcher {
  padding: 10px 12px 8px;
  background: #fbfdff;
}

.tirelire-v2-account-switcher-title {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px 8px;
  color: #60738a;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.tirelire-v2-account-switcher-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf4ff;
  color: var(--tirelire-primary);
  font-size: 10px;
}

.tirelire-v2-account-switcher-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tirelire-v2-account-switcher-item,
.tirelire-v2-account-switcher-other {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #334155;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}

.tirelire-v2-account-switcher-item:hover,
.tirelire-v2-account-switcher-item:focus,
.tirelire-v2-account-switcher-other:hover,
.tirelire-v2-account-switcher-other:focus {
  background: #edf6ff;
  outline: none;
  transform: translateX(2px);
}

.tirelire-v2-account-switcher-other {
  margin-top: 3px;
  border-top: 1px solid #e8eef5;
  border-radius: 0 0 7px 7px;
}

.tirelire-v2-account-switcher-avatar {
  position: relative;
  overflow: hidden;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e7f0fa;
  color: #2f6fa5;
  font-size: 11px;
  font-weight: 700;
}

.tirelire-v2-account-switcher-avatar > img,
.tirelire-v2-account-switcher-avatar .tirelire-account-avatar-initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.tirelire-v2-account-switcher-avatar > img {
  display: block;
  object-fit: cover;
}

.tirelire-v2-account-switcher-avatar .tirelire-account-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

.tirelire-v2-account-switcher-avatar-other {
  border: 1px solid #d7e1ec;
  background: #fff;
  color: #60738a;
}

.tirelire-v2-account-switcher-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.tirelire-v2-account-switcher-text strong,
.tirelire-v2-account-switcher-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tirelire-v2-account-switcher-text strong {
  color: #26384a;
  font-size: 12px;
  font-weight: 700;
}

.tirelire-v2-account-switcher-text small {
  margin-top: 3px;
  color: #7b8794;
  font-size: 10px;
}

.tirelire-v2-account-switcher-arrow {
  flex: 0 0 auto;
  color: #9aa7b5;
  font-size: 10px;
}

@media (max-width: 420px) {
  .tirelire-v2-account-switcher {
    padding-left: 10px;
    padding-right: 10px;
  }

  .tirelire-v2-account-switcher-item,
  .tirelire-v2-account-switcher-other {
    min-height: 48px;
  }
}