/* KONDENSA — vitrine — design system galaxie SANTVIA ("Liquid Glass", macOS 27) */

:root {
  --bg: #EBEEF1;
  --surface: #FFFFFF;
  --surface-2: #F3F5F8;
  --panel: #0C1626;
  --ink: #0C1626;
  --muted: #54657A;
  --faint: #5E6977;
  --hair: #D8DEE5;
  --navy: #0C1626;
  --gold: #8A6820;
  --gold-2: #A98232;
  --accent: #2E9E7B; /* vert lecture — accent Kondensa */
  --accent-2: #278A6B;
  --accent-ink: #ffffff;
  --glass-bg: color-mix(in srgb, #FFFFFF 62%, transparent);
  --glass-border: color-mix(in srgb, #FFFFFF 40%, var(--hair));
  --shadow-1: 0 1px 2px color-mix(in srgb, #0C1626 6%, transparent), 0 10px 30px color-mix(in srgb, #0C1626 8%, transparent);
  --shadow-2: 0 20px 60px color-mix(in srgb, #0C1626 16%, transparent);
  --radius-lg: 26px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --maxw: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080F1C;
    --surface: #0F1B2D;
    --surface-2: #132339;
    --panel: #0C1626;
    --ink: #E9EDF2;
    --muted: #93A3B7;
    --faint: #7789A0;
    --hair: #20334D;
    --gold: #CDA24E;
    --gold-2: #E1C079;
    --accent: #45C39E;
    --accent-2: #5FD6B3;
    --accent-ink: #06251c;
    --glass-bg: color-mix(in srgb, #0F1B2D 55%, transparent);
    --glass-border: color-mix(in srgb, #FFFFFF 8%, var(--hair));
    --shadow-1: 0 1px 2px color-mix(in srgb, #000 30%, transparent), 0 10px 30px color-mix(in srgb, #000 30%, transparent);
    --shadow-2: 0 24px 70px color-mix(in srgb, #000 55%, transparent);
  }
}
:root[data-theme="dark"] {
  --bg: #080F1C;
  --surface: #0F1B2D;
  --surface-2: #132339;
  --panel: #0C1626;
  --ink: #E9EDF2;
  --muted: #93A3B7;
  --faint: #7789A0;
  --hair: #20334D;
  --gold: #CDA24E;
  --gold-2: #E1C079;
  --accent: #45C39E;
  --accent-2: #5FD6B3;
  --accent-ink: #06251c;
  --glass-bg: color-mix(in srgb, #0F1B2D 55%, transparent);
  --glass-border: color-mix(in srgb, #FFFFFF 8%, var(--hair));
  --shadow-1: 0 1px 2px color-mix(in srgb, #000 30%, transparent), 0 10px 30px color-mix(in srgb, #000 30%, transparent);
  --shadow-2: 0 24px 70px color-mix(in srgb, #000 55%, transparent);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; letter-spacing: -0.015em; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 100;
}
.skip-link:focus { left: 0; }

section { padding: 88px 0; }
section.tight { padding: 56px 0; }
.eyebrow {
  font-size: 0.78125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2); display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent-2); opacity: .8; }
.lead { color: var(--muted); font-size: 1.125rem; max-width: 62ch; }
.section-head { max-width: 68ch; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(1.625rem, 3.4vw, 2.25rem); }
.section-head p { margin-top: 14px; }

/* ---------- glass primitives ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--shadow-1);
}
.card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-md);
  padding: 28px;
}
.card h3 { font-size: 1.125rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.9375rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 100px; font-size: 0.90625rem; font-weight: 600;
  letter-spacing: .01em; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  border: 1px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 45%, transparent); }
.btn-ghost { background: var(--glass-bg); border-color: var(--glass-border); color: var(--ink); backdrop-filter: blur(16px); }
.btn-ghost:hover { border-color: var(--accent-2); }
.btn-sm { padding: 8px 16px; font-size: 0.8125rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; padding: 14px 0;
}
.site-header .wrap {
  display: flex; align-items: center; gap: 20px; position: relative;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 100px; padding: 10px 12px 10px 18px;
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--shadow-1);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; letter-spacing: -.01em; margin-right: 6px; }
.brand .mark { width: 26px; height: 26px; color: var(--accent-2); flex: none; }
.brand small { display: block; font-size: 0.625rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav-links a {
  font-size: 0.875rem; font-weight: 500; color: var(--muted); text-decoration: none;
  padding: 8px 12px; border-radius: 100px; transition: color .15s ease, background-color .15s ease;
}
.nav-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }

.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 100%; color: var(--muted); transition: background-color .15s ease, color .15s ease;
}
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }
.lang-switch { display: flex; align-items: center; gap: 2px; font-size: 0.78125rem; font-weight: 600; }
.lang-switch a { padding: 6px 9px; border-radius: 100px; color: var(--faint); text-decoration: none; }
.lang-switch a[aria-current="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.nav-toggle { display: none; }

/* ---------- hero ---------- */
.hero { padding: 64px 0 20px; position: relative; overflow: hidden; }
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1.4px);
  background-size: 28px 28px; opacity: .5;
  mask-image: radial-gradient(120% 70% at 80% 0%, #000 0%, transparent 65%);
}
.hero-body { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.125rem, 5vw, 3.375rem); line-height: 1.05; max-width: 16ch; }
.hero h1 .accent { color: var(--accent-2); }
.hero-sub { margin-top: 22px; font-size: clamp(1rem, 1.8vw, 1.15625rem); color: var(--muted); max-width: 54ch; line-height: 1.6; }
.hero-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.chips { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 0.78125rem; font-weight: 600; letter-spacing: .02em; color: var(--muted);
  border: 1px solid var(--hair); border-radius: 100px; padding: 7px 13px 7px 10px;
  display: inline-flex; align-items: center; gap: 6px; background: var(--surface);
}
.chip svg { width: 14px; height: 14px; color: var(--accent-2); }

/* ---------- digest mock ---------- */
.digest-mock { border-radius: var(--radius-lg); overflow: hidden; }
.digest-mock .dm-head {
  display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--glass-border);
}
.digest-mock .dm-avatar {
  width: 34px; height: 34px; border-radius: 100%; background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  color: var(--accent-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8125rem;
}
.digest-mock .dm-title { font-size: 0.90625rem; font-weight: 700; }
.digest-mock .dm-sub { font-size: 0.75rem; color: var(--faint); }
.digest-mock .dm-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.dm-item { display: flex; gap: 12px; }
.dm-date {
  flex: none; width: 64px; font-size: 0.6875rem; font-weight: 600; color: var(--faint); padding-top: 2px;
}
.dm-text { font-size: 0.875rem; color: var(--ink); line-height: 1.55; }
.dm-cite {
  display: inline-flex; align-items: center; gap: 4px; font-size: 0.71875rem; font-weight: 600;
  color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 100px;
  padding: 2px 9px 2px 7px; margin-left: 6px; white-space: nowrap; vertical-align: 1px;
}
.dm-cite svg { width: 11px; height: 11px; }
.dm-flag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; font-weight: 700;
  color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 100px;
  padding: 3px 10px; margin-top: 10px; background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.dm-flag svg { width: 12px; height: 12px; }

/* ---------- grids ---------- */
.cols { display: grid; gap: 20px; }
.c2 { grid-template-columns: repeat(2, 1fr); }
.c3 { grid-template-columns: repeat(3, 1fr); }
.c4 { grid-template-columns: repeat(4, 1fr); }

.icon-tile {
  width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); color: var(--accent-2); margin-bottom: 16px;
}
.icon-tile svg { width: 22px; height: 22px; }

/* ---------- steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.step { position: relative; padding: 26px 22px; border-radius: var(--radius-md); border: 1px solid var(--hair); background: var(--surface); }
.step .num {
  font-size: 0.75rem; font-weight: 700; color: var(--accent-2); letter-spacing: .08em;
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.step .num::before { content: ""; width: 20px; height: 1px; background: var(--accent-2); opacity: .6; }
.step h3 { font-size: 1rem; margin-bottom: 8px; }
.step p { font-size: 0.875rem; color: var(--muted); }

/* ---------- panel (dark inset) ---------- */
.panel {
  background: var(--panel); color: #E9EDF2; border-radius: 28px; padding: 56px;
  position: relative; overflow: hidden;
}
.panel .muted-on-panel { color: #93A3B7; }
.panel h2, .panel h3 { color: #E9EDF2; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--hair); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; font-size: 0.96875rem; font-weight: 600;
}
.faq-q svg { width: 18px; height: 18px; color: var(--faint); flex: none; transition: transform .2s ease; }
.faq-item[open] .faq-q svg { transform: rotate(45deg); color: var(--accent-2); }
.faq-a { padding: 0 22px 20px; color: var(--muted); font-size: 0.90625rem; line-height: 1.65; max-width: 68ch; }
.faq-a p + p { margin-top: 10px; }

/* ---------- table ---------- */
.compare-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.90625rem; }
.compare-table th, .compare-table td { padding: 14px 16px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.compare-table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-weight: 700; }
.compare-table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.compare-table td.yes { color: var(--accent-2); font-weight: 600; }
.compare-table td.no { color: var(--faint); }
.compare-table tr:last-child td, .compare-table tr:last-child th { border-bottom: 0; }

/* ---------- pricing ---------- */
.price-card { border: 1px solid var(--hair); border-radius: var(--radius-md); background: var(--surface); padding: 30px; display: flex; flex-direction: column; gap: 16px; }
.price-card.featured { border-color: color-mix(in srgb, var(--accent) 45%, var(--hair)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.price-card .tag { font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
.price-card .name { font-size: 1.25rem; font-weight: 700; }
.price-card .desc { font-size: 0.875rem; color: var(--muted); }
.price-card ul { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.price-card li { display: flex; gap: 9px; font-size: 0.84375rem; color: var(--ink); align-items: flex-start; }
.price-card li svg { width: 15px; height: 15px; color: var(--accent-2); flex: none; margin-top: 2px; }

/* ---------- footer ---------- */
.site-footer { padding: 64px 0 40px; border-top: 1px solid var(--hair); margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer-brand .mark { width: 24px; height: 24px; color: var(--accent-2); margin-bottom: 12px; }
.footer-brand p { color: var(--muted); font-size: 0.84375rem; max-width: 34ch; margin-top: 10px; }
.footer-col h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 14px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.84375rem; color: var(--muted); text-decoration: none; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center;
  font-size: 0.78125rem; color: var(--faint);
}
.footer-bottom .legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom a { color: var(--faint); text-decoration: none; }
.footer-bottom a:hover { color: var(--ink); }

/* ---------- galaxy strip ---------- */
.galaxy-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.galaxy-strip a {
  font-size: 0.78125rem; font-weight: 600; color: var(--muted); text-decoration: none;
  border: 1px solid var(--hair); border-radius: 100px; padding: 7px 13px; background: var(--surface);
}
.galaxy-strip a:hover { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--hair)); }

/* ---------- misc ---------- */
.note-box {
  border: 1px dashed var(--hair); border-radius: var(--radius-md); padding: 18px 20px; color: var(--muted); font-size: 0.84375rem;
  display: flex; gap: 12px; align-items: flex-start; background: var(--surface-2);
}
.note-box svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 1px; }
.badge-soon {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 100px; padding: 2px 8px;
}

@media (max-width: 980px) {
  .hero-body { grid-template-columns: 1fr; }
  .c4 { grid-template-columns: repeat(2, 1fr); }
  .c3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  /* Menu mobile : le bouton .nav-toggle bascule .nav-open sur <body>
     (apps/vitrine/assets/app.js) — sans cette regle, .nav-links restait
     display:none quel que soit l'etat, rendant le bouton hamburger inerte. */
  body.nav-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: 20px; padding: 8px;
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: var(--shadow-2); z-index: 60;
  }
  body.nav-open .nav-links a { padding: 12px 14px; }
  .c2, .c3, .c4, .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  section { padding: 60px 0; }
  .panel { padding: 34px 24px; }
}

/* Accessibilite - mouvement reduit (WCAG 2.3.3) : neutralise toutes les
   transitions/animations quand le systeme le demande, meme regle que
   apps/web/app.css. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* Accessibilite - mode contraste renforce du systeme (forced-colors, ex.
   Windows High Contrast). Le navigateur neutralise deja nos couleurs
   personnalisees (fonds/bordures) au profit des couleurs systeme - correct
   par defaut, mais efface du meme coup l'unique etat de cette page qui ne
   repose QUE sur un fond sans bordure ni texte distinctif : la langue
   courante du selecteur (.lang-switch a[aria-current="true"]). Sans contour
   restaure, elle devient indiscernable des autres langues pour un
   utilisateur en contraste renforce - meme regle que apps/web/app.css. */
@media (forced-colors: active) {
  .lang-switch a[aria-current="true"] {
    outline: 2px solid;
    outline-offset: -2px;
  }
}

/* Accessibilite - transparence reduite (prefers-reduced-transparency). Le
   verre depoli (galaxie SANTVIA) est pose sur plusieurs surfaces (.glass,
   .btn-ghost, l'en-tete .site-header, le panneau du menu mobile) : un flou
   translucide reduit le contraste entre le contenu recouvert et la surface
   qui le recouvre, genant pour un utilisateur ayant demande au systeme de
   reduire les effets de transparence (meme famille que prefers-reduced-motion,
   deja traite ci-dessus - meme regle que apps/web/app.css). Ces surfaces
   repassent en fond opaque et sans flou. */
@media (prefers-reduced-transparency: reduce) {
  .glass,
  .btn-ghost,
  .site-header .wrap,
  body.nav-open .nav-links {
    background: var(--surface);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}