/**
 * UFoundMe! Unified Stylesheet — October 2026
 * Single override file loaded last on every page.
 * Provides a consistent header, footer, typography and component
 * design regardless of which PHP template generated the HTML.
 *
 * Embeds design tokens directly so pages that don't load
 * design-tokens.css (auth pages, legal) still get the variables.
 *
 * @author Gilles Capelluto - MOLDEREZ-CONSULT
 * @purpose-fr Feuille unifiée chargée en dernier : en-tête, pied de page, typographie et composants communs à toutes les pages.
 * @purpose-en Unified stylesheet loaded last: header, footer, typography and components shared by all pages.
 * @audit-scope asset
 * @inputs-fr Aucune entrée ; embarque les jetons de design pour les pages sans design-tokens.css.
 * @inputs-en No input; embeds design tokens for pages without design-tokens.css.
 * @effects-fr Règles de style uniquement ; surcharge les styles des gabarits PHP.
 * @effects-en Style rules only; overrides the styles of the PHP templates.
 */

/* ================================================================
   0. DESIGN TOKENS (embedded for pages without design-tokens.css)
   ================================================================ */

:root {
  --ufm-font-primary: "Geist Sans", system-ui, -apple-system, sans-serif;
  --ufm-weight-regular: 400;
  --ufm-weight-medium: 500;
  --ufm-weight-semibold: 600;
  --ufm-weight-bold: 700;
  --ufm-text-xs: 0.75rem;
  --ufm-text-sm: 0.875rem;
  --ufm-text-base: 1rem;
  --ufm-text-lg: 1.125rem;
  --ufm-heading-xl: clamp(2.25rem, 1.5rem + 3.6vw, 4rem);
  --ufm-heading-lg: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
  --ufm-leading-tight: 1.1;
  --ufm-leading-snug: 1.3;
  --ufm-leading-normal: 1.5;
  --ufm-leading-relaxed: 1.65;
  --ufm-tracking-caps: 0.1em;
  --ufm-bg: #F8F7F5;
  --ufm-surface: #FFFFFF;
  --ufm-surface-subtle: #F3F1EE;
  --ufm-text: #251A3D;
  --ufm-text-secondary: #625D6B;
  --ufm-text-muted: #736E78;
  --ufm-text-inverse: #FFFFFF;
  --ufm-primary: #342050;
  --ufm-primary-hover: #4B3575;
  --ufm-primary-soft: #EDE8F4;
  --ufm-accent: #0D7480;
  --ufm-accent-hover: #0A5F68;
  --ufm-accent-soft: #E6F5F6;
  --ufm-coral: #FF704D;
  --ufm-success: #087250;
  --ufm-error: #B91C1C;
  --ufm-border: #DDD9E2;
  --ufm-border-subtle: #ECEAEF;
  --ufm-border-strong: #C4BFD0;
  --ufm-icon: #625D6B;
  --ufm-space-1: 0.25rem;
  --ufm-space-2: 0.5rem;
  --ufm-space-3: 0.75rem;
  --ufm-space-4: 1rem;
  --ufm-space-6: 1.5rem;
  --ufm-space-8: 2rem;
  --ufm-space-12: 3rem;
  --ufm-space-16: 4rem;
  --ufm-gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
  --ufm-radius-sm: 8px;
  --ufm-radius-md: 12px;
  --ufm-radius-lg: 16px;
  --ufm-radius-xl: 24px;
  --ufm-radius-full: 999px;
  --ufm-shadow-md: 0 4px 12px rgba(37, 26, 61, 0.08);
  --ufm-shadow-xl: 0 24px 64px rgba(37, 26, 61, 0.14);
  --ufm-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ufm-duration-fast: 150ms;
  --ufm-touch-target: 44px;
  --ufm-header-h: 64px;
  --ufm-z-header: 100;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ufm-bg: #1A1625;
    --ufm-surface: #241F30;
    --ufm-surface-subtle: #1F1A2B;
    --ufm-text: #F0EDF5;
    --ufm-text-secondary: #A8A2B2;
    --ufm-text-muted: #9A91A3;
    --ufm-text-inverse: #1A1625;
    --ufm-primary: #B39FD8;
    --ufm-primary-hover: #C7B8E4;
    --ufm-primary-soft: #2E2444;
    --ufm-accent: #2CC5D2;
    --ufm-border: #3D3650;
    --ufm-border-subtle: #2E2840;
    --ufm-border-strong: #524A68;
    --ufm-icon: #A8A2B2;
    --ufm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --ufm-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  --ufm-bg: #1A1625;
  --ufm-surface: #241F30;
  --ufm-surface-subtle: #1F1A2B;
  --ufm-text: #F0EDF5;
  --ufm-text-secondary: #A8A2B2;
  --ufm-text-muted: #9A91A3;
  --ufm-text-inverse: #1A1625;
  --ufm-primary: #B39FD8;
  --ufm-primary-hover: #C7B8E4;
  --ufm-primary-soft: #2E2444;
  --ufm-accent: #2CC5D2;
  --ufm-border: #3D3650;
  --ufm-border-subtle: #2E2840;
  --ufm-border-strong: #524A68;
  --ufm-icon: #A8A2B2;
  --ufm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --ufm-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.4);
}

