/* DESIGN.md v3 : systeme clair unique (Guichet de Confiance). Les tokens --color-* et --radius-*
   ci-dessous sont la source de verite CSS pour tout le site (chargee avant calculator-official.css
   sur chaque page) - ils correspondent terme a terme aux tokens `colors`/`rounded` de DESIGN.md. */
:root {
  --color-background-primary: #F6F7FA;
  --color-background-secondary: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-strong: #FFFFFF;
  --color-surface-border: #E4E7EC;
  --color-border-strong: #8492AC;
  --color-brand-electric: #2563EB;
  --color-brand-electric-deep: #1D4ED8;
  --color-brand-soft: rgba(37, 99, 235, 0.10);
  /* Alias vers les couleurs de categorie existantes : DESIGN.md v3 n'a plus de palette de marque
     multi-teintes separee (voir "Ce que ce systeme a delibberement abandonne"). Ces deux alias
     evitent une variable CSS non definie partout ou l'ancien nom etait encore lu. */
  --color-brand-cyan: var(--color-category-cyan-deep);
  --color-brand-purple: var(--color-category-indigo);
  --color-success: #059669;
  --color-success-deep: #047152;
  --color-error: #DC2626;
  --color-info: #0B6FA6;
  --color-info-deep: #075686;
  --color-warning: #92400E;
  --color-warning-deep: #78350F;
  --color-category-indigo: #6366F1;
  --color-category-indigo-deep: #0C0E83;
  --color-category-teal: #0D9488;
  --color-category-teal-deep: #0A6D64;
  --color-category-amber: #D97706;
  --color-category-amber-deep: #8B4C04;
  --color-category-emerald: #10B981;
  --color-category-emerald-deep: #097249;
  --color-category-pink: #EC4899;
  --color-category-pink-deep: #810D47;
  --color-category-cyan: #22D3EE;
  --color-category-cyan-deep: #0A7485;
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #5B6B85;
  --color-focus-ring: rgba(37, 99, 235, 0.72);
  /* Result Engine (Phase 5, docs/RESULT_ENGINE.md) : geometrie et duree de l'Encoche E1, seule
     partie de ce composant sans equivalent dans les tokens existants (couleur et taille de la
     Data Trace reutilisent --color-text-muted et l'echelle Numeric Small deja documentees). */
  --result-gesture-width: 16px;
  --result-gesture-height: 15px;
  --result-gesture-stroke: 1.5px;
  --result-motion-duration: 200ms;

  /* Visual Identity System (Phases 9-11, DESIGN.md > Visual Identity / Color Grammar). Tokens
     nommes par leur responsabilite (Trust/Transform/Result), pas par leur teinte - voir DESIGN.md
     pour la grammaire complete. "Action" n'a pas de token dedie : il reutilise --color-brand-electric
     directement (deja la seule couleur d'action du site, aucune raison d'en dupliquer la valeur
     sous un second nom). --brand-transform-bright est un alias semantique de --color-category-cyan
     (meme valeur physique #22D3EE) : le nom d'origine designe un role de categorie de navigation,
     sans rapport avec son usage de marque ici - l'alias evite la confusion sans dupliquer la valeur. */
  --brand-trust: #14306B;
  --brand-transform: #0B93B3;
  --brand-transform-bright: var(--color-category-cyan);
  --brand-result: #14B88A;
  --shadow-soft: 0 8px 20px rgba(15, 23, 42, 0.12);
  --shadow-elevated: 0 8px 20px rgba(15, 23, 42, 0.12);
  --radius-xl: 24px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --content: min(1260px, calc(100% - 40px));
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

html.is-restoring-scroll {
  scroll-behavior: auto;
}

body.layout-premium-page.home-page {
  margin: 0;
  font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* DESIGN.md v3 : le halo radial decoratif plein ecran est retire (interdit par le systeme -
   "halos lumineux decoratifs"). */

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.home-shell {
  position: relative;
  z-index: 1;
}

/* DESIGN.md v3, Motion Language : plus de mouvement permanent ni d'effet de lumiere decoratif -
   les chiffres flottants en fond (assets/background-numbers.js) sont retires visuellement. Le
   script continue de tourner sans effet (positionnement dans un conteneur masque), evitant de
   toucher a la logique JS pour ce seul changement de direction artistique. */
.background-numbers {
  display: none;
}

.background-numbers__item {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: var(--size, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--number-color, var(--color-brand-electric));
  opacity: var(--number-opacity, 0.08);
  filter: blur(var(--number-blur, 0px));
  text-shadow:
    0 0 28px rgba(37, 99, 235, 0.08),
    0 0 28px rgba(13, 148, 136, 0.05),
    0 0 24px rgba(99, 102, 241, 0.05);
  transform: translate3d(0, 16px, 0);
  animation-name: background-number-float;
  animation-duration: var(--duration, 20s);
  animation-delay: var(--delay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: transform, opacity;
  user-select: none;
}

@keyframes background-number-float {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985) rotate(var(--rot-start, 0deg));
  }

  15% {
    opacity: var(--number-opacity, 0.08);
    transform: translate3d(calc(var(--drift-x, 0px) * 0.12), calc(var(--drift-y, 0px) * 0.12), 0) scale(1) rotate(var(--rot-mid, 0deg));
  }

  82% {
    opacity: calc(var(--number-opacity, 0.08) * 0.9);
    transform: translate3d(calc(var(--drift-x, 0px) * 0.24), calc(var(--drift-y, 0px) * 0.24), 0) scale(1.01) rotate(var(--rot-mid, 0deg));
  }

  100% {
    opacity: 0;
    transform: translate3d(calc(var(--drift-x, 0px) * 0.34), calc(var(--drift-y, 0px) * 0.34 - 18px), 0) scale(0.985) rotate(var(--rot-end, 0deg));
  }
}

.page-shell {
  position: relative;
  z-index: 10;
  width: var(--content);
  margin: 0 auto;
  padding: 16px 0 44px;
}

/* Single-purpose width-matching wrapper for the shared nav (see scripts/build-shared-nav.js):
   on the homepage the nav's width comes from its .page-shell ancestor; on pages without that
   ancestor this reproduces the exact same resolved width (var(--content), centered) around the
   nav only, without .page-shell's own padding/z-index affecting the rest of the page. */
.shared-nav-shell {
  width: var(--content);
  margin: 0 auto;
}

/* Cette regle (specificite .prototype-topnav.home-topnav) l'emportait sur le fond clair defini
   pour .prototype-topnav dans calculator-official.css malgre l'ordre de chargement, car deux
   classes battent une seule classe independamment de qui charge en dernier - la nav de l'accueil
   restait donc sombre. Alignee ici sur le meme traitement clair que le reste du site. */
.prototype-topnav.home-topnav {
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  min-height: 52px;
  padding: 8px 18px;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.topnav-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 800;
  letter-spacing: -0.04em;
  flex: 0 0 auto;
}

.brand-link img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  box-shadow: none;
  object-fit: contain;
}

