/* Gin and Bootstrap must not share the 10px root used by the legacy design. */
html.fme-with-gin {
  font-size: 100%;
}

/* Restore Gin's inherited base typography; its component CSS owns the rest. */
.fme-with-gin :is(.admin-toolbar, #toolbar-administration, .gin-secondary-toolbar, .cloned-flyout) {
  font-family: var(--gin-font);
  font-size: var(--gin-font-size, 16px);
  line-height: 1.5;
  color: var(--gin-color-text);
}

/* Gin appends collapsed flyouts and icon tooltips directly to body. They
   need the same isolation and inheritance as the sidebar itself. */
.fme-with-gin :is(.gin-tooltip-navigation, .gin-tooltip) {
  font-family: var(--gin-font);
  line-height: 1.5;
}

/* The frontend does not load Claro's normalize stylesheet. Supply its form
   inheritance inside Gin only; component selectors retain precedence. */
:where(.fme-with-gin .admin-toolbar, .fme-with-gin #toolbar-administration, .fme-with-gin .gin-secondary-toolbar, .fme-with-gin .cloned-flyout) :where(button, input, optgroup, select, textarea) {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

:where(.fme-with-gin .admin-toolbar, .fme-with-gin .gin-secondary-toolbar, .fme-with-gin .cloned-flyout) :where(h1, h2, h3) {
  margin: 16px 0 12px;
  font-weight: var(--gin-font-weight-normal);
  line-height: 1.3;
  letter-spacing: -0.025em;
}

:where(.fme-with-gin .admin-toolbar, .fme-with-gin .gin-secondary-toolbar, .fme-with-gin .cloned-flyout) :where(h3) {
  font-size: var(--gin-font-size-h3);
}

:where(.fme-with-gin .admin-toolbar, .fme-with-gin .gin-secondary-toolbar, .fme-with-gin .cloned-flyout) :where(.visually-hidden) {
  color: #000;
}

:where(.fme-with-gin .gin--dark-mode .admin-toolbar, .fme-with-gin .gin--dark-mode .gin-secondary-toolbar, .fme-with-gin .gin--dark-mode .cloned-flyout) :where(.visually-hidden) {
  color: #fff;
}

body.fme-with-gin-toolbar {
  margin: 0;
  --fme-toolbar-top: calc(var(--gin-toolbar-y-offset, 0px) + var(--gin-toolbar-secondary-height, 0px));
}

/* In Gin's new navigation, the mobile toolbar is inside the secondary bar. */
body.fme-with-gin-toolbar.gin--navigation {
  --fme-toolbar-top: var(--gin-toolbar-secondary-height, 0px);
}

body.fme-with-gin-toolbar .wrapper .container {
  max-width: 100%;
}

/* Keep fixed frontend elements inside the area left free by Gin. The values
   are updated by Gin/Drupal when the sidebar toggles or the viewport changes. */
body.fme-with-gin-toolbar #navbar.navbar-fixed-top {
  left: var(--gin-toolbar-x-offset, 0px);
  right: 0;
  top: var(--fme-toolbar-top);
  width: auto;
  z-index: 100;
}

body.fme-with-gin-toolbar #smooth-wrapper {
  left: var(--gin-toolbar-x-offset, 0px) !important;
  right: 0 !important;
  top: var(--fme-toolbar-top) !important;
  width: auto !important;
}

/* ScrollSmoother still measures a full viewport; compensate the toolbar area
   so that the last part of the footer remains reachable. */
body.fme-with-gin-toolbar #smooth-content {
  padding-bottom: var(--fme-toolbar-top);
}

/* Fit the full-bleed home banner to the area left free by Gin, using the
   theme's existing desk-scrollbar compensation for viewport units. */
body.fme-with-gin-toolbar {
  --fme-content-width: calc(100vw - var(--gin-toolbar-x-offset, 0px));
}

body.fme-with-gin-toolbar.desk-scrollbar {
  --fme-content-width: calc(100vw - var(--gin-toolbar-x-offset, 0px) - 15px);
}

body.fme-with-gin-toolbar #block-blochpchiffres {
  width: var(--fme-content-width);
}

body.fme-with-gin-toolbar .block-tb-megamenu-menu-blockmain {
  width: 100%;
}

/* Reserve the brand width even while the legacy local tasks occupy the header.
   The existing responsive max-width and GSAP animation still control its size. */
body.fme-with-gin-toolbar #navbar .navbar-btn.logo {
  flex: 0 0 auto;
  width: 168px;
}