/*
 * La mise en page de la vitrine (S18, L0 ; refaite au lot 5 de la refonte) — un fichier
 * séparé de `tokens.css` : les jetons portent les couleurs, les rayons et les tailles (ils sont
 * recopiés depuis l'app et gardés par `scripts/jetons-vitrine.test.ts`), la mise en page est
 * propre au site.
 *
 * Pas de bibliothèque de composants, pour la même raison que `apps/web/src/styles.css` le dit
 * déjà. Pas de police distante : la pile système, comme l'app. Les boutons sont ceux de l'app
 * (`button.ui-bouton--principal` / `--secondaire`, à la taille tactile) : le rayon `--rayon`,
 * 44 px de haut, l'aplat d'accent et son encre `--encre-sur-vif`, la toile cadrée.
 *
 * Le rythme : une seule largeur de page (`--largeur-site`), une largeur de lecture
 * (`--largeur-lecture`, ~68 caractères), une gouttière qui grandit avec l'écran, et des
 * sections espacées d'un seul pas vertical (`--pas-section`).
 */

:root {
  --largeur-site: 1180px;
  --largeur-lecture: 680px;
  --gouttiere: 16px;
  --pas-section: 56px;
  --hauteur-entete: 64px;
  --police-texte: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --police-code: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (min-width: 768px) {
  :root { --gouttiere: 24px; --pas-section: 72px; }
}
@media (min-width: 1024px) {
  :root { --gouttiere: 32px; --pas-section: 88px; }
}

* { box-sizing: border-box; }

html {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
  /* Une ancre (#mcp, #video-demo) ne se cache pas sous l'en-tête collant. */
  scroll-padding-top: calc(var(--hauteur-entete) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.6 var(--police-texte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--accent-encre); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: var(--anneau-focus) solid var(--accent);
  outline-offset: var(--ecart-focus);
}

code, pre { font: 13px/1.55 var(--police-code); }
code { background: var(--surface-creuse); padding: 2px 6px; border-radius: var(--rayon-petit); }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 650; text-wrap: balance; }
h1 { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -0.025em; line-height: 1.08; }
h2 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.018em; }
h3 { font-size: 18px; letter-spacing: -0.005em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
.discret { color: var(--discret); }

/* Le lien d'évitement : invisible tant qu'il n'a pas le focus clavier. */
.lien-saut {
  position: absolute;
  left: 8px;
  top: -48px;
  background: var(--accent);
  color: var(--encre-sur-vif);
  padding: 10px 16px;
  border-radius: 0 0 var(--rayon) var(--rayon);
  z-index: 100;
  transition: top 0.15s ease;
  text-decoration: none;
}
.lien-saut:focus { top: 0; }

/* =========================================================================================
   L'en-tête — collant, à plat dès 768 px ; dessous, replié derrière « Menu » (menu.js)
   ========================================================================================= */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--trait);
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}
.entete-barre {
  max-width: calc(var(--largeur-site) + 2 * var(--gouttiere));
  margin: 0 auto;
  padding: 0 var(--gouttiere);
  min-height: var(--hauteur-entete);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 650;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--encre);
  text-decoration: none;
  margin-right: auto;
}
.marque img { width: 30px; height: 30px; }

.nav-principale ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-principale a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--rayon);
  color: var(--encre);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.nav-principale a:hover { background: var(--surface-survol); }
.nav-principale a[aria-current='page'] { color: var(--accent-encre); background: var(--surface-accent-pale); }
/* L'application : la seule porte vers le produit — un bouton secondaire de l'app. */
.nav-principale a[data-surface='application'] {
  border: 1px solid var(--trait-appuye);
  background: var(--toile);
  font-weight: 600;
  padding-inline: 14px;
}
.nav-principale a[data-surface='application']:hover { background: var(--surface-neutre); }

.selecteur-langue {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-moyen);
  background: var(--surface-douce);
}
.selecteur-langue a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: var(--rayon);
  font-size: 13px;
  font-weight: 600;
  color: var(--discret);
  text-decoration: none;
}
.selecteur-langue a:hover { color: var(--encre); }
.selecteur-langue a[aria-current='true'] {
  background: var(--surface-segment);
  color: var(--encre);
  box-shadow: var(--ombre-segment);
}

