/* ── Fidélité Style Overrides ── */

/* Navbar background: match button radius */
.header-column-right nav,
.header-nav,
.header-nav-list,
.header w-nav {
  border-radius: 16px !important;
}

/* Navbar pill container (the white bg pill around nav links) */
.header-column-right,
.header-nav.w-nav-menu {
  border-radius: 16px !important;
}

/* Button hover state: use #778fed instead of default */
.primary-button-wrapper:hover .primary-button,
.primary-button-wrapper:hover .button-text-content {
  background-color: #778fed !important;
  border-color: #778fed !important;
  color: #ffffff !important;
}

/* The hover overlay layer */
.button-text-content.is-primary-button {
  background-color: #778fed !important;
  border-radius: 16px !important;
}

/* Secondary button hover */
.secondary-button-wrapper:hover .secondary-button {
  background-color: #f5f5f7 !important;
  border-color: #778fed !important;
}
.secondary-button-wrapper:hover .button-text-content.is-secondary-button {
  color: #778fed !important;
}

/* .button class hover (How it works section) */
.button:hover {
  background-color: #778fed !important;
  color: #ffffff !important;
}

/* Buttons: pill → rounded 16px */
.primary-button, .primary-button-wrapper, .secondary-button, .secondary-button-wrapper,
.button, .button.secondary, .button.submit,
a[class*="button-wrapper"], a[class*="button"] {
  border-radius: 16px !important;
}
.primary-button-icon, .tertiary-button-icon, .slider-button {
  border-radius: 99px !important;
}
.form.subscribes { border-radius: 16px !important; }
.badge { border-radius: 12px !important; }

/* Typography: lighter weight */
h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4,
.display-5, .display-6, .display-7, .display-8 {
  font-weight: 300 !important; letter-spacing: -0.02em !important;
}
p, .paragraph-large, .paragraph-regular, .paragraph-small { font-weight: 300 !important; }
.button-text-content, .button-text-content.is-primary-button,
.button-text-content.is-secondary-button { font-weight: 300 !important; font-size: 15px !important; }
.header-nav-link, .header-nav-link .button-text-content { font-weight: 300 !important; font-size: 14px !important; }
.sub-heading-large, .sub-heading-regular, .sub-heading-small { font-weight: 400 !important; }
.card h3, .card h5, .card h4, article h3, article h5 { font-weight: 300 !important; }

