/**
 * Clash Grotesk Font Family
 * Maximum allowed weight: Semibold (600). Bold (700+) is mapped to Semibold.
 */

/* Unified family: ClashGrotesk */
@font-face {
  font-family: 'ClashGrotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Extralight.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Extralight.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Extralight.ttf') format('truetype'),
       url('/fonts/clash-grotesk/ClashGrotesk-Extralight.otf') format('opentype');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Light.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Light.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Light.ttf') format('truetype'),
       url('/fonts/clash-grotesk/ClashGrotesk-Light.otf') format('opentype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Regular.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Regular.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Regular.ttf') format('truetype'),
       url('/fonts/clash-grotesk/ClashGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Medium.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Medium.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Medium.ttf') format('truetype'),
       url('/fonts/clash-grotesk/ClashGrotesk-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Semibold.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.ttf') format('truetype'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

/* Bold (700) mapped to Semibold (600) */
@font-face {
  font-family: 'ClashGrotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Semibold.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.ttf') format('truetype'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.otf') format('opentype');
  font-weight: 700 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Variable.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Variable.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Variable.ttf') format('truetype');
  font-weight: 200 600;
  font-display: swap;
  font-style: normal;
}

/* Alias: Clash Grotesk */
@font-face {
  font-family: 'Clash Grotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Extralight.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Extralight.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Extralight.ttf') format('truetype'),
       url('/fonts/clash-grotesk/ClashGrotesk-Extralight.otf') format('opentype');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Clash Grotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Light.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Light.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Light.ttf') format('truetype'),
       url('/fonts/clash-grotesk/ClashGrotesk-Light.otf') format('opentype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Clash Grotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Regular.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Regular.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Regular.ttf') format('truetype'),
       url('/fonts/clash-grotesk/ClashGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Clash Grotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Medium.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Medium.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Medium.ttf') format('truetype'),
       url('/fonts/clash-grotesk/ClashGrotesk-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Clash Grotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Semibold.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.ttf') format('truetype'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

/* Bold (700) mapped to Semibold (600) */
@font-face {
  font-family: 'Clash Grotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Semibold.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.ttf') format('truetype'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.otf') format('opentype');
  font-weight: 700 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Clash Grotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Variable.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Variable.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Variable.ttf') format('truetype');
  font-weight: 200 600;
  font-display: swap;
  font-style: normal;
}

/* Specific Named Font Faces */
@font-face {
  font-family: 'ClashGrotesk-Extralight';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Extralight.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Extralight.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Extralight.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashGrotesk-Light';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Light.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Light.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashGrotesk-Regular';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Regular.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Regular.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashGrotesk-Medium';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Medium.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Medium.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashGrotesk-Semibold';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Semibold.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
/* Any request for ClashGrotesk-Bold renders Semibold */
@font-face {
  font-family: 'ClashGrotesk-Bold';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Semibold.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashGrotesk-Variable';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Variable.woff2') format('woff2'),
       url('/fonts/clash-grotesk/ClashGrotesk-Variable.woff') format('woff'),
       url('/fonts/clash-grotesk/ClashGrotesk-Variable.ttf') format('truetype');
  font-weight: 200 600;
  font-display: swap;
  font-style: normal;
}

/* Global Font & Weight Constraints (Max Weight: Semibold 600) */
:root, :host {
  --font-sans: 'ClashGrotesk', 'Clash Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --default-font-family: 'ClashGrotesk', 'Clash Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-weight-bold: 600 !important;
  --font-weight-extrabold: 600 !important;
  --font-weight-black: 600 !important;
}

html, body, #root {
  font-family: 'ClashGrotesk', 'Clash Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
}

.font-sans {
  font-family: 'ClashGrotesk', 'Clash Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Maximum font weight cap: no bold (max is semibold / 600) */
b, strong, th,
h1, h2, h3, h4, h5, h6,
.font-bold,
.font-extrabold,
.font-black {
  font-weight: 600 !important;
  --tw-font-weight: 600 !important;
}

/* ==========================================================================
   Motion-Primitives TextGradient Flow for Headers
   Palette: #4F39F6, #7C3AED, #6366F1, #3B82F6, #818CF8, #432DD7 (Finflows Palette)
   ========================================================================== */

/* Keyframes matching TextGradient component animate={{ backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"] }} */
@keyframes text-gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* CSS Selectors 1 to 7 + semantic selectors for section headers */
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#solution:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > h2:nth-of-type(1) > span:nth-of-type(1),
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#cibles:nth-of-type(4) > div:nth-of-type(1) > div:nth-of-type(1) > h2:nth-of-type(1) > span:nth-of-type(1),
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#fonctionnalites:nth-of-type(5) > div:nth-of-type(1) > div:nth-of-type(1) > h2:nth-of-type(1) > span:nth-of-type(1),
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#comment-ca-marche:nth-of-type(6) > div:nth-of-type(1) > div:nth-of-type(1) > h2:nth-of-type(1) > span:nth-of-type(1),
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#temoignages:nth-of-type(7) > div:nth-of-type(2) > div:nth-of-type(2) > h2:nth-of-type(1) > span:nth-of-type(1),
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#tarifs:nth-of-type(8) > div:nth-of-type(1) > div:nth-of-type(1) > h2:nth-of-type(1) > span:nth-of-type(1),
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#commencer:nth-of-type(10) > div:nth-of-type(1) > div:nth-of-type(2) > h2:nth-of-type(1) > span:nth-of-type(1),
section#solution h2 > span,
section#cibles h2 > span,
section#fonctionnalites h2 > span,
section#comment-ca-marche h2 > span,
section#temoignages h2 > span,
section#tarifs h2 > span,
section#commencer h2 > span,
section:not(#probleme):not(#accueil) h1 > span.bg-clip-text,
section:not(#probleme) h2 > span.bg-clip-text,
section:not(#probleme) h3 > span.bg-clip-text {
  display: inline-block !important;
  background-image: linear-gradient(
    135deg,
    #4F39F6 0%,
    #7C3AED 16.6%,
    #6366F1 33.3%,
    #3B82F6 50%,
    #818CF8 66.6%,
    #432DD7 83.3%,
    #4F39F6 100%
  ) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #4F39F6 !important;
  animation: text-gradient-flow 5s linear infinite !important;
  will-change: background-position !important;
}

/* Neutralize parent wrapper & words inside animated hero H1 to let chars animate individually */
section#accueil h1 span.bg-clip-text,
section#accueil h1 .text-effect-gradient-wrapper,
section#accueil h1 .text-effect-gradient-word {
  display: inline-block !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: initial !important;
  color: inherit !important;
  animation: none !important;
}

/* Base style for gradient characters in hero H1 ("sans effort.") */
section#accueil h1 .text-effect-gradient-char,
.text-effect-gradient-char {
  display: inline-block !important;
  vertical-align: baseline !important;
  background-image: linear-gradient(
    135deg,
    #4F39F6 0%,
    #7C3AED 16.6%,
    #6366F1 33.3%,
    #3B82F6 50%,
    #818CF8 66.6%,
    #432DD7 83.3%,
    #4F39F6 100%
  ) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #4F39F6 !important;
  opacity: 0;
  will-change: opacity, background-position;
}


/* Red #FF1C49 text for section#probleme highlighted title */
div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#probleme:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > h2:nth-of-type(1) > span:nth-of-type(1),
section#probleme h2 > span,
section#probleme h2 > span.bg-clip-text {
  background-image: linear-gradient(to right, #FF1C49, #FF1C49) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #FF1C49 !important;
}

/* Red #FF1C49 for card icons in section#probleme */
div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#probleme:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) svg,
section#probleme div.grid svg,
section#probleme .text-rose-600 {
  color: #FF1C49 !important;
  stroke: #FF1C49 !important;
}

/* SonarGrid background styling for section#accueil & section#temoignages */
div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#accueil:nth-of-type(1),
section#accueil,
section#temoignages {
  position: relative !important;
  overflow: hidden !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#temoignages:nth-of-type(7),
section#temoignages {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

html.dark div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#temoignages:nth-of-type(7),
html.dark section#temoignages {
  background-color: #020617 !important;
  background: #020617 !important;
}

section#accueil > div.bg-\[size\:3rem_3rem\] {
  display: none !important;
}

.sonar-grid-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 0 !important;
  opacity: 0.7 !important;
}

.sonar-grid-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 0.7 !important;
}

/* Opacité réduite de 30% pour l'effet animé derrière la section témoignages */
section#temoignages .sonar-grid-wrapper,
section#temoignages .sonar-grid-canvas,
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#temoignages:nth-of-type(7) .sonar-grid-wrapper,
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#temoignages:nth-of-type(7) .sonar-grid-canvas,
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#temoignages:nth-of-type(7) > div.sonar-grid-wrapper {
  opacity: 0.7 !important;
}

/* ==========================================================================
   Harmonized Card Contours (Based on dominant colors of each card)
   Card background colors are kept exactly as originally defined
   ========================================================================== */

/* Base transitions and elevation for landing page cards */
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#temoignages:nth-of-type(7) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1),
div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#temoignages:nth-of-type(7) > div:nth-of-type(1) > div:nth-of-type(3) > div,
section#temoignages div.grid > div,
section#probleme div.grid > div,
section#cibles div.grid > div,
section#fonctionnalites div.grid > div,
section#comment-ca-marche div.grid > div,
section#tarifs div.grid > div,
section#faq div.space-y-4 > div {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease !important;
}

/* --------------------------------------------------------------------------
   1. Section #probleme: Dominant Color = Rose / Crimson (#FF1C49 / #E11D48)
   -------------------------------------------------------------------------- */
section#probleme div.grid > div {
  border: 1px solid rgba(244, 63, 94, 0.3) !important;
  border-radius: 20px !important;
}

