/* TMA_HEADER_ATELIER_V15 — strictly the top header, not inboxes or footer. */
html[data-atelier] body .atelier-header {
  background: var(--paper, #fff) !important;
  border-bottom: 1px solid var(--line, #dee5ee) !important;
  box-shadow: 0 2px 14px rgb(12 33 68 / 5%);
  isolation: isolate;
}
html[data-atelier] body .atelier-header .header-inner {
  height: 72px;
  min-height: 72px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  max-width: 1280px;
}
html[data-atelier] body .atelier-header .atelier-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  direction: ltr;
  color: var(--ink, #101e35) !important;
  text-decoration: none;
}
html[data-atelier] body .atelier-header .atelier-brand .brand-mark {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  flex: 0 0 44px;
  border-radius: 12px !important;
  background: none !important;
  box-shadow: none !important;
}
html[data-atelier] body .atelier-header .atelier-brand .atl-logo {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
html[data-atelier] body .atelier-header .atelier-brand .brand-word {
  font-size: 21px;
  line-height: 1.14;
  font-weight: 770;
  letter-spacing: -0.6px;
  white-space: nowrap;
}
html[data-atelier] body .atelier-header .atelier-brand .brand-word small {display:none!important}
html[data-atelier] body .atelier-header .atelier-brand em {color:var(--at, #2f5bea)}
html[data-atelier] body .atelier-header .atl-t {fill:var(--accent,#2f5bea)}
html[data-atelier] body .atelier-header .atl-v {
  fill:none;stroke:var(--accent,#2f5bea);stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round
}
html[data-atelier] body .atelier-header .atl-ff,
html[data-atelier] body .atelier-header .atl-fb {transform-origin:32px 21px}
html[data-atelier] body .atelier-header .atl-fb {opacity:0;transform:scaleY(0)}
html[data-atelier] body .atelier-header .atl-ff {animation:tma-hdr-close 4.4s ease-in-out 1 both}
html[data-atelier] body .atelier-header .atl-fb {animation:tma-hdr-open 4.4s ease-in-out 1 both}
html[data-atelier] body .atelier-header .atl-lt {animation:tma-hdr-letter 4.4s cubic-bezier(.3,.7,.3,1) 1 both}
@keyframes tma-hdr-close {
  0%,14% {transform:scaleY(1);opacity:1}
  24% {transform:scaleY(0);opacity:1}
  24.01%,89.99% {transform:scaleY(0);opacity:0}
  90% {transform:scaleY(0);opacity:1}
  100% {transform:scaleY(1);opacity:1}
}
@keyframes tma-hdr-open {
  0%,24% {transform:scaleY(0);opacity:0}
  24.01% {transform:scaleY(0);opacity:1}
  34%,82% {transform:scaleY(1);opacity:1}
  90% {transform:scaleY(0);opacity:1}
  90.01%,100% {transform:scaleY(0);opacity:0}
}
@keyframes tma-hdr-letter {
  0%,34% {transform:translateY(0)}
  52%,70% {transform:translateY(-15px)}
  82%,100% {transform:translateY(0)}
}
html[data-atelier] body .atelier-header .atelier-primary-nav {
  display:flex;align-items:center;flex:1 1 auto;min-width:0;
  gap:5px;white-space:nowrap;
}
html[data-atelier] body .atelier-header .atelier-primary-nav a {
  white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
html[data-atelier] body .atelier-header .atelier-primary-nav a:hover {
  background:var(--soft, #eef3fe);color:var(--at, #2f5bea);
  transform:translateY(-1px)
}
html[data-atelier] body .atelier-header .atelier-actions {
  display:flex;align-items:center;flex:0 0 auto;flex-wrap:nowrap;
  min-width:0;gap:7px;white-space:nowrap
}
html[data-atelier] body .atelier-header .atelier-actions :is(a,button,summary) {
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
html[data-atelier] body .atelier-header .atelier-actions :is(a,button,summary):hover {transform:translateY(-1px)}
html[data-atelier] body .atelier-header .atelier-brand:focus-visible,
html[data-atelier] body .atelier-header :is(a,button,summary):focus-visible {
  outline:2px solid var(--accent,#2f5bea)!important;outline-offset:3px
}
/* Show navigation in the existing hamburger menu before translations can wrap. */
@media (max-width:1180px) {
  html[data-atelier] body .atelier-header .header-inner {
    width:calc(100% - 36px);gap:10px;justify-content:space-between
  }
  html[data-atelier] body .atelier-header .atelier-primary-nav {
    display:none;position:absolute;inset-inline:18px;top:calc(100% + 4px);
    height:auto;min-height:0;flex:0 0 auto;
    flex-direction:column;align-items:stretch;gap:3px;
    padding:10px;z-index:101;max-height:calc(100dvh - 90px);overflow-y:auto;
    background:var(--paper, #fff);border:1px solid var(--line,#dfe7f1);
    border-radius:12px;box-shadow:var(--float,0 16px 32px #101e3530)
  }
  html[data-atelier] body .atelier-header .atelier-primary-nav.open {display:flex}
  html[data-atelier] body .atelier-header .atelier-primary-nav a {padding:10px 12px;font-size:13px}
  html[data-atelier] body .atelier-header .menu-toggle {display:inline-flex;flex:0 0 auto}
  html[data-atelier] body .atelier-header .atelier-actions>.desktop-cta {display:none}
  html[data-atelier] body .atelier-header .atelier-actions>.login-link {display:none}
}
@media (max-width:600px) {
  html[data-atelier] body .atelier-header .header-inner {
    height:64px;min-height:64px;width:calc(100% - 24px);gap:6px
  }
  html[data-atelier] body .atelier-header .atelier-brand {gap:7px;font-size:17px!important}
  html[data-atelier] body .atelier-header .atelier-brand .brand-mark {
    width:36px!important;height:36px!important;min-width:36px!important;flex-basis:36px
  }
  html[data-atelier] body .atelier-header .atelier-brand .brand-word {font-size:17px}
  html[data-atelier] body .atelier-header .atelier-actions {gap:4px}
  html[data-atelier] body .atelier-header .atelier-primary-nav {inset-inline:12px}
}
@media (prefers-reduced-motion:reduce) {
  html[data-atelier] body .atelier-header .atl-ff,
  html[data-atelier] body .atelier-header .atl-fb,
  html[data-atelier] body .atelier-header .atl-lt {animation:none!important;transition:none!important}
  html[data-atelier] body .atelier-header .atl-ff {opacity:1;transform:none}
  html[data-atelier] body .atelier-header .atl-fb {opacity:0;transform:scaleY(0)}
  html[data-atelier] body .atelier-header :is(a,button,summary) {transition:none!important;transform:none!important}
}
/* TMA_FOOTER_BRAND_V2: same complete visual identity as the approved header. */
html[data-atelier] body .atelier-footer .brand.tma-footer-brand-identical{display:inline-flex!important;align-items:center!important;gap:10px!important;direction:ltr!important;white-space:nowrap;color:var(--ink)!important;text-decoration:none;font-weight:770}
html[data-atelier] body .atelier-footer .brand .tma-shared-brand-mark{display:block!important;width:52px!important;height:52px!important;min-width:52px!important;flex:0 0 52px!important;border-radius:13px!important;background:none!important;box-shadow:none!important}
html[data-atelier] body .atelier-footer .tma-shared-brand-mark svg.atl-logo{display:block!important;width:100%!important;height:100%!important;overflow:visible}
html[data-atelier] body .atelier-footer .tma-footer-brand-identical .brand-word{display:block!important;font-size:21px!important;line-height:1.12!important;font-weight:770!important;letter-spacing:-.6px!important;white-space:nowrap;color:var(--ink)!important}
html[data-atelier] body .atelier-footer .tma-footer-brand-identical .brand-word em{font-style:normal;color:var(--at)!important}
html[data-atelier] body .atelier-footer .tma-footer-brand-identical .brand-word small{display:none!important}
html[data-atelier] body .atelier-footer .tma-shared-brand-mark .atl-t{fill:var(--accent,#315be8)}
html[data-atelier] body .atelier-footer .tma-shared-brand-mark .atl-v{fill:none;stroke:var(--accent,#315be8);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
html[data-atelier] body .atelier-footer .tma-shared-brand-mark :is(.atl-ff,.atl-fb){transform-origin:32px 21px}
html[data-atelier] body .atelier-footer .tma-shared-brand-mark .atl-ff{animation:tma-hdr-close 4.4s ease-in-out 1 both}
html[data-atelier] body .atelier-footer .tma-shared-brand-mark .atl-fb{opacity:0;transform:scaleY(0);animation:tma-hdr-open 4.4s ease-in-out 1 both}
html[data-atelier] body .atelier-footer .tma-shared-brand-mark .atl-lt{animation:tma-hdr-letter 4.4s cubic-bezier(.3,.7,.3,1) 1 both}
@media(max-width:600px){html[data-atelier] body .atelier-footer .brand .tma-shared-brand-mark{width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important}html[data-atelier] body .atelier-footer .tma-footer-brand-identical .brand-word{font-size:16px!important}}
@media(max-width:400px){html[data-atelier] body .atelier-footer .brand .tma-shared-brand-mark{width:34px!important;height:34px!important;min-width:34px!important;flex-basis:34px!important}html[data-atelier] body .atelier-footer .tma-footer-brand-identical .brand-word{font-size:14px!important}}
@media(prefers-reduced-motion:reduce){html[data-atelier] body .atelier-footer .tma-shared-brand-mark :is(.atl-ff,.atl-fb,.atl-lt){animation:none!important;transition:none!important}html[data-atelier] body .atelier-footer .tma-shared-brand-mark .atl-ff{opacity:1;transform:none}html[data-atelier] body .atelier-footer .tma-shared-brand-mark .atl-fb{opacity:0;transform:scaleY(0)}}