/* Mobile responsiveness overrides for the flattened (desktop-fixed) design.
   Uses !important inside media queries to override the design's inline styles. */

/* Brand background so page-to-page navigation never flashes white. */
html { background-color: #FFFEF5; }

/* ---- Universal mobile header ---- */
.svp-mobile-header {
  display: none;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

.svp-mobile-header-spacer {
  display: none;
}

.svp-mobile-premium-footer,
.svp-mobile-premium-footer-spacer {
  display: none;
}

@media (max-width: 760px) {
  html,
  body,
  #dc-root,
  #dc-root > .sc-host {
    height: auto !important;
    min-height: 100% !important;
  }

  body [data-svp-mobile-hide="header"],
  body .partner-header,
  #dc-root [style*="position: sticky"][style*="top: 0px"],
  #dc-root [style*="position:sticky"][style*="top:0px"],
  #dc-root > div > div > div:first-child[style*="border-bottom"][style*="background: rgb(255, 254, 245)"] {
    display: none !important;
  }

  body.svp-mobile-header-ready [data-svp-mobile-hide="header"] {
    display: none !important;
  }

  .svp-mobile-header {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147482000;
    width: 100%;
    max-width: none;
    flex: 0 0 100%;
    align-self: stretch;
    background: #FFFEF5;
    border-bottom: 1.5px solid #ECEAE0;
    box-sizing: border-box;
    isolation: isolate;
    overflow: visible;
    transition: box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
  }

  .svp-mobile-header-spacer {
    display: block;
    height: 67px;
    min-height: 67px;
    flex: 0 0 67px;
    pointer-events: none;
    visibility: hidden;
  }

  .svp-mobile-header::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(22, 24, 43, .14);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }

  .svp-mobile-header[data-open="true"]::after {
    opacity: 1;
  }

  .svp-mobile-header[data-scrolled="true"] {
    border-bottom-color: rgba(236, 234, 224, .78);
    box-shadow: 0 12px 30px rgba(22, 24, 43, .09);
  }

  .svp-mobile-header__bar {
    min-height: 62px;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    transition: min-height .22s ease, padding .22s ease;
  }

  .svp-mobile-header[data-scrolled="true"] .svp-mobile-header__bar {
    min-height: 56px;
    padding: 8px 14px;
  }

  .svp-mobile-header__logo {
    display: inline-flex;
    align-items: center;
    width: 146px;
    max-width: calc(100vw - 88px);
    height: 40px;
    overflow: hidden;
    text-decoration: none;
    transition: width .22s ease, height .22s ease;
  }

  .svp-mobile-header[data-scrolled="true"] .svp-mobile-header__logo {
    width: 134px;
    height: 36px;
  }

  .svp-mobile-header__logo img {
    display: block;
    width: 146px !important;
    max-width: 146px !important;
    height: auto !important;
    margin: 0 !important;
    transition: width .22s ease, max-width .22s ease;
  }

  .svp-mobile-header[data-scrolled="true"] .svp-mobile-header__logo img {
    width: 134px !important;
    max-width: 134px !important;
  }

  .svp-mobile-header__toggle {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #E1E0D4;
    border-radius: 100px;
    background: #fff;
    color: #16182B;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(22, 24, 43, .08);
    transition: width .22s ease, height .22s ease, flex-basis .22s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .svp-mobile-header__toggle:active {
    transform: scale(.96);
  }

  .svp-mobile-header[data-scrolled="true"] .svp-mobile-header__toggle {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    box-shadow: 0 8px 20px rgba(22, 24, 43, .1);
  }

  .svp-mobile-header[data-open="true"] .svp-mobile-header__toggle {
    border-color: #D8DEFA;
    background: #EEF0FD;
    color: #3347CA;
  }

  .svp-mobile-header__icon {
    width: 19px;
    display: grid;
    gap: 4px;
  }

  .svp-mobile-header__icon span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
  }

  .svp-mobile-header[data-open="true"] .svp-mobile-header__icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .svp-mobile-header[data-open="true"] .svp-mobile-header__icon span:nth-child(2) {
    opacity: 0;
  }

  .svp-mobile-header[data-open="true"] .svp-mobile-header__icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .svp-mobile-header__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 12px;
    right: 12px;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: min(72vh, 520px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    border: 1.5px solid #16182B;
    border-radius: 18px;
    background: #FFFEF5;
    box-shadow: 6px 6px 0 #3347CA, 0 24px 54px rgba(22, 24, 43, .18);
    opacity: 0;
    transform: translateY(-10px) scale(.985);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity .2s ease, transform .24s cubic-bezier(.2,.8,.2,1);
  }

  .svp-mobile-header[data-open="true"] .svp-mobile-header__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  .svp-mobile-header__panel a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 15px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid #ECEAE0;
    color: #4A4D66;
    text-decoration: none;
    font: 700 14.5px 'Instrument Sans', system-ui, sans-serif;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity .2s ease, transform .24s cubic-bezier(.2,.8,.2,1), background .16s ease, border-color .16s ease, color .16s ease;
  }

  .svp-mobile-header[data-open="true"] .svp-mobile-header__panel a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--svp-i, 0) * 24ms);
  }

  .svp-mobile-header__panel a::after {
    content: '→';
    color: #B3B1A4;
    font-weight: 800;
    transition: transform .16s ease, color .16s ease;
  }

  .svp-mobile-header__panel a:hover,
  .svp-mobile-header__panel a:focus-visible {
    border-color: #D8DEFA;
    background: #FBFAF1;
    color: #3347CA;
    outline: none;
  }

  .svp-mobile-header__panel a:hover::after,
  .svp-mobile-header__panel a:focus-visible::after {
    color: #3347CA;
    transform: translateX(2px);
  }

  .svp-mobile-header__panel a[aria-current="page"] {
    background: #EEF0FD;
    border-color: #D8DEFA;
    color: #3347CA;
  }

  .svp-mobile-header__panel a[data-primary="true"] {
    justify-content: center;
    background: #3347CA;
    border-color: #3347CA;
    color: #FFFEF5;
    min-height: 48px;
    box-shadow: 0 10px 22px rgba(51, 71, 202, .24);
  }

  .svp-mobile-header__panel a[data-primary="true"]::after {
    content: '';
    display: none;
  }

  body:not(.intro-fading):not(.intro-complete) .svp-mobile-header[data-wait-for-intro="true"] {
    opacity: 0 !important;
    pointer-events: none;
  }

  body.intro-fading .svp-mobile-header[data-wait-for-intro="true"],
  body.intro-complete .svp-mobile-header[data-wait-for-intro="true"] {
    opacity: 1 !important;
    pointer-events: auto;
  }

  body.svp-mobile-premium-footer-ready .svp-premium-footer-legacy,
  body.svp-mobile-premium-footer-ready [data-svp-mobile-hide="premium-footer"] {
    display: none !important;
  }

  .svp-mobile-premium-footer {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147481800;
    width: 100%;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: #FFFEF5;
    border-top: 1.5px solid #ECEAE0;
    box-shadow: 0 -12px 30px rgba(22, 24, 43, .1);
    box-sizing: border-box;
    isolation: isolate;
    transition: box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
  }

  .svp-mobile-premium-footer[data-scrolled="true"] {
    border-top-color: rgba(236, 234, 224, .86);
    box-shadow: 0 -16px 38px rgba(22, 24, 43, .14);
  }

  .svp-mobile-premium-footer__inner {
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .svp-mobile-premium-footer__copy {
    flex: 1 1 auto;
    min-width: 0;
  }

  .svp-mobile-premium-footer__price {
    color: #16182B;
    font: 800 15px/1.1 'Bricolage Grotesque', system-ui, sans-serif;
    white-space: nowrap;
  }

  .svp-mobile-premium-footer__note {
    margin-top: 2px;
    color: #8B8DA0;
    font: 600 11px/1.2 'Instrument Sans', system-ui, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .svp-mobile-premium-footer__cta {
    min-height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 17px;
    border-radius: 100px;
    background: #3347CA;
    color: #FFFEF5;
    box-shadow: 0 10px 22px rgba(51, 71, 202, .24);
    text-decoration: none;
    font: 800 13.5px 'Instrument Sans', system-ui, sans-serif;
    white-space: nowrap;
    transition: transform .18s ease, filter .16s ease, box-shadow .18s ease;
  }

  .svp-mobile-premium-footer__cta:active {
    transform: scale(.98);
  }

  .svp-mobile-premium-footer-spacer {
    display: block;
    height: calc(76px + env(safe-area-inset-bottom));
    min-height: calc(76px + env(safe-area-inset-bottom));
    pointer-events: none;
    visibility: hidden;
  }
}

@media (max-width: 360px) {
  .svp-mobile-premium-footer {
    padding-left: 10px;
    padding-right: 10px;
  }

  .svp-mobile-premium-footer__inner {
    gap: 8px;
  }

  .svp-mobile-premium-footer__price {
    font-size: 14px;
  }

  .svp-mobile-premium-footer__note {
    font-size: 10px;
  }

  .svp-mobile-premium-footer__cta {
    min-height: 42px;
    padding: 0 14px;
    font-size: 13px;
  }
}

/* ---- Kill backdrop-filter blur (Retina Mac stutter) ----
   backdrop-filter: blur() is a heavy compositor cost on high-DPI Macs — it has
   to re-rasterise the blur every frame, which stutters page transitions AND
   scrolling (invisible in headless/low-DPI testing, very visible on a real
   Retina display). The frosted bars already sit on a near-opaque cream
   background, so we drop the blur (barely perceptible) and make those sticky
   bars fully opaque to compensate. Big smoothness win, negligible visual change. */
[style*="backdrop-filter"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
[style*="rgba(255, 254, 245, 0.92)"][style*="backdrop-filter"] {
  background: #FBFAF0 !important;
}

/* ---- Premium call-back on the account page (free members only) ----
   Mirrors step 2 of the signup funnel, which is the format the client asked
   for. The funnel's own .funnel-* rules live inside tunnel.html's <style>, so
   they are invisible to compte.html — the archive carousel markup is reused
   here (wireFunnelArchivedOffers binds it by data-svp), so its styles have to
   live in this shared sheet. Values match tunnel.html; keep them in step.
   Sized for a narrow sidebar column: one card at a time with the next peeking,
   rather than the funnel's three-up. */
.svp-upsell {
  border: 1.5px solid #16182B;
  border-radius: 14px;
  padding: 16px;
  background: #FFFEF5;
  box-shadow: 4px 4px 0 rgba(51, 71, 202, .28);
  margin-bottom: 6px;
}
.svp-upsell__badge-row { text-align: center; margin-bottom: 10px; }
.svp-upsell__badge {
  display: inline-block; background: #16182B; color: #FFFEF5;
  font: 800 11px 'Instrument Sans', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 13px; border-radius: 100px;
}
.svp-upsell__title {
  font: 800 17px/1.18 'Bricolage Grotesque', sans-serif;
  color: #16182B; text-align: center; margin-bottom: 6px;
}
.svp-upsell__title span { color: #3347CA; }
.svp-upsell__copy {
  font: 500 12.5px/1.45 'Instrument Sans', sans-serif;
  color: #4A4D66; text-align: center; margin-bottom: 14px;
}
.svp-upsell__cta {
  display: block; text-align: center; background: #3347CA; color: #FFFEF5;
  border-radius: 100px; padding: 13px 16px;
  font: 800 13.5px 'Instrument Sans', sans-serif; text-decoration: none;
}
.svp-upsell__note {
  text-align: center; font: 500 11px 'Instrument Sans', sans-serif;
  color: #8B8DA0; margin-top: 8px;
}

.svp-upsell .funnel-archive { margin: 0 0 14px; }
.svp-upsell .funnel-archive-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.svp-upsell .funnel-archive-kicker {
  font: 800 9.5px 'Instrument Sans', sans-serif; color: #3347CA;
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 2px;
}
.svp-upsell .funnel-archive-title {
  font: 800 13px/1.2 'Bricolage Grotesque', sans-serif; color: #16182B;
}
.svp-upsell .funnel-archive-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.svp-upsell .funnel-archive-actions button {
  width: 26px; height: 26px; border: 1.5px solid #E1E0D4; border-radius: 100px;
  background: #fff; color: #16182B; font: 800 13px 'Instrument Sans', sans-serif;
  cursor: pointer;
}
.svp-upsell .funnel-archive-actions button:disabled { opacity: .36; cursor: default; }
.svp-upsell .funnel-archive-viewport { overflow: hidden; margin: 0 -2px; padding: 0 2px; }
.svp-upsell .funnel-archive-track {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0 7px;
}
.svp-upsell .funnel-archive-track::-webkit-scrollbar { display: none; }
.svp-upsell .funnel-archive-card {
  flex: 0 0 82%; min-width: 0; min-height: 148px; border: 1.5px solid #ECEAE0;
  border-radius: 12px; background: #FFFEF5; overflow: hidden; scroll-snap-align: start;
}
.svp-upsell .funnel-archive-media {
  height: 62px; background: #EEF0FD center/cover no-repeat; display: flex;
  align-items: center; justify-content: center; overflow: hidden;
  flex: 0 0 auto; min-width: 0;
}
/* An offer with a video renders a <video> (or a YouTube/Vimeo <iframe>) here.
   tunnel.html constrains those in its own <style>; that rule was missing from
   this scope, so the element fell back to its INTRINSIC size — a 1080x1920
   clip stretched the account panel to ~1274px and pushed the document to
   1678px on a 1280 viewport. Constrain them to the media box like the images. */
.svp-upsell .funnel-archive-media iframe,
.svp-upsell .funnel-archive-media video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border: 0;
  object-fit: cover;
  display: block;
}
.svp-upsell .funnel-archive-media iframe { pointer-events: none; }
.svp-upsell .funnel-archive-media img { max-height: 46px; max-width: 60%; mix-blend-mode: multiply; }
/* Belt and braces: nothing inside the call-back may exceed its container, and
   every link in the flex chain must be allowed to shrink. Without min-width:0
   a flex/grid item sizes to its content instead of its column, which is the
   other half of how one wide child dragged the whole panel out. */
.svp-upsell, .svp-upsell * { max-width: 100%; }
.svp-upsell { min-width: 0; box-sizing: border-box; }
.svp-upsell .funnel-archive,
.svp-upsell .funnel-archive-viewport,
.svp-upsell .funnel-archive-track,
.svp-upsell .funnel-archive-body { min-width: 0; }
.svp-upsell .funnel-archive-media img.funnel-archive-photo {
  width: 100%; height: 100% !important; max-width: none !important;
  max-height: none !important; object-fit: cover; mix-blend-mode: normal; display: block;
}
.svp-upsell .funnel-archive-body { padding: 9px 10px 10px; }
.svp-upsell .funnel-archive-card-title {
  font: 800 12px/1.18 'Bricolage Grotesque', sans-serif; margin-bottom: 3px; color: #16182B;
}
.svp-upsell .funnel-archive-meta {
  font: 600 9.5px/1.3 'Instrument Sans', sans-serif; color: #8B8DA0; min-height: 22px;
}
.svp-upsell .funnel-archive-badge {
  display: inline-block; margin-top: 5px; background: #EEF0FD; color: #3347CA;
  border-radius: 100px; padding: 4px 8px; font: 800 9px 'Instrument Sans', sans-serif;
}
.svp-upsell .funnel-archive-progress {
  height: 4px; background: #EEF0FD; border-radius: 100px; overflow: hidden; margin-top: 4px;
}
.svp-upsell .funnel-archive-progress span {
  display: block; height: 100%; width: 34%; background: #3347CA; border-radius: 100px;
  transition: width .18s ease, margin-left .18s ease;
}
.svp-upsell .funnel-archive-empty {
  display: none; border: 1.5px dashed #E1E0D4; border-radius: 12px; padding: 12px 14px;
  background: #FFFEF5; color: #8B8DA0; font: 600 11.5px/1.45 'Instrument Sans', sans-serif;
  text-align: center;
}

/* ---- Loading skeletons (shown while real data loads, all viewports) ---- */
.svp-skel { position: relative; overflow: hidden; background: #E9ECF5; border-radius: 8px; }
.svp-skel::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .svp-skel::after { animation: svp-shimmer 1.25s ease-in-out infinite; }
}
@keyframes svp-shimmer { to { transform: translateX(100%); } }

/* ---- Premium offer detail modal ---- */
.svp-offer-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(22, 24, 43, .54);
}

.svp-offer-modal__card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(84vh, 720px);
  overflow: auto;
  border: 1.5px solid #16182B;
  border-radius: 18px;
  background: #FFFEF5;
  box-shadow: 6px 6px 0 #3347CA, 0 28px 60px rgba(22, 24, 43, .24);
}