.brand-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 0.02em;
}

.brand-word--light {
  color: var(--color-text-primary);
}

/* Ancien texte en degrade retire (DESIGN.md interdit le gradient-text) - voir la meme correction
   deja appliquee a .brand-word--accent dans calculator-official.css. */
.brand-word--accent {
  color: var(--color-brand-electric);
}

.topnav-panel {
  min-width: 0;
}

.home-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.home-nav a {
  position: relative;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 180ms ease, transform 180ms ease;
}

.home-nav a::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--nav-dot, var(--color-text-muted));
  box-shadow: none;
}

.home-nav a:nth-child(1) {
  --nav-dot: var(--color-category-cyan-deep);
}

.home-nav a:nth-child(2) {
  --nav-dot: var(--color-category-amber);
}

.home-nav a:nth-child(3) {
  --nav-dot: var(--color-category-indigo);
}

.home-nav a:nth-child(4) {
  --nav-dot: var(--color-text-muted);
}

.home-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-electric);
  transform: scaleX(0);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.home-nav a:hover,
.home-nav a:focus-visible {
  color: var(--color-text-primary);
  transform: translateY(-1px);
  outline: none;
}

.home-nav a:hover::after,
.home-nav a:focus-visible::after {
  transform: scaleX(1);
}

.topnav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.topnav-link,
.topnav-cta,
.topnav-search,
.hero-cta,
.hero-search-submit,
.search-suggestions a,
.category-link,
.site-footer__col a {
  text-decoration: none;
}

