/* ==========================================================================
   Sam — site plaquette public (#462)
   --------------------------------------------------------------------------
   Feuille unique du site statique. Reprend la charte du produit
   (charte-graphique.md) : accent menthe, Inter + JetBrains Mono, grilles 1px.

   THÈMES — le site suit `charte-graphique.md` mais vit hors de l'app Angular :
   pas de ThemeService ici. Le thème est porté par `data-theme` sur <html>,
   posé par theme.js (chargé en tête, avant peinture, donc sans flash) :
     • absent / "system" → on suit `prefers-color-scheme`
     • "light" / "dark"  → forcé par l'utilisateur
   Le bloc clair est donc écrit DEUX fois (media query + attribut) : c'est la
   seule façon de couvrir les deux cas en CSS nu, sans préprocesseur.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Jetons — thème sombre (défaut, identité de la marque) ───────────────── */
:root {
  --accent: #4ecca3;
  /* Accent LISIBLE sur fond : en clair, #4ecca3 sur blanc tombe à ~1,9:1,
     insuffisant pour du texte. --accent-ink est la déclinaison « encre ». */
  --accent-ink: #4ecca3;
  --accent-dim: rgba(78, 204, 163, 0.12);
  --accent-border: rgba(78, 204, 163, 0.25);
  --accent-contrast: #0a0a0a;

  /* Fond remonté du noir pur : #0f0f0f sur un écran de bureau donnait une page
     « trou noir », et les 1px de bordure y disparaissaient. On garde l'identité
     sombre, avec une pointe de bleu pour éviter le gris clinique. */
  --bg: #131316;
  --bg-alt: #191920;   /* bandes alternées — donne un rythme vertical à la page */
  --bg2: #1b1b21;      /* cartes et maquettes */
  --bg3: #22222a;      /* barres de fenêtre, puces */
  --nav-bg: rgba(19, 19, 22, 0.92);

  --heading: #f4f4f6;  /* le blanc pur vibrait sur fond très sombre */
  --text: #dedee3;
  --text-soft: #c3c3cb;
  --text-muted: #9797a2;  /* #888 passait tout juste le contraste AA en 13px */
  --text-dim: #6c6c78;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --user-bubble: #1e3a5f;

  --critical: #fc8181;
  --critical-bg: rgba(229, 62, 62, 0.15);
  --info: #a0aec0;
  --info-bg: rgba(160, 174, 192, 0.10);

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shadow-mock: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-card-hover: 0 16px 36px -20px rgba(0, 0, 0, 0.9);
}