/* ================================================================
   1. GLOBAL TYPOGRAPHY
   ================================================================ */

body,
.topbar,
.topbar > nav a,
.ufm-auth-public-header,
.mobile-menu-sheet :is(a, button, span, b),
button, input, select, textarea {
  font-family: var(--ufm-font-primary) !important;
}

body,
html body:not(.public-card-body):not(.chat-surface):not(.chat-page) {
  background: var(--ufm-bg) !important;
  color: var(--ufm-text) !important;
  font-size: 16px;
  line-height: var(--ufm-leading-normal);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ufm-primary-soft);
  color: var(--ufm-text);
}


/* ================================================================
   2. UNIFIED HEADER
   Every page header — .topbar, .ufm-auth-public-header,
   .shop-header, .legal-header, .blog-header, etc. —
   renders as ONE consistent bar:
   Logo | [inline nav ≥1280px] | lang pills | Panier | ☰ | 🌙
   ================================================================ */

/* --- 2a. Shared header container --- */

body:not(.public-card-body) > :is(
  .topbar,
  header.topbar,
  .ufm-auth-public-header,
  .shop-header,
  .legal-header,
  .blog-header,
  .ufm-contact-head,
  .partner-head,
  .dash-head
) {
  position: sticky !important;
  top: 0 !important;
  z-index: var(--ufm-z-header) !important;
  height: var(--ufm-header-h) !important;
  min-height: var(--ufm-header-h) !important;
  max-height: var(--ufm-header-h) !important;
  padding: 0 var(--ufm-gutter) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: color-mix(in srgb, var(--ufm-bg) 92%, transparent) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--ufm-border-subtle) !important;
  box-sizing: border-box !important;
}


/* --- 2b. Logo — same size everywhere --- */

:is(.topbar, .ufm-auth-public-header, .shop-header, .legal-header, .blog-header) :is(.logo, .auth-logo, .shop-brand, .legal-brand) {
  flex: 0 0 auto !important;
  margin-right: auto !important;
}

:is(.topbar, .ufm-auth-public-header, .shop-header, .legal-header, .blog-header) :is(.logo, .auth-logo, .shop-brand, .legal-brand) img {
  width: clamp(120px, 10vw, 160px) !important;
  height: auto !important;
  display: block !important;
}

.brand-pronunciation,
.ufm-brand-signature,
.ufm-brand-sub {
  font-size: clamp(9px, 0.7vw, 11px) !important;
  color: var(--ufm-text-muted) !important;
}


/* --- 2c. Inline navigation — HIDDEN at all widths, everything is in the hamburger --- */

.topbar > nav:not(.language-switcher):not(.ufm-auth-language):not(.ufm-universal-languages) {
  display: none !important;
}

/* The secondary desktop navigation bar below the topbar — unified into the hamburger */
.ufm-desktop-navigation {
  display: none !important;
}

/* Hide root breadcrumb (single "Accueil" on homepage is noise) */
.ufm-breadcrumb--root {
  display: none !important;
}


/* --- 2d. Language pills — HIDDEN in header, available in hamburger menu --- */

.account-actions .language-switcher,
.ufm-auth-language,
.topbar > nav.language-switcher,
body > header > nav.language-switcher {
  display: none !important;
}