section#probleme div.grid > div:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(225, 29, 72, 0.75) !important;
  box-shadow: 0 16px 28px -8px rgba(244, 63, 94, 0.16), 0 4px 12px -2px rgba(0, 0, 0, 0.04) !important;
}

html.dark section#probleme div.grid > div {
  border: 1px solid rgba(244, 63, 94, 0.35) !important;
}

html.dark section#probleme div.grid > div:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(251, 113, 133, 0.75) !important;
  box-shadow: 0 16px 28px -8px rgba(244, 63, 94, 0.28), 0 4px 12px -2px rgba(0, 0, 0, 0.5) !important;
}

/* --------------------------------------------------------------------------
   2. Section #cibles: Dominant Colors:
      - Card 1 (Particuliers): Blue (#2563EB)
      - Card 2 (Freelances & Entrepreneurs): Emerald (#16A34A)
      - Card 3 (Voyageurs): Orange (#EA580C)
   -------------------------------------------------------------------------- */
/* Section Cibles : Espacement vertical standard sur desktop (32px) et double espacement sur mobile et tablette uniquement (64px) */
section#cibles div.grid,
section#cibles > div:nth-of-type(1) > div:nth-of-type(2),
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#cibles:nth-of-type(4) > div:nth-of-type(1) > div:nth-of-type(2) {
  row-gap: 2rem !important; /* 32px sur desktop */
}

@media (max-width: 1023px) {
  section#cibles div.grid,
  section#cibles > div:nth-of-type(1) > div:nth-of-type(2),
  div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#cibles:nth-of-type(4) > div:nth-of-type(1) > div:nth-of-type(2) {
    row-gap: 4rem !important; /* Double espace vertical (64px) uniquement pour mobile et tablette */
  }
}

section#cibles div.grid > div {
  border-radius: 28px !important;
  overflow: visible !important;
}

/* Cibles Card 1: Particuliers (Dominant Blue) */
section#cibles div.grid > div:nth-child(1),
section#cibles div.grid > div[class*="hover:border-blue"] {
  border: 1px solid rgba(37, 99, 235, 0.32) !important;
}

section#cibles div.grid > div:nth-child(1):hover,
section#cibles div.grid > div[class*="hover:border-blue"]:hover {
  transform: translateY(-4px) !important;
  border-color: #2563eb !important;
  box-shadow: 0 20px 32px -10px rgba(37, 99, 235, 0.22), 0 6px 14px -3px rgba(0, 0, 0, 0.04) !important;
}

html.dark section#cibles div.grid > div:nth-child(1),
html.dark section#cibles div.grid > div[class*="hover:border-blue"] {
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

html.dark section#cibles div.grid > div:nth-child(1):hover,
html.dark section#cibles div.grid > div[class*="hover:border-blue"]:hover {
  transform: translateY(-4px) !important;
  border-color: #60a5fa !important;
  box-shadow: 0 20px 32px -10px rgba(59, 130, 246, 0.32) !important;
}

/* Cibles Card 2: Freelances & Entrepreneurs (Dominant Emerald) */
section#cibles div.grid > div:nth-child(2),
section#cibles div.grid > div[class*="hover:border-emerald"] {
  border: 1px solid rgba(22, 163, 74, 0.32) !important;
}

section#cibles div.grid > div:nth-child(2):hover,
section#cibles div.grid > div[class*="hover:border-emerald"]:hover {
  transform: translateY(-4px) !important;
  border-color: #16a34a !important;
  box-shadow: 0 20px 32px -10px rgba(22, 163, 74, 0.22), 0 6px 14px -3px rgba(0, 0, 0, 0.04) !important;
}

html.dark section#cibles div.grid > div:nth-child(2),
html.dark section#cibles div.grid > div[class*="hover:border-emerald"] {
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
}

html.dark section#cibles div.grid > div:nth-child(2):hover,
html.dark section#cibles div.grid > div[class*="hover:border-emerald"]:hover {
  transform: translateY(-4px) !important;
  border-color: #4ade80 !important;
  box-shadow: 0 20px 32px -10px rgba(34, 197, 94, 0.32) !important;
}

/* Cibles Card 3: Voyageurs (Dominant Orange) */
section#cibles div.grid > div:nth-child(3),
section#cibles div.grid > div[class*="hover:border-orange"] {
  border: 1px solid rgba(234, 88, 12, 0.32) !important;
}

section#cibles div.grid > div:nth-child(3):hover,
section#cibles div.grid > div[class*="hover:border-orange"]:hover {
  transform: translateY(-4px) !important;
  border-color: #ea580c !important;
  box-shadow: 0 20px 32px -10px rgba(234, 88, 12, 0.22), 0 6px 14px -3px rgba(0, 0, 0, 0.04) !important;
}

html.dark section#cibles div.grid > div:nth-child(3),
html.dark section#cibles div.grid > div[class*="hover:border-orange"] {
  border: 1px solid rgba(249, 115, 22, 0.4) !important;
}

html.dark section#cibles div.grid > div:nth-child(3):hover,
html.dark section#cibles div.grid > div[class*="hover:border-orange"]:hover {
  transform: translateY(-4px) !important;
  border-color: #fb923c !important;
  box-shadow: 0 20px 32px -10px rgba(249, 115, 22, 0.32) !important;
}

/* --------------------------------------------------------------------------
   3. Section #fonctionnalites: Dominant Colors by feature
      - 1: Projets & Événements dédiés (Amber / Yellow)
      - 2: Gestion des dépenses (Blue)
      - 3: Analyse financière claire (Purple)
      - 4: Budgets & Plafonds en direct (Emerald)
      - 5: Scan intelligent des reçus (Indigo)
      - 6: Suivi de l’évolution temporelle (Rose)
      - 7: Export multi-formats en 1 clic (Teal)
      - 8: Multi-devises automatique (Yellow)
   -------------------------------------------------------------------------- */
section#fonctionnalites div.grid > div {
  border-radius: 24px !important;
}

/* 1. Amber */
section#fonctionnalites div.grid > div:nth-child(1),
section#fonctionnalites div.grid > div[class*="border-amber"] {
  border: 1px solid rgba(245, 158, 11, 0.38) !important;
}

section#fonctionnalites div.grid > div:nth-child(1):hover,
section#fonctionnalites div.grid > div[class*="border-amber"]:hover {
  transform: translateY(-4px) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 20px 30px -10px rgba(245, 158, 11, 0.22) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(1),
html.dark section#fonctionnalites div.grid > div[class*="border-amber"] {
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(1):hover,
html.dark section#fonctionnalites div.grid > div[class*="border-amber"]:hover {
  transform: translateY(-4px) !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 20px 30px -10px rgba(245, 158, 11, 0.3) !important;
}

/* 2. Blue */
section#fonctionnalites div.grid > div:nth-child(2),
section#fonctionnalites div.grid > div[class*="border-blue"] {
  border: 1px solid rgba(37, 99, 235, 0.35) !important;
}

section#fonctionnalites div.grid > div:nth-child(2):hover,
section#fonctionnalites div.grid > div[class*="border-blue"]:hover {
  transform: translateY(-4px) !important;
  border-color: #2563eb !important;
  box-shadow: 0 20px 30px -10px rgba(37, 99, 235, 0.22) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(2),
html.dark section#fonctionnalites div.grid > div[class*="border-blue"] {
  border: 1px solid rgba(59, 130, 246, 0.42) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(2):hover,
html.dark section#fonctionnalites div.grid > div[class*="border-blue"]:hover {
  transform: translateY(-4px) !important;
  border-color: #60a5fa !important;
  box-shadow: 0 20px 30px -10px rgba(59, 130, 246, 0.3) !important;
}

/* 3. Purple */
section#fonctionnalites div.grid > div:nth-child(3),
section#fonctionnalites div.grid > div[class*="border-purple"] {
  border: 1px solid rgba(147, 51, 234, 0.35) !important;
}

section#fonctionnalites div.grid > div:nth-child(3):hover,
section#fonctionnalites div.grid > div[class*="border-purple"]:hover {
  transform: translateY(-4px) !important;
  border-color: #9333ea !important;
  box-shadow: 0 20px 30px -10px rgba(147, 51, 234, 0.22) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(3),
html.dark section#fonctionnalites div.grid > div[class*="border-purple"] {
  border: 1px solid rgba(168, 85, 247, 0.42) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(3):hover,
html.dark section#fonctionnalites div.grid > div[class*="border-purple"]:hover {
  transform: translateY(-4px) !important;
  border-color: #c084fc !important;
  box-shadow: 0 20px 30px -10px rgba(168, 85, 247, 0.3) !important;
}

/* 4. Emerald */
section#fonctionnalites div.grid > div:nth-child(4),
section#fonctionnalites div.grid > div[class*="border-emerald"] {
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

section#fonctionnalites div.grid > div:nth-child(4):hover,
section#fonctionnalites div.grid > div[class*="border-emerald"]:hover {
  transform: translateY(-4px) !important;
  border-color: #10b981 !important;
  box-shadow: 0 20px 30px -10px rgba(16, 185, 129, 0.22) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(4),
html.dark section#fonctionnalites div.grid > div[class*="border-emerald"] {
  border: 1px solid rgba(16, 185, 129, 0.42) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(4):hover,
html.dark section#fonctionnalites div.grid > div[class*="border-emerald"]:hover {
  transform: translateY(-4px) !important;
  border-color: #34d399 !important;
  box-shadow: 0 20px 30px -10px rgba(16, 185, 129, 0.3) !important;
}

/* 5. Indigo */
section#fonctionnalites div.grid > div:nth-child(5),
section#fonctionnalites div.grid > div[class*="border-indigo"] {
  border: 1px solid rgba(79, 57, 246, 0.35) !important;
}