/* ── Jetons — thème clair ─────────────────────────────────────────────────
   Valeurs alignées sur `body.theme-light` de l'app (frontend/src/styles.scss)
   pour que la plaquette et le produit ne se contredisent pas visuellement. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --accent-ink: #10795a;
    --accent-dim: rgba(78, 204, 163, 0.14);
    --accent-border: rgba(16, 121, 90, 0.28);

    /* Blanc cassé CHAUD plutôt que le gris bleuté de l'app : sur une page
       marketing plein écran, #f0f2f5 + cartes blanches donnait une surface
       éblouissante et sans relief. */
    --bg: #f2f1ed;
    --bg-alt: #ffffff;
    --bg2: #ffffff;
    --bg3: #f7f6f2;
    --nav-bg: rgba(242, 241, 237, 0.92);

    --heading: #1a1a1d;  /* le noir pur sur blanc fatigue à la lecture longue */
    --text: #33333a;
    --text-soft: #43434b;
    --text-muted: #6a6a73;
    --text-dim: #93939c;

    --border: #e5e3dc;
    --border-strong: #d6d3ca;

    --user-bubble: #dbeafe;

    --critical: #c53030;
    --critical-bg: rgba(229, 62, 62, 0.10);
    --info: #5a6b7d;
    --info-bg: rgba(90, 107, 125, 0.10);

    --shadow-mock: 0 24px 60px rgba(15, 23, 42, 0.12);
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 26px -20px rgba(15, 23, 42, 0.22);
    --shadow-card-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 18px 34px -18px rgba(15, 23, 42, 0.28);
  }
}
:root[data-theme="light"] {
  --accent-ink: #10795a;
  --accent-dim: rgba(78, 204, 163, 0.14);
  --accent-border: rgba(16, 121, 90, 0.28);

  --bg: #f2f1ed;
  --bg-alt: #ffffff;
  --bg2: #ffffff;
  --bg3: #f7f6f2;
  --nav-bg: rgba(242, 241, 237, 0.92);

  --heading: #1a1a1d;
  --text: #33333a;
  --text-soft: #43434b;
  --text-muted: #6a6a73;
  --text-dim: #93939c;

  --border: #e5e3dc;
  --border-strong: #d6d3ca;

  --user-bubble: #dbeafe;

  --critical: #c53030;
  --critical-bg: rgba(229, 62, 62, 0.10);
  --info: #5a6b7d;
  --info-bg: rgba(90, 107, 125, 0.10);

  --shadow-mock: 0 24px 60px rgba(15, 23, 42, 0.12);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 26px -20px rgba(15, 23, 42, 0.22);
  --shadow-card-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 18px 34px -18px rgba(15, 23, 42, 0.28);
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  background-color: var(--bg);
  /* Halo d'accent très léger en haut de page : donne de la chaleur et un point
     d'entrée au regard, sans toucher à l'identité des deux thèmes. */
  background-image: radial-gradient(ellipse 1200px 620px at 50% -60px,
                    color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

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

a { color: inherit; }

/* ── Navigation ───────────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 2.5rem; height: 60px;
  /* Barre d'une seule ligne : sans cela, dès que la place manque, chaque
     libellé se coupe en deux et déborde des 60 px de hauteur. */
  white-space: nowrap;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  display: flex; align-items: baseline; gap: 9px;
  text-decoration: none;
}
.nav-logo .nav-logo-dot { align-self: center; }
.nav-logo-nom {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--heading);
}
.nav-logo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}
/* La signature reste une mention, pas un second nom de marque : nettement
   plus petite que « Sam », qui doit porter seul l'identité. */
.nav-by { font-size: 11px; color: var(--text-dim); font-weight: 400; }

.nav-links { display: flex; gap: 1.5rem; margin-left: 1.5rem; }
.nav-links a {
  position: relative;
  font-size: 13px; color: var(--text-soft); text-decoration: none;
  transition: color 0.18s ease;
}
/* Soulignement d'accent, posé sur la bordure basse de la barre. Il est toujours
   présent mais réduit à zéro : on anime une transformation, pas une apparition,
   donc rien ne saute au changement de section. */
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -20px; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transition: transform 0.2s ease;
}
.nav-links a:hover { color: var(--accent-ink); }
.nav-links a.is-current { color: var(--accent-ink); }
.nav-links a.is-current::after { transform: scaleX(1); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }

.nav-login {
  font-size: 13px; color: var(--text-soft); text-decoration: none;
  transition: color 0.18s ease;
}
.nav-login:hover { color: var(--accent-ink); }

.nav-cta {
  font-size: 13px; font-weight: 500;
  color: var(--accent-contrast); background: var(--accent);
  border: none; border-radius: 6px;
  padding: 8px 18px; cursor: pointer; text-decoration: none;
  transition: opacity 0.15s;
}
.nav-cta:hover { opacity: 0.85; }

/* ── Bascule de thème (clair / sombre / système) ──────────────────────────── */
.theme-switch {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--bg2);
}
.theme-switch button {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 24px; padding: 0;
  background: none; border: none; border-radius: 5px;
  color: var(--text-dim); cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] {
  background: var(--accent-dim); color: var(--accent-ink);
}
.theme-switch svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  padding: 140px 2.5rem 90px;
  max-width: 1100px; margin: 0 auto;
}

.hero-eyebrow {
  font-family: var(--mono); font-size: 12px; color: var(--accent-ink);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2rem;
}

