/* ==========================================================================
   BeY — Site vitrine
   Style : inspiration Microsoft Health Solutions (grille aérée, typographie
   Segoe, bandeau produit collant, cartes).

   PALETTE — la famille « spark » de l'application, dans ses deux faces :
     · spark-light pour le corps de page — blanc à reflet lime (#f7fbf2), encre
       forêt (#0b130f), accent olive (#4c7a05) ;
     · spark pour la barre de menu, l'accroche et les bandes sombres — vert
       forêt (#0b130f), panneaux (#0f2a1d), lime vif (#b4f105).
   Les valeurs viennent de veritas-react/src/index.css, [data-theme="spark"]
   et [data-theme="spark-light"]. Les captures d'écran sont prises en spark.

   ⚠️ POURQUOI DEUX FACES ET PAS UNE. Le lime pur (#b4f105) sur fond blanc
   donne un contraste de 1,5:1 — illisible. La face claire garde la TEINTE et
   pose un olive sombre. Et un site entièrement sombre ferait disparaître les
   captures dans la page : on lit en clair, le produit se montre en sombre.

   Ce fichier ne contient QUE des règles portées par une page. Ce que les
   coupes successives ont rendu inutile vit dans archive/removed-css.css.
   ========================================================================== */

/* --- 1. Jetons ----------------------------------------------------------- */
:root {
  /* Encres — spark-light: ink / ink-dim / ink-faint */
  --ink:        #0b130f;
  --ink-2:      #3b4f42;
  --ink-3:      #63796b;

  /* Traits — spark-light: border / border-soft */
  --line:       #c9dbb4;
  --line-2:     #dfedcd;

  /* Fonds — spark-light: panel / bg / bg-soft */
  --surface:    #ffffff;
  --surface-2:  #f7fbf2;
  --surface-3:  #eef7e2;

  /* Accent — spark-light: teal (olive) / teal-deep */
  --accent:       #4c7a05;
  --accent-hover: #365804;
  --accent-soft:  #eef7e2;
  --accent-line:  #c9dbb4;
  /* Le lime vif de spark : réservé aux fonds sombres, où il est lisible */
  --accent-lift:  #b4f105;

  /* Bandes profondes — spark: night / bg / panel / panel-2 / border / ink / ink-dim */
  --deep:      #051c12;
  --deep-2:    #0f2a1d;
  --deep-3:    #143726;
  --deep-line: #245c3f;
  --deep-ink:  #e8f3ec;
  --deep-dim:  #a7bfb2;

  /* Sémantiques — spark-light: amber / rose / violet / green */
  --amber:      #9a5b04;
  --rose:       #b31f42;
  --violet:     #5a34a8;
  --green:      #136b3a;

  --maxw: 1440px;
  --pad: 48px;

  --sans: "Segoe UI", "Segoe UI Web", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Space Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* --- 2. Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Marge de défilement = hauteur des barres collantes (produit 70px + filtre 59px). */
html { scroll-behavior: smooth; scroll-padding-top: 148px; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.18; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 3. Marque (pastille + nom, barre collante et pied de page) ---------- */
.logo {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); font-weight: 700; letter-spacing: -0.02em; font-size: 17px;
}
.logo:hover { text-decoration: none; }
.logo__mark {
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 26px;
  background: linear-gradient(135deg, #d6ff5c, var(--accent-lift));
  color: var(--ink); font-weight: 700; font-size: 14px;
  display: grid; place-items: center;
}

/* --- 4. Barre produit collante — le menu horizontal ---------------------- */
/* La barre reste SOMBRE au-dessus des sections claires : elle ancre la marque
   et fait écho aux captures d'un bout à l'autre de la page. */
.productbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,19,15,.92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(180,241,5,.22);
}
.productbar__inner {
  display: flex; align-items: center; gap: 8px;
  height: 70px;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
}
.productbar__title {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: #ffffff;
  margin-right: 20px; white-space: nowrap;
}
.productbar__title:hover { text-decoration: none; }
.productbar__title span { color: var(--deep-dim); font-weight: 400; }
/* La pastille est un <span> : sans cette regle elle heriterait du gris et du
   poids normal de la ligne au-dessus. Deux classes battent classe + type. */
.productbar__title .logo__mark {
  width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px;
  font-size: 15px; font-weight: 700; color: var(--ink);
}

.pnav { display: flex; align-items: center; gap: 2px; }
.pnav__item { position: relative; }
.pnav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 6px;
  color: var(--deep-ink); font-size: 15px; font-weight: 400;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.pnav__link:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.pnav__link[aria-current="page"] { font-weight: 600; color: #fff; box-shadow: inset 0 -3px 0 var(--accent-lift); border-radius: 6px 6px 0 0; }

.productbar__spacer { flex: 1; }

/* --- 5. Boutons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 24px; border-radius: 4px; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--onDark { background: var(--accent-lift); color: var(--ink); }
.btn--onDark:hover { background: #d6ff5c; color: var(--ink); }

/* --- 6. Blocs de section ------------------------------------------------- */
.section { padding: 88px 0; }
.section--tight { padding: 60px 0; }
.section--alt { background: var(--surface-2); }
.section--dark { background: linear-gradient(160deg, #051c12 0%, #0b130f 55%, #0e1d15 100%); color: var(--deep-ink); }
.section--dark h2, .section--dark h3 { color: #fff; }

.eyebrow {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent);
  margin-bottom: 14px;
}
.section--dark .eyebrow { color: var(--accent-lift); }

.h1 { font-size: clamp(38px, 4.6vw, 60px); font-weight: 600; letter-spacing: -0.03em; }
.h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.025em; }
.lead { font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.section--dark .lead { color: var(--deep-dim); }
.muted { color: var(--ink-3); }

.section__head { max-width: 780px; margin-bottom: 44px; }
.section__head .lead { margin-top: 16px; }

/* --- 7. Hero ------------------------------------------------------------- */
/* L'accroche est de la couleur exacte des captures : le premier écran et le
   produit ne font qu'une surface. Le halo lime derrière le carrousel donne le
   relief que le dégradé seul n'aurait pas. */
.hero {
  position: relative;
  background: linear-gradient(160deg, #051c12 0%, #0b130f 55%, #0e1d15 100%);
  color: var(--deep-ink);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: auto -10% -30% 45%;
  height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(180,241,5,.16), rgba(180,241,5,0) 70%);
}
.hero .wrap { position: relative; }
.hero .eyebrow { color: var(--accent-lift); }
.hero .btn--primary { background: var(--accent-lift); color: var(--ink); }
.hero .btn--primary:hover { background: #d6ff5c; color: var(--ink); }
/* Le cadre du carrousel suit : chrome sombre, sinon une fenêtre blanche
   flotterait au milieu du dégradé. */
.hero .shot { background: var(--deep-2); border-color: var(--deep-line); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.hero .shot__bar { background: var(--deep-3); border-color: var(--deep-line); }
.hero .shot__dot { background: var(--deep-line); }
.hero .shot__url { color: var(--deep-dim); }
.hero .shotdeck { background: var(--deep); }
.hero .shotfoot { background: var(--deep-2); border-color: var(--deep-line); }
.hero .shotcap { color: var(--deep-dim); }
.hero .shotdots button { background: var(--deep-line); }
.hero .shotdots button:hover { background: var(--deep-dim); }
.hero .shotdots button[aria-current="true"] { background: var(--accent-lift); }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 64px; align-items: center;
  padding-top: 84px; padding-bottom: 84px;
}
.hero__title { font-size: clamp(38px, 4.4vw, 58px); letter-spacing: -0.032em; color: #ffffff; }
.hero__lead { margin-top: 22px; font-size: 19px; line-height: 1.6; color: var(--deep-dim); max-width: 34em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__media { position: relative; }

/* --- 8. Grilles de cartes ------------------------------------------------ */
.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card__kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* Carte compacte sans média */
.tile {
  border: 1px solid var(--line); border-radius: 6px; padding: 26px 24px;
  background: var(--surface); display: flex; flex-direction: column; gap: 10px;
}
.tile h3 { font-size: 17px; }
.tile p { font-size: 14.5px; color: var(--ink-2); }
.tile__icon { width: 30px; height: 30px; color: var(--accent); margin-bottom: 4px; }
.section--dark .tile { background: var(--deep-2); border-color: var(--deep-line); }
.section--dark .tile p { color: var(--deep-dim); }
.section--dark .tile .card__kicker { color: var(--accent-lift); }
.section--dark .tile__icon { color: var(--accent-lift); }

/* --- 9. Bloc média + texte alterné --------------------------------------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center;
}
.split + .split { margin-top: 88px; }
.split--rev .split__text { order: 2; }
.split__text h3 { font-size: 28px; letter-spacing: -0.02em; }
.split__text p { margin-top: 16px; font-size: 16.5px; color: var(--ink-2); }
.split__list { margin-top: 22px; display: grid; gap: 12px; }
.split__list li { position: relative; padding-left: 28px; font-size: 15.5px; color: var(--ink-2); }
.split__list li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 6px; height: 10px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(40deg);
}
.split__gain {
  margin-top: 24px; padding: 14px 18px;
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 5px 5px 0; font-size: 15.5px; color: var(--ink-2);
}
.split__gain strong { color: var(--accent-hover); }
.section--dark .split__text p, .section--dark .split__list li { color: var(--deep-dim); }
.section--dark .split__list li::before { border-color: var(--accent-lift); }
/* Cadre « capture d'écran » — chrome clair, accordé au thème Horizon */
.shot {
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--surface); box-shadow: 0 28px 60px -34px rgba(11,19,15,.5);
}
.shot__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; background: var(--surface-3); border-bottom: 1px solid var(--line);
}
.shot__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-line); }
.shot__url {
  margin-left: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shot img { width: 100%; display: block; }
/* Carrousel de l'accroche. Les vues sont empilees en absolu : le conteneur tient
   sa hauteur par son ratio, sinon chaque changement de vue ferait sauter la page.
   Toutes les captures font 1440x900, le ratio est donc exact. */
.shotdeck { position: relative; aspect-ratio: 1440 / 900; background: var(--surface-3); overflow: hidden; }
.shotdeck img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s ease;
}
.shotdeck img[data-active] { opacity: 1; }

/* Legende a gauche, pastilles a droite, sur une seule ligne : deux barres
   empilees sous l'image alourdiraient le cadre plus que le texte n'apporte. */
.shotfoot {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; background: var(--surface); border-top: 1px solid var(--line);
}
.shotcap {
  flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2);
}
.shotdots { display: flex; gap: 7px; align-items: center; flex-shrink: 0; }
.shotdots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--accent-line); cursor: pointer;
  transition: width .25s ease, background .25s ease, border-radius .25s ease;
}
.shotdots button:hover { background: var(--ink-3); }
.shotdots button[aria-current="true"] { width: 22px; border-radius: 4px; background: var(--accent); }