section#fonctionnalites div.grid > div:nth-child(5):hover,
section#fonctionnalites div.grid > div[class*="border-indigo"]:hover {
  transform: translateY(-4px) !important;
  border-color: #4f39f6 !important;
  box-shadow: 0 20px 30px -10px rgba(79, 57, 246, 0.22) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(5),
html.dark section#fonctionnalites div.grid > div[class*="border-indigo"] {
  border: 1px solid rgba(99, 102, 241, 0.42) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(5):hover,
html.dark section#fonctionnalites div.grid > div[class*="border-indigo"]:hover {
  transform: translateY(-4px) !important;
  border-color: #818cf8 !important;
  box-shadow: 0 20px 30px -10px rgba(99, 102, 241, 0.3) !important;
}

/* 6. Rose */
section#fonctionnalites div.grid > div:nth-child(6),
section#fonctionnalites div.grid > div[class*="border-rose"] {
  border: 1px solid rgba(225, 29, 72, 0.35) !important;
}

section#fonctionnalites div.grid > div:nth-child(6):hover,
section#fonctionnalites div.grid > div[class*="border-rose"]:hover {
  transform: translateY(-4px) !important;
  border-color: #e11d48 !important;
  box-shadow: 0 20px 30px -10px rgba(225, 29, 72, 0.22) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(6),
html.dark section#fonctionnalites div.grid > div[class*="border-rose"] {
  border: 1px solid rgba(244, 63, 94, 0.42) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(6):hover,
html.dark section#fonctionnalites div.grid > div[class*="border-rose"]:hover {
  transform: translateY(-4px) !important;
  border-color: #fb7185 !important;
  box-shadow: 0 20px 30px -10px rgba(244, 63, 94, 0.3) !important;
}

/* 7. Teal */
section#fonctionnalites div.grid > div:nth-child(7),
section#fonctionnalites div.grid > div[class*="border-teal"] {
  border: 1px solid rgba(13, 148, 136, 0.35) !important;
}

section#fonctionnalites div.grid > div:nth-child(7):hover,
section#fonctionnalites div.grid > div[class*="border-teal"]:hover {
  transform: translateY(-4px) !important;
  border-color: #0d9488 !important;
  box-shadow: 0 20px 30px -10px rgba(13, 148, 136, 0.22) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(7),
html.dark section#fonctionnalites div.grid > div[class*="border-teal"] {
  border: 1px solid rgba(20, 184, 166, 0.42) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(7):hover,
html.dark section#fonctionnalites div.grid > div[class*="border-teal"]:hover {
  transform: translateY(-4px) !important;
  border-color: #2dd4bf !important;
  box-shadow: 0 20px 30px -10px rgba(20, 184, 166, 0.3) !important;
}

/* 8. Yellow */
section#fonctionnalites div.grid > div:nth-child(8),
section#fonctionnalites div.grid > div[class*="border-yellow"] {
  border: 1px solid rgba(202, 138, 4, 0.35) !important;
}

section#fonctionnalites div.grid > div:nth-child(8):hover,
section#fonctionnalites div.grid > div[class*="border-yellow"]:hover {
  transform: translateY(-4px) !important;
  border-color: #ca8a04 !important;
  box-shadow: 0 20px 30px -10px rgba(202, 138, 4, 0.22) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(8),
html.dark section#fonctionnalites div.grid > div[class*="border-yellow"] {
  border: 1px solid rgba(234, 179, 8, 0.42) !important;
}

html.dark section#fonctionnalites div.grid > div:nth-child(8):hover,
html.dark section#fonctionnalites div.grid > div[class*="border-yellow"]:hover {
  transform: translateY(-4px) !important;
  border-color: #fde047 !important;
  box-shadow: 0 20px 30px -10px rgba(234, 179, 8, 0.3) !important;
}

/* --------------------------------------------------------------------------
   4. Section #comment-ca-marche: Dominant Colors by step
   -------------------------------------------------------------------------- */
section#comment-ca-marche div.grid > div {
  border-radius: 24px !important;
}

/* Step 1: Indigo */
section#comment-ca-marche div.grid > div:nth-child(1) {
  border: 1px solid rgba(79, 57, 246, 0.28) !important;
}

section#comment-ca-marche div.grid > div:nth-child(1):hover {
  transform: translateY(-4px) !important;
  border-color: #4f39f6 !important;
  box-shadow: 0 16px 28px -8px rgba(79, 57, 246, 0.18) !important;
}

/* Step 2: Purple */
section#comment-ca-marche div.grid > div:nth-child(2) {
  border: 1px solid rgba(124, 58, 237, 0.28) !important;
}

section#comment-ca-marche div.grid > div:nth-child(2):hover {
  transform: translateY(-4px) !important;
  border-color: #7c3aed !important;
  box-shadow: 0 16px 28px -8px rgba(124, 58, 237, 0.18) !important;
}

/* Step 3: Emerald */
section#comment-ca-marche div.grid > div:nth-child(3) {
  border: 1px solid rgba(5, 150, 105, 0.28) !important;
}

section#comment-ca-marche div.grid > div:nth-child(3):hover {
  transform: translateY(-4px) !important;
  border-color: #059669 !important;
  box-shadow: 0 16px 28px -8px rgba(5, 150, 105, 0.18) !important;
}

/* Step 4: Blue */
section#comment-ca-marche div.grid > div:nth-child(4) {
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
}

section#comment-ca-marche div.grid > div:nth-child(4):hover {
  transform: translateY(-4px) !important;
  border-color: #2563eb !important;
  box-shadow: 0 16px 28px -8px rgba(37, 99, 235, 0.18) !important;
}

/* --------------------------------------------------------------------------
   5. Section #temoignages: Dominant Color = Indigo (#4F39F6 / #6366F1)
   -------------------------------------------------------------------------- */
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#temoignages:nth-of-type(7) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1),
div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#temoignages:nth-of-type(7) > div:nth-of-type(1) > div:nth-of-type(3) > div,
section#temoignages div.grid > div {
  border: 1px solid rgba(79, 57, 246, 0.25) !important;
  border-radius: 24px !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#temoignages:nth-of-type(7) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1):hover,
div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#temoignages:nth-of-type(7) > div:nth-of-type(1) > div:nth-of-type(3) > div:hover,
section#temoignages div.grid > div:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(79, 57, 246, 0.6) !important;
  box-shadow: 0 20px 30px -10px rgba(79, 57, 246, 0.18), 0 6px 14px -3px rgba(0, 0, 0, 0.04) !important;
}

html.dark div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#temoignages:nth-of-type(7) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1),
html.dark div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#temoignages:nth-of-type(7) > div:nth-of-type(1) > div:nth-of-type(3) > div,
html.dark section#temoignages div.grid > div {
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
}

html.dark div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#temoignages:nth-of-type(7) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1):hover,
html.dark div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#temoignages:nth-of-type(7) > div:nth-of-type(1) > div:nth-of-type(3) > div:hover,
html.dark section#temoignages div.grid > div:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(129, 140, 248, 0.6) !important;
  box-shadow: 0 20px 30px -10px rgba(99, 102, 241, 0.28) !important;
}

/* --------------------------------------------------------------------------
   6. Section #tarifs: Dominant Colors:
      - Plan Gratuit: Slate/Cool gray (#64748B)
      - Plan Pro (Popular): Indigo/Violet (#6366F1 / #4F39F6)
      - Plan Entreprise: Deep Purple/Indigo (#7C3AED)
   -------------------------------------------------------------------------- */
section#tarifs div.grid > div {
  border-radius: 28px !important;
  overflow: visible !important;
}

/* Plan Gratuit */
section#tarifs div.grid > div:nth-child(1) {
  border: 1px solid rgba(100, 116, 139, 0.28) !important;
}

section#tarifs div.grid > div:nth-child(1):hover {
  transform: translateY(-4px) !important;
  border-color: rgba(100, 116, 139, 0.6) !important;
  box-shadow: 0 16px 30px -8px rgba(100, 116, 139, 0.18) !important;
}

html.dark section#tarifs div.grid > div:nth-child(1) {
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
}

html.dark section#tarifs div.grid > div:nth-child(1):hover {
  transform: translateY(-4px) !important;
  border-color: rgba(148, 163, 184, 0.6) !important;
}

/* Plan Pro */
section#tarifs div.grid > div:nth-child(2),
section#tarifs div.grid > div[class*="border-[#6366F1]"],
section#tarifs div.grid > div[class*="border-2"] {
  border: 2px solid #6366f1 !important;
  box-shadow: 0 10px 30px -5px rgba(99, 102, 241, 0.22), 0 4px 12px -2px rgba(0, 0, 0, 0.04) !important;
}

section#tarifs div.grid > div:nth-child(2):hover,
section#tarifs div.grid > div[class*="border-[#6366F1]"]:hover,
section#tarifs div.grid > div[class*="border-2"]:hover {
  transform: translateY(-6px) !important;
  border-color: #4f39f6 !important;
  box-shadow: 0 24px 44px -8px rgba(99, 102, 241, 0.32), 0 8px 16px -4px rgba(0, 0, 0, 0.06) !important;
}

html.dark section#tarifs div.grid > div:nth-child(2),
html.dark section#tarifs div.grid > div[class*="border-[#6366F1]"],
html.dark section#tarifs div.grid > div[class*="border-2"] {
  border: 2px solid #818cf8 !important;
  box-shadow: 0 10px 30px -5px rgba(99, 102, 241, 0.35), 0 4px 12px -2px rgba(0, 0, 0, 0.5) !important;
}