.topnav-search,
.topnav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 16px;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.topnav-search {
  width: 42px;
  border: 1px solid var(--color-surface-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.topnav-search svg {
  width: 18px;
  height: 18px;
}

/* Le degrade + halo bleu ci-dessous sont deja neutralises en cascade par la regle .topnav-cta
   partagee de calculator-official.css (chargee apres, meme specificite) - conserves ici a plat
   pour que cette regle reste correcte independamment de calculator-official.css. */
.topnav-cta {
  padding: 0 20px;
  border: 0;
  background: var(--color-brand-electric);
  color: #fff;
  box-shadow: none;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.topnav-search:hover,
.topnav-search:focus-visible {
  transform: translateY(-1px);
  border-color: var(--color-brand-electric);
  outline: none;
}

.topnav-cta:hover,
.topnav-cta:focus-visible {
  transform: translateY(-1px);
  background: var(--color-brand-electric-deep);
  outline: none;
}

/* Page d'accueil uniquement : le topnav-search est un composant partagé (calculateurs, hubs
   thématiques...) via home-premium.css. Les affinages ci-dessous sont scopés à .home-page pour ne
   jamais changer l'apparence de ce composant ailleurs sur le site. .topnav-cta n'est utilisé nulle
   part hors accueil à ce jour, mais reste scopé par cohérence et prudence. */
.home-page .topnav-search,
.home-page .topnav-cta {
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.home-page .topnav-cta:hover,
.home-page .topnav-cta:focus-visible {
  box-shadow: var(--shadow-soft);
}

.home-page .topnav-search:focus-visible,
.home-page .topnav-cta:focus-visible {
  outline: 2px solid var(--color-focus-ring, rgba(37, 99, 235, 0.72));
  outline-offset: 2px;
}

.home-page .topnav-search:active,
.home-page .topnav-cta:active {
  transform: translateY(0) scale(0.96);
  transition-duration: 100ms;
}

.topnav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-primary);
  cursor: pointer;
}

.topnav-toggle-label {
  font-weight: 700;
}

.topnav-toggle-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.hero-premium {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 28px;
  align-items: center;
  padding: 32px 0 28px;
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding-right: 6px;
}

.hero-badge,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft);
  color: var(--color-brand-electric-deep);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-copy h1 {
  /* Meme resserrage que .hero-large h1 (calculator-official.css) : DESIGN.md v3, echelle Display. */
  font-family: "Public Sans", sans-serif;
  margin: 14px 0 16px;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

/* Ancien texte en degrade retire (DESIGN.md interdit le gradient-text, meme sur le H1 principal
   de l'accueil) - un seul aplat de la couleur d'action du site. */
.hero-gradient {
  color: var(--color-brand-electric);
}

.hero-subtitle {
  max-width: 52ch;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: clamp(1.05rem, 1.15vw, 1.22rem);
  line-height: 1.75;
}

.font-sans {
  font-family: "Public Sans", sans-serif;
}

.font-display,
.section-heading,
.hero-badge,
.section-kicker,
.site-footer__col strong,
.search-shortcuts,
.search-shortcuts__label,
.brand-link {
  font-family: "Public Sans", sans-serif;
}

.font-mono,
.hero-search-submit,
.search-shortcut,
.hero-search-icon,
.search-suggest-item,
.search-suggest-empty {
  font-family: "Archivo", system-ui, sans-serif;
}

.section-heading {
  margin: 0;
  color: var(--color-text-primary);
  font-size: clamp(1.65rem, 1.1rem + 1.8vw, 2.45rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.03em;
}

.section-subtitle {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: clamp(0.98rem, 0.85rem + 0.5vw, 1.1rem);
  font-weight: 400;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.hero-cta {
  box-sizing: border-box;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.hero-cta:not(.hero-cta--ghost) {
  border: 0;
  background: var(--color-brand-electric);
  color: #fff;
  box-shadow: none;
}

.hero-cta--ghost {
  border: 1px solid var(--color-surface-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  backdrop-filter: none;
}

.hero-cta:hover,
.hero-cta:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

/* Page d'accueil uniquement : .hero-cta est réutilisé tel quel comme CTA de hero sur d'autres
   gabarits de page (ex. calculateurs) via ce même fichier partagé. Tout affinage d'interaction
   ci-dessous est scopé à .home-page pour laisser ces autres pages strictement inchangées. */
.home-page .hero-cta {
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.home-page .hero-cta--ghost:hover,
.home-page .hero-cta--ghost:focus-visible {
  background: var(--color-background-primary);
  border-color: var(--color-brand-electric);
}

.home-page .hero-cta:not(.hero-cta--ghost):hover,
.home-page .hero-cta:not(.hero-cta--ghost):focus-visible {
  background: var(--color-brand-electric-deep);
  box-shadow: var(--shadow-soft);
}

.home-page .hero-cta:focus-visible {
  outline: 2px solid var(--color-focus-ring, rgba(37, 99, 235, 0.72));
  outline-offset: 3px;
}

.home-page .hero-cta:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 100ms;
}

.hero-proof {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  color: var(--color-text-secondary);
}

.hero-proof p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.hero-trust__item {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: "Public Sans", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero-trust__item svg {
  width: 14px;
  height: 14px;
  color: var(--color-success);
  flex: 0 0 auto;
}

.avatar-stack {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

/* DESIGN.md v3 : chaque avatar est un aplat unique cercle par une bordure claire de separation
   (au lieu du degrade + triple ombre "verre" precedent), sur le meme principe que les autres
   surfaces du systeme. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: -12px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-electric);
  color: #fff;
  box-shadow: 0 0 0 3px var(--color-background-primary);
}

.avatar:first-child {
  margin-left: 0;
}

.avatar svg {
  width: 20px;
  height: 20px;
  color: #fff;
  filter: none;
}

.avatar--one {
  background: var(--color-brand-electric);
}

.avatar--two {
  background: var(--color-category-indigo);
}

.avatar--three {
  background: var(--color-category-teal);
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 680px;
  perspective: 1200px;
}

/* DESIGN.md v3 : les deux halos flous derriere la carte de visuel du hero sont retires (halos
   lumineux decoratifs interdits). */

.hero-visual hologram-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 560px;
  perspective: 1200px;
  transform-style: preserve-3d;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --card-scale: 1;
  --pointer-x: 50%;
  --pointer-y: 50%;
}

/* Subtle section rhythm: a soft top hairline plus a faint localized halo,
   used to separate the major homepage zones without heavy blocks. */
.search-section::before,
.needs-section::before,
.piliers-section::before,
.faq-section::before,
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(70%, 760px);
  height: 1px;
  transform: translateX(-50%);
  background: var(--color-surface-border);
  pointer-events: none;
}

/* DESIGN.md v3 : halo radial decoratif retire (voir la meme suppression sur
   body.layout-premium-page.home-page::after plus haut dans ce fichier). */

.search-section {
  position: relative;
  padding-top: 36px;
  z-index: 2;
  overflow-anchor: none;
}

.search-section__kicker-row {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.search-kicker {
  color: var(--color-brand-electric-deep);
  border-color: var(--color-surface-border);
  background: var(--color-brand-soft);
}

.glass-panel {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}

.search-shell--premium {
  position: relative;
  display: grid;
  gap: 12px;
  padding-bottom: 16px;
  max-width: min(1024px, 100%);
  margin: 0 auto;
  overflow-anchor: none;
}

.search-shell--premium .hero-search {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: stretch;
  overflow-anchor: none;
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-surface-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 220ms ease, border-color 220ms ease;
}

.search-shell__field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px !important;
  padding: 0 16px !important;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  background: var(--color-background-primary);
  box-shadow: none;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.search-shell__field:focus-within {
  border-color: var(--color-brand-electric);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}

.search-shell__field input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  height: 44px !important;
  padding-block: 10px !important;
  padding-inline: 0 !important;
  outline: none;
  box-sizing: border-box !important;
}

.search-shell__field input::placeholder {
  color: var(--color-text-muted);
}

.hero-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex: 0 0 auto;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.search-shell__field:focus-within .hero-search-icon {
  color: var(--color-brand-electric);
}

.hero-search-icon svg {
  width: 18px;
  height: 18px;
}

.hero-search-submit {
  min-height: 52px;
  padding: 0 30px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-brand-electric);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
  min-width: 100px;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-search-submit:hover,
.hero-search-submit:focus-visible {
  transform: translateY(-2px);
  background: var(--color-brand-electric-deep);
  box-shadow: var(--shadow-soft);
  outline: none;
}

.hero-search-submit:focus-visible {
  outline: 2px solid var(--color-focus-ring, rgba(37, 99, 235, 0.72));
  outline-offset: 3px;
}

.hero-search-submit:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 100ms;
}

.search-shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  align-self: start;
  gap: 10px;
  margin-top: 2px;
  margin-left: 20px;
  padding-left: 0;
  width: 100%;
  text-align: left;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.search-shortcuts__label {
  margin-right: 2px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.search-shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.search-shortcut:hover,
.search-shortcut:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-brand-electric);
  outline: none;
}

.search-shortcut:focus-visible {
  outline: 2px solid var(--color-focus-ring, rgba(37, 99, 235, 0.72));
  outline-offset: 2px;
}

.search-shortcut:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 100ms;
}

/* Chaque variante de raccourci prend la teinte de sa categorie au survol - fond tres clair,
   texte en variante -deep pour rester lisible (AA) sur un fond presque blanc. */
.search-shortcut--cyan:hover,
.search-shortcut--cyan:focus-visible {
  background: color-mix(in srgb, var(--color-category-cyan) 14%, var(--color-surface));
  color: var(--color-category-cyan-deep);
  box-shadow: none;
}

.search-shortcut--orange:hover,
.search-shortcut--orange:focus-visible {
  background: color-mix(in srgb, var(--color-category-amber) 14%, var(--color-surface));
  color: var(--color-category-amber-deep);
  box-shadow: none;
}

.search-shortcut--purple:hover,
.search-shortcut--purple:focus-visible {
  background: color-mix(in srgb, var(--color-category-indigo) 14%, var(--color-surface));
  color: var(--color-category-indigo-deep);
  box-shadow: none;
}

.search-shortcut--blue:hover,
.search-shortcut--blue:focus-visible {
  background: var(--color-brand-soft);
  color: var(--color-brand-electric-deep);
  box-shadow: none;
}

.search-shortcut--pink:hover,
.search-shortcut--pink:focus-visible {
  background: color-mix(in srgb, var(--color-category-pink) 14%, var(--color-surface));
  color: var(--color-category-pink-deep);
  box-shadow: none;
}

.needs-section {
  position: relative;
  padding: 18px 0 10px;
  display: grid;
  gap: 40px;
}

.needs-heading-wrap {
  display: grid;
  gap: 20px;
  justify-items: center;
  text-align: center;
}

.needs-chip-row {
  display: grid;
  gap: 18px;
  justify-items: center;
  width: 100%;
}

.needs-chip-group {
  margin-top: 0;
}

.needs-kicker {
  color: var(--color-category-teal-deep);
  border-color: var(--color-surface-border);
  background: color-mix(in srgb, var(--color-category-teal) 12%, var(--color-surface));
}

.needs-subtitle {
  max-width: 66ch;
  margin: 0 auto;
}

.needs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.needs-card {
  position: relative;
  --needs-accent: var(--color-category-teal-deep);
  --needs-accent-soft: color-mix(in srgb, var(--color-category-teal) 14%, var(--color-surface));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 240px;
  padding: 26px 22px 22px;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: none;
  text-decoration: none;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  isolation: isolate;
}

/* DESIGN.md v3 : le halo radial "spotlight" au survol (::before sur ces trois familles de cartes)
   est retire - interdit par le systeme ("halos lumineux decoratifs"). La distinction au survol
   vient uniquement de la bordure et d'une legere ombre, voir plus bas. */

.needs-card:hover,
.needs-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--needs-accent);
  box-shadow: var(--shadow-soft);
  outline: none;
}

.needs-card:focus-visible {
  outline: 2px solid var(--color-focus-ring, rgba(37, 99, 235, 0.72));
  outline-offset: 3px;
}

.needs-card:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: 100ms;
}

