/* Suite Heylio — charte du site vitrine. FICHIER GÉNÉRÉ par marketing/charte-suite.mjs
   depuis le registre du socle (https://app.fastoche.org/r/heylio-theme.json, HER-389). Ne pas éditer. */

:root {
  color-scheme: light;
  --font-heading: 'Albert Sans', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Fragment Mono', ui-monospace, monospace;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --background: oklch(0.97 0.005 95.1);
  --foreground: oklch(0.21 0.006 285.9);
  --card: oklch(1 0 0);
  --popover: oklch(1 0 0);
  --primary: oklch(0.21 0.006 285.9);
  --secondary: oklch(0.945 0.007 97.4);
  --muted: oklch(0.945 0.007 97.4);
  --muted-foreground: oklch(0.471 0.006 95.2);
  --accent: oklch(0.945 0.007 97.4);
  --destructive: oklch(0.549 0.19 31);
  --success: oklch(0.515 0.11 157.6);
  --warning: oklch(0.549 0.13 57.3);
  --info: oklch(0.509 0.19 264.4);
  --dispute: oklch(0.541 0.217 300.9);
  --border: oklch(0.909 0.01 93.6);
  --input: oklch(0.651 0.005 78.3);
  --sidebar: oklch(0.97 0.005 95.1);
  --sidebar-accent: oklch(0.939 0.007 97.4);
  --card-foreground: oklch(0.21 0.006 285.9);
  --popover-foreground: oklch(0.21 0.006 285.9);
  --secondary-foreground: oklch(0.21 0.006 285.9);
  --accent-foreground: oklch(0.21 0.006 285.9);
  --primary-foreground: oklch(1 0 0);
  --destructive-foreground: oklch(1 0 0);
  --success-foreground: oklch(1 0 0);
  --warning-foreground: oklch(1 0 0);
  --info-foreground: oklch(1 0 0);
  --dispute-foreground: oklch(1 0 0);
  --ring: oklch(0.21 0.006 285.9);
  --sidebar-foreground: oklch(0.21 0.006 285.9);
  --sidebar-primary: oklch(0.21 0.006 285.9);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.9);
  --sidebar-border: oklch(0.909 0.01 93.6);
  --sidebar-ring: oklch(0.21 0.006 285.9);
  --chart-2: oklch(0.509 0.19 264.4);
  --chart-3: oklch(0.515 0.11 157.6);
  --chart-4: oklch(0.549 0.13 57.3);
  --chart-5: oklch(0.541 0.217 300.9);
  --brand: oklch(0.582 0.217 281.8);
  --brand-foreground: oklch(1 0 0);
  --brand-line: oklch(0.582 0.217 281.8);
  --chart-1: oklch(0.582 0.217 281.8);
  --radius: 16px;
  --brand: oklch(0.582 0.217 281.8);
  --brand-foreground: oklch(1 0 0);
  --brand-line: oklch(0.582 0.217 281.8);
  --chart-1: oklch(0.582 0.217 281.8);
  --g-50: 0.97 0.005 95.1;
  --g-100: 0.945 0.007 97.4;
  --g-200: 0.909 0.01 93.6;
  --g-300: 0.84 0.009 93;
  --g-400: 0.651 0.005 78.3;
  --g-500: 0.52 0.006 90;
  --g-600: 0.471 0.006 95.2;
  --g-700: 0.37 0.006 286;
  --g-800: 0.28 0.006 286;
  --g-900: 0.21 0.006 285.9;
  --g-950: 0.17 0.005 286;
  --b-50: 0.965 0.018 281.8;
  --b-100: 0.935 0.035 281.8;
  --b-200: 0.88 0.07 281.8;
  --b-300: 0.8 0.12 281.8;
  --b-400: 0.7 0.17 281.8;
  --b-500: 0.64 0.2 281.8;
  --b-600: 0.582 0.217 281.8;
  --b-700: 0.52 0.2 281.8;
  --b-800: 0.45 0.17 281.8;
  --b-900: 0.38 0.14 281.8;
  --c-carte: 1 0 0;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: oklch(0.183 0.004 286);
    --foreground: oklch(0.964 0.005 95.1);
    --card: oklch(0.224 0.008 285.8);
    --popover: oklch(0.224 0.008 285.8);
    --primary: oklch(0.964 0.005 95.1);
    --secondary: oklch(0.271 0.009 285.8);
    --muted: oklch(0.271 0.009 285.8);
    --muted-foreground: oklch(0.711 0.009 98.9);
    --accent: oklch(0.271 0.009 285.8);
    --destructive: oklch(0.696 0.16 29.9);
    --success: oklch(0.735 0.136 159.3);
    --warning: oklch(0.779 0.138 68.3);
    --info: oklch(0.725 0.142 266.9);
    --dispute: oklch(0.721 0.157 302.9);
    --border: oklch(0.304 0.011 285.7);
    --input: oklch(0.527 0.009 293.7);
    --sidebar: oklch(0.183 0.004 286);
    --sidebar-accent: oklch(0.271 0.009 285.8);
    --card-foreground: oklch(0.964 0.005 95.1);
    --popover-foreground: oklch(0.964 0.005 95.1);
    --secondary-foreground: oklch(0.964 0.005 95.1);
    --accent-foreground: oklch(0.964 0.005 95.1);
    --primary-foreground: oklch(0.183 0.004 286);
    --destructive-foreground: oklch(0.21 0.006 285.9);
    --success-foreground: oklch(0.21 0.006 285.9);
    --warning-foreground: oklch(0.21 0.006 285.9);
    --info-foreground: oklch(0.21 0.006 285.9);
    --dispute-foreground: oklch(0.21 0.006 285.9);
    --ring: oklch(0.964 0.005 95.1);
    --sidebar-foreground: oklch(0.964 0.005 95.1);
    --sidebar-primary: oklch(0.964 0.005 95.1);
    --sidebar-primary-foreground: oklch(0.183 0.004 286);
    --sidebar-accent-foreground: oklch(0.964 0.005 95.1);
    --sidebar-border: oklch(0.304 0.011 285.7);
    --sidebar-ring: oklch(0.964 0.005 95.1);
    --chart-2: oklch(0.725 0.142 266.9);
    --chart-3: oklch(0.735 0.136 159.3);
    --chart-4: oklch(0.779 0.138 68.3);
    --chart-5: oklch(0.721 0.157 302.9);
    --brand: oklch(0.582 0.217 281.8);
    --brand-foreground: oklch(1 0 0);
    --brand-line: oklch(0.582 0.217 281.8);
    --chart-1: oklch(0.582 0.217 281.8);
    --brand: oklch(0.582 0.217 281.8);
    --brand-foreground: oklch(1 0 0);
    --brand-line: oklch(0.582 0.217 281.8);
    --chart-1: oklch(0.582 0.217 281.8);
    --g-50: 0.183 0.004 286;
    --g-100: 0.251 0.009 285.8;
    --g-200: 0.304 0.011 285.7;
    --g-300: 0.37 0.01 286;
    --g-400: 0.553 0.005 286.2;
    --g-500: 0.66 0.008 98;
    --g-600: 0.711 0.009 98.9;
    --g-700: 0.8 0.007 97;
    --g-800: 0.88 0.006 96;
    --g-900: 0.964 0.005 95.1;
    --g-950: 0.985 0.003 95;
    --b-50: 0.25 0.05 281.8;
    --b-100: 0.29 0.075 281.8;
    --b-200: 0.34 0.1 281.8;
    --b-300: 0.42 0.14 281.8;
    --b-400: 0.52 0.18 281.8;
    --b-500: 0.582 0.217 281.8;
    --b-600: 0.66 0.19 281.8;
    --b-700: 0.74 0.15 281.8;
    --b-800: 0.82 0.11 281.8;
    --b-900: 0.88 0.07 281.8;
    --c-carte: 0.224 0.008 285.8;
  }
}