.hero-title {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 300; line-height: 1.15;
  letter-spacing: -0.02em; margin-bottom: 1.5rem; max-width: 16ch;
}
.hero-title .accent { color: var(--accent-ink); font-weight: 500; }

.hero-sub {
  font-size: 1.1rem; color: var(--text-muted);
  max-width: 620px; margin-bottom: 2.5rem;
  font-weight: 300; line-height: 1.8;
}

.hero-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

.btn-primary {
  background: var(--accent); color: var(--accent-contrast);
  border: none; border-radius: 6px;
  padding: 13px 28px; font-size: 15px; font-weight: 500;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; }

.btn-ghost {
  background: none; color: var(--text-muted);
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 12px 24px; font-size: 15px; font-weight: 400;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: border-color 0.15s, color 0.15s;
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-dim); }

.hero-note {
  margin-top: 1.5rem;
  font-size: 13px; color: var(--text-dim); font-family: var(--mono);
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.section { padding: 6.5rem 2.5rem; max-width: 1100px; margin: 0 auto; }
.section-narrow { max-width: 900px; }

/* Bandes alternées — le vrai correctif du « trop plat » : un seul aplat de fond
   du haut en bas de la page ne donnait aucun repère de progression. Une section
   sur deux change de fond, ce qui rythme la lecture et remplace les filets.

   Fond PLEINE LARGEUR sans conteneur supplémentaire : la section garde son
   `max-width` et son centrage, l'ombre très étalée peint jusqu'aux bords de la
   fenêtre, et le `clip-path` l'empêche de déborder en haut et en bas. */
.section-alt {
  background: var(--bg-alt);
  box-shadow: 0 0 0 100vmax var(--bg-alt);
  clip-path: inset(0 -100vmax);
}

.section-label {
  font-family: var(--mono); font-size: 11px; color: var(--accent-ink);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.5rem;
}

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300; line-height: 1.25;
  letter-spacing: -0.02em; margin-bottom: 1.5rem; color: var(--heading);
  max-width: 22ch;
}
.section-title strong { font-weight: 500; }

.section-body { font-size: 1rem; color: var(--text-muted); max-width: 640px; line-height: 1.85; }
.section-body + .section-body { margin-top: 1rem; }