.account-actions .language-switcher a,
.ufm-auth-language a,
.topbar > nav.language-switcher a,
body > header > nav.language-switcher a {
  min-width: 32px;
  min-height: 32px;
  padding: 0.125rem 0.375rem;
  display: grid;
  place-items: center;
  border-radius: var(--ufm-radius-full);
  color: var(--ufm-text-muted);
  font-size: var(--ufm-text-xs);
  font-weight: var(--ufm-weight-semibold);
  text-decoration: none;
  transition: all var(--ufm-duration-fast) var(--ufm-ease);
}

.account-actions .language-switcher a:hover,
.ufm-auth-language a:hover,
.topbar > nav.language-switcher a:hover {
  color: var(--ufm-text);
  background: var(--ufm-surface-subtle);
}

.account-actions .language-switcher a.active,
.account-actions .language-switcher a[aria-current],
.ufm-auth-language a[aria-current],
.topbar > nav.language-switcher a.active,
.topbar > nav.language-switcher a[aria-current],
.mobile-sheet-languages a[aria-current] {
  color: #fff !important;
  background: var(--ufm-accent) !important;
}

/* Language pills hidden — they live in the hamburger menu only */

@media (max-width: 479px) {
  body:not(.public-card-body) > :is(
    .topbar, header.topbar,
    .ufm-auth-public-header,
    .shop-header
  ) {
    gap: 0.25rem !important;
    padding: 0 0.5rem !important;
    overflow: hidden !important;
  }

  :is(.topbar, .ufm-auth-public-header, .shop-header) :is(.logo, .auth-logo, .shop-brand) {
    flex: 0 1 auto !important;
    margin-right: auto !important;
    max-width: 90px !important;
    overflow: hidden !important;
  }

  .ufm-brand-lockup .brand-pronunciation,
  .ufm-brand-lockup .ufm-brand-signature,
  .ufm-brand-lockup .ufm-brand-sub {
    display: none !important;
  }

  body :is(.topbar, .ufm-auth-public-header, .shop-header) :is(.logo, .auth-logo, .shop-brand) img {
    width: 80px !important;
    max-width: 80px !important;
  }

  body .topbar .account-actions,
  body .ufm-auth-public-header .account-actions,
  body .shop-header .account-actions,
  body > header .account-actions,
  .account-actions {
    flex: 1 1 0px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .compact-header-actions {
    gap: 0.25rem !important;
    flex: 0 0 auto !important;
  }

  .cart-trigger, .compact-cart-trigger, .ufm-auth-cart {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 0.375rem !important;
  }

  .compact-menu-trigger, .ufm-auth-menu, button[data-mobile-menu] {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  .cart-trigger > span, .compact-cart-trigger > span, .ufm-auth-cart > span {
    display: none !important;
  }
}


/* --- 2e. Account links (Connexion, Créer un compte) --- */

.account-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  flex: 0 0 auto !important;
}

.account-actions > a:not(.language-switcher a) {
  min-height: var(--ufm-touch-target);
  padding: 0 var(--ufm-space-3);
  display: inline-flex;
  align-items: center;
  border-radius: var(--ufm-radius-full);
  color: var(--ufm-text-secondary);
  text-decoration: none;
  font-size: var(--ufm-text-sm);
  font-weight: var(--ufm-weight-medium);
  white-space: nowrap;
  transition: color var(--ufm-duration-fast) var(--ufm-ease);
}

.account-actions > a:hover {
  color: var(--ufm-text);
}

/* Auth public header account link */
.ufm-auth-account a {
  min-height: var(--ufm-touch-target);
  padding: 0 var(--ufm-space-3);
  display: inline-flex;
  align-items: center;
  border-radius: var(--ufm-radius-full);
  color: var(--ufm-text-secondary);
  text-decoration: none;
  font-size: var(--ufm-text-sm);
  font-weight: var(--ufm-weight-medium);
  white-space: nowrap;
}

/* Account links hidden at all widths — they're in the hamburger */
.account-actions > a:not([class*="language"]):not(.nav-cta) {
  display: none !important;
}
.ufm-auth-account {
  display: none !important;
}


/* --- 2f. Cart button — one consistent style --- */

.cart-trigger,
.compact-cart-trigger,
.ufm-auth-cart {
  min-height: var(--ufm-touch-target) !important;
  min-width: var(--ufm-touch-target) !important;
  padding: 0 var(--ufm-space-3) !important;
  border: 1px solid var(--ufm-border) !important;
  border-radius: var(--ufm-radius-full) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.375rem !important;
  color: var(--ufm-text) !important;
  background: var(--ufm-surface) !important;
  font-size: var(--ufm-text-sm) !important;
  font-weight: var(--ufm-weight-medium) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: border-color var(--ufm-duration-fast) var(--ufm-ease) !important;
  flex: 0 0 auto !important;
}

.cart-trigger:hover,
.compact-cart-trigger:hover,
.ufm-auth-cart:hover {
  border-color: var(--ufm-primary) !important;
}

.cart-trigger img,
.compact-cart-trigger img,
.ufm-auth-cart img {
  width: 18px !important;
  height: 18px !important;
}

.cart-trigger b,
.compact-cart-trigger b {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: var(--ufm-radius-full);
  color: var(--ufm-text-inverse);
  background: var(--ufm-accent);
  font-size: 0.625rem;
}

/* Only ONE cart visible: prefer compact-cart-trigger (in compact-header-actions) */
.account-actions > .cart-trigger,
.topbar > .cart-trigger {
  display: none !important;
}

/* mobile-cart-trigger is a positioned duplicate — always hidden, compact takes over */
.mobile-cart-trigger {
  display: none !important;
}

/* Desktop cart is the separate .desktop-cart-trigger — hide it too */
.desktop-cart-trigger {
  display: none !important;
}


/* --- 2g. Hamburger (menu trigger) — always visible --- */

.compact-menu-trigger,
.wide-menu-trigger,
.ufm-auth-menu,
button[data-mobile-menu] {
  flex: 0 0 var(--ufm-touch-target) !important;
  width: var(--ufm-touch-target) !important;
  height: var(--ufm-touch-target) !important;
  padding: 0 !important;
  border: 1px solid var(--ufm-border) !important;
  border-radius: var(--ufm-radius-full) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ufm-text) !important;
  background: var(--ufm-surface) !important;
  cursor: pointer !important;
  transition: border-color var(--ufm-duration-fast) var(--ufm-ease) !important;
  position: relative !important;
  overflow: hidden !important;
}