.needs-card:hover .needs-icon,
.needs-card:focus-visible .needs-icon {
  transform: scale(1.06);
}

/* Chaque variante utilise la couleur -deep de sa categorie (icone/texte, AA) et un fond tres
   clair de la teinte de base (color-mix), sur le meme principe que .search-shortcut--*. */
.needs-card--cyan {
  --needs-accent: var(--color-category-teal-deep);
  --needs-accent-soft: color-mix(in srgb, var(--color-category-teal) 14%, var(--color-surface));
}

.needs-card--orange {
  --needs-accent: var(--color-category-amber-deep);
  --needs-accent-soft: color-mix(in srgb, var(--color-category-amber) 14%, var(--color-surface));
}

.needs-card--purple {
  --needs-accent: var(--color-category-indigo-deep);
  --needs-accent-soft: color-mix(in srgb, var(--color-category-indigo) 14%, var(--color-surface));
}

.needs-card--green {
  --needs-accent: var(--color-category-emerald-deep);
  --needs-accent-soft: color-mix(in srgb, var(--color-category-emerald) 14%, var(--color-surface));
}

.needs-card--pink {
  --needs-accent: var(--color-category-pink-deep);
  --needs-accent-soft: color-mix(in srgb, var(--color-category-pink) 14%, var(--color-surface));
}

.needs-card--blue {
  --needs-accent: var(--color-brand-electric-deep);
  --needs-accent-soft: var(--color-brand-soft);
}

.needs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--needs-accent) 28%, var(--color-surface-border));
  background: var(--needs-accent-soft);
  color: var(--needs-accent);
  box-shadow: none;
}

.needs-icon svg {
  width: 25px;
  height: 25px;
}

.needs-card__body {
  display: grid;
  gap: 8px;
}

.needs-card__body strong {
  color: var(--color-text-primary);
  font-size: 1.06rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.needs-card__body p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.needs-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--needs-accent);
  font-size: 0.84rem;
  font-weight: 700;
  transition: transform 180ms ease, color 180ms ease;
}

.needs-card:hover .needs-link,
.needs-card:focus-visible .needs-link {
  transform: translateX(2px);
}

.needs-link svg {
  width: 14px;
  height: 14px;
}