/* Îlots encre (pied de page, « How it works », appel final) : encre en clair
   comme en sombre. En sombre, ils reprennent les gammes CLAIRES ; les variables
   de la page qui en dérivent sont redéclarées ici pour être recalculées sur l'îlot. */
@media (prefers-color-scheme: dark) {
  .footer, footer.bg-gray-900, .bg-gray-900, .how-it-works, .cta-section {
    --g-50: 0.97 0.005 95.1;
    --g-100: 0.945 0.007 97.4;
    --g-200: 0.909 0.01 93.6;
    --g-300: 0.84 0.009 93;
    --g-400: 0.651 0.005 78.3;
    --g-500: 0.52 0.006 90;
    --g-600: 0.471 0.006 95.2;
    --g-700: 0.37 0.006 286;
    --g-800: 0.28 0.006 286;
    --g-900: 0.21 0.006 285.9;
    --g-950: 0.17 0.005 286;
    --b-50: 0.965 0.018 281.8;
    --b-100: 0.935 0.035 281.8;
    --b-200: 0.88 0.07 281.8;
    --b-300: 0.8 0.12 281.8;
    --b-400: 0.7 0.17 281.8;
    --b-500: 0.64 0.2 281.8;
    --b-600: 0.582 0.217 281.8;
    --b-700: 0.52 0.2 281.8;
    --b-800: 0.45 0.17 281.8;
    --b-900: 0.38 0.14 281.8;
    --c-carte: 1 0 0;
    --gray-50: oklch(var(--g-50));
    --gray-100: oklch(var(--g-100));
    --gray-200: oklch(var(--g-200));
    --gray-300: oklch(var(--g-300));
    --gray-400: oklch(var(--g-400));
    --gray-500: oklch(var(--g-500));
    --gray-600: oklch(var(--g-600));
    --gray-700: oklch(var(--g-700));
    --gray-800: oklch(var(--g-800));
    --gray-900: oklch(var(--g-900));
    --gray-950: oklch(var(--g-950));
    --mk-primary: oklch(var(--g-900));
    --mk-primary-dark: oklch(var(--g-800));
    --mk-primary-light: oklch(var(--g-100));
    --mk-accent: oklch(var(--b-600));
    --mk-accent-light: oklch(var(--b-50));
    --foreground: oklch(0.964 0.005 95.1);
    --primary-foreground: oklch(1 0 0);
    color-scheme: dark;
  }
}