.section-divider { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ── « Comment ça marche » — sommaire collant + étapes ─────────────────────
   Le sommaire de gauche reste fixe pendant que les étapes défilent ; l'étape
   visible est mise en avant par un IntersectionObserver (theme.js). */
.how-grid {
  display: grid; grid-template-columns: 220px 1fr; gap: 4rem;
  margin-top: 4rem;
}

.how-nav { position: sticky; top: 120px; align-self: start; }
.how-nav ol { list-style: none; counter-reset: step; }
.how-nav li {
  counter-increment: step;
  position: relative;
  padding: 0.9rem 0 0.9rem 2rem;
  font-size: 14px; color: var(--text-dim);
  border-left: 2px solid var(--border);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.how-nav li::before {
  content: counter(step);
  position: absolute; left: 0.85rem; top: 0.9rem;
  font-family: var(--mono); font-size: 11px; color: inherit;
}
.how-nav li.is-active {
  color: var(--accent-ink); border-left-color: var(--accent);
}

.how-steps { display: flex; flex-direction: column; gap: 7rem; }
.how-step { scroll-margin-top: 120px; }
.how-step h3 {
  font-size: 1.35rem; font-weight: 500; color: var(--heading);
  margin-bottom: 0.75rem; letter-spacing: -0.01em;
}
.how-step p { font-size: 15px; color: var(--text-muted); line-height: 1.8; max-width: 52ch; }
.how-step .mock { margin-top: 2rem; }
.how-step-index {
  display: none;
  font-family: var(--mono); font-size: 11px; color: var(--accent-ink);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.75rem;
}

/* ── Maquettes d'écran ────────────────────────────────────────────────────
   Reconstruites en HTML/CSS avec les jetons du produit, et non en captures :
   elles suivent le thème clair/sombre, restent nettes à toute densité et se
   corrigent en une ligne quand l'UI bouge. */
.mock {
  border: 1px solid var(--border-strong);
  border-radius: 12px; background: var(--bg2);
  overflow: hidden; box-shadow: var(--shadow-mock);
}

.mock-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; }
.mock-dot.red { background: #ff5f57; }
.mock-dot.yellow { background: #ffbd2e; }
.mock-dot.green { background: #28c840; }
.mock-bar-title {
  margin-left: 8px; font-family: var(--mono);
  font-size: 12px; color: var(--text-dim);
}
.mock-bar-meta {
  margin-left: auto; font-family: var(--mono);
  font-size: 11px; color: var(--text-dim);
}
.mock-body { padding: 1.25rem 1.5rem; }

.mock-section-title {
  font-family: var(--mono); font-size: 11px; color: var(--accent-ink);
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem;
}

/* Maquette — brief priorisé */
.mock-item { display: flex; gap: 12px; padding: 0.65rem 0; border-bottom: 1px solid var(--border); }
.mock-item:last-child { border-bottom: none; }
.mock-tag {
  flex-shrink: 0; font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  padding: 3px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.05em;
  align-self: flex-start; margin-top: 2px;
}
.tag-urgent { background: var(--critical-bg); color: var(--critical); }
.tag-decision { background: var(--accent-dim); color: var(--accent-ink); }
.tag-info { background: var(--info-bg); color: var(--info); }
.mock-text { font-size: 13.5px; line-height: 1.6; color: var(--text-soft); }
.mock-source { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* Maquette — sélection des sources */
.mock-source-row {
  display: flex; align-items: center; gap: 12px;
  padding: 0.7rem 0; border-bottom: 1px solid var(--border);
}
.mock-source-row:last-child { border-bottom: none; }
.mock-check {
  width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
}
.mock-check.on { background: var(--accent); border-color: var(--accent); }
.mock-check.on::after {
  content: ''; width: 4px; height: 8px; margin-top: -2px;
  border: solid var(--accent-contrast); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.mock-source-name { font-size: 13.5px; color: var(--text-soft); }
.mock-source-meta { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-dim); }

.mock-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1rem; }
.mock-chip {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--text-muted);
  background: var(--bg3);
}
.mock-chip.on { border-color: var(--accent-border); color: var(--accent-ink); background: var(--accent-dim); }

/* Maquette — chat ────────────────────────────────────────────────────────
   Calquée sur l'écran réel (frontend/src/app/pages/chat/chat.ts) : bulle
   utilisateur alignée à droite sur `--user-bubble` avec le coin bas-droit
   rabattu, réponse de Sam en carte pleine largeur à gauche avec son repli
   « Sources », et barre de saisie en pied. La première version se contentait
   de deux paragraphes étiquetés « Vous » / « Sam » — ça ne ressemblait pas
   à une conversation, et pas du tout au produit. */
.chat-fil { display: flex; flex-direction: column; gap: 1.1rem; }
.chat-tour { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.chat-tour-vous { align-items: flex-end; }
.chat-heure { font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); }

.chat-bulle {
  max-width: 75%;
  background: var(--user-bubble); color: var(--text);
  padding: 11px 15px;
  border-radius: 13px; border-bottom-right-radius: 4px;
  font-size: 13.5px; line-height: 1.5;
}

.chat-carte {
  width: 100%;
  background: var(--bg3); border: 1px solid var(--border);
  padding: 16px 18px;
  border-radius: 13px; border-bottom-left-radius: 4px;
}
.chat-carte p { font-size: 13.5px; line-height: 1.65; color: var(--text-soft); }

.chat-sources {
  display: flex; align-items: center; gap: 7px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted);
}
.chat-sources svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.chat-sources-n {
  font-family: var(--mono); font-size: 10.5px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--accent-dim); color: var(--accent-ink);
}
.chat-sources-chevron { margin-left: auto; }

.chat-saisie {
  display: flex; align-items: center; gap: 10px;
  margin: 0 1.5rem 1.5rem;
  background: var(--bg2); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 10px 10px 10px 16px;
}
.chat-placeholder { flex: 1; font-size: 13px; color: var(--text-dim); }
.chat-envoi {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 8px;
  background: var(--accent); color: var(--accent-contrast);
  display: flex; align-items: center; justify-content: center;
}
.chat-envoi svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Maquette — suivi par dossier */
.mock-dossier { display: flex; align-items: center; gap: 10px; padding: 0.55rem 0; }
.mock-pastille { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mock-dossier-name { font-size: 13.5px; color: var(--text-soft); }
.mock-dossier-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-dim); }