/* Complete theme directory - compact index cards, distinct from the curated needs/piliers grids */
.themes-index-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.themes-index-card {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.themes-index-card:hover,
.themes-index-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-brand-electric);
  background: var(--color-background-primary);
  box-shadow: var(--shadow-soft);
  outline: none;
}

.themes-index-card:focus-visible {
  outline: 2px solid var(--color-focus-ring, rgba(37, 99, 235, 0.72));
  outline-offset: 2px;
}

.themes-index-card:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: 100ms;
}

.themes-index-card strong {
  color: var(--color-text-primary);
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.themes-index-card span {
  color: var(--color-text-secondary);
  font-size: 0.84rem;
  line-height: 1.5;
}

.themes-index-guides {
  margin: 18px 0 0;
  color: var(--color-text-secondary);
  font-size: 0.92rem;
}

.themes-index-guides a {
  color: var(--color-brand-electric, #2563EB);
  font-weight: 600;
}

.piliers-section {
  position: relative;
  padding: 18px 0 10px;
  display: grid;
  gap: 40px;
}

.piliers-heading-wrap {
  display: grid;
  gap: 20px;
  justify-items: center;
  text-align: center;
}

.piliers-kicker {
  color: var(--color-category-amber-deep);
  border-color: var(--color-surface-border);
  background: color-mix(in srgb, var(--color-category-amber) 12%, var(--color-surface));
}

.piliers-subtitle {
  max-width: 66ch;
  margin: 0 auto;
}

.piliers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.piliers-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 260px;
  padding: 26px 24px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-surface-border);
  background: var(--color-surface);
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  isolation: isolate;
}

.piliers-card:hover,
.piliers-card:focus-visible {
  transform: translateY(-4px);
  outline: none;
  border-color: var(--piliers-accent);
  box-shadow: var(--shadow-soft);
}

.piliers-card:focus-visible {
  outline: 2px solid var(--color-focus-ring, rgba(37, 99, 235, 0.72));
  outline-offset: 3px;
}

.piliers-card:active {
  transform: translateY(-2px) scale(0.99);
  transition-duration: 100ms;
}

/* DESIGN.md v3 : le blob flou decoratif en coin de carte est retire (halo lumineux interdit). */

.piliers-card:hover .piliers-icon,
.piliers-card:focus-visible .piliers-icon {
  transform: scale(1.06);
}

.piliers-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.piliers-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--piliers-accent) 26%, var(--color-surface-border));
  background: color-mix(in srgb, var(--piliers-accent) 12%, var(--color-surface));
  color: var(--piliers-accent);
  box-shadow: none;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.piliers-icon svg {
  width: 22px;
  height: 22px;
}

.piliers-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--piliers-accent) 22%, var(--color-surface-border));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--piliers-accent) 10%, var(--color-surface));
  color: var(--piliers-accent);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.piliers-badge svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.piliers-card__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
}

.piliers-card__body h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.piliers-card__body p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.piliers-card__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--color-surface-border);
}

.piliers-card__footer span {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--piliers-accent) 14%, var(--color-surface));
  color: var(--piliers-accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: background-color 180ms ease;
}

.piliers-card:hover .piliers-card__footer span,
.piliers-card:focus-visible .piliers-card__footer span {
  background: color-mix(in srgb, var(--piliers-accent) 22%, var(--color-surface));
}

.piliers-card__footer svg {
  width: 16px;
  height: 16px;
  color: var(--piliers-accent);
  transition: transform 180ms ease;
}

.piliers-card:hover .piliers-card__footer svg,
.piliers-card:focus-visible .piliers-card__footer svg {
  transform: translateX(3px);
}

/* -deep pour rester lisible en texte/icone (AA) - meme logique que --needs-accent plus haut.
   .piliers-card__glow n'a plus de mise en forme (halo retire) : la div reste dans le DOM mais
   ne produit plus rien visuellement. */
.piliers-card__glow {
  display: none;
}

.piliers-card--pink {
  --piliers-accent: var(--color-category-pink-deep);
}

.piliers-card--orange {
  --piliers-accent: var(--color-category-amber-deep);
}

.piliers-card--cyan {
  --piliers-accent: var(--color-category-teal-deep);
}

.piliers-card--green {
  --piliers-accent: var(--color-category-emerald-deep);
}

.piliers-card--purple {
  --piliers-accent: var(--color-category-indigo-deep);
}

.piliers-card--cyan-alt {
  --piliers-accent: var(--color-category-cyan-deep);
}

.faq-section {
  position: relative;
  padding: 18px 0 10px;
  display: grid;
  gap: 40px;
}

.faq-heading-wrap {
  display: grid;
  gap: 20px;
  justify-items: center;
  text-align: center;
}

.faq-kicker {
  color: var(--color-category-teal-deep);
  border-color: var(--color-surface-border);
  background: color-mix(in srgb, var(--color-category-teal) 12%, var(--color-surface));
}

.faq-subtitle {
  max-width: 66ch;
  margin: 0 auto;
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1fr);
  gap: 32px;
  align-items: center;
}

.faq-list {
  display: grid;
  gap: 16px;
}

.faq-item {
  position: relative;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: none;
  overflow: hidden;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover,
.faq-item:focus-within {
  transform: translateY(-2px);
  border-color: var(--color-category-teal-deep);
  box-shadow: var(--shadow-soft);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--color-focus-ring, rgba(37, 99, 235, 0.72));
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.45;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--color-category-teal-deep);
  flex: 0 0 auto;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-toggle svg {
  width: 18px;
  height: 18px;
}

.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
}

.faq-item[open] {
  border-color: var(--color-category-teal-deep);
  background: var(--color-surface);
}

.faq-item[open] summary {
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-surface-border);
}