.compact-menu-trigger:hover,
.wide-menu-trigger:hover,
.ufm-auth-menu:hover,
button[data-mobile-menu]:hover {
  border-color: var(--ufm-primary) !important;
}

/* Hamburger icon: 3 lines via the existing <img> or pseudo-element */
.compact-menu-trigger img,
.wide-menu-trigger img,
.ufm-auth-menu img,
button[data-mobile-menu] img {
  width: 20px !important;
  height: 20px !important;
  filter: brightness(0) !important;
  opacity: 0.7 !important;
}

/* Hide text labels inside menu triggers */
.compact-menu-trigger > span,
.wide-menu-trigger > span,
.ufm-auth-menu > span,
button[data-mobile-menu] > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
}

/* Only ONE menu trigger visible */
.topbar > .wide-menu-trigger {
  display: none !important;
}

/* compact-header-actions group — always visible, is the canonical header actions */
.compact-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  flex: 0 0 auto !important;
}


/* --- 2h. e-Shop CTA pill --- */

body:has(.ufm-global-controls) .topbar .account-actions > .nav-cta,
.nav-cta {
  min-height: 44px;
  padding: 0 var(--ufm-space-4);
  display: inline-flex !important;
  align-items: center;
  border-radius: var(--ufm-radius-full);
  color: #fff !important;
  background: var(--ufm-accent) !important;
  text-decoration: none;
  font-size: var(--ufm-text-sm);
  font-weight: var(--ufm-weight-semibold);
  white-space: nowrap;
  transition: background var(--ufm-duration-fast) var(--ufm-ease);
  flex: 0 0 auto;
}

body:has(.ufm-global-controls) .topbar .account-actions > .nav-cta:hover,
.nav-cta:hover {
  background: var(--ufm-accent-hover) !important;
}


/* --- 2i. Theme toggle — icon-only circle, all headers --- */

body:not(.public-card-body) :is(
  .topbar, .ufm-auth-public-header, .shop-header,
  .legal-header, .blog-header
) .ufm-site-theme-toggle {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--ufm-border) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ufm-surface) !important;
  color: var(--ufm-text) !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  order: 99 !important;
  position: static !important;
  transition: border-color var(--ufm-duration-fast) var(--ufm-ease) !important;
}