/* Boutons: rouge → noir #2a2621 */
:root { --_colors---core--colors--primary--100: #2a2621 !important; }
.primary-button { background-color: #2a2621 !important; border-color: #2a2621 !important; }
.primary-button:hover { background-color: #3d3733 !important; border-color: #3d3733 !important; }
.hamburger-button, .hamburger-btn-text-content { background-color: #2a2621 !important; border-color: #2a2621 !important; }

/* Inputs: 12px radius */
.input, input, textarea, .w-input, .text-field { border-radius: 12px !important; }

/* Cards: border visible (exclude step articles) */
.card, .card.services, .card.testimonials, .card.experiences, .faq-accordion {
  border: 1px solid rgba(0,0,0,0.06) !important;
}

/* Global: replace secondary-200 (#1946bb/#1a46bb) with #2a2621 */
:root {
  --_colors---core--colors--secondary--200: #778fed !important;
}

/* Icon template accent color: #1a46bb → #2a2621 */
.icon-template-color,
.icon-template-wrapper svg {
  color: #778fed !important;
}

/* Hover states that use secondary-200 */
.primary-button-wrapper:hover .primary-button,
.primary-button:hover {
  background-color: #3d3733 !important;
  border-color: #3d3733 !important;
}

/* Link hover colors */
a:hover, .link-wrapper:hover .link {
  color: #2a2621 !important;
}

/* Focus/active states on inputs */
.input:focus, input:focus, .w-input:focus {
  border-color: #778fed !important;
}

/* Badge primary text in all sections */
.badge-primary {
  background-color: #778fed !important;
  color: #ffffff !important;
  border-color: #778fed !important;
}
.badge-primary .control-group {
  color: #ffffff !important;
}

/* How it works section: badge colors */
.steps-sticky-card-wrapper .badge-primary,
.section-inner.is-xl .badge-primary {
  background-color: #778fed !important;
  color: #ffffff !important;
  border-color: #778fed !important;
}
.steps-sticky-card-wrapper .badge-primary .control-group,
.section-inner.is-xl .badge-primary .control-group {
  color: #ffffff !important;
}

/* How it works section: button color */
.section-inner.is-xl .primary-button {
  background-color: #2a2621 !important;
  border-color: #2a2621 !important;
}

/* Spacing after How it works section */
.section-inner.is-xl.overflow-visible {
  margin-bottom: 100px !important;
}

/* Step post articles: no border */
article.step-post,
.steps-sticky-card-wrapper article {
  border: none !important;
}

/* Footer: #2a2621 charcoal like buttons, keep card shape */
.footer-wrapper {
  background-color: transparent !important;
}
.footer {
  background-color: #2a2621 !important;
}

/* Signup primary button in is-xl section: white on dark bg (idle only, keep default on hover) */
html:not(.dark) body .section-inner.is-xl.overflow-visible .primary-button,
html:not(.dark) body .section-inner.is-xl.overflow-visible .primary-button div{color:#fff !important;}
/* Section "Plus qu'une simple carte de fidélité": flat lavender card with grain */
section[data-oskard-more]{padding:32px 20px;}
section[data-oskard-more] .section-inner.pv---xl{position:relative;overflow:hidden;background:#aaa8e1 !important;border-radius:32px;}
section[data-oskard-more] .section-inner.pv---xl::after{content:'';position:absolute;inset:0;background-image:url('/grain-sharp.png');background-repeat:repeat;opacity:.20;mix-blend-mode:overlay;pointer-events:none;z-index:1;}
section[data-oskard-more] .section-inner.pv---xl > *{position:relative;z-index:2;}
html:not(.dark) body section[data-oskard-more] h1,
html:not(.dark) body section[data-oskard-more] h2,
html:not(.dark) body section[data-oskard-more] h2 span,
html:not(.dark) body section[data-oskard-more] h3,
html:not(.dark) body section[data-oskard-more] p,
html:not(.dark) body section[data-oskard-more] p span{color:#fff !important;}
section[data-oskard-more] .kstack2d-b{background:#c8c6ea !important;}
section[data-oskard-more] .kstack2d-b::before{content:'';position:absolute;inset:0;background-image:url('/grain-sharp.png');background-repeat:repeat;opacity:.25;mix-blend-mode:overlay;pointer-events:none;border-radius:inherit;z-index:0;}
@media (max-width:767px){
  html:not(.dark) body [data-oskard="hero"],
  html:not(.dark) body .hero-wrapper,
  html.dark body .hero-wrapper{margin:0 !important;width:100% !important;max-width:100% !important;padding-top:0 !important;padding-left:0 !important;padding-right:0 !important;border-radius:0 !important;}
}
/* Tabs "Conçu pour chaque commerce": uniform figure size, crop to fit */
.business-tab-pane figure.image-wrapper{width:100% !important;aspect-ratio:1/1 !important;height:auto !important;overflow:hidden;display:block;}
.business-tab-pane figure.image-wrapper img.image.is-full-height{width:100% !important;height:100% !important;object-fit:cover !important;object-position:center !important;}
/* Footer: white text everywhere */
html:not(.dark) body .footer-wrapper,
html:not(.dark) body .footer-wrapper *:not(a):not(input):not(button),
html:not(.dark) body .footer-wrapper a,
html:not(.dark) body .footer-wrapper a div,
html:not(.dark) body .footer-wrapper h1,
html:not(.dark) body .footer-wrapper h2,
html:not(.dark) body .footer-wrapper h3,
html:not(.dark) body .footer-wrapper h4,
html:not(.dark) body .footer-wrapper p,
html:not(.dark) body .footer-wrapper span,
html:not(.dark) body .footer-wrapper li,
html:not(.dark) body .footer-wrapper div{color:#fff !important;}
/* CTA section: purple gradient + grain like hero, white text */
.section-inner.is-cta-version-three{min-height:560px;}
.cta-fan{position:absolute;left:0;top:50%;transform:translateY(-50%);width:56%;height:100%;z-index:2;pointer-events:none;}
.cta-fan .kcard{position:absolute;left:50%;top:50%;width:220px;transition:none;box-shadow:0 24px 48px -18px rgba(0,0,0,.38),0 8px 18px -6px rgba(0,0,0,.24);}
.cta-fan .kcard:hover{transform:translate(-50%,-50%) var(--cta-tr,none);}
@media (max-width:900px){
 .section-inner.is-cta-version-three{min-height:unset;}
 .cta-fan{position:relative;left:auto;top:auto;transform:scale(.55);transform-origin:50% 50%;width:100%;height:260px;margin:-30px auto 10px;display:flex;}
}
@media (max-width:560px){
 .cta-fan{transform:scale(.38);height:180px;margin:-30px auto 20px;}
}

.section-inner.is-cta-version-three{position:relative;overflow:hidden;background:linear-gradient(180deg,#3851c8 0%,#5e6ecf 15%,#8384d9 35%,#aaa8e1 55%,#b6b4e2 75%,#c7c5e7 100%) !important;}
.section-inner.is-cta-version-three::after{content:'';position:absolute;inset:0;background-image:url('/grain-sharp.png');background-repeat:repeat;opacity:.20;mix-blend-mode:overlay;pointer-events:none;}
.section-inner.is-cta-version-three .position-relative-z-index-1{position:relative;z-index:2;}
html:not(.dark) body .section-inner.is-cta-version-three h2,
html:not(.dark) body .section-inner.is-cta-version-three h2 span,
html:not(.dark) body .section-inner.is-cta-version-three p,
html:not(.dark) body .section-inner.is-cta-version-three p span{color:#fff !important;}
.section-inner.is-cta-version-three .cta-image-version-two{display:none !important;}

.hero-bg-version-one::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/grain-sharp.png');
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.20;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* Hero title & subtitle size bump */
.hero-component .display-9 {
  font-size: calc(var(--display-9--font-size, 48px) + 4px) !important;
}
.hero-component .mg-top-4x-extra-small {
  font-size: calc(var(--body--font-size, 16px) + 4px) !important;
}
/* Mobile Hero-right fix */
@media (max-width: 767px) {
  .hero-3d-rectangle {
    display: flex !important;
    justify-content: center !important;
    margin-top: -15% !important;
  }
  .hero-3d-rectangle .image {
    width: 90vw !important;
    height: auto !important;
    max-width: 400px !important;
    transform: none !important;
    object-fit: contain !important;
  }
}
.brix-badges-wrapper, .more-templates-badge-wrapper, .more-templates-badge, .more-templates-lottie, a[href*="webflow.com/templates"], a[href*="bfrwd.com"], a[href*="webflow.com"].w-webflow-badge, .w-webflow-badge, [class*="more-templates"], [class*="brix-badge"], a[href*="brixtemplates.com"], .more-webflow-templates, [class*="more-webflow"] { display: none !important; }


/* Auth pages (login / signup) : garder le split 2-colonnes dès 768px */
@media (min-width: 768px) {
  .utility-grid-v1 {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  .utility-grid-v1 > #w-node-_8d5e89a9-0be8-5d2c-93bd-78eae37698a9-a0662102,
  .utility-grid-v1 > .col-full-image-main-right {
    grid-column-start: 2 !important;
    grid-row-start: 1 !important;
  }
  .utility-grid-v1 > .col-full-image-main-right,
  .utility-grid-v1 .col-full-image-wrapper---right {
    height: 100% !important;
    min-height: 600px !important;
  }
}

/* ── Labels : weight allégé sur tout le site ── */
html body .label,
html body label {
  font-weight: 400 !important;
}

/* ── Dark mode : pages auth + 404 (couleurs alignées sur l'app) ── */
html.dark body {
  background-color: #161616 !important;
  color: #fff !important;
}
html.dark body .page-wrapper,
html.dark body .hero-wrapper,
html.dark body .hero-component,
html.dark body .hero-component.is-utility-card,
html.dark body .utility-form-wrapper,
html.dark body .header-wrapper,
html.dark body .header,
html.dark body main.page-wrapper,
html.dark body section,
html.dark body .container-default,
html.dark body .section-inner:not(.is-cta-version-three):not(.is-xl),
html.dark body .section-component {
  background-color: #161616 !important;
}
html.dark body h1,
html.dark body h2,
html.dark body h3,
html.dark body h4,
html.dark body h5,
html.dark body p,
html.dark body .label,
html.dark body [class*="display-"],
html.dark body .header-nav-link,
html.dark body .header-nav-link div {
  color: #fff !important;
}
html.dark body .input,
html.dark body input,
html.dark body textarea,
html.dark body .w-input {
  background-color: #1c1c1c !important;
  color: #fff !important;
  border-color: #2a2a2a !important;
}
html.dark body .input::placeholder,
html.dark body input::placeholder,
html.dark body textarea::placeholder {
  color: #939395 !important;
}
html.dark body .input:focus,
html.dark body input:focus,
html.dark body .w-input:focus {
  border-color: #778fed !important;
}
html.dark body .secondary-button,
html.dark body .button-text-content.is-secondary-button {
  background-color: transparent !important;
  border-color: #2a2a2a !important;
  color: #fff !important;
}
html.dark body .secondary-button *,
html.dark body .button-text-content.is-secondary-button * {
  color: #fff !important;
}
html.dark body .primary-button,
html.dark body .button-text-content.is-primary-button,
html.dark body .w-button {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #030407 !important;
}
html.dark body .primary-button *,
html.dark body .button-text-content.is-primary-button * {
  color: #030407 !important;
}
html.dark body .primary-button:hover {
  background-color: #e5e5e7 !important;
  border-color: #e5e5e7 !important;
}
html.dark body .divider,
html.dark body .form-divider-text {
  border-color: #2a2a2a !important;
  color: #939395 !important;
}
html.dark body .card,
html.dark body .form-status .card {
  background-color: #1c1c1c !important;
  border-color: #2a2a2a !important;
  color: #fff !important;
}
html.dark body .checkbox-wrapper .checkbox {
  border-color: #2a2a2a !important;
  background-color: #1c1c1c !important;
}
html.dark body .checkbox-text,
html.dark body .w-form-label {
  color: #fff !important;
}
html.dark body .link-wrapper .link,
html.dark body .link-wrapper .link *,
html.dark body .link.is-title.is-mid,
html.dark body .link.is-title.is-mid * {
  color: #778fed !important;
}
/* 404 statique : SVG emoji circle */
html.dark body .error-icon-wrapper,
html.dark body [class*="404"] .icon-wrapper {
  background-color: #1c1c1c !important;
}

/* ── Auth pages : tailles champs + boutons ── */
.utility-form-wrapper .input,
.utility-form-wrapper input.w-input,
.utility-form-wrapper textarea {
  padding: 8px 14px !important;
  font-size: 14px !important;
  min-height: unset !important;
  height: auto !important;
  line-height: 1.5 !important;
}
.utility-form-wrapper input[type="submit"],
.utility-form-wrapper .w-button,
.utility-form-wrapper .primary-button.width-100 {
  padding: 9px 20px !important;
  font-size: 14px !important;
  min-height: unset !important;
  height: auto !important;
  line-height: 1.5 !important;
}
.utility-form-wrapper .secondary-button,
.utility-form-wrapper .secondary-button-wrapper .secondary-button {
  padding: 8px 14px !important;
  font-size: 14px !important;
  min-height: unset !important;
  height: auto !important;
  line-height: 1.5 !important;
}