.svp-offer-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1.5px solid #E1E0D4;
  border-radius: 100px;
  background: #fff;
  color: #16182B;
  font: 800 22px/1 'Instrument Sans', system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(22, 24, 43, .1);
}

.svp-offer-modal__media {
  height: 230px;
  background: #EEF0FD;
  overflow: hidden;
}

.svp-offer-modal__media-img,
.svp-offer-modal__media-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.svp-offer-modal__media-fallback {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svp-offer-modal__media-fallback img {
  width: 96px !important;
  max-width: 96px !important;
  mix-blend-mode: multiply;
}

.svp-offer-modal__body {
  padding: 22px;
}

.svp-offer-modal__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.svp-offer-modal__badges span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 11px;
  border-radius: 100px;
  background: #F5E642;
  color: #16182B;
  font: 800 11px 'Instrument Sans', system-ui, sans-serif;
}

.svp-offer-modal__badges span + span {
  background: #EEF0FD;
  color: #3347CA;
}

.svp-offer-modal__body h2 {
  margin: 0 0 6px;
  color: #16182B;
  font: 800 28px/1.05 'Bricolage Grotesque', system-ui, sans-serif;
}

.svp-offer-modal__meta,
.svp-offer-modal__description {
  color: #4A4D66;
  font: 500 14.5px/1.55 'Instrument Sans', system-ui, sans-serif;
}