html.dark section#tarifs div.grid > div:nth-child(2):hover,
html.dark section#tarifs div.grid > div[class*="border-[#6366F1]"]:hover,
html.dark section#tarifs div.grid > div[class*="border-2"]:hover {
  transform: translateY(-6px) !important;
  border-color: #a5b4fc !important;
  box-shadow: 0 24px 44px -8px rgba(99, 102, 241, 0.5), 0 8px 16px -4px rgba(0, 0, 0, 0.7) !important;
}

/* Plan Entreprise */
section#tarifs div.grid > div:nth-child(3) {
  border: 1px solid rgba(124, 58, 237, 0.32) !important;
}

section#tarifs div.grid > div:nth-child(3):hover {
  transform: translateY(-4px) !important;
  border-color: rgba(124, 58, 237, 0.65) !important;
  box-shadow: 0 20px 32px -8px rgba(124, 58, 237, 0.22) !important;
}

html.dark section#tarifs div.grid > div:nth-child(3) {
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
}

html.dark section#tarifs div.grid > div:nth-child(3):hover {
  transform: translateY(-4px) !important;
  border-color: rgba(192, 132, 252, 0.65) !important;
}

/* Pricing plan inner price highlight box */
section#tarifs div.grid > div div[class*="rounded-[16px]"] {
  border: 1px solid rgba(80, 71, 245, 0.16) !important;
}

html.dark section#tarifs div.grid > div div[class*="rounded-[16px]"] {
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
}

/* --------------------------------------------------------------------------
   7. Section #faq: Dominant Color = Indigo (#4F39F6)
   -------------------------------------------------------------------------- */
section#faq div.space-y-4 > div {
  border: 1px solid rgba(79, 57, 246, 0.2) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

section#faq div.space-y-4 > div:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(79, 57, 246, 0.5) !important;
  box-shadow: 0 10px 24px -6px rgba(79, 57, 246, 0.12) !important;
}

html.dark section#faq div.space-y-4 > div {
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
}

html.dark section#faq div.space-y-4 > div:hover {
  border-color: rgba(129, 140, 248, 0.5) !important;
}

/* Specific adjustments for section#probleme */
section#probleme div.grid > div {
  border-radius: 20px !important;
}

/* Problem card icons: elegant soft tinted container */
section#probleme div.grid > div > div > div:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: rgba(244, 63, 94, 0.08) !important;
  border: 1px solid rgba(244, 63, 94, 0.18) !important;
  margin-bottom: 16px !important;
}

html.dark section#probleme div.grid > div > div > div:first-child {
  background: rgba(244, 63, 94, 0.18) !important;
  border: 1px solid rgba(244, 63, 94, 0.3) !important;
}

section#probleme div.grid > div > div > div:first-child svg {
  width: 22px !important;
  height: 22px !important;
  color: #e11d48 !important;
}

/* Specific adjustments for section#faq */
section#faq div.space-y-4 > div {
  border-radius: 20px !important;
  overflow: hidden !important;
}

section#faq div.space-y-4 > div:hover {
  transform: translateY(-2px) !important;
}

section#faq div.space-y-4 > div button {
  background: transparent !important;
}

section#faq div.space-y-4 > div div[class*="border-t"] {
  background: transparent !important;
  border-top: 1px solid rgba(80, 71, 245, 0.1) !important;
}

html.dark section#faq div.space-y-4 > div div[class*="border-t"] {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Eyebrow badge pill matching SonarGrid demo with live dot */
section#temoignages div.grid > div span.rounded-full {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 12px !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  background: rgba(80, 71, 245, 0.06) !important;
  border: 1px solid rgba(80, 71, 245, 0.22) !important;
  color: #5047f5 !important;
  box-shadow: 0 1px 2px rgba(80, 71, 245, 0.05) !important;
}

html.dark section#temoignages div.grid > div span.rounded-full {
  background: rgba(80, 71, 245, 0.18) !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  color: #a5b4fc !important;
}

section#temoignages div.grid > div span.rounded-full::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 9999px !important;
  background-color: #5047f5 !important;
  box-shadow: 0 0 6px rgba(80, 71, 245, 0.7) !important;
  flex-shrink: 0 !important;
}

html.dark section#temoignages div.grid > div span.rounded-full::before {
  background-color: #818cf8 !important;
  box-shadow: 0 0 6px rgba(129, 140, 248, 0.8) !important;
}

/* Quote text */
section#temoignages div.grid > div p {
  font-style: normal !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: #334155 !important;
  letter-spacing: -0.01em !important;
}

html.dark section#temoignages div.grid > div p {
  color: #cbd5e1 !important;
}

/* Card footer author section */
section#temoignages div.grid > div > div.border-t {
  border-top: 1px solid rgba(80, 71, 245, 0.1) !important;
  padding-top: 16px !important;
}

html.dark section#temoignages div.grid > div > div.border-t {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

section#temoignages div.grid > div img.rounded-full {
  border: 2px solid rgba(80, 71, 245, 0.25) !important;
  box-shadow: 0 2px 6px rgba(80, 71, 245, 0.15) !important;
}

/* ==========================================================================
   Motion-Primitives TextEffect Styles (for Hero H1)
   Preset: slide + blur + fade with stagger per character
   ========================================================================== */

div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#accueil:nth-of-type(1) > div:nth-of-type(6) > div:nth-of-type(1) > h1:nth-of-type(1),
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#accueil:nth-of-type(1) > div:nth-of-type(6) > div:nth-of-type(1) > h1:nth-of-type(1),
section#accueil h1 {
  cursor: default;
  user-select: text;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html.dark div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#accueil:nth-of-type(1) > div:nth-of-type(6) > div:nth-of-type(1) > h1:nth-of-type(1),
html.dark div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#accueil:nth-of-type(1) > div:nth-of-type(6) > div:nth-of-type(1) > h1:nth-of-type(1),
html.dark section#accueil h1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.text-effect-plain-word,
.text-effect-plain-char,
section#accueil h1 .text-effect-plain-char,
section#accueil h1 .text-effect-char:not(.text-effect-gradient-char) {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

html.dark .text-effect-plain-word,
html.dark .text-effect-plain-char,
html.dark section#accueil h1 .text-effect-plain-char,
html.dark section#accueil h1 .text-effect-char:not(.text-effect-gradient-char) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  background-image: none !important;
}

.text-effect-word {
  display: inline-block !important;
  white-space: nowrap !important;
  vertical-align: baseline !important;
}

.text-effect-space {
  display: inline-block !important;
  vertical-align: baseline !important;
  width: 0.28em !important;
}

.text-effect-char {
  display: inline-block !important;
  vertical-align: baseline !important;
  opacity: 0;
  filter: blur(0px);
  transform: translateY(0);
  will-change: opacity, filter, transform;
}

/* Loop phase: Entering (TextEffectPerChar sequential reveal) */
.text-effect-container.is-entering .text-effect-char {
  animation: text-effect-fade-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  animation-delay: calc(var(--char-index, 0) * 0.024s) !important;
}
.text-effect-container.is-entering .text-effect-gradient-char {
  animation: text-effect-fade-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards, text-gradient-flow 5s linear infinite !important;
  animation-delay: calc(var(--char-index, 0) * 0.024s), 0s !important;
}

/* Loop phase: Fully Visible */
.text-effect-container.is-visible .text-effect-char {
  opacity: 1 !important;
  filter: blur(0px) !important;
  transform: translateY(0) !important;
  animation: none !important;
}
.text-effect-container.is-visible .text-effect-gradient-char {
  opacity: 1 !important;
  filter: blur(0px) !important;
  transform: translateY(0) !important;
  animation: text-gradient-flow 5s linear infinite !important;
}

/* Loop phase: Exiting (3x plus doux : Scale + Transparence + Blur out) */
.text-effect-container.is-exiting .text-effect-char {
  animation: text-effect-exit-scale 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
  animation-delay: calc(var(--char-index, 0) * 0.015s) !important;
}
.text-effect-container.is-exiting .text-effect-gradient-char {
  animation: text-effect-exit-scale 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards, text-gradient-flow 5s linear infinite !important;
  animation-delay: calc(var(--char-index, 0) * 0.015s), 0s !important;
}

/* Loop phase: Hidden (ready for next entrance) */
.text-effect-container.is-hidden .text-effect-char,
.text-effect-container.is-hidden .text-effect-gradient-char {
  opacity: 0 !important;
  filter: blur(6px) !important;
  transform: translateY(0) scale(0.88) !important;
  animation: none !important;
}

@keyframes text-effect-fade-in {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(0) scale(0.94);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0) scale(1);
  }
}

@keyframes text-effect-exit-scale {
  0% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(-6px) scale(0.88);
  }
}


/* ==========================================================================
   Aurora Background + 21st.dev Lab Dot Matrix Effect (from #1120)
   URL: https://cdn.21st.dev/bundled/1120.html?theme=light&pv=1
   ========================================================================== */

/* Section #accueil Background & Padding override (CSS selector 1 in Focus Mode) */
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#accueil:nth-of-type(1),
div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#accueil:nth-of-type(1),
section#accueil {
  background-color: #fafafa !important; /* bg-zinc-50 from 21st.dev demo */
  background-image: none !important;
  position: relative !important;
  overflow: hidden !important;
  padding-top: 7rem !important; /* pt-28 original (112px) */
  padding-bottom: 5rem !important; /* pb-20 original (80px) */
  transition: background-color 0.3s ease;
}

@media (min-width: 768px) {
  div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#accueil:nth-of-type(1),
  div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#accueil:nth-of-type(1),
  section#accueil {
    padding-top: 9rem !important; /* md:pt-36 original (144px) */
    padding-bottom: 7rem !important; /* md:pb-28 original (112px) */
  }
}

html.dark div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#accueil:nth-of-type(1),
html.dark div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#accueil:nth-of-type(1),
html.dark section#accueil {
  background-color: #18181b !important; /* bg-zinc-900 from 21st.dev demo */
  background-image: none !important;
}