/* ── Cartes (sources, sécurité) ───────────────────────────────────────────
   Cartes DÉTACHÉES, posées sur le fond, plutôt que soudées en un bloc unique
   découpé par des filets de 1 px : ce rendu « tableau » faisait daté, et un
   pavé manquant en fin de rangée s'y voyait comme un trou.

   La grille est sur 6 colonnes, ce qui permet de composer les rangées plutôt
   que de les subir : 3 cartes de 2 colonnes, ou 2 cartes de 3 colonnes. Aucune
   rangée n'est jamais incomplète, quel que soit le nombre de cartes. */
.card-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem; margin-top: 3rem;
}
.card-grid > .card { grid-column: span 2; }

/* 5 cartes (Vos outils) : les deux dernières s'élargissent et remplissent la
   seconde rangée. */
.card-grid > .card:nth-child(4):nth-last-child(2),
.card-grid > .card:nth-child(5):nth-last-child(1) { grid-column: span 3; }

/* 4 cartes (Sécurité) : 2×2. */
.card-grid-duo > .card { grid-column: span 3; }

.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.9rem 1.7rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-border);
  box-shadow: var(--shadow-card-hover);
}

.card-icon {
  width: 42px; height: 42px; border-radius: 13px;
  background: var(--accent-dim); border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.4rem; color: var(--accent-ink);
}
.card-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.card-title { font-size: 15.5px; font-weight: 600; color: var(--heading); margin-bottom: 0.55rem; letter-spacing: -0.01em; }
.card-body { font-size: 14px; color: var(--text-muted); line-height: 1.7; }

/* ── Encart « vous gardez la main » ───────────────────────────────────────── */
.callout {
  margin-top: 3rem; padding: 2rem;
  border: 1px solid var(--accent-border); border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-dim) 0%, var(--bg2) 100%);
}
.callout-label {
  font-family: var(--mono); font-size: 11px; color: var(--accent-ink);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem;
}
.callout ul { list-style: none; display: grid; gap: 0.7rem; }
.callout li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text-soft); line-height: 1.6;
}
.callout li::before {
  content: '✓'; color: var(--accent-ink); flex-shrink: 0; font-size: 14px; line-height: 1.6;
}

/* ── Accès / beta ─────────────────────────────────────────────────────────── */
.access-card {
  border: 1px solid var(--accent-border);
  border-radius: 12px; background: var(--bg2);
  padding: 3rem; margin-top: 3rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  max-width: 620px;
}
.access-label {
  font-family: var(--mono); font-size: 11px; color: var(--accent-ink);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.access-text { font-size: 15px; color: var(--text-muted); line-height: 1.75; }
.access-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── Pied de page ─────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 2rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  max-width: 1100px; margin: 0 auto;
}
.footer-left { font-size: 13px; color: var(--text-dim); font-family: var(--mono); }
.footer-right { font-size: 13px; color: var(--text-dim); display: flex; gap: 1.25rem; }
.footer-right a { text-decoration: none; transition: color 0.15s; }
.footer-right a:hover { color: var(--text-muted); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* ── Dégradé de la barre de navigation ───────────────────────────────────
   Avec quatre entrées dont « Sécurité et confidentialité », la barre complète
   réclame ~1120 px. Plutôt que de raccourcir les libellés — ils reprennent
   volontairement le titre de chaque section —, on retire les éléments par
   ordre d'importance décroissante. « Se connecter » part en premier : le CTA
   et la carte Accès mènent tous deux à la page de connexion. */
@media (max-width: 1180px) {
  .nav-links { gap: 1.1rem; }
  .nav-login { display: none; }
}
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .nav-login { display: inline; }
}