.svp-offer-modal__meta {
  margin: 0 0 14px;
}

.svp-offer-modal__description {
  margin: 0;
}

.svp-offer-modal__code {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border: 1.5px dashed #D8DEFA;
  border-radius: 12px;
  background: #fff;
}

.svp-offer-modal__code span {
  color: #8B8DA0;
  font: 700 12px 'Instrument Sans', system-ui, sans-serif;
}

.svp-offer-modal__code strong {
  color: #3347CA;
  font: 800 15px 'Instrument Sans', system-ui, sans-serif;
  word-break: break-word;
}

.svp-offer-modal__cta {
  margin-top: 18px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  background: #3347CA;
  color: #FFFEF5;
  text-decoration: none;
  font: 800 14.5px 'Instrument Sans', system-ui, sans-serif;
}

/* ---- Global fixes (all viewports) ---- */
/* Logo was cropped by a negative margin inside a fixed-height clip box.
   Give it a proper fixed width, natural height, no crop. */
img[alt="Silvousplait"] {
  margin-top: 0 !important;
  height: auto !important;
  width: 140px !important;
  max-width: 44vw !important;
  display: block;
}
/* ---- Uniform header logo on contact + partenariat (desktop) ----
   logo-mot.png is a SQUARE 2048x2048 file. accueil/premium/faq wrap it in a
   fixed 40px-tall `overflow:hidden` clip box, so the rule above renders it
   140x140 and the box crops it back to a 40px band — a compact ~68px header.
   contact and partenariat are the only two pages whose logo link is
   `height:auto; overflow:visible`, with nothing to clip it. There the same rule
   produced a 140x140 logo and a ~176px-tall header, which is why those two read
   as "not uniform" next to premium on desktop.
   Rather than hand-tune a crop, give these two wrappers premium's exact clip
   box — a 40px flex box with align-items:center that centres the 140px-tall
   logo and clips the overflow — so they come out identical to premium by
   construction instead of by arithmetic. (The artwork sits in the middle of the
   square, rows 35%-68%, so centring is what shows the wordmark; cropping from
   the top lands on empty transparent padding.)
   The selectors are deliberately narrow: `a[style*="height: auto"]` was
   verified to match exactly 1 element on contact.html and 0 on every other
   page, and .partner-logo exists only on partenariat.html. */