/* Le schema est sombre depuis qu'il suit le theme du produit ; sans cadre il
   se decoupait brutalement sur la bande claire. Meme traitement que les
   captures : angles arrondis, filet, ombre portee. */
.diagram { border-radius: 10px; border: 1px solid var(--line); overflow: hidden;
  box-shadow: 0 28px 60px -34px rgba(11,19,15,.5); display: block; }

.shot figcaption { padding: 12px 16px; font-size: 13px; color: var(--ink-3); background: var(--surface); border-top: 1px solid var(--line); }

/* Étapes numérotées */
.steps { counter-reset: s; display: grid; gap: 18px; }
.steps li {
  counter-increment: s; position: relative; padding-left: 52px;
  font-size: 15.5px; color: var(--ink-2);
}
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-weight: 700; font-size: 14px; display: grid; place-items: center;
}
.steps li b { color: var(--ink); font-weight: 600; }
.steps li code { font-family: var(--mono); font-size: 12.5px; }
.section--dark .steps li { color: var(--deep-dim); }
.section--dark .steps li::before { background: rgba(124,92,255,.22); color: var(--accent-lift); }
.section--dark .steps li b { color: #fff; }
.section--dark .steps li code { color: var(--accent-lift); }

/* --- 10. Bandeau de confiance / conformité ------------------------------- */
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
/* Pastilles techniques : spark sombre, filet lime — la meme matiere que les
   captures, posee sur la page claire. */
.badge {
  border: 1px solid rgba(180,241,5,.35); border-radius: 999px; padding: 7px 16px;
  font-size: 13px; color: var(--deep-ink); background: var(--deep-2);
}

/* --- 11. CTA finale ------------------------------------------------------ */
.cta {
  background: linear-gradient(120deg, #051c12 0%, #0f2a1d 55%, #143726 100%);
  color: #fff; border-radius: 10px; padding: 56px 60px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 44px; align-items: center;
}
.cta h2 { font-size: 32px; letter-spacing: -0.025em; }
.cta p { margin-top: 14px; color: var(--deep-dim); font-size: 16.5px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }

/* --- 12. Pied de page ---------------------------------------------------- */
.footer { background: var(--surface-2); border-top: 1px solid var(--line); padding: 56px 0 32px; font-size: 14px; }
/* auto-fit plutot qu'un nombre fixe de colonnes : le pied de page en a compte
   quatre, puis trois. Une grille figee laissait une colonne vide a chaque
   retrait. La premiere piste doit rester DEFINIE (300px, pas une fraction) —
   auto-fit refuse de cohabiter avec une piste flexible. */
.footer__cols { display: grid; grid-template-columns: 300px repeat(auto-fit, minmax(150px, 1fr)); gap: 36px; }
.footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 14px; }
.footer li { margin-bottom: 9px; }
.footer a { color: var(--ink-2); }
.footer a:hover { color: var(--accent); }
.footer__brand p { margin-top: 14px; color: var(--ink-2); max-width: 30em; font-size: 14.5px; }
.footer__legal {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  color: var(--ink-3); font-size: 13px;
}

/* --- 13. Responsive ------------------------------------------------------ */
@media (max-width: 1180px) {
  :root { --pad: 32px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  html { scroll-padding-top: 80px; }
  .productbar__inner { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
  .pnav { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
  .grid--2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split + .split { margin-top: 56px; }
  .split--rev .split__text { order: 0; }
  .cta { grid-template-columns: 1fr; padding: 38px 28px; }
  .cta__actions { justify-content: flex-start; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 60px 0; }
}

@media (max-width: 560px) {
  :root { --pad: 20px; }
  .grid--4 { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* --- 14. Impression ------------------------------------------------------ */
@media print {
  .productbar, .cta, .footer { display: none; }
  .section--dark { background: #fff; color: #000; }
}