/* Flowstack custom overrides — loaded after halden-miller.webflow.css */

/* Blog article rich text — step headings down to fit 680px column */
.article-body h2 {
  font-size: var(--_🔠-typography---size--h4);          /* 32px (page h4) */
  line-height: var(--_🔠-typography---line-height--h4);  /* 36px */
  letter-spacing: var(--_🔠-typography---letter-spacing--h4);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.article-body h3 {
  font-size: var(--_🔠-typography---size--h5);          /* 28px (page h5) */
  line-height: var(--_🔠-typography---line-height--h5);  /* 32px */
  letter-spacing: var(--_🔠-typography---letter-spacing--h5);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.article-body h4 {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.3px;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.article-body ul,
.article-body ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.article-body ul li,
.article-body ol li {
  margin-bottom: 0.5rem;
}

.article-body blockquote {
  border-left: 3px solid var(--_🎨-color--tokens---border--subtle);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
}

.article-body code {
  background: #f4f4f4;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9em;
}

.article-body pre {
  background: #f4f4f4;
  padding: 1.25rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.article-body pre code {
  background: none;
  padding: 0;
}

/* Fix select dropdown options unreadable on dark sections (white text on white bg) */
.services-contact-section .w-select option {
  color: #1a1a1a;
  background-color: #fff;
}

/* Transparent static nav on dark-mode pages — the IX2 interaction that set
   .nav-top-bg opacity:0 was bound to the removed "Entreprise" dropdown;
   force it via CSS so the nav overlays the dark hero transparently. */
.dark-mode .master-navigation:not(.sticky) .nav-top-bg {
  opacity: 0;
}

/* Service pages — full-viewport case study hero */
.hero-case-study-section {
  min-height: 100vh;
  height: auto;
}

/* ============================================================
   SERVICE PAGE — Centered-axis variable-width composition
   Narrow prose (800px) alternating with wide data blocks (1144px)
   and full-bleed moments (1376–1800px) = "breathing" layout.
   ============================================================ */

/* --- Parent containers: full width + center children --- */
.service-page .master-case-body {
  max-width: var(--container--main);
  align-items: center;
}

.service-page .content-case-body {
  max-width: var(--container--main);
  align-items: center;
  grid-row-gap: var(--spacing--64);
}

/* --- Info Grid: 10-column cards --- */
.service-page .content-case-body > .w-layout-grid.case-info-grid {
  max-width: var(--max-width--10-columns);
  width: 100%;
}

.service-page .case-info-tile {
  background-color: var(--_🎨-color--tokens---background--depth);
  border-radius: var(--_🔘-radius---general--default);
  padding: var(--spacing--24) var(--spacing--32);
  box-shadow: 0 -1px 0 0 var(--_🎨-color--base---neutral--light-8);
}

/* --- Prose blocks: 800px reading column --- */
.service-page .content-case-body > .case-body.w-richtext {
  max-width: 800px;
  width: 100%;
}

/* Section-divider headings within prose */
.service-page .case-body.w-richtext h2 {
  margin-left: -2rem;
  margin-right: -2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: var(--spacing--16);
  border-top: 1px solid var(--_🎨-color--tokens---border--subtle);
  margin-top: var(--spacing--48);
}

.service-page .case-body.w-richtext h2:first-child {
  border-top: none;
  margin-top: 0;
}

/* --- Full-width content image: match original 8-column container --- */
.service-page .master-case-body > .case-body.w-richtext {
  max-width: var(--max-width--8-columns);
  width: 100%;
  overflow: hidden;
}

.service-page .master-case-body > .case-body.w-richtext figure {
  max-width: 100% !important;
  display: block;
}

.service-page .master-case-body > .case-body.w-richtext figure > div {
  display: block;
}

.service-page .master-case-body > .case-body.w-richtext figure img {
  width: 100%;
  height: auto;
}

/* --- Pull quote: 10-column centered card --- */
.service-page .content-case-body > .case-quote {
  max-width: var(--max-width--10-columns);
  width: 100%;
  padding: var(--spacing--48) var(--spacing--64);
  background-color: var(--_🎨-color--tokens---background--depth);
  border-radius: var(--_🔘-radius---general--large);
  box-shadow: 0 -1px 0 0 var(--_🎨-color--base---neutral--light-8);
  text-align: center;
}

.service-page .content-case-body > .case-quote .text-h4 {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.service-page .content-case-body > .case-quote .case-quote-author {
  align-items: center;
}

/* --- Stat tiles: 10-column cards --- */
.service-page .content-case-body > .w-layout-grid.case-number-halves {
  max-width: var(--max-width--10-columns);
  width: 100%;
  grid-column-gap: var(--spacing--24);
}

.service-page .case-number-tile {
  background-color: var(--_🎨-color--tokens---background--depth);
  border-radius: var(--_🔘-radius---general--default);
  padding: var(--spacing--48) var(--spacing--32);
  box-shadow: 0 -1px 0 0 var(--_🎨-color--base---neutral--light-8);
}

/* --- CTA card: 12-column wide --- */
.service-page .content-case-body > .cta-story {
  max-width: var(--max-width--12-columns);
  width: 100%;
  padding: var(--spacing--24);
  grid-column-gap: var(--spacing--32);
}

.service-page .content-case-body > .cta-story .image-wrap-cta-story {
  max-width: 400px;
  min-height: 260px;
}

/* ============================================================
   SERVICE PAGE — Responsive overrides
   ============================================================ */

@media screen and (max-width: 991px) {
  .service-page .content-case-body > .w-layout-grid.case-info-grid,
  .service-page .content-case-body > .case-quote,
  .service-page .content-case-body > .w-layout-grid.case-number-halves,
  .service-page .content-case-body > .cta-story,
  .service-page .content-case-body > .case-body.w-richtext {
    max-width: 100%;
  }

  .service-page .case-body.w-richtext h2 {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .service-page .content-case-body > .case-quote {
    padding: var(--spacing--32);
  }

  .service-page .case-number-tile {
    padding: var(--spacing--32) var(--spacing--24);
  }
}

@media screen and (max-width: 767px) {
  .service-page .content-case-body > .w-layout-grid.case-info-grid {
    grid-template-columns: 1fr;
  }

  .service-page .content-case-body > .w-layout-grid.case-number-halves {
    grid-template-columns: 1fr;
  }

  .service-page .content-case-body > .case-quote {
    padding: var(--spacing--24);
    text-align: left;
  }

  .service-page .content-case-body > .cta-story .image-wrap-cta-story {
    max-width: none;
  }
}

@media screen and (max-width: 479px) {
  .service-page .case-info-tile {
    padding: var(--spacing--16) var(--spacing--20);
  }

  .service-page .case-number-tile {
    padding: var(--spacing--24) var(--spacing--20);
  }
}

/* Footer — 5-column layout for categorized services list */
.footer-right {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

@media screen and (max-width: 991px) {
  .footer-right {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 767px) {
  .footer-right {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 479px) {
  .footer-right {
    grid-template-columns: 1fr;
  }
}

/* Force light mode on specific sections inside a dark-mode page */
.dark-mode .section-light {
  /* Backgrounds */
  --_🎨-color--tokens---background--base: var(--_🎨-color--base---background-base--light);
  --_🎨-color--tokens---background--depth: var(--_🎨-color--base---background-depth--light);
  --_🎨-color--tokens---background--lift: var(--_🎨-color--base---background-lift--light);
  --_🎨-color--tokens---background--lift-low-opacity: var(--_🎨-color--base---background-lift-low-opacity--light);
  --_🎨-color--tokens---background-gradient-purposes--gradient-64: var(--_🎨-color--base---neutral--light-64);
  --_🎨-color--tokens---background-gradient-purposes--gradient-0: var(--_🎨-color--base---neutral--light-0);
  /* Text */
  --_🎨-color--tokens---text-body--strong: var(--_🎨-color--base---neutral--dark-88);
  --_🎨-color--tokens---text-heading--strong: var(--_🎨-color--base---neutral--dark-100);
  --_🎨-color--tokens---text-body--medium: var(--_🎨-color--base---neutral--dark-64);
  --_🎨-color--tokens---text-heading--medium: var(--_🎨-color--base---neutral--dark-64);
  --_🎨-color--tokens---text-body--subtle: var(--_🎨-color--base---neutral--dark-48);
  --_🎨-color--tokens---text-label--strong: var(--_🎨-color--base---neutral--dark-88);
  --_🎨-color--tokens---text-label--medium: var(--_🎨-color--base---neutral--dark-64);
  /* Borders & icons */
  --_🎨-color--tokens---border--subtle: var(--_🎨-color--base---neutral--dark-16);
  --_🎨-color--tokens---icon--medium: var(--_🎨-color--base---neutral--dark-64);
  --_🎨-color--tokens---icon--strong: var(--_🎨-color--base---neutral--dark-100);
  /* Buttons — primary */
  --_🎨-color--tokens---button-primary-default--text: var(--_🎨-color--base---neutral--light-100);
  --_🎨-color--tokens---button-primary-default--background: var(--_🎨-color--base---neutral--dark-100);
  --_🎨-color--tokens---button-primary-default--border: var(--_🎨-color--base---neutral--light-8);
  --_🎨-color--tokens---button-primary-hover--text: var(--_🎨-color--base---neutral--light-100);
  --_🎨-color--tokens---button-primary-hover--background: var(--_🎨-color--base---neutral--dark-88);
  --_🎨-color--tokens---button-primary-hover--border: var(--_🎨-color--base---neutral--light-8);
  /* Buttons — secondary */
  --_🎨-color--tokens---button-secondary-default--text: var(--_🎨-color--base---neutral--dark-100);
  --_🎨-color--tokens---button-secondary-default--background: var(--_🎨-color--base---neutral--dark-0);
  --_🎨-color--tokens---button-secondary-default--border: var(--_🎨-color--base---neutral--dark-16);
  --_🎨-color--tokens---button-secondary-hover--text: var(--_🎨-color--base---neutral--light-100);
  --_🎨-color--tokens---button-secondary-hover--background: var(--_🎨-color--base---neutral--dark-88);
  --_🎨-color--tokens---button-secondary-hover--border: var(--_🎨-color--base---neutral--light-8);
  /* Buttons — tertiary */
  --_🎨-color--tokens---button-tertiary-default--text: var(--_🎨-color--base---neutral--dark-100);
  --_🎨-color--tokens---button-tertiary-hover--text: var(--_🎨-color--base---neutral--dark-88);
  /* Inputs */
  --_🎨-color--tokens---input-default--border: var(--_🎨-color--base---neutral--dark-8);
  --_🎨-color--tokens---input-default--background: var(--_🎨-color--base---neutral--dark-8);
  --_🎨-color--tokens---input-default--text: var(--_🎨-color--base---neutral--dark-48);
  --_🎨-color--tokens---input-active--border: var(--_🎨-color--base---neutral--dark-48);
  --_🎨-color--tokens---input-active--text: var(--_🎨-color--base---neutral--dark-100);
  --_🎨-color--tokens---input-active--background: var(--_🎨-color--base---neutral--dark-16);
  --_🎨-color--tokens---input--label: var(--_🎨-color--base---neutral--dark-64);
  --_🎨-color--tokens---input-filled--text: var(--_🎨-color--base---neutral--dark-100);
  --_🎨-color--tokens---input--icon: var(--_🎨-color--base---accent--primary);
  background-color: var(--_🎨-color--base---background-base--light);
}

/* ============================================================
   LANGUAGE SWITCHER — CSS-only dropdown in navigation
   ============================================================ */

.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: var(--spacing--4);
}

.lang-switcher-current {
  padding: var(--spacing--8) var(--spacing--12);
  border: 1px solid var(--_🎨-color--tokens---button-secondary-default--border);
  border-radius: var(--_🔘-radius---ui-elements--button);
  font-family: var(--_🔠-typography---font-family--button-2);
  color: var(--_🎨-color--tokens---button-secondary-default--text);
  font-size: var(--_🔠-typography---size--button-2);
  line-height: var(--_🔠-typography---line-height--button-2);
  font-weight: var(--_🔠-typography---font-weight--button-2);
  letter-spacing: var(--_🔠-typography---letter-spacing--button-2);
  cursor: pointer;
  transition: color .3s, background-color .3s, border-color .3s;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang-switcher-current:hover {
  border-color: var(--_🎨-color--tokens---button-secondary-hover--border);
  background-color: var(--_🎨-color--tokens---button-secondary-hover--background);
  color: var(--_🎨-color--tokens---button-secondary-hover--text);
}

.lang-switcher-icon {
  width: 12px;
  height: 12px;
  transition: transform .2s ease;
}

.lang-switcher:hover .lang-switcher-icon {
  transform: rotate(180deg);
}

.lang-switcher-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 100%;
  background-color: var(--_🎨-color--tokens---background--base);
  border: 1px solid var(--_🎨-color--tokens---border--subtle);
  border-radius: var(--_🔘-radius---ui-elements--button);
  padding: var(--spacing--4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  z-index: 1000;
}

.lang-switcher:hover .lang-switcher-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-switcher-option {
  display: block;
  padding: var(--spacing--8) var(--spacing--12);
  border-radius: var(--_🔘-radius---ui-elements--button);
  font-family: var(--_🔠-typography---font-family--button-2);
  color: var(--_🎨-color--tokens---text-body--strong);
  font-size: var(--_🔠-typography---size--button-2);
  line-height: var(--_🔠-typography---line-height--button-2);
  font-weight: var(--_🔠-typography---font-weight--button-2);
  letter-spacing: var(--_🔠-typography---letter-spacing--button-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}

.lang-switcher-option:hover {
  background-color: var(--_🎨-color--tokens---background--depth);
}

.lang-switcher-option.is-active {
  color: var(--_🎨-color--tokens---text-body--medium);
  pointer-events: none;
}

.mobile-lang-switcher {
  display: none;
  padding: var(--spacing--16) 0;
  gap: var(--spacing--8);
  flex-direction: row;
  align-items: center;
}

.mobile-lang-link {
  font-family: var(--_🔠-typography---font-family--button-2);
  font-size: var(--_🔠-typography---size--button-2);
  color: var(--_🎨-color--tokens---text-body--strong);
  text-decoration: none;
  padding: var(--spacing--8) var(--spacing--16);
  border-radius: var(--_🔘-radius---ui-elements--button);
  border: 1px solid var(--_🎨-color--tokens---border--subtle);
}

.mobile-lang-link.is-active {
  background-color: var(--_🎨-color--tokens---background--depth);
  color: var(--_🎨-color--tokens---text-body--medium);
  pointer-events: none;
}

.mobile-lang-divider {
  color: var(--_🎨-color--tokens---text-body--subtle);
  font-size: var(--_🔠-typography---size--button-2);
}

/* Fix: raise default input text contrast from dark-48 (~3:1) to dark-64 (~4.85:1) for WCAG AA */
.text-field {
  color: var(--_🎨-color--tokens---input--label);
}

@media screen and (max-width: 991px) {
  .lang-switcher {
    display: none;
  }
  .mobile-lang-switcher {
    display: flex;
  }
}