/* ─────────────────────────────────────────────────────────────
   WP-specific overrides — kept OUT of base.css so base.css stays
   byte-identical to the static site's styles.css.
   ───────────────────────────────────────────────────────────── */

/* Mobile primary CTA: surfaced inside the open burger panel.
   On desktop the standalone .header-cta button is shown instead.
   Selector specificity must beat `.primary-nav a { display:inline-flex }`. */
.primary-nav a.nav-cta-mobile {
  display: none;
}

.mobile-bottom-nav {
  display: none;
}

@media (max-width: 767px) {
  .primary-nav.is-open a.nav-cta-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    padding: 13px 22px;
    border-radius: 999px;
    color: #ffffff;
    background: var(--color-blue, #2563ff);
    font-weight: 700;
  }

  .primary-nav.is-open .nav-cta-mobile:hover,
  .primary-nav.is-open .nav-cta-mobile:focus-visible {
    color: #ffffff;
    background: var(--color-blue-700, #1d4fd6);
  }
}

/* Attention-drawing pulse + shine on the desktop navbar Diagnostic CTA only. */
@media (min-width: 768px) {
  .diag-btn {
    position: relative;
    overflow: hidden;
  }

  @media (prefers-reduced-motion: no-preference) {
    .diag-btn {
      animation: diag-pulse 2.4s ease-out infinite;
    }

    .diag-btn::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 45%;
      height: 100%;
      background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 100%);
      transform: translateX(-120%) skewX(-20deg);
      animation: diag-shine 2.4s ease-in-out infinite;
      pointer-events: none;
    }
  }
}

@keyframes diag-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(43, 102, 246, 0.45); }
  60%  { box-shadow: 0 0 0 18px rgba(43, 102, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 102, 246, 0); }
}

@keyframes diag-shine {
  0%, 55%   { transform: translateX(-120%) skewX(-20deg); }
  85%, 100% { transform: translateX(260%) skewX(-20deg); }
}

/* Smaller "promise" pill in the homepage sector cards (overrides inline style). */
.hpfam__promise {
  font-size: 8px !important;
  letter-spacing: 0.06em !important;
  padding: 3px 8px !important;
}

/* Activités locales: center the hero copy + actions (centered variant). */
.service-hero--centered .service-hero-copy {
  text-align: center;
  align-items: center;
}

.service-hero--centered .service-hero-copy .hero-lead {
  margin-left: auto;
  margin-right: auto;
}

.service-hero--centered .hero-actions {
  justify-content: center;
}

/* Subtle separator under the centered hero (activités locales). */
.service-hero--centered {
  border-bottom: 1px solid var(--color-border, #e3e8f0);
}

/* Hero flush under the nav: no white band from the root block gap,
   nor from the post-content wrapper's flow margin. The wrapper is the
   direct .wp-site-blocks child on page/single templates, so it must be
   zeroed too, not just main. */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-post-content,
main#main-content {
  margin-block-start: 0 !important;
}

/* Même bande crème entre le contenu et le footer : l'écart de bloc racine
   laisse voir le fond du site au-dessus du footer navy. */
.wp-site-blocks > footer.wp-block-template-part {
  margin-block-start: 0 !important;
}

#main-content > .entry-content.wp-block-post-content,
#main-content > :first-child {
  margin-block-start: 0;
}

/* Familles métiers: image coupée net à la verticale, pas de diagonale.
   !important pour battre le <style> inline du contenu importé. */
.hpfam__img-clip {
  clip-path: none !important;
}

/* Familles /activites-locales/ (sol-fam) : même rendu que les cartes de la
   HP (hpfam). !important pour battre le <style> inline du contenu importé. */
.sol-fam__img-clip {
  clip-path: none !important;
}

.sol-fam__icon-bubble {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
}

.sol-fam__promise {
  font-size: 8px !important;
  letter-spacing: 0.06em !important;
  padding: 3px 8px !important;
}

.sol-fam__name {
  font-size: clamp(18px, 1.6vw, 22px) !important;
}

.sol-fam__desc {
  font-size: 14px !important;
  line-height: 1.72 !important;
}

.sol-fam__more {
  font-size: 14px !important;
}

@media (min-width: 721px) {
  .sol-fam__content {
    gap: 14px !important;
    padding: 40px 32px 40px 40px !important;
  }
}

/* Familles métiers: cartes de même hauteur. La grille égalise les <li>
   (grid-auto-rows: 1fr) mais le lien carte restait en hauteur auto. */
.hpfam__grid > li {
  display: flex;
}