/* DESIGN.md v3, Motion Language : plus de transition sur max-height (layout thrash - meme
   antipattern deja corrige sur .prk-advanced-reveal). display:none binaire + animation
   opacity/translateY qui rejoue naturellement a l'ouverture native de <details>. */
.faq-content {
  display: none;
  padding: 0 22px 20px;
  color: var(--color-text-secondary);
  font-size: 0.92rem;
  line-height: 1.65;
}

.faq-item[open] .faq-content {
  display: block;
  animation: faq-content-reveal 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes faq-content-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .faq-content {
    animation: none;
  }
}

.faq-content p {
  margin: 0;
}

.faq-content strong {
  color: var(--color-text-primary);
}

.faq-visual {
  display: flex;
  justify-content: center;
}

.faq-visual__card {
  position: relative;
  width: 100%;
  max-width: 390px;
  min-height: 312px;
  padding: 32px 28px 28px;
  border-radius: 28px;
  border: 1px solid rgba(13, 148, 136, 0.34);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.faq-visual__shield {
  position: relative;
  width: 128px;
  height: 128px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-category-teal) 12%, var(--color-surface));
  border: 1px solid var(--color-surface-border);
  box-shadow: none;
}

.faq-visual__shield svg {
  width: 56px;
  height: 56px;
  color: var(--color-category-teal-deep);
}

.faq-visual__lock {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  color: var(--color-category-teal-deep);
}

.faq-visual__lock svg {
  width: 16px;
  height: 16px;
}

.faq-visual__card h3 {
  margin: 0 0 10px;
  color: var(--color-text-primary);
  font-size: 1.15rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.faq-visual__card p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}

.search-suggestions-slot {
  position: relative;
}

.search-shell--premium .search-suggest-panel {
  position: static;
  left: 0;
  right: 0;
  top: auto;
  margin-top: 0;
  z-index: 35;
  overflow: hidden;
  overflow-anchor: none;
}

.search-shell--premium .search-suggest-panel[aria-hidden="true"] {
  display: none;
}

.search-shell--premium .search-suggest-panel.is-open {
  display: block;
}

.search-suggest-list,
.search-suggest-item,
.search-shortcuts {
  overflow-anchor: none;
}

.search-shell--premium {
  overflow: visible;
}

hologram-card:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 8px;
}

.hologram-card__scene {
  position: relative;
  width: 100%;
  min-height: inherit;
  border-radius: 32px;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--card-scale, 1));
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  isolation: isolate;
}

hologram-card.is-active .hologram-card__scene {
  transition-duration: 80ms;
}

/* DESIGN.md v3 : le halo qui suit le pointeur, la texture de grille et le panneau de verre
   translucide sont retires (glassmorphism et halos lumineux decoratifs, tous deux interdits). Le
   mecanisme de tilt 3D au pointeur (transform-style/rotateX/rotateY, gere par
   assets/home-hologram.js) est conserve tel quel pour ne pas casser le script, mais la carte est
   maintenant une simple surface claire du systeme. */
.hologram-card__backdrop {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  transform: translateZ(0px);
  z-index: 0;
}

.hologram-card__grid {
  display: none;
}

.hologram-card__glass {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px;
  border: 1px solid var(--color-surface-border);
  border-radius: inherit;
  background: var(--color-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transform: translateZ(20px);
}

.hologram-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.hologram-card__heading {
  display: grid;
  gap: 8px;
}

.hologram-card__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-success-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* DESIGN.md v3, Motion Language : plus d'anneau de pulsation permanent (mouvement permanent
   interdit) - le point reste un simple indicateur d'etat statique. */
.hologram-card__pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-success);
  flex: 0 0 auto;
}

.hologram-card__pulse::before {
  display: none;
}

.hologram-card__title {
  margin: 0;
  color: var(--color-text-primary);
  font-family: "Public Sans", sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.hologram-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-pill);
  background: var(--color-background-primary);
  color: var(--color-text-secondary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hologram-card__badge svg {
  width: 13px;
  height: 13px;
  color: var(--color-success);
  flex: 0 0 auto;
}

.mock-screen {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  background: var(--color-background-primary);
  box-shadow: none;
  overflow: hidden;
}

.mock-screen__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-surface-border);
  background: var(--color-surface);
}

.mock-screen__dots {
  display: inline-flex;
  gap: 5px;
  flex: 0 0 auto;
}

.mock-screen__dots span {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-border);
}

.mock-screen__url {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-background-primary);
  color: var(--color-text-muted);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.68rem;
}

.mock-screen__body {
  padding: 18px;
}

.mock-screen__kicker {
  margin: 0 0 4px;
  color: var(--color-brand-electric-deep);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mock-screen__name {
  margin: 0 0 14px;
  color: var(--color-text-primary);
  font-family: "Public Sans", sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.mock-screen__fields {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.mock-screen__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.mock-screen__field span {
  color: var(--color-text-secondary);
  font-size: 0.78rem;
}

.mock-screen__field strong {
  color: var(--color-text-primary);
  font-size: 0.82rem;
  font-weight: 700;
}

.mock-screen__result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--color-success);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
}

.mock-screen__result-label {
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
}

.mock-screen__result-value {
  color: var(--color-text-primary);
  font-family: "Public Sans", sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.hologram-card__footer {
  display: grid;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--color-surface-border);
}

.hologram-card__note {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
}

.hologram-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-text-secondary);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms ease;
}

.hologram-card__cta:hover,
.hologram-card__cta:focus-visible {
  color: var(--color-text-primary);
}

.hologram-card__cta:hover .hologram-card__arrow-icon,
.hologram-card__cta:focus-visible .hologram-card__arrow-icon {
  transform: translateY(2px);
}

.hologram-card__arrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-electric-deep);
  flex: 0 0 auto;
  transition: transform 180ms ease;
}