/* Hide legacy static grid overlay inside section#accueil */
section#accueil > div[class*="linear-gradient"] {
  display: none !important;
}

/* Aurora Background root */
.aurora-bg-root {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Aurora Waves Layer */
.aurora-waves-layer {
  --white-gradient: repeating-linear-gradient(100deg, #ffffff 0%, #ffffff 7%, transparent 10%, transparent 12%, #ffffff 16%);
  --dark-gradient: repeating-linear-gradient(100deg, #000000 0%, #000000 7%, transparent 10%, transparent 12%, #000000 16%);
  --aurora: repeating-linear-gradient(100deg, #3b82f6 10%, #a5b4fc 15%, #93c5fd 20%, #ddd6fe 25%, #60a5fa 30%);
  position: absolute !important;
  inset: -10px !important;
  background-image: var(--white-gradient), var(--aurora) !important;
  background-size: 300% 200% !important;
  background-position: 50% 50%, 50% 50% !important;
  filter: blur(10px) invert(1) !important;
  opacity: 0.55 !important;
  will-change: transform !important;
  pointer-events: none !important;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%) !important;
  mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%) !important;
}

html.dark .aurora-waves-layer {
  background-image: var(--dark-gradient), var(--aurora) !important;
  filter: blur(10px) invert(0) !important;
  opacity: 0.45 !important;
}

.aurora-waves-layer::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: var(--white-gradient), var(--aurora) !important;
  background-size: 200% 100% !important;
  background-attachment: fixed !important;
  mix-blend-mode: difference !important;
  animation: aurora 60s linear infinite !important;
  pointer-events: none !important;
}

html.dark .aurora-waves-layer::after {
  background-image: var(--dark-gradient), var(--aurora) !important;
}

@keyframes aurora {
  0% {
    background-position: 50% 50%, 50% 50%;
  }
  100% {
    background-position: 350% 50%, 350% 50%;
  }
}

/* 21st.dev Lab Dot Matrix & Ripple Effect */
@keyframes ripple {
  0% {
    opacity: 0;
    background-size: 0 0;
    transform: scale(0.1);
    -webkit-mask-image: radial-gradient(circle at center, black 0%, black 0%, transparent 2%, transparent 100%);
    mask-image: radial-gradient(circle at center, black 0%, black 0%, transparent 2%, transparent 100%);
  }
  10% {
    opacity: 1;
    background-size: 16px 16px;
    transform: scale(0.2);
    -webkit-mask-image: radial-gradient(circle at center, black 0%, black 8%, transparent 12%, transparent 100%);
    mask-image: radial-gradient(circle at center, black 0%, black 8%, transparent 12%, transparent 100%);
  }
  50% {
    transform: scale(0.6);
    -webkit-mask-image: radial-gradient(circle at center, transparent 0%, black 48%, transparent 52%, transparent 100%);
    mask-image: radial-gradient(circle at center, transparent 0%, black 48%, transparent 52%, transparent 100%);
  }
  100% {
    opacity: 0;
    background-size: 0 0;
    transform: scale(1);
    -webkit-mask-image: radial-gradient(circle at center, transparent 0%, transparent 100%);
    mask-image: radial-gradient(circle at center, transparent 0%, transparent 100%);
  }
}

/* Remove dot pattern from section#accueil background */
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#accueil:nth-of-type(1),
div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#accueil:nth-of-type(1),
section#accueil {
  background-image: none !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#accueil:nth-of-type(1)::before,
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#accueil:nth-of-type(1)::after,
section#accueil::before,
section#accueil::after {
  background-image: none !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#accueil:nth-of-type(1) .lab-bg,
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#accueil:nth-of-type(1) .lab-dots,
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#accueil:nth-of-type(1) .sonar-grid-wrapper,
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#accueil:nth-of-type(1) > div[class*="linear-gradient"],
div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#accueil:nth-of-type(1) > div.bg-\[size\:3rem_3rem\],
div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#accueil:nth-of-type(1) .lab-bg,
div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > section#accueil:nth-of-type(1) .lab-dots,
section#accueil .lab-bg,
section#accueil .lab-dots,
section#accueil .sonar-grid-wrapper,
section#accueil > div[class*="linear-gradient"],
section#accueil > div.bg-\[size\:3rem_3rem\],
.lab-bg,
.lab-dots {
  display: none !important;
  background-image: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep background blur blobs and decorative overlays strictly absolute and out-of-flow */
section#accueil > div[class*="blur-3xl"],
section#accueil > div[class*="rounded-full"],
section#accueil > div[class*="linear-gradient"] {
  position: absolute !important;
  pointer-events: none !important;
}

/* Elevate the hero content wrapper above the background layers */
section#accueil > div.max-w-7xl {
  position: relative !important;
  z-index: 10 !important;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .text-effect-char {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .aurora-waves-layer::after {
    animation: none !important;
  }
  .lab-bg::before {
    animation: none !important;
  }
}

/* ==========================================================================
   FinFlows Scrolling Animation Effects
   1. Smooth root scroll behavior
   2. Top Reading Progress Indicator
   3. Floating Circular Back-to-Top with SVG Progress Ring
   4. Staggered Scroll-Reveal Animations for Headers & Cards
   5. Subtle Scroll Depth Dynamics
   ========================================================================== */

html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 84px !important;
}

section, [id], main > section,
#accueil,
#probleme,
#solution,
#cibles,
#fonctionnalites,
#comment-ca-marche,
#temoignages,
#tarifs,
#faq,
#commencer {
  scroll-margin-top: 84px !important;
}

/* --- 1. Top Reading Scroll Progress Bar --- */
.finflows-scroll-progress-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 0%;
  height: 3.5px !important;
  background: linear-gradient(90deg, #4F39F6 0%, #7C3AED 45%, #06B6D4 100%) !important;
  box-shadow: 0 0 12px rgba(79, 57, 246, 0.7), 0 0 4px rgba(6, 182, 212, 0.5) !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  transition: width 0.08s ease-out !important;
  border-top-right-radius: 2px !important;
  border-bottom-right-radius: 2px !important;
}

/* --- 2. Floating Circular Back-To-Top Button with Progress Ring --- */
.finflows-back-to-top {
  pointer-events: auto !important;
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  cursor: pointer !important;
  user-select: none !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border: 1px solid rgba(79, 57, 246, 0.22) !important;
  box-shadow: 0 10px 25px -4px rgba(79, 57, 246, 0.2), 0 4px 10px -2px rgba(0, 0, 0, 0.04) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(16px) scale(0.88) !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.3s ease,
              border-color 0.25s ease !important;
}

.finflows-back-to-top * {
  pointer-events: none !important;
}

.finflows-back-to-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.finflows-back-to-top:hover {
  transform: translateY(-4px) scale(1.08) !important;
  border-color: rgba(79, 57, 246, 0.5) !important;
  box-shadow: 0 14px 30px -4px rgba(79, 57, 246, 0.32), 0 6px 14px -2px rgba(0, 0, 0, 0.06) !important;
}

.finflows-back-to-top .progress-ring {
  position: absolute !important;
  inset: 2px !important;
  width: 44px !important;
  height: 44px !important;
  transform: rotate(-90deg) !important;
}

.finflows-back-to-top .progress-ring-bg {
  stroke: rgba(79, 57, 246, 0.12) !important;
}

.finflows-back-to-top .progress-ring-circle {
  stroke: #4F39F6 !important;
  stroke-linecap: round !important;
  transition: stroke-dashoffset 0.1s linear !important;
}

.finflows-back-to-top .back-to-top-icon {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #4F39F6 !important;
  transition: transform 0.2s ease !important;
}

.finflows-back-to-top:hover .back-to-top-icon {
  transform: translateY(-2px) !important;
}

/* Dark mode for Back-to-Top */
html.dark .finflows-back-to-top {
  pointer-events: auto !important;
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1px solid rgba(99, 102, 241, 0.32) !important;
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.6) !important;
}

html.dark .finflows-back-to-top:hover {
  border-color: rgba(129, 140, 248, 0.65) !important;
  box-shadow: 0 14px 30px -4px rgba(99, 102, 241, 0.35), 0 6px 14px -2px rgba(0, 0, 0, 0.7) !important;
}

html.dark .finflows-back-to-top .progress-ring-bg {
  stroke: rgba(255, 255, 255, 0.1) !important;
}

html.dark .finflows-back-to-top .progress-ring-circle {
  stroke: #818CF8 !important;
}

html.dark .finflows-back-to-top .back-to-top-icon {
  color: #818CF8 !important;
}

.finflows-back-to-top .back-to-top-tooltip {
  position: absolute !important;
  right: calc(100% + 12px) !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(6px) !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 1000000 !important;
}

.finflows-back-to-top:hover .back-to-top-tooltip {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;
}

@media (max-width: 640px) {
  .finflows-back-to-top {
    bottom: 20px !important;
    right: 18px !important;
    width: 44px !important;
    height: 44px !important;
  }
  .finflows-back-to-top .progress-ring {
    width: 40px !important;
    height: 40px !important;
    inset: 2px !important;
  }
  .finflows-back-to-top .back-to-top-tooltip {
    display: none !important;
  }
}

/* --- 3. Scroll Reveal Elements: Safe, non-blocking visual styles --- */

