/* Anamna — site vitrine.
   Direction : Huis clos. Papier kraft, filets fins, Anamna Display Huis Clos
   pour les titres, Anamna Texte pour le texte (chiffres tabulaires là où
   l'ancienne monospace servait). Une seule
   rupture visuelle dans la page : la section sécurité, en encre profonde —
   c'est là que se joue l'argument, elle mérite le changement de registre. */

@import '/assets/fonts.css';
@import '/assets/tokens.css';
@import '/assets/compat-site.css';

/* Charte Huis clos (2026-10-04) : couleurs, polices et rupture sombre viennent de
   tokens.css via compat-site.css. Aucune couleur en dur ici. Le grain est la classe
   .an-grain posée sur <body> (réservé au site). */
:root { --wrap: 1120px; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: inherit; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 40px, 760px); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
}
h1 { font-size: clamp(2.6rem, 6.6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.005em; }
p { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 62ch; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.9rem; }

/* --- En-tête ------------------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav__inner { display: flex; align-items: center; gap: 26px; padding: 14px 0; }
.nav__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font-family: var(--font-display); font-size: 1.28rem; font-weight: 400; }
.nav__links { display: flex; gap: 24px; margin-left: auto; }
.nav__links a { text-decoration: none; font-size: 0.95rem; color: var(--ink-soft); }
.nav__links a:hover { color: var(--accent); }

.lang { position: relative; }
.lang__btn {
  font: inherit;
  font-size: 0.86rem;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--ink-soft);
}
.lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  min-width: 148px;
  box-shadow: var(--an-ombre-feuille);
  display: none;
}
.lang[data-open='true'] .lang__menu { display: block; }
.lang__menu a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 0.92rem; }
.lang__menu a:hover { background: var(--paper-warm); }
.lang__menu a[aria-current='true'] { color: var(--accent); font-weight: 700; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 11px;
  background: var(--accent);
  color: var(--an-on-action);
  text-decoration: none;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
}
.btn:hover { background: var(--accent-dark); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--paper-warm); }
.btn--small { padding: 9px 16px; font-size: 0.92rem; }
.btn--light { background: var(--deep-accent); color: var(--deep); }
.btn--light:hover { background: color-mix(in srgb, var(--deep-accent) 80%, var(--deep-ink)); }

/* --- Héros -------------------------------------------------------------- */
.hero { padding: clamp(52px, 8vw, 104px) 0 clamp(40px, 6vw, 76px); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.hero h1 { margin-bottom: 22px; white-space: pre-line; }
.hero .lead { font-size: 1.16rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 12px; }
.hero__note { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--ink-faint); }
.hero__bullets { list-style: none; padding: 0; margin: 30px 0 0; border-top: 1px solid var(--line); }
.hero__bullets li {
  padding: 11px 0 11px 28px;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-size: 0.98rem;
  color: var(--ink-soft);
}
.hero__bullets li::before {
  content: '';
  position: absolute;
  left: 2px; top: 20px;
  width: 12px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* --- Le panneau voix → document ---------------------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--an-ombre-feuille);
}
.panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper-warm);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.panel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.panel__body { padding: 18px; }
.talk {
  max-height: 300px;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding-right: 4px;
}
.talk__turn {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.talk__turn:last-child { border-bottom: 0; }
.talk__who {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 4px;
  text-align: right;
}
.talk__turn--doctor .talk__who { color: var(--accent); }
.talk__line {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.talk__turn--doctor .talk__line { color: var(--ink); }
/* Le tour en cours de frappe : c'est lui qui porte le curseur. */
.talk__turn--typing .talk__line::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--accent);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.note-out { border-top: 1px solid var(--line-soft); padding: 16px 18px 20px; background: var(--paper); }
.note-out__row { padding: 9px 0; border-bottom: 1px solid var(--line-soft); transition: opacity 0.5s, transform 0.5s; }
.note-out.is-armed .note-out__row { opacity: 0; transform: translateY(8px); }
.note-out__row:last-child { border-bottom: 0; }
.note-out.is-armed.is-on .note-out__row { opacity: 1; transform: none; }
.note-out__label { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.note-out__value { font-size: 0.95rem; }

.flagline {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--signal-soft);
  border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.88rem;
  margin-top: 12px;
}
.flagline b { color: var(--signal); }

/* --- Sections ------------------------------------------------------------ */
section { padding: clamp(52px, 7vw, 96px) 0; }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step { border-top: 2px solid var(--ink); padding-top: 18px; }
.step__n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--accent); letter-spacing: 0.1em; }
.step h3 { margin: 6px 0 10px; }
.step p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-soft); margin: 0; font-size: 0.98rem; }