.hologram-card__arrow-icon svg {
  width: 14px;
  height: 14px;
}
.search-suggest-panel,
.search-suggest-list {
  position: relative;
  z-index: 3;
}

.search-suggest-panel {
  margin-top: 14px;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}

.search-suggest-list {
  display: grid;
  gap: 6px;
  padding: 10px;
}

.search-suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.search-suggest-item:hover,
.search-suggest-item:focus-visible {
  background: var(--color-brand-soft);
  border-color: var(--color-brand-electric);
  transform: translateY(-1px);
  outline: none;
}

.search-suggest-empty {
  padding: 14px 16px;
  color: var(--color-text-secondary);
}

.site-footer {
  position: relative;
  width: 100vw;
  margin-top: 56px;
  padding: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Deja neutralisee en cascade par la regle .site-footer__inner de calculator-official.css
   (chargee apres, meme specificite) - corrigee ici a plat par coherence, voir la meme note sur
   .topnav-cta plus haut dans ce fichier. */
.site-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 40px 48px;
  box-sizing: border-box;
  border: 0;
  border-top: 1px solid var(--color-surface-border);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr));
  column-gap: 72px;
  row-gap: 48px;
  margin-top: 0;
  align-items: start;
}

.site-footer__brand {
  display: grid;
  gap: 20px;
  margin-bottom: 0;
  max-width: 38ch;
}

.footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.footer-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  box-shadow: none;
}

.footer-brand-wordmark {
  font-family: "Public Sans", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.footer-brand-wordmark span {
  color: var(--color-brand-electric);
  font-family: "Archivo", system-ui, sans-serif;
}

.site-footer__tagline {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.65;
  font-size: 0.86rem;
  max-width: 36ch;
}

.site-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.site-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-surface-border);
  background: var(--color-background-primary);
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.site-footer__badge-icon {
  width: 13px;
  height: 13px;
  color: var(--color-brand-electric);
  flex-shrink: 0;
}

.site-footer__col {
  display: grid;
  gap: 18px;
  align-content: start;
}

.site-footer__col strong {
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.site-footer__col a {
  color: var(--color-text-secondary);
  transition: color 200ms ease, transform 200ms ease;
  font-size: 0.82rem;
  line-height: 1.4;
  width: fit-content;
}

.site-footer__col a:hover {
  color: var(--color-brand-electric);
  transform: translateX(3px);
}

/* Page d'accueil uniquement : le footer est un composant partagé sur tout le site. */
.home-page .site-footer__col a {
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.home-page .site-footer__col a:active {
  transform: translateX(1px);
  transition-duration: 100ms;
}

.site-footer__col a:focus-visible {
  color: var(--color-brand-electric);
  transform: translateX(3px);
  outline: 2px solid var(--color-focus-ring, rgba(37, 99, 235, 0.72));
  outline-offset: 3px;
}

.site-footer__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--color-surface-border);
  color: var(--color-text-muted);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.68rem;
  text-align: center;
}

.site-footer__meta span {
  flex: 1 1 auto;
  text-align: center;
}