.hpfam__grid > li > .hpfam__card {
  flex: 1;
}

/* Activités locales: hero decor circles follow the page accent
   (coral commerce/artisans, teal santé, purple services). */
.service-hero--centered::before {
  background:
    radial-gradient(circle at 78% 36%, color-mix(in srgb, var(--svc-accent, #2563ff) 14%, transparent), transparent 38%),
    radial-gradient(circle at 12% 72%, color-mix(in srgb, var(--svc-accent, #2563ff) 6%, transparent), transparent 28%);
}

/* Homepage "Le problème" section: centered heading. */
.hp-prob .section-heading,
.hp-prob .section-heading > * {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Final CTA trust list: darker text for clear visibility on the light panel. */
.final-cta-trust,
.final-cta-trust li {
  color: var(--color-navy, #081d3a) !important;
}

/* References / case studies: hide residual static nav bits (back-link, eyebrow,
   unstyled breadcrumb) and the decorative card icon badge on the archive. */
.case-study-back-link,
.case-study-eyebrow,
.breadcrumb,
.case-card__icon-badge {
  display: none !important;
}

/* ── Unified FAQ design ──────────────────────────────────────────
   The FAQ page uses .faq-* classes whose CSS lives in articles.css
   (not loaded there). Replicate the homepage .svo-faq look, with the
   accent adapting per page via --svc-accent (falls back to brand blue). */
.faq-section {
  counter-reset: faq;
}

.faq-item {
  counter-increment: faq;
  position: relative;
  padding: 26px 0 26px 52px;
  border-bottom: 1px solid var(--color-border, #e3e8f0);
}

.faq-item::before {
  content: counter(faq, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 30px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--svc-accent, var(--color-blue, #2563ff));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.faq-q {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-navy, #081d3a);
  margin: 0 0 10px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.faq-a {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-slate, #4a5875);
  margin: 0;
}

.faq-a a {
  color: var(--svc-accent, var(--color-blue, #2563ff));
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* Service/activité FAQ (.svo-faq): adapt accent to the page theme. */
.svo-faq-item::before,
.svo-faq-a a {
  color: var(--svc-accent, var(--color-blue, #2563ff));
}

.leka-faq-toggle {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.leka-faq-toggle:focus-visible {
  outline: 2px solid var(--svc-accent, var(--color-blue, #2563ff));
  outline-offset: 4px;
  border-radius: 6px;
}

.leka-faq-toggle__icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--svc-accent-soft, var(--color-blue-soft, #eef3ff));
}

.leka-faq-toggle__icon::before,
.leka-faq-toggle__icon::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 9px;
  height: 2px;
  border-radius: 999px;
  background: var(--svc-accent, var(--color-blue, #2563ff));
}

.leka-faq-toggle__icon::after {
  transform: rotate(90deg);
}

.leka-faq-toggle[aria-expanded="true"] .leka-faq-toggle__icon::after {
  transform: rotate(0deg);
}

.svo-faq-a[hidden],
.faq-a[hidden] {
  display: none;
}

.svo-faq-q,
.faq-q {
  margin-bottom: 0;
}

.svo-faq-q:has(.leka-faq-toggle[aria-expanded="true"]),
.faq-q:has(.leka-faq-toggle[aria-expanded="true"]) {
  margin-bottom: 10px;
}

/* Homepage hero: tighten the gap under the fixed navbar, and add breathing
   room between the hero copy and the CTAs. */
.hero {
  padding-top: 24px;
}

.hero .hero-actions {
  margin-top: 32px;
}

/* Tablet and desktop must keep the full header navigation. The legacy article
   stylesheet still contains a 1280px mobile breakpoint, so this late override
   keeps the hamburger limited to phones across all templates. */
@media (min-width: 768px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
    justify-content: initial;
  }

  .primary-nav {
    display: flex;
  }

  .header-cta {
    display: inline-flex;
  }

  .menu-toggle {
    display: none;
  }

  .primary-nav.is-open {
    position: static;
    display: flex;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* ── Mobile menu: clearer, more accessible ─────────────────────── */
@media (max-width: 767px) {
  .primary-nav.is-open {
    left: 12px;
    right: 12px;
    padding: 12px;
    gap: 2px;
    /* Floating card + full-viewport scrim so the menu stands out clearly. */
    box-shadow: 0 18px 50px rgba(8, 29, 58, 0.28), 0 0 0 100vmax rgba(8, 29, 58, 0.45);
  }

  /* Larger, easier-to-read top-level items with separators. */
  .primary-nav.is-open .nav-link,
  .primary-nav.is-open > a:not(.nav-cta-mobile) {
    font-size: 16px;
    font-weight: 700;
  }

  .primary-nav.is-open .nav-group:not(:last-of-type),
  .primary-nav.is-open > .nav-link:not(:last-of-type) {
    border-bottom: 1px solid var(--color-border, #e3e8f0);
  }

  /* Comfortable sub-menu links. */
  .primary-nav.is-open .nav-panel a {
    font-size: 15px;
    min-height: 44px;
  }

  /* Prominent primary CTA at the bottom of the panel. */
  .primary-nav.is-open a.nav-cta-mobile {
    margin-top: 10px;
    min-height: 52px;
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  body {
    padding-top: 70px;
    padding-bottom: 0;
  }

  .wp-site-blocks > main,
  .wp-site-blocks > .wp-block-post-content {
    margin-top: 0;
  }

  #main-content {
    margin-top: 0 !important;
  }

  #main-content > .service-hero--centered:first-child {
    padding-top: 12px;
  }

  .hero.section.has-dot-grid {
    padding-top: 0;
  }

  .site-footer {
    padding-bottom: calc(126px + env(safe-area-inset-bottom, 0px));
  }

  .legal-row {
    border-top: 0;
  }

  .site-header {
    top: 10px;
    left: 12px;
    right: 12px;
    border: 1px solid rgba(8, 29, 58, 0.08);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(8, 29, 58, 0.10);
  }

  .header-inner {
    min-height: 58px;
    padding: 0 14px;
  }

  .brand img {
    height: 34px;
  }

  .menu-toggle,
  .primary-nav,
  .primary-nav.is-open {
    display: none !important;
  }

  .header-cta {
    min-height: 42px;
    display: inline-flex !important;
    padding: 0 16px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 800;
  }

  .header-cta .btn-icon {
    display: none;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 210;
    min-height: 72px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid rgba(8, 29, 58, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 44px rgba(8, 29, 58, 0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .mobile-bottom-nav__item {
    min-width: 0;
    min-height: 56px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 16px;
    color: var(--color-muted, #68758a);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
  }

  .mobile-bottom-nav__item:hover,
  .mobile-bottom-nav__item:focus-visible,
  .mobile-bottom-nav__item.is-active {
    color: var(--color-blue, #2563ff);
    background: rgba(37, 99, 255, 0.08);
  }

  .mobile-bottom-nav__item:focus-visible {
    outline: 2px solid var(--color-blue, #2563ff);
    outline-offset: 2px;
  }

  .mobile-bottom-nav__icon {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-bottom-nav__item.is-active .mobile-bottom-nav__icon {
    stroke-width: 2.15;
  }

  .final-cta-trust {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 8px;
    margin: 14px 0 18px;
  }

  .final-cta-trust li {
    min-width: 0;
    font-size: 13px;
    line-height: 1.25;
  }
}

/* ── Activités locales: unify the "ce que vos prospects veulent" tables ──
   The santé / artisans / commerces pages use plain <table>s; give them the
   polished numbered-card design (like the services page), accent per theme. */
.sp-patients__table,
.ah-block__table,
.cr-fast__table {
  width: 100%;
  border-collapse: collapse;
  counter-reset: lrow;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, #e3e8f0);
  border-radius: 16px;
  overflow: hidden;
}

.sp-patients__table thead th,
.ah-block__table thead th,
.cr-fast__table thead th {
  text-align: left;
  padding: 16px 22px;
  background: var(--color-off-white, #f7f8fa);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-slate, #4a5875);
  text-transform: uppercase;
}

.sp-patients__table tbody tr,
.ah-block__table tbody tr,
.cr-fast__table tbody tr {
  counter-increment: lrow;
  border-top: 1px solid var(--color-border, #e3e8f0);
}

.sp-patients__table tbody td,
.ah-block__table tbody td,
.cr-fast__table tbody td {
  padding: 18px 22px;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-slate, #4a5875);
}

.sp-patients__table tbody td:first-child,
.ah-block__table tbody td:first-child,
.cr-fast__table tbody td:first-child {
  position: relative;
  padding-left: 58px;
  font-weight: 800;
  color: var(--color-navy, #081d3a);
}

.sp-patients__table tbody td:first-child::before,
.ah-block__table tbody td:first-child::before,
.cr-fast__table tbody td:first-child::before {
  content: counter(lrow, decimal-leading-zero);
  position: absolute;
  left: 22px;
  top: 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--svc-accent, var(--color-blue, #2563ff));
  font-variant-numeric: tabular-nums;
}