@media (max-width: 900px) {
  /* Deux colonnes : 5 cartes donnent 2+2+1, la dernière prenant la rangée. */
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid > .card,
  .card-grid-duo > .card,
  .card-grid > .card:nth-child(4):nth-last-child(2),
  .card-grid > .card:nth-child(5):nth-last-child(1) { grid-column: auto; }
  .card-grid > .card:nth-child(5):last-child { grid-column: span 2; }

  /* Le sommaire collant n'a plus de place : chaque étape porte son propre
     numéro, et la colonne unique garde l'ordre de lecture. */
  .how-grid { grid-template-columns: 1fr; gap: 0; }
  .how-nav { display: none; }
  .how-steps { gap: 4.5rem; }
  .how-step-index { display: block; }
}

@media (max-width: 760px) {
  .card-grid, .card-grid-duo { grid-template-columns: 1fr; }
  .card-grid > .card,
  .card-grid-duo > .card,
  .card-grid > .card:nth-child(5):last-child { grid-column: auto; }

  /* À 375 px, logo + signature + bascule + CTA ne tiennent pas : la signature
     passe à la trappe et le CTA se resserre, sinon il déborde hors écran. */
  .nav-links { display: none; }
  nav { padding: 0 1rem; gap: 0.5rem; }
  .nav-right { gap: 0.5rem; }
  .nav-login { display: none; }
  .nav-by { display: none; }
  .nav-cta { padding: 7px 12px; font-size: 12.5px; }
  .theme-switch button { width: 26px; }
}

/* Sous 480 px, même resserré, « Demander un accès » pousse la barre hors
   écran : le libellé passe à « Accès », le lien reste au même endroit. */
.cta-short { display: none; }
@media (max-width: 480px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .hero { padding: 120px 1.25rem 70px; }
  .section { padding: 4.5rem 1.25rem; }
  .access-card { padding: 2rem 1.5rem; }
  footer { padding: 1.5rem 1.25rem; }
  .mock-body { padding: 1rem 1.1rem; }
  .chat-bulle { max-width: 88%; }
  .chat-saisie { margin: 0 1.1rem 1.1rem; }
}

/* ── Utilitaires de maquette ──────────────────────────────────────────────
   Ces quelques règles existent pour qu'AUCUN attribut `style` ne traîne dans
   le HTML : la CSP du site est servie sans 'unsafe-inline', un style en ligne
   serait donc purement et simplement ignoré par le navigateur. */
.mock-hero { margin-top: 4.5rem; }
.mock-row-gap { margin-top: 1rem; }
.mock-text-ask { margin-bottom: 1.25rem; }