body:not(.public-card-body) :is(
  .topbar, .ufm-auth-public-header, .shop-header,
  .legal-header, .blog-header
) .ufm-site-theme-toggle:hover {
  border-color: var(--ufm-primary) !important;
}

body:not(.public-card-body) :is(
  .topbar, .ufm-auth-public-header, .shop-header,
  .legal-header, .blog-header
) .ufm-site-theme-toggle [data-theme-label] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
}


/* --- 2j. Auxiliary controls (language/auth floating panel) --- */

/* The ufm-global-controls aside floats over the header on some pages.
   On pages with .ufm-auth-public-header it is already hidden by
   public-header-contract.css. On topbar pages, fold it into the flow. */
body > .ufm-global-controls {
  position: static !important;
  display: none !important;
}

/* On topbar pages where there is no auth language nav,
   the language-switcher lives inside .account-actions — already styled above */


/* ================================================================
   3. MOBILE MENU SHEET
   ================================================================ */

.mobile-menu-sheet {
  border: 1px solid var(--ufm-border-subtle) !important;
  border-radius: var(--ufm-radius-xl) !important;
  background: var(--ufm-surface) !important;
  box-shadow: var(--ufm-shadow-xl) !important;
  z-index: 13010 !important;
}

.mobile-menu-sheet > header {
  position: relative;
  z-index: 1;
}

.mobile-sheet-routes > * {
  border-radius: var(--ufm-radius-md);
  background: var(--ufm-surface-subtle);
  font-weight: var(--ufm-weight-semibold);
  font-size: var(--ufm-text-sm);
}

.mobile-sheet-routes > *:hover {
  background: var(--ufm-primary-soft);
}

/* Menu sheet text always dark on light surfaces */
.mobile-menu-sheet :is(.mobile-sheet-routes, .mobile-sheet-tools, .mobile-sheet-account, .mobile-sheet-languages) :is(a, button, span, b) {
  color: #000 !important;
}
.mobile-menu-sheet .mobile-sheet-account .primary,
.mobile-menu-sheet .mobile-sheet-account .primary span {
  color: var(--ufm-text-inverse) !important;
}
.mobile-menu-sheet .mobile-sheet-languages a[aria-current] {
  color: #fff !important;
  background: var(--ufm-accent) !important;
}

.mobile-menu-sheet :is(.mobile-sheet-routes, .mobile-sheet-tools) img {
  filter: brightness(0) !important;
  opacity: 1 !important;
}


/* ================================================================
   4. HERO SECTIONS
   ================================================================ */

/* Reduce gap between fixed header and first content section (-20px) */
#main-content > .view:nth-child(2),
main > .view:first-of-type {
  padding-top: clamp(10px, 2vw, 56px) !important;
}

/* Hero: let premium-tech-ui.css dark gradient through */

.ufm-premium-signal {
  display: none !important;
}

.hero-copy .kicker,
.kicker, .eyebrow, .view .kicker {
  font-size: var(--ufm-text-xs) !important;
  font-weight: var(--ufm-weight-bold) !important;
  letter-spacing: var(--ufm-tracking-caps) !important;
  text-transform: uppercase;
  color: var(--ufm-accent) !important;
}

.kicker i {
  background: var(--ufm-accent) !important;
}

.hero-promise,
.hero :is(h1, .hero-promise) {
  font-size: var(--ufm-heading-xl) !important;
  font-weight: var(--ufm-weight-bold) !important;
  line-height: var(--ufm-leading-tight) !important;
  letter-spacing: -0.03em !important;
}

.hero h1 em {
  color: inherit !important;
  background: none !important;
  font-style: normal;
}

.hero-copy > p:not(.kicker) {
  font-size: var(--ufm-text-lg) !important;
  line-height: var(--ufm-leading-relaxed) !important;
  max-width: 560px;
}


/* ================================================================
   5. SECTION HEADINGS
   ================================================================ */

.principle-copy h1,
.principle-copy h2,
.chat-principle-copy h1,
.view-heading h1,
.help-head h1 {
  font-size: var(--ufm-heading-lg) !important;
  font-weight: var(--ufm-weight-bold) !important;
  line-height: var(--ufm-leading-tight) !important;
  letter-spacing: -0.02em !important;
  color: var(--ufm-text) !important;
}