.scroll-reveal-item {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.scroll-reveal-item.rhythmic-tier-1,
.scroll-reveal-item.rhythmic-tier-2,
.scroll-reveal-item.rhythmic-tier-3,
.scroll-reveal-item.reveal-header-container,
.scroll-reveal-item.reveal-header,
.scroll-reveal-item.reveal-card,
.scroll-reveal-item.reveal-scale {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Header Rhythmic Child Cascade */
.rhythmic-child {
  opacity: 1 !important;
  transform: none !important;
}

.rhythmic-child.rhythmic-tier-1,
.rhythmic-child.rhythmic-tier-2,
.rhythmic-child.rhythmic-tier-3,
.rhythmic-child.scroll-revealed {
  opacity: 1 !important;
  transform: none !important;
}

.rhythmic-icon {
  opacity: 1 !important;
  transform: none !important;
}

.scroll-reveal-item:not(.scroll-revealed) .rhythmic-icon,
.scroll-reveal-item.scroll-revealed .rhythmic-icon {
  transform: none !important;
  opacity: 1 !important;
}

.scroll-reveal-item.scroll-revealed {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* --- Living Harmonic Breathing Dynamics --- */
/* Once cards settle, they breathe with an organic, out-of-phase floating rhythm */
@keyframes finflowsHarmonicFloat1 {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4.5px);
  }
}

@keyframes finflowsHarmonicFloat2 {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5.5px);
  }
}

@keyframes finflowsHarmonicFloat3 {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4.5px);
  }
}

.rhythmic-card.is-living.rhythmic-tier-1 {
  animation: finflowsHarmonicFloat1 6.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite !important;
}

.rhythmic-card.is-living.rhythmic-tier-2 {
  animation: finflowsHarmonicFloat2 6.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) -2.3s infinite !important;
}

.rhythmic-card.is-living.rhythmic-tier-3 {
  animation: finflowsHarmonicFloat3 7.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) -4.6s infinite !important;
}

/* When the user hovers over a living card, the ambient wave pauses and user elevation takes priority */
.rhythmic-card.is-living:hover {
  animation-play-state: paused !important;
}

/* Once animation is fully settled, transition back to standard hover speed */
.scroll-reveal-item.reveal-card[data-animation-done="true"] {
  will-change: transform, box-shadow;
}

/* --- Scroll System Styles --- */
html {
  overflow-x: hidden;
  overflow-y: auto !important;
  scroll-behavior: smooth !important;
  scroll-padding-top: 84px !important;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
}