/* --- Sécurité (rupture sombre) ------------------------------------------ */
.deep { background: var(--deep); color: var(--deep-ink); }
.deep .eyebrow { color: var(--deep-accent); }
.deep .lead { color: var(--an-ink-soft); } /* .deep porte data-theme="sombre" : jetons du thème sombre */
.deep a { color: var(--deep-accent); }
.deep__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.deep__points { list-style: none; padding: 0; margin: 0; }
.deep__points li { padding: 18px 0; border-top: 1px solid var(--deep-line); }
.deep__points li:last-child { border-bottom: 1px solid var(--deep-line); }
.deep__points strong { display: block; margin-bottom: 5px; font-size: 1.02rem; }
.deep__points span { color: var(--an-ink-soft); font-size: 0.96rem; }

.flow { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.8rem; line-height: 1.9; }
.flow__box { border: 1px solid var(--deep-line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.flow__box--live { border-color: var(--deep-accent); background: color-mix(in srgb, var(--deep-accent) 7%, transparent); }
.flow__arrow { text-align: center; color: var(--an-ink-faint); margin: 2px 0 8px; }
.flow__tag { color: var(--deep-accent); }
.flow__crossed { color: var(--an-ink-faint); text-decoration: line-through; }

/* --- Tarifs -------------------------------------------------------------- */
.currency { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 30px; }
.currency button {
  font: inherit; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.84rem;
  border: 0; background: transparent; padding: 8px 16px; cursor: pointer; color: var(--ink-soft);
}
.currency button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.plan--featured { border-color: var(--accent); box-shadow: 0 20px 44px -30px color-mix(in srgb, var(--accent) 70%, transparent); position: relative; }
.plan__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; }
.plan__tagline { color: var(--ink-faint); font-size: 0.9rem; margin-bottom: 18px; }
.plan__price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__period { font-size: 0.86rem; color: var(--ink-faint); margin-bottom: 20px; }
.plan__features { list-style: none; padding: 0; margin: 0 0 24px; }
.plan__features li { padding: 8px 0 8px 24px; position: relative; font-size: 0.95rem; border-bottom: 1px solid var(--line-soft); }
.plan__features li:last-child { border-bottom: 0; }
.plan__features li::before {
  content: '';
  position: absolute; left: 2px; top: 15px;
  width: 9px; height: 9px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* --- FAQ ----------------------------------------------------------------- */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); padding: 6px 0; }
.faq summary {
  cursor: pointer;
  padding: 16px 0;
  font-family: var(--an-famille-legende);
  font-size: 1.12rem;
  font-weight: 400;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; margin-left: auto; color: var(--accent); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.3rem; }
.faq details[open] summary::after { content: '−'; }
.faq p { color: var(--ink-soft); margin: 0 0 18px; max-width: 68ch; }

/* --- Appel final + formulaire -------------------------------------------- */
.final { text-align: center; }
.final h2 { margin-bottom: 14px; }
.final .lead { margin-inline: auto; }
.trial-form { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 10px; margin: 28px auto 12px; max-width: 780px; }
.trial-form input {
  font: inherit;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
.trial-form input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-msg { font-size: 0.92rem; min-height: 22px; }
.form-msg[data-kind='ok'] { color: var(--accent); }
.form-msg[data-kind='error'] { color: var(--an-alert); }

/* --- Pied ---------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); padding: 44px 0 60px; }
.foot__grid { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.foot__brand { display: flex; align-items: center; gap: 11px; font-family: var(--an-famille-legende); font-size: 1.2rem; font-weight: 400; }
.foot__links { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.foot__links a { color: var(--ink-soft); text-decoration: none; font-size: 0.94rem; }
.foot__links a:hover { color: var(--accent); }
.foot__legal { margin-top: 26px; font-size: 0.84rem; color: var(--ink-faint); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Pages de texte ------------------------------------------------------- */
.doc { padding: clamp(44px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.doc h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); margin-bottom: 18px; }
.doc h2 { font-size: 1.42rem; margin: 40px 0 12px; }
.doc p { color: var(--ink-soft); max-width: 70ch; }

/* --- Réactivité ----------------------------------------------------------- */
@media (max-width: 900px) {
  .hero__grid, .deep__grid { grid-template-columns: 1fr; }
  .steps, .plans { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .trial-form { grid-template-columns: 1fr; }
}

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

/* --- Choix de la langue parlée dans la démo ------------------------------ */
.pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.pick__label {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 2px;
}
.pick__btn {
  font: inherit;
  font-size: 0.78rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 3px 11px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pick__btn:hover { border-color: var(--accent); color: var(--accent); }
.pick__btn[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--an-on-action);
  font-weight: 700;
}
.pick__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- « Tout reste chez vous » + sauvegarde en option --------------------- */
.keep {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  margin-top: 22px;
}
.keep h3 { margin-bottom: 10px; }
.keep p { font-size: 0.98rem; }
.keep__local {
  background: var(--deep);
  color: var(--deep-ink);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.keep__local p { color: var(--an-ink-soft); margin: 0; } /* data-theme="sombre" */
.keep__backup {
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal);
  border-radius: 16px;
  padding: 28px;
  background: var(--surface);
}
.keep__backup p { color: var(--ink-soft); }
.keep__backup p:last-child { margin: 0; }

@media (max-width: 900px) {
  .keep { grid-template-columns: 1fr; }
}