/* Le bouton « Menu » n'existe qu'avec JavaScript (menu.js pose `js-menu`) et sous 768 px. */
.bouton-menu { display: none; }

@media (max-width: 767.98px) {
  /* La première ligne (la marque, « Menu ») garde son souffle quand le menu ouvert l'allonge. */
  .entete-barre { padding-block: 10px; min-height: var(--hauteur-entete); }
  .js-menu .bouton-menu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 14px;
    border: 1px solid var(--trait-appuye);
    border-radius: var(--rayon);
    background: var(--toile);
    color: var(--encre);
    font: 600 14px/1 var(--police-texte);
    cursor: pointer;
  }
  .js-menu .bouton-menu:hover { background: var(--surface-neutre); }
  .js-menu .bouton-menu[aria-expanded='true'] { background: var(--surface-accent-pale); border-color: var(--accent); }

  .menu-principal { flex-basis: 100%; padding-bottom: 12px; }
  .js-menu .menu-principal { display: none; }
  .js-menu.menu-ouvert .menu-principal { display: block; padding: 4px 0 16px; border-top: 1px solid var(--separateur); }
  .js-menu .nav-principale ul { flex-direction: column; gap: 2px; }
  .js-menu .nav-principale a { min-height: 44px; font-size: 16px; padding: 10px 12px; }
  .js-menu .nav-principale a[data-surface='application'] { justify-content: center; margin-top: 8px; }
  .js-menu .selecteur-langue { margin-top: 12px; }
  .js-menu .selecteur-langue a { min-height: 40px; min-width: 52px; }
  /* Sans JavaScript, la navigation s'affiche à plat, sous la marque. */
  .nav-principale a { min-height: 44px; }
}

/* De 768 à 1 023 px : la marque et la langue sur la première ligne, les liens dessous. */
@media (min-width: 768px) {
  .menu-principal { display: contents; }
  .entete-barre {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'marque . langue' 'nav nav nav';
    column-gap: 20px;
  }
  .marque { grid-area: marque; }
  .selecteur-langue { grid-area: langue; }
  .nav-principale { grid-area: nav; padding-bottom: 10px; margin-inline: -10px; }
  .nav-principale ul { flex-wrap: nowrap; }
  .nav-principale li:has(> a[data-surface='application']) { margin-left: auto; }
}
/* Dès 1 024 px : une seule ligne. */
@media (min-width: 1024px) {
  .entete-barre {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'marque nav langue';
    column-gap: 28px;
  }
  .nav-principale { padding-bottom: 0; margin-inline: 0; }
  .nav-principale li:has(> a[data-surface='application']) { margin-left: 10px; }
}

/* =========================================================================================
   Le contenu
   ========================================================================================= */
main {
  max-width: calc(var(--largeur-site) + 2 * var(--gouttiere));
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}
.section { padding: var(--pas-section) 0; border-top: 1px solid var(--separateur); }
main > .section:first-child { border-top: none; }
.section > p, .section > ul, .section > ol, .section > details, .section > h2,
.section > .encadre, .section > .legal-absent { max-width: var(--largeur-lecture); }
.section > h2 + p { margin-top: 4px; }