/* Pastilles de dossier — jetons de la palette bornée (backend/src/dossiers/palette.js). */
.pastille-sky    { background: #38bdf8; }
.pastille-mint   { background: #4ecca3; }
.pastille-amber  { background: #f59e0b; }
.pastille-violet { background: #a78bfa; }

/* ── Pages légales — /privacy et /terms (#487) ────────────────────────────
   Déplacées ici depuis l'application (#483 les avait sorties d'Angular, elles
   y étaient invisibles pour le robot de Google). La plaquette est la « page
   d'accueil » déclarée à Google : la politique doit donc vivre sur le même
   domaine qu'elle. Elle est statique par construction — plus aucun risque
   qu'un robot reçoive une coquille vide.
   Comme le reste du site : aucun attribut `style=` en ligne, la CSP est
   servie sans 'unsafe-inline'. */
.legal {
  max-width: 760px;
  margin: 0 auto;
  /* 60px de barre fixe + respiration */
  padding: 7rem 2.5rem 4rem;
}
.legal h1 { font-size: 2rem; font-weight: 600; color: var(--heading); letter-spacing: -0.02em; }
.legal-updated { font-size: 13px; color: var(--text-dim); font-family: var(--mono); margin-top: 0.5rem; }
.legal-intro { margin-top: 1.5rem; font-size: 16px; color: var(--text-soft); line-height: 1.75; }

.legal section { border-top: 1px solid var(--border); margin-top: 2.25rem; padding-top: 2rem; }
.legal h2 { font-size: 17px; font-weight: 600; color: var(--heading); margin-bottom: 0.85rem; }
.legal h3 { font-size: 15px; font-weight: 600; color: var(--heading); margin: 1.5rem 0 0.6rem; }
.legal p, .legal li { font-size: 15px; line-height: 1.75; color: var(--text-soft); }
.legal p { margin-bottom: 0.75rem; }
.legal ul { padding-left: 1.25rem; margin: 0.5rem 0 1rem; }
.legal li { margin-bottom: 0.5rem; }
.legal a { color: var(--accent-ink); text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--text); font-weight: 600; }
.legal code { font-family: var(--mono); font-size: 13px; color: var(--heading); }

/* Encadré des mentions exigées par Google (divulgation « Limited Use »).
   Mis en évidence pour que le relecteur la trouve sans la chercher. */
.legal-callout {
  background: var(--bg2);
  border: 1px solid var(--accent-border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 1.25rem 1.4rem;
  margin: 1rem 0;
}
.legal-callout p:last-child { margin-bottom: 0; }
.legal-callout .en { color: var(--text-muted); font-style: italic; }

.legal table { width: 100%; border-collapse: collapse; margin: 0.75rem 0 1rem; }
.legal th, .legal td {
  text-align: left; vertical-align: top;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--border);
  font-size: 14px; line-height: 1.65; color: var(--text-soft);
}
.legal th { color: var(--heading); font-weight: 600; }

@media (max-width: 760px) {
  .legal { padding: 5.5rem 1.25rem 3rem; }
  .legal h1 { font-size: 1.6rem; }
  /* Un tableau à 3 colonnes ne tient pas sur un téléphone : chaque ligne
     devient un bloc, en-têtes masqués, première cellule en titre. */
  .legal table, .legal thead, .legal tbody, .legal th, .legal td, .legal tr { display: block; }
  .legal thead { display: none; }
  .legal tr { border-bottom: 1px solid var(--border); padding: 0.6rem 0; }
  .legal td { border: none; padding: 0.15rem 0; }
  .legal td:first-child { color: var(--heading); font-weight: 600; }
}

/* ── Page 404 (#491) ──────────────────────────────────────────────────────
   Centrée verticalement entre la barre fixe et le pied de page. Reprend les
   jetons du site : aucune couleur en dur, donc clair et sombre suivent. */
.erreur {
  max-width: 640px;
  margin: 0 auto;
  /* 60px de barre fixe ; le reste de la hauteur est repris pour centrer. */
  min-height: calc(100vh - 60px - 120px);
  padding: 7rem 2.5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.erreur-code {
  font-family: var(--mono);
  /* Grand chiffre d'accroche : c'est lui qui dit instantanément « tu t'es
     trompé d'adresse », avant même la lecture du titre. `clamp` pour qu'il
     reste imposant sur téléphone sans déborder. */
  font-size: clamp(4.5rem, 16vw, 8rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--accent-ink);
}
.erreur-titre {
  margin-top: 1.25rem;
  font-size: 2rem;
  font-weight: 600;
  color: var(--heading);
  letter-spacing: -0.02em;
}
.erreur-texte {
  margin-top: 1rem;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-soft);
}
.erreur-liens {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.erreur-lien-discret {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
}
.erreur-lien-discret:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 760px) {
  .erreur { padding: 5.5rem 1.25rem 3rem; }
  .erreur-titre { font-size: 1.6rem; }
  .erreur-liens { gap: 1rem; }
}