.principle-copy > p:not(.kicker),
.chat-principle-copy > p:not(.kicker) {
  font-size: var(--ufm-text-lg) !important;
  line-height: var(--ufm-leading-relaxed) !important;
  color: var(--ufm-text-secondary) !important;
}


/* ================================================================
   6. BUTTONS
   ================================================================ */

.primary,
.actions .primary,
.purchase-actions .primary,
.badge-actions .primary,
.ufm-premium-button.is-accent {
  min-height: var(--ufm-touch-target);
  padding: 0 var(--ufm-space-8);
  border: 0 !important;
  border-radius: var(--ufm-radius-full) !important;
  color: var(--ufm-text-inverse) !important;
  background: var(--ufm-primary) !important;
  font-size: var(--ufm-text-base);
  font-weight: var(--ufm-weight-semibold);
  box-shadow: none !important;
  cursor: pointer;
  transition: background var(--ufm-duration-fast) var(--ufm-ease),
              transform var(--ufm-duration-fast) var(--ufm-ease);
}

.primary:hover,
.ufm-premium-button.is-accent:hover {
  background: var(--ufm-primary-hover) !important;
  transform: translateY(-1px);
}

.secondary,
.actions .secondary,
.purchase-actions .secondary,
.ufm-premium-button.is-ghost {
  min-height: var(--ufm-touch-target);
  padding: 0 var(--ufm-space-6);
  border: 1px solid var(--ufm-border) !important;
  border-radius: var(--ufm-radius-full) !important;
  color: var(--ufm-text) !important;
  background: var(--ufm-surface) !important;
  font-size: var(--ufm-text-base);
  font-weight: var(--ufm-weight-medium);
  box-shadow: none !important;
  cursor: pointer;
}

.secondary:hover {
  border-color: var(--ufm-primary) !important;
  background: var(--ufm-primary-soft) !important;
}

/* Dark-background buttons: ensure white text for ≥4.5:1 contrast */
button[data-go],
.pet-preview button:not([class*="lang"]) {
  color: var(--ufm-text-inverse) !important;
}


/* ================================================================
   7. CARDS & SURFACES
   ================================================================ */

.principle, .chat-principle, .help-view {
  background: var(--ufm-bg) !important;
  color: var(--ufm-text) !important;
}

.view, section[class*="view"] {
  background: var(--ufm-bg) !important;
}

.hero-price {
  border-radius: var(--ufm-radius-xl);
}

.home-credibility-item {
  background: var(--ufm-surface);
  border: 1px solid var(--ufm-border-subtle);
  border-radius: var(--ufm-radius-lg);
}

.ufm-premium-price-line {
  background: var(--ufm-surface) !important;
  border: 1px solid var(--ufm-border-subtle) !important;
  border-radius: var(--ufm-radius-lg) !important;
  color: var(--ufm-text) !important;
}

.principle-steps li {
  border-radius: var(--ufm-radius-lg);
}

.principle-steps strong {
  font-size: var(--ufm-text-base);
  font-weight: var(--ufm-weight-semibold);
  color: var(--ufm-text);
}

.principle-steps small {
  font-size: var(--ufm-text-sm);
  line-height: var(--ufm-leading-normal);
  color: var(--ufm-text-secondary);
}


/* ================================================================
   8. UNIFIED FOOTER
   ================================================================ */

footer.site-footer,
.ufm-footer {
  background: var(--ufm-primary) !important;
  color: var(--ufm-text-inverse) !important;
}

.ufm-footer :is(a, p, small, span, address, strong, b, li, dt, dd) {
  color: var(--ufm-text-inverse) !important;
}

.ufm-footer a:hover {
  opacity: 0.85;
}

.ufm-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15) !important;
}

.ufm-footer-trust,
.ufm-footer-europe,
.ufm-footer-ai-disclosure {
  background: rgba(255,255,255,0.05) !important;
}

.ufm-footer img:not([src*="european-union"]):not([src*="logo"]) {
  filter: brightness(0) invert(1) !important;
}

.ufm-footer-social :is(button, a) {
  border-color: rgba(255,255,255,0.2) !important;
}


/* ================================================================
   9. VISUAL COMPONENTS
   ================================================================ */