section#accueil div.mt-12,
section#accueil div.mt-10 {
  transform: translateY(var(--parallax-y, 0px));
  transition: transform 0.1s linear;
  will-change: transform;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  .scroll-reveal-item,
  .rhythmic-child {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
  .rhythmic-card.is-living {
    animation: none !important;
  }
  .finflows-back-to-top {
  pointer-events: auto !important;
    transition: opacity 0.1s linear !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Adapted from: @/components/ui/tailwind-css-background-snippet (Hero)
   Targeted to: div#root:nth-of-type(1) > div:nth-of-type(1) > footer:nth-of-type(1) > div:nth-of-type(1)
   ========================================================================== */
/* ==========================================================================
   Targeted to: div#root:nth-of-type(1) > div:nth-of-type(1) > header:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > button:nth-of-type(2)
   Remove arrow from CTA button
   ========================================================================== */
div#root:nth-of-type(1) > div:nth-of-type(1) > header:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > button:nth-of-type(2) svg,
header div.hidden.sm\:flex > button:nth-of-type(2) svg {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   Adapted from: @/components/ui/tailwind-css-background-snippet (Hero)
   Targeted to: div#root:nth-of-type(1) > div:nth-of-type(1) > footer:nth-of-type(1) > div:nth-of-type(1)
   Violet color specified: rgba(50, 8, 110, 1)
   ========================================================================== */
footer,
div#root:nth-of-type(1) > div:nth-of-type(1) > footer:nth-of-type(1) {
  position: relative !important;
  overflow: hidden !important;
  background-color: #020108 !important;
  background: radial-gradient(125% 125% at 50% 10%, #000000 40%, rgba(50, 8, 110, 1) 100%) !important;
  border-top: 1px solid rgba(50, 8, 110, 0.4) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 -20px 48px -12px rgba(50, 8, 110, 0.35) !important;
}

/* Subtle coordinate grid pattern layer */
div#root:nth-of-type(1) > div:nth-of-type(1) > footer:nth-of-type(1)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 50%, transparent 100%) !important;
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 50%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Atmospheric ambient radial top glow with rgba(50, 8, 110, 1) tone */
div#root:nth-of-type(1) > div:nth-of-type(1) > footer:nth-of-type(1)::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 900px !important;
  max-width: 100vw !important;
  height: 280px !important;
  background: radial-gradient(circle, rgba(50, 8, 110, 0.28) 0%, rgba(50, 8, 110, 0.08) 45%, transparent 70%) !important;
  filter: blur(45px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Selected Focus Element: div#root:nth-of-type(1) > div:nth-of-type(1) > footer:nth-of-type(1) > div:nth-of-type(1) */
div#root:nth-of-type(1) > div:nth-of-type(1) > footer:nth-of-type(1) > div:nth-of-type(1) {
  position: relative !important;
  z-index: 10 !important;
}

/* ==========================================================================
   FinFlows Design System Alignment (Landing Page <-> Application)
   Harmonizes Dashboard, Expenses, Projects, Budgets, Analytics, Bank Accounts,
   Settings, Onboarding, Modals, Forms, Tables, Badges, Toasts & Tooltips.
   ========================================================================== */

/* --- 1. Global Color Tokens & CSS Variables Override --- */
:root {
  --app-brand: #4F39F6 !important;
  --app-brand-hover: #432DD7 !important;
  --app-brand-active: #3722BF !important;
  --app-brand-subtle: rgba(79, 57, 246, 0.08) !important;
  --app-brand-glow: rgba(79, 57, 246, 0.25) !important;
  --app-bg: #F8FAFC !important;
  --app-surface: #FFFFFF !important;
  --app-surface-hover: #F1F5F9 !important;
  --app-surface-elevated: #FFFFFF !important;
  --app-outline: #E2E8F0 !important;
  --app-outline-hover: #CBD5E1 !important;
  --app-text-primary: #0F172A !important;
  --app-text-secondary: #475569 !important;
  --app-text-tertiary: #94A3B8 !important;
}

html.dark, .dark {
  --app-brand: #5B4DFC !important;
  --app-brand-hover: #4F39F6 !important;
  --app-brand-active: #432DD7 !important;
  --app-brand-subtle: rgba(91, 77, 252, 0.12) !important;
  --app-brand-glow: rgba(91, 77, 252, 0.3) !important;
  --app-bg: #0B0F19 !important;
  --app-surface: #151B28 !important;
  --app-surface-hover: #1E2638 !important;
  --app-surface-elevated: #202A3D !important;
  --app-outline: #2A3447 !important;
  --app-outline-hover: #3E4D69 !important;
  --app-text-primary: #F8FAFC !important;
  --app-text-secondary: #CBD5E1 !important;
  --app-text-tertiary: #94A3B8 !important;
}

/* --- 2. Buttons: Same Radius, Gradient, Elevation & Tactile Feedback as Landing Page --- */
/* Primary Action Buttons */
.bg-app-brand,
button[class*="bg-indigo-600"],
button[class*="from-indigo-600"],
button[class*="from-[#4F39F6]"],
button[class*="bg-gradient-to-b from-indigo"],
button[class*="bg-gradient-to-r from-indigo"],
button[class*="from-[#4f39f6]"] {
  background: linear-gradient(180deg, #4F39F6 0%, #432DD7 100%) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px -2px rgba(79, 57, 246, 0.28), 0 2px 4px -1px rgba(79, 57, 246, 0.16) !important;
  border: none !important;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease, opacity 0.2s ease !important;
}

.bg-app-brand:hover,
button[class*="bg-indigo-600"]:hover,
button[class*="from-indigo-600"]:hover,
button[class*="from-[#4F39F6]"]:hover,
button[class*="from-[#4f39f6]"]:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 20px -3px rgba(79, 57, 246, 0.38), 0 4px 8px -2px rgba(79, 57, 246, 0.22) !important;
  background: linear-gradient(180deg, #5844F7 0%, #432DD7 100%) !important;
}

.bg-app-brand:active,
button[class*="bg-indigo-600"]:active,
button[class*="from-indigo-600"]:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 2px 6px -1px rgba(79, 57, 246, 0.24) !important;
}

/* Secondary / Light Buttons */
button[class*="border-[#E2E8F0]"],
button[class*="border-app-outline"],
button[class*="border-slate-200"],
button[class*="from-[#FFF]"] {
  border-radius: 12px !important;
  font-weight: 600 !important;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
}

button[class*="border-[#E2E8F0]"]:hover,
button[class*="border-app-outline"]:hover,
button[class*="border-slate-200"]:hover {
  transform: translateY(-1px) !important;
  border-color: #CBD5E1 !important;
}

button[class*="border-[#E2E8F0]"]:active,
button[class*="border-app-outline"]:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Danger Action Buttons */
button[class*="bg-red"],
button[class*="bg-rose"],
button[class*="from-red"],
button[class*="from-rose"] {
  border-radius: 12px !important;
  background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.28) !important;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease !important;
}

button[class*="bg-red"]:hover,
button[class*="bg-rose"]:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 20px -3px rgba(239, 68, 68, 0.38) !important;
}

/* Success Action Buttons */
button[class*="bg-emerald"],
button[class*="bg-green"] {
  border-radius: 12px !important;
  background: linear-gradient(180deg, #10B981 0%, #059669 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.28) !important;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease !important;
}

/* --- 3. Cards & Containers: Radius, Subtle Border & Micro-Elevation --- */
.bg-app-surface,
div[class*="rounded-2xl"].bg-white,
div[class*="rounded-xl"].bg-white,
div[class*="rounded-2xl"].dark\:bg-app-surface,
div[class*="rounded-xl"].dark\:bg-app-surface,
div[class*="rounded-2xl"].dark\:bg-slate-900,
div[class*="rounded-xl"].dark\:bg-slate-900 {
  border-radius: 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}

/* Interactive Dashboard & List Cards */
div.group[class*="bg-app-surface"]:hover,
div.cursor-pointer[class*="bg-app-surface"]:hover,
div[class*="hover:border-app-outline-hover"]:hover {
  border-color: rgba(79, 57, 246, 0.35) !important;
  box-shadow: 0 10px 24px -4px rgba(79, 57, 246, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-1.5px) !important;
}

html.dark div.group[class*="bg-app-surface"]:hover,
html.dark div.cursor-pointer[class*="bg-app-surface"]:hover,
html.dark div[class*="hover:border-app-outline-hover"]:hover {
  border-color: rgba(91, 77, 252, 0.45) !important;
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(91, 77, 252, 0.12) !important;
}

/* --- 4. Inputs, Selects & Forms --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  border-radius: 12px !important;
  font-family: inherit !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border-color: #4F39F6 !important;
  box-shadow: 0 0 0 3px rgba(79, 57, 246, 0.16) !important;
  outline: none !important;
}

html.dark input[type="text"]:focus,
html.dark input[type="email"]:focus,
html.dark input[type="password"]:focus,
html.dark input[type="number"]:focus,
html.dark input[type="date"]:focus,
html.dark input[type="search"]:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #5B4DFC !important;
  box-shadow: 0 0 0 3px rgba(91, 77, 252, 0.22) !important;
}

/* --- 5. Navigation & Sidebar Active States --- */
aside nav a[class*="bg-app-brand"],
aside nav a[class*="text-indigo"],
aside nav a[class*="text-app-brand"],
aside nav button[class*="bg-app-brand"] {
  border-radius: 12px !important;
  font-weight: 600 !important;
}

aside nav a,
aside nav button {
  border-radius: 12px !important;
  transition: all 0.18s cubic-bezier(0.2, 0, 0, 1) !important;
}

/* Topbar Header Backdrop */
header.sticky,
header.fixed {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* --- 6. Tables & Data Lists --- */
table th {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

table tr {
  transition: background-color 0.12s ease !important;
}

table tbody tr:hover {
  background-color: rgba(241, 245, 249, 0.75) !important;
}

html.dark table tbody tr:hover {
  background-color: rgba(30, 41, 59, 0.5) !important;
}

/* --- 7. Badges & Tags: Standardized Radius & Hierarchy --- */
span.rounded-full[class*="text-xs"],
span[class*="text-xs"][class*="rounded-md"],
span[class*="text-xs"][class*="rounded-lg"] {
  border-radius: 9999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* --- 8. Modals, Dialogs & Sheets --- */
div[class*="fixed inset-0"][class*="z-50"] > div[class*="rounded-"],
div[role="dialog"] {
  border-radius: 24px !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(79, 57, 246, 0.06) !important;
}

html.dark div[class*="fixed inset-0"][class*="z-50"] > div[class*="rounded-"],
html.dark div[role="dialog"] {
  border: 1px solid rgba(51, 65, 85, 0.75) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(91, 77, 252, 0.1) !important;
}

/* --- 9. Toasts, Notifications & Tooltips --- */
div[class*="toast"],
div[class*="notification"],
div[id*="toast"],
div[class*="fixed bottom-"][class*="z-50"] {
  border-radius: 16px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.14), 0 4px 10px rgba(79, 57, 246, 0.08) !important;
}

/* --- 10. Progress Bars & Sliders --- */
div[class*="h-2"][class*="rounded-full"],
div[class*="h-1.5"][class*="rounded-full"],
div[class*="h-3"][class*="rounded-full"] {
  border-radius: 9999px !important;
}

div[class*="h-2"][class*="rounded-full"] > div,
div[class*="h-1.5"][class*="rounded-full"] > div,
div[class*="h-3"][class*="rounded-full"] > div {
  border-radius: 9999px !important;
  transition: width 0.4s cubic-bezier(0.2, 0, 0, 1) !important;
}

/* --- 11. Empty States & Guided Tour Tooltips --- */
div[class*="border-dashed"] {
  border-radius: 20px !important;
  border-color: rgba(203, 213, 225, 0.8) !important;
}

html.dark div[class*="border-dashed"] {
  border-color: rgba(51, 65, 85, 0.7) !important;
}

/* --- 12. Targeted CTA: Sidebar Add Expense Button & Topbar Button Typography Alignment --- */
div#root:nth-of-type(1) > div:nth-of-type(1) > aside:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > button#tour-add-expense-btn:nth-of-type(1),
button#tour-add-expense-btn,
button#tour-topbar-add-btn {
  background: linear-gradient(180deg, #4F39F6 0%, #432DD7 100%) !important;
  color: #FFFFFF !important;
  font-family: 'ClashGrotesk', 'Clash Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  letter-spacing: -0.01em !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 14px -2px rgba(79, 57, 246, 0.35), 0 2px 5px -1px rgba(79, 57, 246, 0.2) !important;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease !important;
  cursor: pointer !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > aside:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > button#tour-add-expense-btn:nth-of-type(1) > span:nth-of-type(1),
div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > header:nth-of-type(1) > div:nth-of-type(2) > button#tour-topbar-add-btn:nth-of-type(1) > span:nth-of-type(1),
button#tour-add-expense-btn span,
button#tour-topbar-add-btn span {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.25rem !important;
  letter-spacing: -0.01em !important;
  font-family: 'ClashGrotesk', 'Clash Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > aside:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > button#tour-add-expense-btn:nth-of-type(1):hover,
button#tour-add-expense-btn:hover {
  background: linear-gradient(180deg, #5844F7 0%, #432DD7 100%) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 22px -3px rgba(79, 57, 246, 0.45), 0 4px 8px -2px rgba(79, 57, 246, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > aside:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > button#tour-add-expense-btn:nth-of-type(1):active,
button#tour-add-expense-btn:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 2px 6px -1px rgba(79, 57, 246, 0.28) !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > aside:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > button#tour-add-expense-btn:nth-of-type(1) svg,
button#tour-add-expense-btn svg {
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}

/* --- 14. Targeted Element: Square & Rounded Sizing + Plus Icon --- */
div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 12px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) svg {
  display: none !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1)::before {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex-shrink: 0 !important;
  margin: 0 auto !important;
  background-color: currentColor !important;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') no-repeat center center !important;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') no-repeat center center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}
div#root:nth-of-type(1) > div:nth-of-type(1) > aside:nth-of-type(1),
aside {
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* --- 15. Smooth Image Appearance Animation --- */
@keyframes smoothImageAppear {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    filter: blur(4px);
  }
  60% {
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes smoothContainerAppear {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#accueil:nth-of-type(1) > div:nth-of-type(6) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > img:nth-of-type(1),
section#accueil div[class*="rounded-2xl"] img,
section#accueil div[class*="rounded-3xl"] img,
section#accueil img[alt*="Aperçu"],
section#accueil .animate-fadeIn img,
section#accueil div.animate-fadeIn img {
  animation: smoothImageAppear 0.75s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  will-change: transform, opacity, filter !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#accueil:nth-of-type(1) > div:nth-of-type(6) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1),
section#accueil div.animate-fadeIn {
  animation: smoothContainerAppear 0.75s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}

/* ==========================================================================
   Targeted Focus Elements:
   Selector 1: Header Navigation Container
   div#root:nth-of-type(1) > div:nth-of-type(1) > header:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > nav:nth-of-type(1)
   Selector 2: Footer Product Links Column
   div#root:nth-of-type(1) > div:nth-of-type(1) > footer:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2)
   Selector 3: Footer Pricing Links Column
   div#root:nth-of-type(1) > div:nth-of-type(1) > footer:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(3)
   ========================================================================== */
div#root:nth-of-type(1) > div:nth-of-type(1) > header:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > nav:nth-of-type(1),
header nav.hidden.lg\:flex {
  gap: 32px !important;
  pointer-events: auto !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > header:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > nav:nth-of-type(1) > a,
header nav.hidden.lg\:flex > a {
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  user-select: none !important;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > header:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > nav:nth-of-type(1) a:hover,
header nav.hidden.lg\:flex a:hover {
  color: #4F39F6 !important;
}

html.dark div#root:nth-of-type(1) > div:nth-of-type(1) > header:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > nav:nth-of-type(1) a:hover,
html.dark header nav.hidden.lg\:flex a:hover {
  color: #818CF8 !important;
}

/* Footer Selector 2: Produit */
div#root:nth-of-type(1) > div:nth-of-type(1) > footer:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) {
  pointer-events: auto !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > footer:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) a,
footer div.grid > div:nth-of-type(2) a {
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  display: inline-block !important;
  user-select: none !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > footer:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) a:hover,
footer div.grid > div:nth-of-type(2) a:hover {
  color: #ffffff !important;
  transform: translateX(3px) !important;
}

/* Footer Selector 3: Tarifs */
div#root:nth-of-type(1) > div:nth-of-type(1) > footer:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(3) {
  pointer-events: auto !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > footer:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(3) a,
footer div.grid > div:nth-of-type(3) a {
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  display: inline-block !important;
  user-select: none !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

div#root:nth-of-type(1) > div:nth-of-type(1) > footer:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(3) a:hover,
footer div.grid > div:nth-of-type(3) a:hover {
  color: #ffffff !important;
  transform: translateX(3px) !important;
}

header a:has(img[alt*="Logo"]),
header a:has(img[src*="logo"]) {
  cursor: pointer !important;
  user-select: none !important;
}

/* ==========================================================================
   Hero Section - Responsive Tabs (Mobile vs Tablette vs Desktop & Laptop)
   ========================================================================== */

/* Styles universels de base pour la barre mobile (évite tout affichage brut non stylé) */
.hero-mobile-tabs-bar {
  padding: 8px !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex: 1 0 0;
  align-self: stretch;
  width: 100% !important;
  max-width: 440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 16px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFF !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  gap: 6px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.dark .hero-mobile-tabs-bar {
  background: #0f172a !important;
  border-color: #1e293b !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.hero-mobile-tab-btn {
  border-radius: 12px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 44px !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 300ms cubic-bezier(.4, 0, .2, 1) !important;
  -webkit-tap-highlight-color: transparent !important;
  box-sizing: border-box !important;
}

.hero-mobile-tab-btn.is-inactive {
  width: 42px !important;
  min-width: 42px !important;
  padding: 8px !important;
  background: #F8FAFC !important;
  color: #94A3B8 !important;
  flex: 0 0 42px !important;
  flex-shrink: 0 !important;
}

.hero-mobile-tab-btn.is-inactive:hover,
.hero-mobile-tab-btn.is-inactive:active {
  background: #F1F5F9 !important;
  color: #64748B !important;
}

.dark .hero-mobile-tab-btn.is-inactive {
  background: rgba(30, 41, 59, 0.6) !important;
  color: #94A3B8 !important;
}

.dark .hero-mobile-tab-btn.is-inactive:hover {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

.hero-mobile-tab-btn.is-active {
  flex: 1 0 0 !important;
  min-width: 0 !important;
  padding: 8px 12px !important;
  gap: 8px !important;
  background: #4F46F5 !important;
  color: #FFF !important;
  box-shadow: 0 2px 8px rgba(79, 70, 245, 0.3) !important;
}

.hero-mobile-tab-btn.is-active svg {
  color: #FFF !important;
  stroke: #FFF !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
}

.hero-mobile-tab-btn.is-inactive svg {
  color: #94A3B8 !important;
  stroke: #94A3B8 !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
}

.hero-mobile-tab-label {
  color: #FFF !important;
  font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 15px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  animation: heroTabFadeIn 250ms ease-out forwards !important;
}

@keyframes heroTabFadeIn {
  from {
    opacity: 0;
    transform: translateX(4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 1. Sur Desktop, Laptop & Tablette (écrans >= 640px) : afficher la barre complète responsive */
@media (min-width: 640px) {
  .hero-mobile-tabs-bar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }
  .hero-desktop-tabs-bar {
    display: flex !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* 2. Version Tablette (640px <= écran <= 1024px) : 100% responsive, sans scroll, onglets équilibrés */
@media (min-width: 640px) and (max-width: 1024px) {
  .hero-desktop-tabs-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 4px !important;
    gap: 4px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .hero-desktop-tab-btn {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    padding: 7px 6px !important;
    border-radius: 12px !important;
    gap: 6px !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .hero-desktop-tab-icon-wrap {
    padding: 5px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  .hero-desktop-tab-icon {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }

  .hero-desktop-tab-text-wrap {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .hero-desktop-tab-title {
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Suppression des sous-titres sur tablette pour fluidité maximale */
  .hero-desktop-tab-subtitle {
    display: none !important;
  }
}

/* Tablette plus large (860px à 1024px) : plus d'aisance sans scroll */
@media (min-width: 860px) and (max-width: 1024px) {
  .hero-desktop-tabs-bar {
    padding: 5px !important;
    gap: 6px !important;
    max-width: 880px !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
  }

  .hero-desktop-tab-btn {
    padding: 8px 8px !important;
    border-radius: 12px !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  .hero-desktop-tab-icon-wrap {
    padding: 6px !important;
  }

  .hero-desktop-tab-icon {
    width: 16px !important;
    height: 16px !important;
  }

  .hero-desktop-tab-title {
    font-size: 12px !important;
    line-height: 16px !important;
  }

  .hero-desktop-tab-subtitle {
    display: none !important;
  }
}

/* 3. Version Laptop & Grand Desktop (> 1024px) */
@media (min-width: 1025px) {
  .hero-desktop-tabs-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    padding: 6px !important;
    gap: 6px !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
  }

  .hero-desktop-tab-btn {
    padding: 10px 14px !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
  }

  .hero-desktop-tab-icon-wrap {
    padding: 8px !important;
  }

  .hero-desktop-tab-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .hero-desktop-tab-title {
    font-size: 13px !important;
    line-height: 18px !important;
  }

  .hero-desktop-tab-subtitle {
    display: block !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }
}

/* État actif pour les onglets Desktop & Tablette */
.hero-desktop-tab-btn.is-active,
.hero-desktop-tab-btn.bg-app-brand,
.hero-desktop-tab-btn.bg-indigo-600 {
  background-color: #4F46F5 !important;
  background: #4F46F5 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px 0 rgba(79, 70, 245, 0.35) !important;
}

.hero-desktop-tab-btn.is-active .hero-desktop-tab-icon-wrap,
.hero-desktop-tab-btn.bg-app-brand .hero-desktop-tab-icon-wrap {
  background-color: rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}

.hero-desktop-tab-btn.is-active .hero-desktop-tab-icon,
.hero-desktop-tab-btn.is-active svg,
.hero-desktop-tab-btn.bg-app-brand svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.hero-desktop-tab-btn.is-active .hero-desktop-tab-title,
.hero-desktop-tab-btn.bg-app-brand .hero-desktop-tab-title {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.hero-desktop-tab-btn.is-active .hero-desktop-tab-subtitle,
.hero-desktop-tab-btn.bg-app-brand .hero-desktop-tab-subtitle {
  color: #C7D2FE !important;
  opacity: 0.95 !important;
}

/* 4. Sur Mobile (écrans < 640px) : masquer la barre desktop et afficher la barre mobile flottante */
@media (max-width: 639px) {
  .hero-desktop-tabs-bar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }

  .hero-mobile-tabs-bar {
    display: flex !important;
  }
}

/* Adaptation pour smartphones très étroits (< 360px) */
@media (max-width: 360px) {
  .hero-mobile-tabs-bar {
    padding: 6px !important;
    gap: 4px !important;
    border-radius: 14px !important;
  }
  .hero-mobile-tab-btn {
    height: 38px !important;
    border-radius: 10px !important;
  }
  .hero-mobile-tab-btn.is-inactive {
    width: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
    padding: 6px !important;
  }
  .hero-mobile-tab-btn.is-active {
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  .hero-mobile-tab-btn.is-active svg,
  .hero-mobile-tab-btn.is-inactive svg {
    width: 16px !important;
    height: 16px !important;
  }
  .hero-mobile-tab-label {
    font-size: 10px !important;
    line-height: 14px !important;
  }
}

/* Modale d'authentification (Connexion / Inscription / Récupération) : 
   Sur mobile et tablette (< 1024px), positionner les images en haut (en top) */
@media (max-width: 1023px) {
  div#root:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) {
    grid-template-columns: 1fr !important;
  }
  div#root:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2),
  .auth-modal-img-col {
    order: -1 !important;
    margin-bottom: 8px !important;
  }
  div#root:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) img,
  .auth-modal-img-col img {
    max-height: 200px !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Version tablette (640px à 1023px) : suppression du bouton redondant "App" quand l'utilisateur est connecté */
@media (min-width: 640px) and (max-width: 1023px) {
  div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > header:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1):not([aria-label="Menu"]),
  .header-app-btn,
  header div.lg\:hidden > button.header-app-btn,
  header div.lg\:hidden > button:not([aria-label="Menu"]):first-child {
    display: none !important;
  }
}

@media (min-width: 640px) {
  .sm\:hidden {
    display: none !important;
  }
}

/* Version tablette (640px à 1023px) : Aligner "Mon Tableau de bord" à droite près du burger menu */
@media (min-width: 640px) and (max-width: 1023px) {
  header div.hidden.sm\:flex,
  .header-cta-group,
  div#root:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > header:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) {
    margin-left: auto !important;
    margin-right: 0.75rem !important;
  }
}

/* Section Problème : Hauteur optimisée et espacement généreux (+40% top/bottom) sur mobile */
@media (max-width: 1023px) {
  div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#probleme:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > img:nth-of-type(1),
  section#probleme div:nth-of-type(2) > img[src*="probleme-challenge"],
  section#probleme img.probleme-challenge-img {
    height: auto !important;
    max-height: 380px !important;
    width: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 639px) {
  div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#probleme:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > img:nth-of-type(1),
  section#probleme div:nth-of-type(2) > img[src*="probleme-challenge"],
  section#probleme img.probleme-challenge-img {
    max-height: 310px !important;
    max-width: 95% !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  /* Espacement vertical généreux (+40%) entre texte et image */
  section#probleme > div:nth-of-type(1) > div:nth-of-type(1) {
    gap: 28px !important;
    margin-bottom: 3.35rem !important;
  }
}

/* Section Solution : Hauteur optimisée et espacement généreux (+40% top/bottom) sur mobile et tablette */
@media (max-width: 1023px) {
  div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#solution:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > img:nth-of-type(1),
  section#solution div:nth-of-type(2) > img[src*="Proposition"],
  section#solution img.solution-valeur-img {
    height: auto !important;
    max-height: 450px !important;
    width: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 639px) {
  div#root:nth-of-type(1) > div:nth-of-type(1) > main:nth-of-type(1) > section#solution:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > img:nth-of-type(1),
  section#solution div:nth-of-type(2) > img[src*="Proposition"],
  section#solution img.solution-valeur-img {
    max-height: 350px !important;
    max-width: 96% !important;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  /* Espacements verticaux accrus de +40% au-dessus et en-dessous de l'image */
  section#solution > div:nth-of-type(1) > div:nth-of-type(2) {
    margin-top: 2.6rem !important;
    margin-bottom: 1.25rem !important;
  }
  section#solution > div:nth-of-type(1) > div:nth-of-type(3) {
    margin-top: 2.6rem !important;
  }
}