/* faq/compte/connexion/termes/politique clip the logo to a 34px x 145px box
   instead of premium's 40px x 170px, which left their headers 63px tall next to
   premium's 69px. Verified: one match per page, always the logo link. */
.partner-logo,
a[style*="height: 34px"],
a[style*="height: auto"] {
  height: 40px !important;
  width: 170px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.partner-logo > img[alt="Silvousplait"],
a[style*="height: 34px"] > img[alt="Silvousplait"],
a[style*="height: auto"] > img[alt="Silvousplait"] {
  width: 140px !important;
  height: auto !important;
  margin-top: 0 !important;
  flex: 0 0 auto !important;
}

/* ---- Uniform header container width (desktop) ----
   premium/accueil/partenariat wrap their header row in an inner
   `max-width:1160px; margin:0 auto; padding:14px 32px` box, so the logo and the
   nav sit on a centred 1160px column. Six other pages (compte, connexion,
   contact, faq, politique, termes) carry a single full-bleed
   `padding:18px 32px` bar instead, so their logo hugs the window edge and the
   header is 10px taller — the logo visibly jumps sideways as you move between
   pages. Align them on premium.
   The border-bottom and background must stay full-bleed (premium's rule spans
   the whole window), and these pages have no inner wrapper to size, so the
   sizing is done with padding on the bar itself.

   A 1160px column left ~176px of dead gutter on a 1512px laptop: the logo sat
   well inside the window and the nav crowded toward the middle. Header chrome
   should hug the window instead, so all three variants now share one gutter
   formula — a comfortable 48px edge gap, widening into a centred 1600px column
   only once the window is wider than that, so the bar never stretches
   uncomfortably far apart on an ultra-wide monitor.
   All three selectors are scoped to the header: the max-width:1160px one is
   qualified by `padding: 14px 32px`, which matches exactly 1 element per page
   (accueil/premium each have 4 max-width:1160px divs; the other 3 are content
   sections and must not move). */
div[style*="padding: 18px 32px"][style*="border-bottom: 1.5px solid rgb(236, 234, 224)"],
div[style*="max-width: 1160px"][style*="padding: 14px 32px"],
.partner-header__inner {
  max-width: none !important;
  padding: 14px max(48px, calc((100% - 1600px) / 2)) !important;
}

/* The top banner underlined "lundi", which reads as a link that does nothing.
   Unique to the accueil banner (one occurrence site-wide). */
[style*="text-underline-offset: 3px"] {
  text-decoration: none !important;
}

/* Nicer, consistent primary buttons/links */
[data-svp="checkout"], [data-svp="login-submit"], [data-svp="login-verify"],
[data-svp="funnel-submit"], [data-svp="contact-submit"], [data-svp="partner-submit"],
[data-svp="admin-submit"] { cursor: pointer; transition: filter .15s, transform .05s; }
[data-svp-step-cta="true"]:focus-visible {
  outline: 3px solid rgba(51, 71, 202, .35);
  outline-offset: 8px;
  border-radius: 14px;
}
[data-svp="hero-submit"] {
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
[data-svp="checkout"]:hover, [data-svp="login-submit"]:hover, [data-svp="login-verify"]:hover,
[data-svp="funnel-submit"]:hover, [data-svp="contact-submit"]:hover, [data-svp="partner-submit"]:hover,
[data-svp="admin-submit"]:hover { filter: brightness(1.08); }
[data-svp="checkout"]:active, [data-svp="funnel-submit"]:active { transform: translateY(1px); }

@media (max-width: 900px) {
  /* Horizontal overflow guard. IMPORTANT: `overflow-x: hidden` must NOT go on
     <body> — a scrollable overflow on body turns BODY into the scroll container,
     so the document/viewport stops scrolling. That silently broke everything
     that scrolls the page on mobile: `html { scroll-behavior: smooth }` (in-page
     links like the premium nav's "Offres"/"FAQ" jumped instead of animating),
     window.scrollTo(), and window scroll listeners.
     On html it propagates to the viewport, which clips the x axis while the
     viewport keeps scrolling y. `clip` on body clips too WITHOUT creating a
     scroll container (and is simply ignored by pre-16 Safari, where html's
     hidden already does the clipping). */
  html { overflow-x: hidden !important; max-width: 100% !important; }
  body { overflow-x: clip !important; max-width: 100% !important; }
  img { max-width: 100% !important; height: auto !important; }
}

@media (max-width: 760px) {
  /* Predictable sizing so padded blocks never exceed their container */
  * { box-sizing: border-box !important; }

  /* Collapse every multi-column grid to a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Fixed max-width content blocks (cards, paragraphs) fill available width */
  [style*="max-width: 480px"], [style*="max-width:480px"],
  [style*="max-width: 540px"], [style*="max-width: 460px"],
  [style*="max-width: 420px"] { width: auto !important; max-width: 100% !important; }

  /* Trim big desktop horizontal padding on full-bleed sections */
  [style*="padding: 64px 32px"], [style*="padding: 48px 32px"], [style*="padding: 14px 32px"],
  [style*="padding: 0px 32px"], [style*="padding:0 32px"] { padding-left: 16px !important; padding-right: 16px !important; }

  [style*="grid-template-columns: 1.05fr 0.95fr"][style*="padding: 76px 32px 64px"] {
    padding: 14px 16px 28px !important;
    gap: 0 !important;
  }

  /* Make fixed-width blocks fluid */
  [style*="width: 360px"], [style*="width:360px"],
  [style*="width: 520px"], [style*="width:520px"],
  [style*="width: 480px"], [style*="width:480px"],
  [style*="width: 340px"], [style*="width:340px"],
  [style*="width: 320px"], [style*="width:320px"],
  [style*="width: 300px"], [style*="width:300px"],
  [style*="width: 280px"], [style*="width:280px"],
  [style*="width: 170px"], [style*="width: 1160px"], [style*="width: 1100px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  [style*="max-width"] { max-width: 100% !important; }

  /* Let side-by-side flex rows wrap on small screens */
  [style*="display: flex"] { flex-wrap: wrap !important; }

  /* Decorative animated marquees (trust logos, testimonials) use a very wide
     max-content track + transform animation -> they clip content on mobile.
     Neutralize the animation and let the cards stack/wrap so nothing is cut. */
  [style*="max-content"] {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    transform: none !important;
    animation: none !important;
  }

  /* Horizontal-scroll carousels (e.g. premium offers) must NOT wrap/stack on
     mobile — keep them a swipeable carousel with a peek of the next card. */
  [data-scroller] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
  }
  [data-scroller] > * {
    flex: 0 0 auto !important;
    width: 80vw !important;
    max-width: 300px !important;
    scroll-snap-align: start !important;
  }

  /* Testimonials (app.js tags these tracks). accueil's is a max-content marquee
     and premium's a 3-column grid, so both need to be forced into the same flex
     row the offers carousel uses — the rules above assume a flex container and
     the grid would otherwise ignore them. */
  [data-scroller="temoignages"] {
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    gap: 14px !important;
    padding: 2px 4px 10px !important;
    justify-content: flex-start !important;
    animation: none !important;
    transform: none !important;
    scrollbar-width: none;
  }

  [data-scroller="offres"],
  [data-scroller="temoignages"] {
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: auto;
  }
  [data-scroller="temoignages"]::-webkit-scrollbar { display: none; }
  /* Marquee loop duplicates — see wireTestimonialCarousels. Hidden only here, so
     the desktop marquee keeps the repeats it needs to seam. */
  [data-scroller="temoignages"] > [data-scroller-dupe] {
    display: none !important;
  }
  /* Sized off the CONTAINER, not the viewport: premium's grid sits inside a
     padded section, so 82vw filled it edge to edge and the next card never
     peeked — losing the only cue that the row is swipeable. A percentage leaves
     a consistent sliver visible whatever the section padding or screen size. */
  [data-scroller="temoignages"] > * {
    width: 86% !important;
    max-width: 330px !important;
    min-width: 0 !important;
    height: auto !important;
    align-self: stretch !important;
  }
  /* The marquee's mask fade dims whichever card you swiped to — it was tuned for
     a strip sliding past on its own, not for a position the visitor controls. */
  [data-scroller-shell] {
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* The hero counter pill is an inline-flex row, so on a narrow phone its parts
     became separate squeezed columns and "5 627" broke across two lines. Let it
     flow and wrap as ordinary centred text instead, and keep the number whole. */
  [style*="padding: 7px 16px"] {
    display: block !important;
    text-align: center !important;
    line-height: 1.5 !important;
  }
  [style*="padding: 7px 16px"] > span {
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  /* ---- Stop iOS Safari zooming in when a field is focused ----
     Mobile Safari auto-zooms the viewport whenever you tap a text control whose
     font-size is under 16px, and every field in the flattened design sits at
     11–15px. The zoom then leaves the page scaled and off-centre, which is the
     "it zooms in when I click a field" complaint.
     The fix is the font-size itself, NOT `user-scalable=no` / `maximum-scale=1`
     in the viewport meta: that would kill pinch-to-zoom for everyone, which is
     an accessibility regression (and newer iOS ignores it anyway).
     16px exactly is the threshold — anything >= 16px never triggers the zoom.
     Scoped to text-entry controls; checkboxes, radios, ranges and buttons never
     trigger it and are left alone so nothing reflows. !important is required
     because the design carries these sizes as inline styles. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Tame oversized display type */
  h1 { font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(22px, 6vw, 34px) !important; }

  [data-svp-home-hero-art] {
    --svp-home-logo-size: clamp(234px, 70vw, 300px);
    --svp-home-logo-window: clamp(154px, 46vw, 198px);
    order: -1;
    width: 100% !important;
    height: var(--svp-home-logo-window) !important;
    min-height: var(--svp-home-logo-window) !important;
    margin: 0 auto 10px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  [data-svp-home-hero-art] img {
    display: block !important;
    width: var(--svp-home-logo-size) !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    transform: translateY(-20%) !important;
  }

  [style*="grid-template-columns: 1.05fr 0.95fr"][style*="padding: 76px 32px 64px"] > div:first-child > div:first-child {
    padding: 6px 12px !important;
    margin-bottom: 14px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }

  [style*="grid-template-columns: 1.05fr 0.95fr"][style*="padding: 76px 32px 64px"] > div:first-child > h1 {
    font-size: clamp(26px, 7.4vw, 32px) !important;
    line-height: 1.08 !important;
    margin-bottom: 12px !important;
  }

  [style*="grid-template-columns: 1.05fr 0.95fr"][style*="padding: 76px 32px 64px"] > div:first-child > p {
    font-size: clamp(15.5px, 4.2vw, 17px) !important;
    line-height: 1.42 !important;
    margin-bottom: 18px !important;
  }

  #inscription {
    padding: 16px !important;
    border-radius: 14px !important;
    box-shadow: rgb(51, 71, 202) 5px 5px 0px !important;
  }

  #inscription input[data-svp="hero-email"] {
    min-height: 44px !important;
    padding: 11px 13px !important;
  }

  #inscription [data-svp="hero-submit"] {
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    font-size: clamp(14px, 3.8vw, 15px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  #inscription > div {
    gap: 8px 14px !important;
    margin-top: 10px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  #inscription > div span {
    white-space: nowrap !important;
  }

  .svp-offer-modal {
    align-items: flex-end;
    padding: 14px;
  }

  .svp-offer-modal__card {
    max-height: calc(88vh - env(safe-area-inset-bottom));
    border-radius: 18px 18px 14px 14px;
  }

  .svp-offer-modal__media {
    height: 190px;
  }

  .svp-offer-modal__body {
    padding: 18px;
  }

  .svp-offer-modal__body h2 {
    font-size: 24px;
  }

  /* Comfortable side padding for full-bleed sections */
  body { padding-left: 0 !important; }
}

@media (max-width: 360px), (max-width: 760px) and (max-height: 760px) {
  [style*="grid-template-columns: 1.05fr 0.95fr"][style*="padding: 76px 32px 64px"] {
    padding: 10px 14px 22px !important;
  }

  [data-svp-home-hero-art] {
    --svp-home-logo-size: clamp(188px, 58vw, 220px);
    --svp-home-logo-window: clamp(118px, 38vw, 138px);
    margin-bottom: 8px !important;
  }

  [style*="grid-template-columns: 1.05fr 0.95fr"][style*="padding: 76px 32px 64px"] > div:first-child > div:first-child {
    padding: 5px 10px !important;
    margin-bottom: 12px !important;
    font-size: 11.8px !important;
    line-height: 1.3 !important;
  }

  [style*="grid-template-columns: 1.05fr 0.95fr"][style*="padding: 76px 32px 64px"] > div:first-child > h1 {
    font-size: clamp(24px, 7vw, 27px) !important;
    line-height: 1.07 !important;
    margin-bottom: 10px !important;
  }

  [style*="grid-template-columns: 1.05fr 0.95fr"][style*="padding: 76px 32px 64px"] > div:first-child > p {
    font-size: 15px !important;
    line-height: 1.38 !important;
    margin-bottom: 12px !important;
  }

  #inscription {
    padding: 14px !important;
  }

  #inscription input[data-svp="hero-email"] {
    min-height: 42px !important;
    padding: 10px 12px !important;
  }

  #inscription [data-svp="hero-submit"] {
    min-height: 44px !important;
    padding: 10px !important;
    font-size: clamp(12.6px, 4vw, 13.5px) !important;
  }

  #inscription > div {
    gap: 6px 10px !important;
    margin-top: 8px !important;
    font-size: 11.3px !important;
  }
}