/* ---- Le héros ------------------------------------------------------------------------- */
.heros { padding: 40px 0 64px; }
.heros-texte { display: grid; gap: 20px 64px; }
.heros h1 { margin: 0; max-width: 15ch; }
.heros-chapeau { font-size: 17px; line-height: 1.6; color: var(--encre); max-width: 60ch; }
.heros-suite > .discret { font-size: 14px; margin: 0; }
@media (min-width: 768px) {
  .heros { padding-top: 72px; }
  .heros-chapeau { font-size: 18px; }
}
@media (min-width: 1024px) {
  .heros { padding-top: 88px; }
  .heros { padding-bottom: 72px; }
  .heros-texte { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .heros h1 { max-width: none; }
  .heros-suite { padding-top: 6px; }
  .heros-chapeau { margin-bottom: 4px; }
}

/* Le produit, grand, au premier écran : la capture de l'espace de travail. */
.heros-produit {
  margin-top: 40px;
  border-radius: var(--rayon-grand);
  overflow: hidden;
  border: 1px solid var(--trait);
  background: var(--surface-douce);
  box-shadow:
    0 1px 2px var(--ombre-douce),
    0 24px 60px -24px var(--ombre-forte);
}
.heros-produit img { width: 100%; aspect-ratio: 1280 / 624; }
@media (min-width: 1024px) {
  .heros-produit { margin-top: 56px; }
}

/* La vidéo : à côté de sa légende, en dessous de la capture. */
.heros-media {
  margin-top: 48px;
  display: grid;
  gap: 16px;
  align-items: center;
}
.legende-video { margin: 0; max-width: 46ch; font-size: 15px; }
@media (min-width: 900px) {
  .heros-media { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; margin-top: 64px; }
  .legende-video { font-size: 17px; line-height: 1.55; color: var(--encre); }
}
.video-cadre {
  border-radius: var(--rayon-grand);
  overflow: hidden;
  border: 1px solid var(--trait);
  background: var(--toile);
}
.video-cadre video { width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* ---- Les boutons — la famille de l'app, à la taille tactile -------------------------- */
.boutons-heros { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 16px; }
@media (max-width: 519.98px) {
  .boutons-heros .bouton { flex: 1 1 100%; }
}
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hauteur-tactile);
  padding: 10px 18px;
  border: 1px solid var(--trait-appuye);
  border-radius: var(--rayon);
  background: var(--toile);
  color: var(--encre);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color var(--duree-transition),
    border-color var(--duree-transition);
}
.bouton:hover { background: var(--surface-neutre); }
.bouton-principal {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--encre-sur-vif);
}
.bouton-principal:hover {
  background: color-mix(in srgb, var(--accent) 82%, var(--encre));
  border-color: color-mix(in srgb, var(--accent) 82%, var(--encre));
}

/* ---- Les cartes de fonctionnalités --------------------------------------------------- */
.grille-fonctionnalites {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 28px 0 24px;
}
.carte {
  display: flex;
  flex-direction: column;
  padding: 0 0 20px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-grand);
  background: var(--surface-carte);
  overflow: hidden;
}
.carte > img {
  width: 100%;
  border-bottom: 1px solid var(--trait);
  margin-bottom: 18px;
  background: var(--surface-douce);
}
.carte > :not(img) { margin-inline: 20px; }
.carte > h3 { margin-top: 0; }
.carte > p:last-child { margin-bottom: 0; }
.carte p { color: var(--encre); font-size: 15px; line-height: 1.55; }
/* Une carte sans image (FAQ, données) garde son souffle en haut. */
.carte > :first-child:not(img) { margin-top: 20px; }

/* Une capture posée seule dans la grille (pages Fonctionnalités, MCP) : le cadre d'une carte. */
.grille-fonctionnalites > img {
  width: 100%;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-grand);
  background: var(--surface-douce);
}
.section > img { border: 1px solid var(--trait); border-radius: var(--rayon-grand); }

/* Une liste de définitions (« Ce qu'un agent peut faire ») : le terme, puis son exemple. */
.section > dl { max-width: var(--largeur-lecture); margin: 0 0 1em; }
.section > dl > dt { font-weight: 650; margin-top: 14px; }
.section > dl > dt:first-child { margin-top: 0; }
.section > dl > dd { margin: 2px 0 0; color: var(--encre); }