.site-footer__socials {
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-footer__socials a {
  color: var(--color-text-secondary);
  transition: color 200ms ease, transform 200ms ease;
}

.site-footer__socials a:hover {
  color: var(--color-brand-electric);
  transform: translateY(-2px);
}

.home-page .site-footer__socials a {
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.home-page .site-footer__socials a:active {
  transform: translateY(0) scale(0.92);
  transition-duration: 100ms;
}

.site-footer__socials a:focus-visible {
  color: var(--color-brand-electric);
  transform: translateY(-2px);
  outline: 2px solid var(--color-focus-ring, rgba(37, 99, 235, 0.72));
  outline-offset: 3px;
  border-radius: 4px;
}

.site-footer__socials svg {
  display: block;
  width: 16px;
  height: 16px;
}

@media (max-width: 1100px) {
  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 40px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
    max-width: 52ch;
  }
}

@media (max-width: 720px) {
  .site-footer__inner {
    padding: 64px 24px 40px;
  }

  .site-footer__columns {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .site-footer__brand {
    max-width: none;
  }
}

/* Audit UI/UX (D2) : la banniere pouvait recouvrir un champ actif ou le resultat principal au
   premier chargement (position fixed + hauteur non plafonnee). Correction systeme (composant
   partage par toutes les pages) : empreinte verticale reduite (padding/gap resserres, contenu et
   fonctionnement du consentement inchanges) + plafond dur de hauteur avec defilement interne en
   secours, pour garantir qu'elle n'occupe jamais plus de la moitie de l'ecran. */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 1200;
  width: min(1120px, calc(100% - 32px));
  max-height: min(320px, 50vh);
  overflow-y: auto;
  transform: translateX(-50%);
  display: grid;
  gap: 10px;
  padding: 16px 20px;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.cookie-banner-head {
  display: grid;
  gap: 6px;
}

.cookie-banner-kicker {
  margin: 0;
  color: var(--color-brand-electric-deep);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cookie-banner-title {
  margin: 0;
  color: var(--color-text-primary);
  font-family: "Public Sans", sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.cookie-banner-copy {
  max-width: 90ch;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
}

.cookie-banner-links a {
  color: var(--color-brand-electric-deep);
  font-family: "Public Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 180ms ease, opacity 180ms ease;
}

.cookie-banner-links a:hover,
.cookie-banner-links a:focus-visible {
  color: var(--color-text-primary);
  outline: none;
}

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.cookie-btn {
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-surface-border);
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  font-family: "Public Sans", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.cookie-btn:hover,
.cookie-btn:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.cookie-btn--primary {
  border: 0;
  background: var(--color-brand-electric);
  color: #fff;
  box-shadow: none;
}

.cookie-btn--primary:hover,
.cookie-btn--primary:focus-visible {
  background: var(--color-brand-electric-deep);
}

.cookie-btn--secondary {
  border-color: var(--color-category-teal);
  background: color-mix(in srgb, var(--color-category-teal) 12%, var(--color-surface));
  color: var(--color-category-teal-deep);
}

.cookie-btn--ghost {
  border-color: var(--color-surface-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.cookie-custom-panel {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  margin-top: 6px;
  border-top: 1px solid var(--color-surface-border);
}

.cookie-custom-title {
  margin: 0 0 4px;
  color: var(--color-text-primary);
  font-family: "Public Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.cookie-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  background: var(--color-background-primary);
}

.cookie-option input {
  margin-top: 3px;
}

.cookie-option strong {
  display: block;
  color: var(--color-text-primary);
  font-size: 0.86rem;
}

.cookie-option small {
  display: block;
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 0.74rem;
  line-height: 1.45;
}

.cookie-actions--panel {
  margin-top: 2px;
}

@media (max-width: 720px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    transform: none;
    padding: 18px 16px 16px;
    border-radius: 20px;
  }

  .cookie-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-btn {
    width: 100%;
    justify-content: center;
  }
}

.topnav-link:focus-visible,
.topnav-cta:focus-visible,
.topnav-search:focus-visible,
.topnav-toggle:focus-visible,
.hero-cta:focus-visible,
.hero-search-submit:focus-visible,
.search-shortcut:focus-visible,
.category-link:focus-visible,
.brand-link:focus-visible,
.hologram-card__cta:focus-visible,
.site-footer__col a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

@media (max-width: 1120px) {
  .hero-premium {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-visual {
    min-height: 560px;
    order: 3;
  }

  .hero-copy {
    order: 1;
  }

  .search-section {
    order: 4;
  }

  .needs-section {
    order: 5;
  }

  .needs-grid,
  .piliers-grid,
  .themes-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 980px) {
  html {
    scroll-padding-top: 148px;
  }

  .prototype-topnav.home-topnav {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .topnav-left {
    justify-content: space-between;
  }

  .topnav-toggle {
    display: inline-flex;
  }

  .topnav-panel {
    display: none;
  }

  .prototype-topnav.home-topnav.is-open .topnav-panel {
    display: block;
  }

  .home-nav {
    justify-content: flex-start;
    gap: 18px;
    padding: 12px 2px 2px;
  }

  .topnav-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .hero-visual {
    min-height: 560px;
  }

  hologram-card {
    min-height: 560px;
  }

  .search-shell--premium {
    padding: 18px 18px 16px;
  }

  .search-shell--premium .hero-search {
    grid-template-columns: 1fr;
  }

  .hero-search-submit {
    width: 100%;
  }

  .search-shell--premium {
    padding-bottom: 12px;
  }

  .hologram-card__glass {
    padding: 26px;
    gap: 24px;
  }

  .needs-grid,
  .themes-index-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .page-shell {
    width: min(100% - 24px, 100%);
    padding-top: 10px;
    padding-bottom: 30px;
  }

  .prototype-topnav.home-topnav,
  .search-section,
  .needs-section,
  .piliers-section,
  .faq-section,
  .site-footer__inner {
    border-radius: 22px;
  }

  .prototype-topnav.home-topnav {
    padding: 14px 14px 12px;
  }

  .hero-premium {
    gap: 24px;
    padding-top: 32px;
  }

  .hero-copy h1 {
    margin-top: 14px;
    line-height: 0.98;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-cta {
    width: 100%;
  }

  .hero-proof {
    align-items: flex-start;
  }

  .hero-trust {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-trust__item {
    width: 100%;
  }

  .search-section,
  .needs-section,
  .piliers-section,
  .faq-section {
    padding: 22px 18px;
  }

  .search-shell {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }

  .hero-search-icon {
    justify-self: start;
  }

  .hero-search-submit {
    width: 100%;
  }

  .piliers-grid {
    grid-template-columns: 1fr;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .faq-item summary {
    padding: 18px 18px;
  }

  .faq-content {
    padding: 0 18px 18px;
  }

  .faq-visual__card {
    max-width: none;
    min-height: 280px;
    padding: 28px 22px 24px;
  }

  .hero-visual {
    min-height: 420px;
    order: 3;
  }

  hologram-card {
    min-height: 420px;
  }

  .search-section {
    padding-top: 10px;
  }

  .search-shell--premium {
    padding: 18px;
    border-radius: 22px;
  }

  .search-section__heading {
    margin-bottom: 14px;
  }

  .search-shell__field {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 16px;
  }

  .hero-search-submit {
    min-height: 44px;
    border-radius: 16px;
  }

  .search-shortcuts {
    justify-content: flex-start;
    margin-left: 20px;
  }

  .search-shortcuts__label {
    width: auto;
    margin-right: 2px;
  }

  .search-shortcut {
    min-height: 34px;
    padding: 0 12px;
  }

  .search-shell--premium {
    padding-bottom: 10px;
  }

  .hologram-card__scene {
    border-radius: 26px;
  }

  .hologram-card__glass {
    padding: 20px;
    gap: 20px;
  }

  .mock-screen__body {
    padding: 14px;
  }

  .mock-screen__result-value {
    font-size: 1.5rem;
  }
}

/* Apparition progressive au scroll : amélioration purement additive, CSS natif (animation-timeline:
   view()), aucune dépendance JS. Les navigateurs sans support ne voient jamais la règle -> les cartes
   restent visibles par défaut, sans état intermédiaire caché. Neutralisée sous reduced-motion. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .needs-card,
    .piliers-card,
    .themes-index-card {
      animation: home-card-enter linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }

    @keyframes home-card-enter {
      from {
        opacity: 0;
        transform: translateY(14px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  hologram-card,
  .hologram-card__scene {
    transform: none !important;
  }
}