@media (max-width: 760px) and (max-height: 520px) and (orientation: landscape) {
  [data-svp-home-hero-art] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  [style*="grid-template-columns: 1.05fr 0.95fr"][style*="padding: 76px 32px 64px"] {
    padding-top: 8px !important;
    padding-bottom: 18px !important;
  }

  [style*="grid-template-columns: 1.05fr 0.95fr"][style*="padding: 76px 32px 64px"] > div:first-child > div:first-child {
    margin-bottom: 8px !important;
  }

  [style*="grid-template-columns: 1.05fr 0.95fr"][style*="padding: 76px 32px 64px"] > div:first-child > h1 {
    margin-bottom: 8px !important;
  }

  [style*="grid-template-columns: 1.05fr 0.95fr"][style*="padding: 76px 32px 64px"] > div:first-child > p {
    font-size: 14px !important;
    line-height: 1.28 !important;
    margin-bottom: 7px !important;
  }

  #inscription {
    padding: 12px !important;
  }

  #inscription input[data-svp="hero-email"] {
    min-height: 40px !important;
  }

  #inscription [data-svp="hero-submit"] {
    min-height: 40px !important;
  }

  #inscription > div {
    margin-top: 6px !important;
  }
}

/* Keep header logo from being forced full-width by the rule above */
@media (max-width: 760px) {
  header img, [alt="Silvousplait"] { width: auto !important; max-width: 170px !important; }
}