/* Référence desktop : 1920 × 1080. Voir docs/responsive-design-1920.md.
   Les dimensions du conteneur sont des invariants : les styles intégrés aux
   pages ne doivent pas les remplacer. Les largeurs de lecture restent locales. */
:root {
  --up2-content-max: 1440px;
  --up2-gutter: clamp(16px, 3vw, 48px);
  --up2-section-space: clamp(64px, 5vw, 96px);
}

#wrapper .container,
#wrapper .tpl-shell {
  box-sizing: border-box;
  width: 100% !important;
  max-width: calc(var(--up2-content-max) + 2 * var(--up2-gutter)) !important;
  margin-inline: auto;
  padding-inline: var(--up2-gutter) !important;
}

/* Un conteneur déjà dans le flux d'un autre ne rajoute pas de gouttière. */
#wrapper :is(.container, .tpl-shell) :is(.container, .tpl-shell),
#wrapper .tpl-article > .tpl-mid-cta .tpl-shell {
  max-width: 100% !important;
  padding-inline: 0 !important;
}

#wrapper :is(.up2-needs, .up2-audit-intro, .up2-rdv) {
  padding-inline: 0;
}
#wrapper .up2-rdv__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--up2-content-max) + 2 * var(--up2-gutter));
  margin-inline: auto;
  padding-inline: var(--up2-gutter);
  gap: clamp(32px, 4vw, 76px);
  grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
}
#wrapper .up2-audit-intro__layout { width: 100%; }
#wrapper :is(.flat-spacing, .tpl-section) {
  padding-block: var(--up2-section-space);
}
#wrapper .flat-spacing.pt-0 { padding-top: 0; }

#wrapper :is(h1, h2, h3) { overflow-wrap: break-word; }
#wrapper :is(.up2-svc__intro .heading-title, .up2-rdv__line-inner) {
  white-space: normal;
}
#wrapper .up2-rdv__line-inner { display: inline; }
#wrapper .up2-rdv__impact-word {
  display: inline-block;
  min-width: 0;
  margin: 0;
  -webkit-text-fill-color: currentColor;
}
#wrapper :is(.up2-rdv__content, .up2-rdv__calendar-stage,
  .up2-audit-intro__layout > *, .up2-svc > *, .tpl-grid > *) { min-width: 0; }

#wrapper :is(.bot-btns, .tpl-actions, .up2-audit-intro__action,
  .up2-featured__actions, .tpl-filters) { flex-wrap: wrap; }
#wrapper :is(.tf-btn, .tf-btn-2, .tpl-btn, .up2-rdv__button) {
  max-width: 100%;
  min-height: 44px;
  height: auto;
  padding-block: 12px;
  white-space: normal;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: break-word;
}

/* Header centré sur le contenu ; menu compact avant compression des liens. */
#wrapper .tf-header.header2 { left: 0; right: 0; padding-inline: 0; }
#wrapper .tf-header.header2 .header-inner {
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 2 * var(--up2-gutter));
  max-width: var(--up2-content-max) !important;
  margin-inline: auto;
  gap: 20px;
}
#wrapper .nav-menu-main { gap: clamp(16px, 1.25vw, 24px); }
#wrapper .nav-menu-main > .menu-item > .item-link { white-space: nowrap; }
#wrapper .menu-item:has(> .up2-megabig--services) { position: static; }
#wrapper .up2-megabig--services {
  width: min(1120px, 100%);
  max-width: 100%;
  max-height: min(640px, calc(100vh - 160px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
#wrapper .up2-megabig__body { grid-template-columns: 230px minmax(0, 1fr) 240px; }
#wrapper .up2-megabig__main { min-width: 0; padding: 24px; }
#wrapper .up2-megabig__promo-btn {
  align-self: stretch;
  justify-content: center;
  min-height: 44px;
  padding-inline: 10px;
  white-space: nowrap;
}
#wrapper .menu-item:focus-within > .sub-menu {
  pointer-events: auto;
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.offcanvas-menu .close-mb-menu {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
}
.offcanvas-menu .mb-menu-link {
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.2;
  overflow-wrap: break-word;
}
.offcanvas-menu .offcanvas-content { overflow-y: auto; }
.offcanvas-menu { visibility: hidden; }
.offcanvas-menu.show { visibility: visible; }
.offcanvas-menu.show .canvas_head { transition-delay: 0s; }

@media (max-width: 1279px) {
  #wrapper .tf-header .box-navigation,
  #wrapper .tf-header .header-inner > .tf-btn:not(.open-mb-menu) { display: none !important; }
  #wrapper .tf-header .open-mb-menu { display: flex !important; flex: 0 0 48px; min-height: 48px; }
  #wrapper .up2-svc { grid-template-columns: 1fr; gap: 32px; }
  #wrapper .up2-svc__intro { position: static; }
  #wrapper .up2-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  #wrapper .up2-rdv__inner,
  #wrapper .up2-audit-intro__layout,
  #wrapper .up2-needs > .container,
  #wrapper .up2-local-links__inner { grid-template-columns: 1fr; }
  #wrapper .up2-needs__proof-head { position: static; }
  #wrapper .up2-rdv__calendar { width: min(650px, 100%); margin-inline: auto; }
  #wrapper .up2-rdv__calendar-ghost { display: none; }
}
@media (max-width: 767px) {
  #wrapper #homeHero .bot-btns { flex-wrap: wrap; gap: 12px; }
  #wrapper #homeHero .bot-btns a {
    flex: 1 1 240px;
    width: auto;
    font-size: 15px;
    line-height: 1.35;
    white-space: normal;
    padding: 14px 18px;
  }
  #wrapper .up2-problems-link__button {
    font-size: 14px;
    white-space: normal;
    line-height: 1.4;
    padding-block: 12px;
  }
  #wrapper .up2-rdv__button { padding: 14px 18px; }
  #wrapper .up2-rdv__calendar-head { padding-right: 78px; }
  #wrapper .up2-rdv__calendar h3 { font-size: 20px; line-height: 1.3; }
  #wrapper .up2-audit-intro__action { align-items: flex-start; }
  #wrapper .up2-audit-intro__action small { font-size: 13px; }
  #wrapper .toon-team__ghost { font-size: clamp(90px, 28vw, 215px); }
  #wrapper :is(.form-contact, .tpl-form) :is(input, select, textarea) { font-size: 16px; }
}
@media (max-width: 600px) {
  #wrapper .up2-svc__grid { grid-template-columns: 1fr; }
  #wrapper .up2-rdv__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.up2-footer__socials { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 20px; }
.up2-footer__socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 8px; color: inherit; }
.up2-footer__socials svg { width: 21px; height: 21px; fill: currentColor; }
.up2-footer__socials a:hover { color: #ff7bac; }