/* The phone frame and the card follow the design the visitor picks: the
   selector writes --theme-a/--theme-b on <html>. The card keeps its own
   business palette (marketing-home.css); only the frame is tinted here. */
.visual-phone {
  border-color: var(--ufm-primary);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--theme-a, #c9b8de) 16%, #fff) 0%,
    color-mix(in srgb, var(--theme-b, #c9b8de) 34%, #fff) 100%) !important;
}

/* Hero steps: titles must stay dark on light tile backgrounds */
.hero-how li span {
  color: var(--ufm-brand-secondary, #251a3d) !important;
}

.pet-preview footer button {
  background: var(--ufm-primary);
  border-radius: var(--ufm-radius-full);
}

.ufm-help article {
  border: 1px solid var(--ufm-border-subtle);
  border-radius: var(--ufm-radius-lg);
  background: var(--ufm-surface);
}

.ufm-help-button {
  background: var(--ufm-primary);
  border-radius: var(--ufm-radius-full);
}

.ufm-purchase-assurance article {
  border-radius: var(--ufm-radius-md);
  border: 1px solid var(--ufm-border-subtle);
}

.ufm-studio-link {
  background: var(--ufm-primary);
  border-radius: var(--ufm-radius-full);
}


/* ================================================================
   10. MAGIC LINK SENT PAGE
   ================================================================ */

.auth-page-ufoundme .ufm-magic-guidance {
  grid-template-columns: 1fr !important;
}

.auth-page-ufoundme .ufm-magic-actions {
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
}

.auth-page-ufoundme .ufm-magic-actions :is(.auth-secondary, .auth-text-action) {
  font-size: 0.85rem !important;
  padding: 0.75rem 1rem !important;
  white-space: normal !important;
}


/* ================================================================
   11. RESPONSIVE — MOBILE (≤767px)
   ================================================================ */

@media (max-width: 767px) {
  :root {
    --ufm-header-h: 56px;
  }

  body:not(.public-card-body) > :is(.topbar, .ufm-auth-public-header, .shop-header, .legal-header, .blog-header) {
    padding: 0 0.75rem !important;
    gap: 0.375rem !important;
  }

  :is(.topbar, .ufm-auth-public-header) :is(.logo, .auth-logo) img {
    width: 110px !important;
  }

}


/* ================================================================
   12. RESPONSIVE — TABLET (768px–1023px)
   ================================================================ */

/* Tablet and desktop narrow overrides removed — header is always LOGO | LANGUE | PANIER | HAMBURGER | THEME */


/* ================================================================
   14. DARK THEME
   ================================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body:not(.public-card-body) > :is(.topbar, .ufm-auth-public-header, .shop-header, .legal-header, .blog-header) {
    background: color-mix(in srgb, var(--ufm-bg) 92%, transparent) !important;
    border-bottom-color: var(--ufm-border) !important;
  }

  :root:not([data-theme="light"]) .mobile-menu-sheet {
    background: var(--ufm-surface) !important;
    border-color: var(--ufm-border) !important;
  }

  :root:not([data-theme="light"]) .compact-menu-trigger img,
  :root:not([data-theme="light"]) .wide-menu-trigger img,
  :root:not([data-theme="light"]) .ufm-auth-menu img,
  :root:not([data-theme="light"]) button[data-mobile-menu] img {
    filter: brightness(0) invert(1) !important;
  }

  :root:not([data-theme="light"]) .mobile-menu-sheet :is(.mobile-sheet-routes, .mobile-sheet-tools, .mobile-sheet-account, .mobile-sheet-languages) :is(a, button, span, b) {
    color: var(--ufm-text) !important;
  }

  :root:not([data-theme="light"]) .mobile-menu-sheet :is(.mobile-sheet-routes, .mobile-sheet-tools) img {
    filter: none !important;
  }
}

:root[data-theme="dark"] body:not(.public-card-body) > :is(.topbar, .ufm-auth-public-header, .shop-header, .legal-header, .blog-header) {
  background: color-mix(in srgb, var(--ufm-bg) 92%, transparent) !important;
  border-bottom-color: var(--ufm-border) !important;
}

:root[data-theme="dark"] .mobile-menu-sheet {
  background: var(--ufm-surface) !important;
  border-color: var(--ufm-border) !important;
}

:root[data-theme="dark"] .compact-menu-trigger img,
:root[data-theme="dark"] .wide-menu-trigger img,
:root[data-theme="dark"] .ufm-auth-menu img,
:root[data-theme="dark"] button[data-mobile-menu] img {
  filter: brightness(0) invert(1) !important;
}

:root[data-theme="dark"] .mobile-menu-sheet :is(.mobile-sheet-routes, .mobile-sheet-tools, .mobile-sheet-account, .mobile-sheet-languages) :is(a, button, span, b) {
  color: var(--ufm-text) !important;
}

:root[data-theme="dark"] .mobile-menu-sheet :is(.mobile-sheet-routes, .mobile-sheet-tools) img {
  filter: none !important;
}


/* ================================================================
   15. ACCESSIBILITY
   ================================================================ */

@media (pointer: coarse) {
  :is(.topbar, .ufm-auth-public-header) :is(a, button, summary) {
    min-width: var(--ufm-touch-target);
    min-height: var(--ufm-touch-target);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .compact-menu-trigger,
  .ufm-auth-menu,
  button[data-mobile-menu],
  .cart-trigger,
  .compact-cart-trigger,
  .ufm-auth-cart {
    border: 2px solid ButtonText !important;
  }
}


/* ================================================================
   16. MOBILE BOTTOM NAV
   ================================================================ */

.mobile-app-nav.ufm-public-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--ufm-z-header);
  background: var(--ufm-surface);
  border-top: 1px solid var(--ufm-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.25rem 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.ufm-public-bottom-nav :is(a, button) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.375rem 0.5rem;
  min-width: 48px;
  min-height: var(--ufm-touch-target);
  color: var(--ufm-text);
  text-decoration: none;
  font-size: 0.6875rem;
  font-weight: var(--ufm-weight-medium);
  background: none;
  border: none;
  cursor: pointer;
}

.ufm-public-bottom-nav :is(a, button).active,
.ufm-public-bottom-nav :is(a, button)[aria-current] {
  color: var(--ufm-primary);
}

.ufm-public-bottom-nav img {
  width: 20px;
  height: 20px;
}

/* Show bottom nav only on mobile */
@media (min-width: 768px) {
  .mobile-app-nav.ufm-public-bottom-nav {
    display: none !important;
  }
}


/* ================================================================
   12. AUDIT 2026-10-24 — spacing, grid alignment, contrast
   ================================================================ */

/* Headers are sticky (section 2a), so they already take their height in the
   flow. Older page sheets still reserve that height on <main>; drop the
   duplicate and keep a single 10px gap above the first content block. */
body:not(.public-card-body):has(> :is(.topbar, .ufm-auth-public-header, .shop-header, .legal-header, .blog-header, .ufm-contact-head, .partner-head, .dash-head)) > main {
  margin-top: 0 !important;
  padding-top: 10px !important;
}

/* Large screens: header content sits on the same grid as main > .view
   (width min(1480px, 100% - clamp(24px,5vw,80px)) + hero inline padding). */
@media (min-width: 1200px) {
  body:not(.public-card-body) > :is(.topbar, header.topbar, .ufm-auth-public-header, .shop-header, .legal-header, .blog-header) {
    padding-inline: calc((100% - min(1480px, 100% - clamp(24px, 5vw, 80px))) / 2 + clamp(30px, 5vw, 76px)) !important;
  }
}

/* 480-767px: "Créer un compte" stays in the menu sheet; in the bar it pushed
   the menu and theme controls off-screen. */
@media (max-width: 767px) {
  body:not(.public-card-body) > :is(.topbar, .ufm-auth-public-header, .shop-header) .account-actions > .nav-cta {
    display: none !important;
  }
}

/* Header disclosure controls (language, menu): 44px targets. */
body:not(.public-card-body) > :is(.topbar, .ufm-auth-public-header, .shop-header, .legal-header, .blog-header) summary {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dark theme: white on #2CC5D2 is 2.09:1; dark ink reaches 8.5:1. */
:root[data-theme="dark"] .nav-cta,
:root[data-theme="dark"] body:has(.ufm-global-controls) .topbar .account-actions > .nav-cta {
  color: #0B1A1D !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-cta {
    color: #0B1A1D !important;
  }
}

/* e-shop variant links ("Badge silicone", "Badge métal") are tap targets. */
.eshop-page .variant-permalink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}