/* ---- Le protocole : une bande qui lui est propre ------------------------------------- */
.section-mcp {
  position: relative;
  border-top: none;
  /* La surface de la navigation de l'app : un sable plus soutenu en clair, un creux plus
     sombre que la page en sombre — la bande se voit dans les deux thèmes. */
  background: var(--surface-navigation);
  /* La bande court d'un bord à l'autre de l'écran sans élargir la page. */
  box-shadow: 0 0 0 100vmax var(--surface-navigation);
  clip-path: inset(0 -100vmax);
  display: grid;
  /* Une colonne bornée : sans `minmax(0, …)`, la commande (un <pre> qui ne se coupe pas)
     élargissait la colonne implicite à sa propre longueur — 574 px sur un écran de 390. */
  grid-template-columns: minmax(0, 1fr);
  column-gap: 56px;
  align-items: start;
}
.section-mcp + .section, .section-mcp + .paire-sections { border-top: none; }
.mcp-commande { margin: 8px 0 24px; }
.mcp-commande .bloc-code { margin-bottom: 14px; }
.mcp-note { font-size: 14px; margin-bottom: 8px; }
.mcp-lien { margin: 0; }
@media (min-width: 1024px) {
  .section-mcp {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas:
      'titre commande'
      'chapeau commande'
      'lien commande';
    grid-template-rows: auto auto 1fr;
  }
  .section-mcp > h2 { grid-area: titre; }
  .section-mcp > .mcp-chapeau { grid-area: chapeau; }
  .section-mcp > .mcp-lien { grid-area: lien; }
  .section-mcp > .mcp-commande { grid-area: commande; margin: 4px 0 0; }
}

/* ---- Deux sections côte à côte : la sécurité et la bêta ------------------------------- */
.paire-sections { border-top: 1px solid var(--separateur); }
.paire-sections > .section { border-top: none; }
.paire-sections > .section + .section { padding-top: 0; }
@media (min-width: 900px) {
  .paire-sections { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .paire-sections > .section + .section { padding-top: var(--pas-section); }
}

/* ---- La FAQ de l'accueil : une fermeture sobre ----------------------------------------- */
.section-faq { text-align: left; }

/* ---- Les blocs, tables et encadrés des autres pages ----------------------------------- */
.bloc-code {
  margin: 0 0 1em;
  padding: 14px 16px;
  background: var(--toile);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-moyen);
  overflow-x: auto;
  max-width: 100%;
}
.bloc-code code { background: none; padding: 0; white-space: pre; }

/* Une table plus large que l'écran défile dans sa propre boîte : la page ne déborde pas. */
.table-preuves,
main table:not(.table-preuves) {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}
@media (max-width: 767.98px) {
  .table-preuves,
  main table:not(.table-preuves) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.table-preuves th, .table-preuves td,
main table:not(.table-preuves) th, main table:not(.table-preuves) td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
  font-size: 14px;
}
.table-preuves th,
main table:not(.table-preuves) th { color: var(--discret); font-weight: 600; }

details.faq {
  border-bottom: 1px solid var(--trait);
  padding: 14px 0;
}
details.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  min-height: 24px;
}
details.faq[open] summary { color: var(--accent-encre); }

.legal-absent {
  padding: 14px 16px;
  background: var(--attention-fond);
  border: 1px solid var(--trait-doux);
  border-radius: var(--rayon-moyen);
}

/* Un encadré de contenu réel (ex. « ce que nous ne prétendons pas ») — distinct de
   `.legal-absent`, qui marque un repli d'absence de contenu : les deux ne doivent jamais
   être confondus, y compris par une garde automatisée qui chercherait l'un ou l'autre. */
.encadre {
  padding: 14px 16px;
  background: var(--surface-creuse);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-moyen);
}

.badge-provisoire {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--alerte);
  background: var(--alerte-fond);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}

/* =========================================================================================
   Le pied
   ========================================================================================= */
.pied { border-top: 1px solid var(--trait); background: var(--surface-douce); margin-top: 0; }
.pied-barre {
  max-width: calc(var(--largeur-site) + 2 * var(--gouttiere));
  margin: 0 auto;
  padding: 32px var(--gouttiere) 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  align-items: center;
  color: var(--discret);
  font-size: 14px;
}
.pied-marque { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--encre); font-weight: 500; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: 0; padding: 0; }
.pied-liens a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--discret);
}
.pied-liens a:hover { color: var(--encre); }

.redirection { display: flex; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: 24px; }