/* Papier, encre, polices */
html body, body[class] {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}
h1, h2, h3, h4, .hero-title, .section-title { font-family: var(--font-heading); letter-spacing: -0.02em; }
code, kbd, pre, .stat-number, .stat-value, .font-mono { font-family: var(--font-mono); }
::selection { background: oklch(var(--b-600) / 0.22); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Logo « Point d'accent » */
.suite-logo { display: block; height: 26px; width: auto; color: var(--foreground); flex-shrink: 0; }
footer .suite-logo, .footer-logo .suite-logo { color: inherit; }
.suite-symbole { width: 88px; height: 88px; border-radius: 22px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* Boutons pilule encre (l'ancien indigo) : le texte suit la surface en sombre. */
.btn-primary, .nav-cta, .bg-primary { color: var(--primary-foreground) !important; }
.btn-primary:hover, .bg-primary:hover { background-color: oklch(var(--g-800)) !important; }

/* Barres de navigation translucides : papier, pas blanc. */
.nav-scrolled, .nav.scrolled { background: oklch(var(--g-50) / 0.88) !important; }
.nav-legal { background: var(--background); border-color: var(--border); }

/* Accent de chaque app de la suite (registre du socle) */
[data-app='heylio'] {
  --brand: oklch(0.582 0.217 281.8);
  --brand-foreground: oklch(1 0 0);
  --brand-line: oklch(0.582 0.217 281.8);
  --chart-1: oklch(0.582 0.217 281.8);
}
[data-app='heyreturn'] {
  --brand: oklch(0.907 0.154 102.6);
  --brand-foreground: oklch(0.21 0.006 285.9);
  --brand-line: oklch(0.603 0.091 101.9);
  --chart-1: oklch(0.603 0.091 101.9);
}
[data-app='heytracker'] {
  --brand: oklch(0.657 0.116 176.4);
  --brand-foreground: oklch(0.21 0.006 285.9);
  --brand-line: oklch(0.608 0.106 176.7);
  --chart-1: oklch(0.608 0.106 176.7);
}
[data-app='heyfit'] {
  --brand: oklch(0.729 0.17 35.1);
  --brand-foreground: oklch(0.21 0.006 285.9);
  --brand-line: oklch(0.621 0.137 34.8);
  --chart-1: oklch(0.621 0.137 34.8);
}
@media (prefers-color-scheme: dark) {
  [data-app='heylio'] {
    --brand: oklch(0.582 0.217 281.8);
    --brand-foreground: oklch(1 0 0);
    --brand-line: oklch(0.582 0.217 281.8);
    --chart-1: oklch(0.582 0.217 281.8);
  }
  [data-app='heyreturn'] {
    --brand: oklch(0.907 0.154 102.6);
    --brand-foreground: oklch(0.21 0.006 285.9);
    --brand-line: oklch(0.907 0.154 102.6);
    --chart-1: oklch(0.907 0.154 102.6);
  }
  [data-app='heytracker'] {
    --brand: oklch(0.657 0.116 176.4);
    --brand-foreground: oklch(0.21 0.006 285.9);
    --brand-line: oklch(0.657 0.116 176.4);
    --chart-1: oklch(0.657 0.116 176.4);
  }
  [data-app='heyfit'] {
    --brand: oklch(0.729 0.17 35.1);
    --brand-foreground: oklch(0.21 0.006 285.9);
    --brand-line: oklch(0.729 0.17 35.1);
    --chart-1: oklch(0.729 0.17 35.1);
  }
}

/* Section « La suite Heylio » (accueil) : une carte par app, liseré à l'accent de l'app. */
.suite-grille { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .suite-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .suite-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.suite-app {
  position: relative; display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 2rem 1.5rem 1.5rem; overflow: hidden;
}
.suite-app::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand); }
.suite-app-nom { margin: 0; line-height: 1; font-size: 1rem; }
.suite-app-logo { display: block; height: 28px; width: auto; max-width: 100%; color: var(--foreground); }
.suite-app-role {
  margin: 0.75rem 0 0; font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground);
}
.suite-app .suite-app-texte { flex: 1; margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--muted-foreground); }
.suite-app-pied { margin: 0.75rem 0 0; }
.suite-app-statut {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem;
  border-radius: 9999px; background: var(--secondary); color: var(--secondary-foreground);
  font-size: 0.8125rem; font-weight: 600;
}
.suite-app-statut::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-line); }
.suite-app-lien {
  display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; color: var(--foreground);
  text-decoration: underline; text-decoration-color: var(--brand-line); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.suite-app-lien:hover { text-decoration-color: var(--foreground); }
.suite-app-lien svg { width: 1rem; height: 1rem; }