/* Sillaxe : feuille de style partagée
   Palette reprise directement de l'app (DesignSystem/Palette.swift) pour
   une identité cohérente entre le site et l'appli. */

:root {
  --ink: #10091c;
  --ink-2: #181025;
  --plum: #2a173d;
  /* Le second plan sombre accueille le texte effacé et les mentions d'accent.
     Il faut donc qu'il soit **plus sombre** qu'eux, et la passe précédente
     l'avait éclairci en croyant l'inverse : `#331a4d` laissait l'accent à
     4,19:1 et le texte effacé à 4,33:1, sous le seuil, alors que le
     commentaire annonçait 4,65 et 4,88. Personne ne l'a vu parce que le
     vérificateur de contraste ne mesurait plus rien (voir
     `Tools/verifier_contraste.py`). Mesuré le 2026-09-19 : cette teinte-ci
     les tient à 4,74:1 et 4,61:1. */
  --plum-2: #261435;
  --violet: #b857ff;
  --violet-dim: #9147d9;
  --sage: #38e6ad;
  --clay: #ff4034;
  --amber: #ffa626;
  --status-error: var(--clay);
  --status-success: var(--sage);
  --status-warning: var(--amber);
  --ivory: #f8f5ff;
  --paper: #fcfaff;

  --bg: var(--ink);
  --bg-elevated: var(--ink-2);
  --surface: var(--plum);
  --surface-2: var(--plum-2);
  --text: var(--ivory);
  --text-dim: rgba(245, 239, 226, 0.68);
  /* Même les explications secondaires restent lisibles à petite taille :
     cette opacité franchit 4,5:1 sur le fond sombre. */
  --text-faint: rgba(245, 239, 226, 0.5);
  --accent: var(--violet);
  --accent-dim: var(--violet-dim);
  /* Le texte posé sur l'accent (boutons principaux) et le fond d'un bouton
     survolé (13/10). Sur un accent clair, l'encre ; au survol, l'accent
     s'éclaircit, jamais l'inverse : le violet foncé d'avant tombait à 3,81:1
     sous l'encre. Les saisons changent l'accent, ces deux jetons suivent. */
  --on-accent: var(--ink);
  --accent-hover: color-mix(in srgb, var(--accent) 82%, white);
  --border: rgba(245, 239, 226, 0.14);
  --border-strong: rgba(184, 87, 255, 0.45);
  --shadow: 0 20px 60px rgba(5, 2, 10, 0.55);

  --font-display: -apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: light dark; }

:root[data-theme="light"] {
  --bg: #f6f2ff;
  --bg-elevated: #fbf9ff;
  --surface: #fffaff;
  --surface-2: #f0eafd;
  --text: #20102f;
  --text-dim: rgba(32, 16, 47, 0.72);
  --text-faint: rgba(32, 16, 47, 0.63);
  /* Le violet clair `#b057f0` restait à 3,35:1 sur l'ivoire : les mentions
     d'accent en petit corps lisaient moins bien que le thème sombre, et
     moins bien que le thème clair du système, qui, lui, fonçait déjà
     l'accent. Les deux thèmes clairs partagent désormais la même teinte,
     à 4,94:1. Le vérificateur de contraste refuse toute régression. */
  --accent: #7d38bd;
  --accent-dim: #632691;
  /* Sur un accent foncé, du blanc : l'encre n'y tenait que 2,94:1 (13/10),
     et 2,06:1 au survol. L'accent survolé fonce au lieu de s'éclaircir. */
  --on-accent: #ffffff;
  --accent-hover: color-mix(in srgb, var(--accent) 84%, black);
  --status-error: #bc352a;
  --status-success: #087b5d;
  --status-warning: #8b5600;
  --border: rgba(45, 23, 68, 0.13);
  --border-strong: rgba(125, 56, 189, 0.34);
  --shadow: 0 20px 50px rgba(40, 18, 62, 0.13);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* Sans choix mémorisé, le site suit réellement le thème du système. La
   feuille de style le fait avant même l'exécution du script, donc sans éclair
   sombre au premier affichage. Un choix manuel garde toujours la priorité. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f2ff;
    --bg-elevated: #fbf9ff;
    --surface: #fffaff;
    --surface-2: #f0eafd;
    --text: #20102f;
    --text-dim: rgba(32, 16, 47, 0.72);
    --text-faint: rgba(32, 16, 47, 0.63);
    --accent: #7d38bd;
    --accent-dim: #632691;
    --on-accent: #ffffff;
    --accent-hover: color-mix(in srgb, var(--accent) 84%, black);
    --status-error: #bc352a;
    --status-success: #087b5d;
    --status-warning: #8b5600;
    --border: rgba(45, 23, 68, 0.13);
    --border-strong: rgba(125, 56, 189, 0.34);
    --shadow: 0 20px 50px rgba(40, 18, 62, 0.13);
    color-scheme: light;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.release-launched { display: none !important; }
html[data-release-mode="launched"] .release-prelaunch { display: none !important; }
html[data-release-mode="launched"] .release-launched { display: inline-flex !important; }
html[data-release-mode="launched"] p.release-launched,
html[data-release-mode="launched"] h2.release-launched { display: block !important; }

a {
  color: inherit;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

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

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

.prose {
  max-width: 68ch;
}

/* Découpe angulaire signature de l'app (RibbonShape) : coin coupé plutôt
   qu'arrondi : c'est ce qui rend le site reconnaissable comme "Sillaxe"
   plutôt qu'un gabarit générique. */
.cut {
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

.cut-sm {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.02;
}

h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.1;
}

h3 {
  font-size: 1.2rem;
  line-height: 1.3;
}

p {
  margin: 0;
  color: var(--text-dim);
}

.nums {
  font-variant-numeric: tabular-nums;
}

/* --- Nav --- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* La marque touchait le premier lien : « Sillaxe » et « Horizon » se
     lisaient comme un seul mot. `space-between` ne pose aucun espace
     minimal, il se contente de répartir ce qui reste. */
  gap: 32px;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
}

.brand-mark {
  width: 28px;
  height: 28px;
  flex: none;
}

/* La marque enregistrée (27/09) : un petit ® collé au nom, sans décaler la
   ligne. Le numéro de dépôt ne figure nulle part. */
.marque {
  margin-left: 1px;
  font-size: 0.5em;
  font-weight: 700;
  line-height: 0;
  vertical-align: super;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-dim);
  transition: color 0.15s ease;
  /* Un libellé ne se coupe jamais en son milieu. « Comment ça marche »
     tenait sur trois lignes dans une barre haute de 68 points. */
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-current {
  color: var(--accent);
}

.nav-links a.is-current::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  margin: 5px auto -7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 72%, transparent);
}

.theme-toggle {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--border-strong);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
}

/* --- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--accent-hover);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--border-strong);
  color: var(--accent);
}

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

/* --- Hero --- */

.hero {
  position: relative;
  padding: 96px 0 72px;
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.hero-copy .eyebrow {
  display: block;
  margin-bottom: 18px;
}

.hero-copy h1 {
  margin-bottom: 22px;
}

.hero-copy .lede {
  font-size: 1.14rem;
  color: var(--text-dim);
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.hero-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
}

.hero-stage {
  position: relative;
  aspect-ratio: 1 / 1.05;
}

#wake-canvas {
  width: 100%;
  height: 100%;
}

/* --- Démonstrateur : preuve du produit, sans appel réseau --- */

.journey-demo {
  padding: 96px 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.demo-heading {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 0.8fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 34px;
}

.demo-heading .eyebrow { display: block; margin-bottom: 12px; }
.demo-heading h2 { max-width: 18ch; }
.demo-heading .lede { max-width: 52ch; }

.demo-shell {
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 15%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
    var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}

.demo-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
}

.demo-tabs button {
  min-height: 64px;
  padding: 14px 18px;
  border: 0;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 32%, transparent);
  color: var(--text-dim);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.demo-tabs button:last-child { border-right: 0; }
.demo-tabs button span { margin-right: 8px; color: var(--text-faint); font-family: var(--font-mono); font-size: 0.7rem; }
.demo-tabs button.is-active { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 -3px var(--accent); }

.demo-stage { min-height: 430px; }
.demo-panel { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(30px, 6vw, 72px); padding: clamp(28px, 5vw, 56px); }
.demo-panel[hidden] { display: none; }
.demo-panel-copy { align-self: center; }
.demo-panel-copy .eyebrow { display: block; margin-bottom: 12px; }
.demo-panel-copy h3 { margin-bottom: 14px; font-size: clamp(1.45rem, 3vw, 2rem); }
.demo-panel-copy > p { max-width: 46ch; }

.demo-reason,
.demo-cue {
  margin-top: 24px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 680;
}

.demo-cue { display: grid; gap: 3px; }
.demo-cue span { color: var(--clay); font: 700 0.68rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }

.demo-route-list,
.demo-parking-list { display: grid; gap: 10px; align-content: center; }

.demo-route,
.demo-parking {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 18px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 54%, transparent);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.demo-route:hover,
.demo-route:focus-visible,
.demo-parking:hover,
.demo-parking:focus-visible { transform: translateX(4px); border-color: var(--border-strong); }
.demo-route.is-selected,
.demo-parking.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--bg)); }
.demo-route span,
.demo-parking span:not(.demo-parking-mark) { display: grid; min-width: 0; }
.demo-route b,
.demo-parking b { font-size: 1.02rem; }
.demo-route small,
.demo-parking small { color: var(--text-dim); font-size: 0.82rem; }
.demo-route strong { font-size: 1.2rem; white-space: nowrap; }
.demo-route i,
.demo-parking i { grid-column: 1 / -1; width: fit-content; color: var(--accent); font: 700 0.65rem var(--font-mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; }
.demo-route i.is-amber { color: var(--status-warning); }
.demo-route i.is-sage { color: var(--status-success); }

.demo-horizon { align-self: center; padding: 24px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 64%, transparent); }
.demo-horizon-head { display: flex; justify-content: space-between; color: var(--text-faint); font: 650 0.68rem var(--font-mono); text-transform: uppercase; }
.demo-horizon-track { position: relative; height: 10px; margin: 24px 0 28px; border-radius: 999px; background: var(--border); }
.demo-horizon-track i { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--accent); box-shadow: 0 0 16px currentColor; }
.demo-horizon-track .is-now { left: 2%; color: var(--accent); }
.demo-horizon-track .is-traffic { left: 35%; color: var(--amber); background: var(--amber); }
.demo-horizon-track .is-turn { left: 62%; color: var(--accent); }
.demo-horizon-track .is-vigilance { left: 86%; color: var(--clay); background: var(--clay); }
.demo-horizon ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.demo-horizon li { display: grid; gap: 4px; min-width: 0; }
.demo-horizon li > span { width: 18px; height: 3px; background: var(--accent); }
.demo-horizon li > span.is-traffic { background: var(--amber); }
.demo-horizon li > span.is-vigilance { background: var(--clay); }
.demo-horizon li b { font-size: 0.86rem; }
.demo-horizon li small { color: var(--text-faint); }

.demo-parking { grid-template-columns: auto minmax(0, 1fr) auto; }
.demo-parking i { grid-column: 3; grid-row: 1; text-align: right; }
.demo-parking-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-weight: 850; }

.demo-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px clamp(28px, 5vw, 56px); border-top: 1px solid var(--border); }
.demo-controls > div { display: flex; gap: 10px; }
.demo-controls .btn { padding: 11px 18px; }
.demo-progress { color: var(--text-faint); font: 650 0.74rem var(--font-mono); }

/* --- Horizon Sillaxe --- */

.horizon-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 46%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%),
    var(--bg-elevated);
}

.horizon-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) 1.22fr;
  align-items: center;
  gap: clamp(48px, 8vw, 108px);
}

.horizon-visual {
  display: grid;
  justify-items: center;
  gap: 18px;
}

.horizon-device {
  width: min(100%, 330px);
  justify-self: center;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 46px;
  background: #08060d;
  box-shadow:
    0 32px 80px rgba(5, 2, 10, 0.64),
    0 0 60px color-mix(in srgb, var(--accent) 18%, transparent);
}

.horizon-device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 38px;
}

.horizon-device picture { display: block; }

/* Les trois pastilles ne disaient rien à qui ignore ce qu'est une zone de
   vigilance : « Approche / Zone active / Sortie proche » suppose la réponse.
   Le contexte n'existait que dans un `aria-label`, donc invisible, et
   l'explication vivait dans la colonne d'à côté sans lien apparent. */
.horizon-phases-intro {
  width: min(100%, 360px);
  /* La colonne espace ses éléments de 18 px. Le paragraphe introduit les
     pastilles qui le suivent : il doit leur être plus proche qu'à l'image
     au-dessus, d'où ce rapprochement volontaire. */
  margin: 0 0 -8px;
  color: var(--text-dim);
  font-size: 0.86rem;
  line-height: 1.5;
}

.horizon-phases-intro b {
  color: var(--text);
  font-weight: 700;
}

.horizon-phases {
  width: min(100%, 360px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 7px;
  gap: 5px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 18px 42px rgba(5, 2, 10, 0.28);
}

.horizon-phases span {
  min-width: 0;
  padding: 9px 5px;
  display: grid;
  place-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.horizon-phases b {
  color: inherit;
  font: inherit;
}

.horizon-phases small {
  min-height: 2.4em;
  color: color-mix(in srgb, var(--text-dim) 88%, transparent);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.horizon-phases i {
  width: 100%;
  height: 3px;
  border-radius: 99px;
  background: var(--clay);
}

.horizon-phases .is-approach i {
  background: repeating-linear-gradient(90deg, var(--clay) 0 6px, transparent 6px 10px);
  opacity: 0.8;
}

.horizon-phases .is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--clay) 38%, transparent);
  background: color-mix(in srgb, var(--clay) 8%, transparent);
}

.horizon-phases .is-active i {
  box-shadow: 0 0 12px color-mix(in srgb, var(--clay) 70%, transparent);
}

.horizon-phases .is-leaving i {
  background: linear-gradient(90deg, var(--clay), color-mix(in srgb, var(--clay) 8%, transparent));
}

.horizon-copy .eyebrow {
  display: block;
  margin-bottom: 14px;
}

.horizon-copy h2 {
  max-width: 15ch;
  margin-bottom: 20px;
}

.horizon-copy > .lede {
  max-width: 55ch;
  font-size: 1.08rem;
}

.horizon-points {
  display: grid;
  gap: 2px;
  margin-top: 34px;
  background: var(--border);
  border: 1px solid var(--border);
}

.horizon-points > div {
  padding: 20px 22px;
  background: var(--bg-elevated);
}

.horizon-points strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

.horizon-points p {
  font-size: 0.92rem;
}

/* --- Sillaxe Score : la décision rendue lisible ------------------------- */

.score-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 32%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
    var(--bg);
}

.score-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
  gap: clamp(38px, 7vw, 92px);
  align-items: center;
}

.score-copy .eyebrow {
  display: block;
  margin-bottom: 14px;
}

.score-copy h2 {
  max-width: 14ch;
  margin-bottom: 20px;
}

.score-copy .lede {
  max-width: 54ch;
  font-size: 1.06rem;
}

.score-reason {
  margin-top: 24px;
  padding: 16px 18px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.score-reason span {
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.score-reason strong {
  color: var(--text);
  font-size: 1rem;
}

.score-signals {
  display: grid;
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
}

.score-signal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 22px;
  background: var(--bg-elevated);
}

.score-signal-index {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
}

.score-signal strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

.score-signal p {
  font-size: 0.9rem;
}

/* --- Parking Sense / intelligence d'arrivée --- */

.arrival-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 14%, color-mix(in srgb, #198cff 16%, transparent), transparent 32%),
    radial-gradient(circle at 86% 78%, color-mix(in srgb, var(--sage) 10%, transparent), transparent 34%),
    var(--bg);
}

.arrival-heading {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(32px, 7vw, 84px);
  align-items: end;
  margin-bottom: 44px;
}

.arrival-heading .eyebrow {
  display: block;
  margin-bottom: 14px;
}

.arrival-heading h2 {
  max-width: 17ch;
}

.arrival-heading .lede {
  max-width: 54ch;
  font-size: 1.04rem;
}

.arrival-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.arrival-card {
  min-width: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 78%, transparent), var(--bg-elevated));
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(5, 2, 10, 0.2);
}

.arrival-card.is-parking {
  border-color: color-mix(in srgb, #198cff 55%, var(--border));
  background:
    linear-gradient(145deg, color-mix(in srgb, #198cff 13%, var(--surface)), var(--bg-elevated));
}

.arrival-card-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.arrival-monogram {
  min-width: 34px;
  height: 34px;
  padding: 0 7px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, #198cff 58%, var(--border));
  background: color-mix(in srgb, #198cff 18%, var(--surface));
  color: #63b1ff;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
}

.arrival-index {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.arrival-card h3 {
  font-size: 1.28rem;
}

.arrival-card > p {
  font-size: 0.92rem;
}

.sense-preview {
  margin-top: auto;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  background: color-mix(in srgb, #198cff 11%, var(--bg));
  border: 1px solid color-mix(in srgb, #198cff 38%, var(--border));
}

.sense-preview div {
  min-width: 0;
}

.sense-preview strong,
.sense-preview span {
  display: block;
}

.sense-preview strong {
  color: var(--text);
  font-size: 0.82rem;
}

.sense-preview div span {
  color: var(--text-faint);
  font-size: 0.74rem;
}

.sense-badge {
  flex: none;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}

.profile-pills span {
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  background: color-mix(in srgb, var(--surface) 64%, transparent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.arrival-note {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text-faint) !important;
  font-family: var(--font-mono);
  font-size: 0.74rem !important;
}

.feature-monogram {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
}

/* --- Sillaxe Replay --- */

.replay-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 46%, color-mix(in srgb, var(--sage) 12%, transparent), transparent 34%),
    var(--bg);
}

.replay-grid {
  grid-template-columns: 1.22fr minmax(260px, 0.78fr);
}

.replay-device {
  box-shadow:
    0 32px 80px rgba(5, 2, 10, 0.64),
    0 0 60px color-mix(in srgb, var(--sage) 12%, transparent);
}

.replay-access {
  max-width: 58ch;
  margin-top: 24px;
  padding: 16px 18px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--surface) 66%, transparent);
  font-size: 0.92rem;
}

.replay-access strong {
  color: var(--text);
}

/* --- Sections --- */

section {
  padding: 88px 0;
  border-top: 1px solid var(--border);
}

.section-head {
  max-width: 56ch;
  margin-bottom: 48px;
}

.section-head .eyebrow {
  display: block;
  margin-bottom: 14px;
}

.section-head h2 {
  margin-bottom: 16px;
}

/* ## Les liens d'ancrage passaient sous la barre de navigation
   La barre est collante et mesure quatre-vingt-un pixels. Un lien `#horizon`
   amenait donc la section à zéro, c'est-à-dire son titre exactement derrière
   la barre : on arrivait au bon endroit en croyant s'être trompé. Vérifié sur
   les six liens existants, tous concernés. Quelques pixels de marge en plus
   pour que le titre respire au lieu de toucher la barre. */
section[id] {
  scroll-margin-top: 96px;
}

/* --- Galerie d'écrans --- */

.section-head .section-lede {
  margin: 0;
  color: var(--text-dim);
}

/* ## Une bande qui défile, et non une grille
   Six téléphones empilés feraient six écrans de page à parcourir, et l'on
   perdrait la comparaison entre eux, or c'est précisément l'ensemble qui dit
   ce que l'application est. La bande défile donc, avec l'accrochage et le
   masque de bords déjà utilisés par la barre de navigation en petite largeur :
   c'est le même geste, appris une fois. */
.screen-strip {
  display: flex;
  gap: 24px;
  /* Débord jusqu'aux bords de la fenêtre : une bande qui s'arrête à la
     gouttière du contenu se lit comme une grille tronquée, pas comme quelque
     chose qui continue. */
  margin: 0 calc(50% - 50vw);
  padding: 4px calc(50vw - 50%) 20px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 24px,
    #000 calc(100% - 24px),
    transparent 100%
  );
}

.screen-strip::-webkit-scrollbar {
  display: none;
}

.screen-slide {
  flex: 0 0 auto;
  width: min(74vw, 268px);
  margin: 0;
  scroll-snap-align: center;
}

/* Le cadre d'appareil est celui d'`.horizon-device`, à la largeur près : deux
   dessins de téléphone différents sur la même page se remarquent tout de
   suite. */
.screen-device {
  width: 100%;
}

.screen-slide figcaption {
  margin-top: 16px;
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.45;
}

.screen-slide figcaption strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 0.98rem;
}

/* Un défilement mécanique ne doit pas s'imposer à qui a demandé moins
   d'animation dans ses réglages système. */
@media (prefers-reduced-motion: no-preference) {
  .screen-strip {
    scroll-behavior: smooth;
  }
}

/* --- Feature grid --- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
}

.feature-more {
  margin-top: 20px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.feature-more summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 20px;
  color: var(--text);
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.feature-more summary::-webkit-details-marker { display: none; }
.feature-more summary span { color: var(--accent); font-size: 1.5rem; transition: transform 160ms ease; }
.feature-more[open] summary span { transform: rotate(45deg); }
.feature-grid-secondary { border-top: 1px solid var(--border); }

/* Les sections lourdes ne sont composées qu'à l'approche de l'écran. La
   taille intrinsèque évite tout saut pendant que le navigateur les réveille. */
@supports (content-visibility: auto) {
  .home-main > section:not(:first-of-type) {
    content-visibility: auto;
    contain-intrinsic-size: auto 760px;
  }
}

.feature-card {
  background: var(--bg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Sur trois colonnes, une dernière fonctionnalité seule sur sa rangée
   s'étire au lieu de laisser deux cases vides (dix depuis les tournées,
   28/09). Sur deux colonnes, dix tombent juste. */
@media (min-width: 901px) {
  .feature-grid > .feature-card:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }
}

.feature-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--accent);
}

.feature-icon svg {
  width: 22px;
  height: 22px;
}

.feature-card h3 {
  color: var(--text);
}

.feature-card p {
  font-size: 0.94rem;
}

.feature-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.feature-title h3 {
  margin: 0;
}

/* --- Couverture des données : variante 2 colonnes du trust-strip pour de
   plus longs libellés (voir couverture.html) --- */

.trust-strip.two-col {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .trust-strip.two-col { grid-template-columns: repeat(4, 1fr); }
}

/* --- Variante 3 colonnes : utilisée une fois la statistique radars
   retirée des deux trust-strip ci-dessus (index.html et couverture.html),
   pour ne pas laisser une case vide dans la grille à 4 colonnes. --- */

.trust-strip.three-col {
  grid-template-columns: repeat(3, 1fr);
}

.stat-note {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-faint);
  margin: 20px 0 48px;
}

/* --- Route strip (comment ça marche) --- */

.route-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}

.route-step {
  position: relative;
  padding-top: 28px;
  border-top: 2px solid var(--border);
}

.route-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -13px;
  left: 0;
  background: var(--bg);
  padding-right: 10px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
}

.route-step h3 {
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.route-step p {
  font-size: 0.92rem;
}

/* --- Trust / data sources strip --- */

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.trust-item {
  background: var(--bg-elevated);
  padding: 22px 20px;
}

.trust-item .value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--accent);
}

.trust-item .label {
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-top: 4px;
}

/* --- CTA band --- */

.cta-band {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta-band h2 {
  margin-bottom: 10px;
}

.cta-band .lede {
  color: var(--text-dim);
  max-width: 46ch;
}

.cta-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* --- Footer --- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

.footer-brand p {
  font-size: 0.88rem;
  max-width: 32ch;
  margin-top: 12px;
}

.footer-col h3 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-weight: 600;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--text-dim);
  transition: color 0.15s ease;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* --- Legal pages --- */

.legal-page {
  padding: 64px 0 96px;
}

.legal-header {
  margin-bottom: 48px;
  max-width: 62ch;
}

.legal-header .eyebrow {
  display: block;
  margin-bottom: 16px;
}

.legal-header h1 {
  font-size: clamp(2.1rem, 4vw, 3rem);
  margin-bottom: 14px;
}

.legal-meta {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-faint);
}

.legal-body {
  max-width: 68ch;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.legal-block h2 {
  font-size: 1.3rem;
  margin-bottom: 14px;
  color: var(--text);
}

.legal-block p + p {
  margin-top: 14px;
}

.legal-block p {
  font-size: 0.98rem;
  color: var(--text-dim);
}

.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 44px;
}

.legal-toc a {
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-dim);
}

.legal-toc a:hover,
.legal-toc a:focus-visible,
.legal-toc a.is-current {
  color: var(--accent);
}

.legal-toc a.is-current {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.data-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
}

.data-table th,
.data-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
  /* Sur téléphone, la première colonne coupait les mots n'importe où
     (« Synchronisati / on », 13/10) : la césure française passe d'abord. */
  -webkit-hyphens: auto;
  hyphens: auto;
}

.data-table th:first-child,
.data-table td:first-child {
  width: 38%;
}

.data-table th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 600;
}

.data-table tr:last-child td {
  border-bottom: none;
}

/* --- Auth / compte --- */

.auth-page {
  padding: 96px 0 120px;
  display: flex;
  justify-content: center;
  min-height: calc(100svh - 68px);
}

.auth-card {
  width: 100%;
  min-width: 0;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 40px 36px;
}

.auth-card.account-card {
  max-width: 720px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 34%),
    var(--surface);
  box-shadow: var(--shadow);
}

.auth-card .eyebrow {
  display: block;
  margin-bottom: 16px;
}

.auth-card h1 {
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  margin-bottom: 12px;
}

.auth-card .lede {
  font-size: 0.98rem;
  color: var(--text-dim);
  margin-bottom: 28px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.form-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
}

.form-field input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 13px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}

.form-field input:focus-visible {
  border-color: var(--border-strong);
  /* Le focus ne peut pas tenir dans un simple changement de bordure :
     WCAG 2.4.11 exige un indicateur visible, et 1 px à 12 % d'alpha ne
     l'est pas. */
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Le formulaire de contact : une liste déroulante, une zone de texte et deux
   lignes d'aide. Mêmes bordures et mêmes retraits que les champs ci-dessus,
   pour qu'un formulaire plus long ne donne pas l'impression d'une autre
   page. */
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 13px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}

.form-field textarea {
  resize: vertical;
  min-height: 150px;
  line-height: 1.55;
}

.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--border-strong);
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.field-help {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-faint);
}

.field-optional {
  font-weight: 400;
  color: var(--text-faint);
}

/* Le piège à automates.
   `display: none` suffit à le tenir hors de vue et hors du parcours au
   clavier. Le décaler hors de l'écran plutôt que le masquer laisserait un
   lecteur d'écran l'annoncer, et demanderait à une personne aveugle
   d'ignorer un champ qu'elle serait seule à entendre. */
.trap {
  display: none;
}

.form-status {
  font-size: 0.88rem;
  margin-top: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.form-status:empty {
  display: none;
}

.form-status.is-error {
  color: var(--status-error);
}

.form-status.is-success {
  color: var(--status-success);
}

/* Le bouton de reprise n'apparaît qu'après un échec de préparation du
   formulaire. Son espace ne doit pas rester réservé lorsqu'il est caché. */
#support-prepare-retry:not(.is-hidden) {
  margin-top: 16px;
}

.support-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 24px 0 8px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 58%),
    var(--utility-card, var(--surface));
}

.support-account-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.support-account-label {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.support-account-copy strong {
  overflow-wrap: anywhere;
  color: var(--text);
}

.support-account-action {
  flex: none;
  width: auto;
  min-height: 44px;
  padding: 10px 15px;
  white-space: nowrap;
}

.account-support .account-empty {
  margin-bottom: 16px;
}

@media (max-width: 620px) {
  .support-account {
    align-items: stretch;
    flex-direction: column;
  }

  .support-account-action {
    width: 100%;
  }
}

.auth-step {
  display: none;
}

.auth-step.is-active {
  display: block;
}

.auth-step[aria-busy="true"] h1::after {
  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.35em;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  vertical-align: 0.02em;
  animation: sillaxe-spin 0.8s linear infinite;
}

@keyframes sillaxe-spin {
  to { transform: rotate(360deg); }
}

.account-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  margin-bottom: 28px;
}

.account-status .email {
  font-weight: 700;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Une ligne de titre qui porte un e-mail et sa pastille de statut : elle
   s'enroule proprement sur les écrans étroits, sans jamais tronquer. */
.admin-title-ligne {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.admin-title-ligne .pill {
  flex-shrink: 0;
}

/* La rangée de résultat s'ouvre d'un toucher, comme le bouton qu'elle porte. */
.admin-rangee-cliquable {
  cursor: pointer;
}

.pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.pill.is-trial {
  background: rgba(255, 166, 38, 0.16);
  color: var(--status-warning);
}

.pill.is-active {
  background: rgba(56, 230, 173, 0.16);
  color: var(--status-success);
}

.pill.is-inactive {
  background: rgba(245, 239, 226, 0.1);
  color: var(--text-faint);
}

/* --accent change de teinte entre les thèmes clair/sombre (contrairement à
   --amber/--sage) : color-mix garde le badge lisible dans les deux. */
.pill.is-plus {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

/* Le rôle d'administrateur se distingue des états d'abonnement : il ne dit
   pas ce qu'on a payé mais ce qu'on peut voir. D'où une teinte à part, et
   volontairement sobre : ce n'est pas une distinction, c'est un rappel. */
.pill.is-admin {
  background: rgba(245, 239, 226, 0.14);
  color: var(--text-faint);
  border: 1px solid rgba(245, 239, 226, 0.22);
}

/* Cette pastille-là est un lien vers l'espace d'administration : elle annonce
   ce qu'elle ouvre, se souligne au survol comme les autres liens du site, et
   garde un contour visible au clavier. Elle n'existe que pour un compte
   administrateur, le script la découvrant sur `isAdmin`. */
a.pill.is-admin {
  text-decoration: none;
  transition: border-color 140ms ease, color 140ms ease;
}

a.pill.is-admin::after {
  content: " →";
}

a.pill.is-admin:hover,
a.pill.is-admin:focus-visible {
  color: var(--text);
  border-color: var(--accent);
}

.plan-choice {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.plan-choice .btn {
  justify-content: center;
  width: 100%;
}

.favorite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.favorite-row .favorite-text {
  min-width: 0;
}

.favorite-row .favorite-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.favorite-row .favorite-subtitle {
  font-size: 0.78rem;
  color: var(--text-faint);
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.favorite-row button {
  flex: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--status-error);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
}

.favorite-row button:hover {
  border-color: var(--status-error);
}

/* --- Responsive --- */

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

  .hero-stage {
    order: -1;
    max-width: 340px;
    margin: 0 auto;
  }

  .demo-heading,
  .demo-panel {
    grid-template-columns: 1fr;
  }

  .demo-stage { min-height: 610px; }

  .feature-grid,
  .route-strip,
  .trust-strip,
  .trust-strip.three-col {
    grid-template-columns: repeat(2, 1fr);
  }

  .horizon-grid {
    grid-template-columns: 1fr;
  }

  .score-grid {
    grid-template-columns: 1fr;
  }

  .score-copy {
    text-align: center;
  }

  .score-copy h2,
  .score-copy .lede {
    margin-left: auto;
    margin-right: auto;
  }

  .arrival-heading {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .arrival-heading h2,
  .arrival-heading .lede {
    margin-left: auto;
    margin-right: auto;
  }

  .arrival-grid {
    grid-template-columns: 1fr;
  }

  .replay-device {
    order: -1;
  }

  .horizon-copy {
    text-align: center;
  }

  .horizon-copy h2,
  .horizon-copy > .lede,
  .replay-access {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-band {
    padding: 36px 28px;
  }
}

@media (max-width: 720px) {
  .site-nav .wrap {
    height: auto;
    min-height: 68px;
    flex-wrap: wrap;
    padding: 0 20px 10px;
  }

  .brand {
    order: 1;
  }

  .theme-toggle {
    order: 2;
  }

  .nav-links {
    order: 3;
    display: flex;
    width: 100%;
    gap: 20px;
    padding: 2px 0 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: inline proximity;
  }

  /* Le fondu ne s'applique que du côté où il reste quelque chose à voir.

     Appliqué des deux côtés en permanence, il effaçait la première lettre de
     l'étiquette la plus à gauche dès l'arrivée sur la page, alors que rien
     n'était caché de ce côté : le « F » de Fonctionnalités devenait illisible.

     Les classes qui disent où l'on peut défiler existaient déjà, posées par
     `site.js` à chaque défilement ; elles pilotent désormais le masque. */
  /* Par défaut, seul le bord droit s'estompe : une barre qu'on vient
     d'ouvrir est à son début, il n'y a rien de caché à gauche. Cette règle
     ne dépend d'aucun script : c'est elle qui garantit que la première
     étiquette reste lisible même si `site.js` ne s'exécute pas. */
  .nav-links {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
  }

  .nav-links.can-scroll-left.can-scroll-right {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 14px,
      #000 calc(100% - 14px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 14px,
      #000 calc(100% - 14px),
      transparent 100%
    );
  }

  .nav-links.can-scroll-right:not(.can-scroll-left) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
  }

  .nav-links.can-scroll-left:not(.can-scroll-right) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px);
    mask-image: linear-gradient(to right, transparent 0, #000 14px);
  }

  .nav-links.can-scroll-right {
    padding-right: 34px;
  }

  .nav-links.can-scroll-left {
    padding-left: 20px;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-links a {
    white-space: nowrap;
    font-size: 0.82rem;
    scroll-snap-align: center;
  }

  .legal-page {
    padding-top: 48px;
  }

  .legal-header {
    margin-bottom: 32px;
  }

  .legal-toc {
    gap: 9px 16px;
    padding: 18px;
    margin-bottom: 34px;
  }

  .data-table {
    font-size: 0.82rem;
  }

  .data-table th,
  .data-table td {
    padding: 11px 10px;
  }

  section[id] {
    scroll-margin-top: 132px;
  }

  .feature-grid,
  .route-strip,
  .trust-strip {
    grid-template-columns: 1fr;
  }

  .journey-demo { padding: 60px 0; }
  .demo-heading { gap: 18px; }
  .demo-tabs button { min-height: 58px; padding: 10px 7px; font-size: 0.78rem; }
  .demo-tabs button span { display: block; margin: 0 0 2px; }
  .demo-stage { min-height: 660px; }
  .demo-panel { padding: 24px 20px; }
  .demo-horizon { padding: 18px; }
  .demo-horizon ol { grid-template-columns: 1fr; }
  .demo-controls { align-items: stretch; flex-direction: column; padding: 16px 20px 20px; }
  .demo-controls > div { display: grid; grid-template-columns: 1fr 1fr; }
  .demo-controls .btn { justify-content: center; padding: 10px 8px; }
  .demo-parking { grid-template-columns: auto minmax(0, 1fr); }
  .demo-parking i { grid-column: 2; grid-row: auto; text-align: left; }

  .arrival-card {
    padding: 24px 22px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  section {
    padding: 60px 0;
  }

  .hero {
    padding: 48px 0;
  }

  .hero-stage {
    order: 0;
    width: min(240px, 70vw);
    margin: 28px auto 0;
  }

  .horizon-device {
    width: min(260px, 76vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Sillaxe+ : ce qui est gratuit, ce que l'abonnement ajoute ---------- */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* La carte payante se distingue par un liseré, pas par du bruit : elle doit
   se remarquer sans écraser la colonne gratuite, qui porte l'argument de
   confiance. */
.plan-card-plus {
  border-color: rgba(184, 87, 255, 0.42);
  background: linear-gradient(160deg, rgba(184, 87, 255, 0.12), transparent 62%), var(--surface);
}

.plan-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.plan-list li {
  position: relative;
  padding-left: 22px;
  line-height: 1.5;
  color: var(--text-dim);
}

.plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 2px;
  background: var(--violet);
}

.plan-list strong {
  color: var(--text);
  font-weight: 650;
}

.plan-price {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.plan-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

.plan-amount-alt {
  font-size: 1.05rem;
  color: var(--text-dim);
}

.plan-period {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-dim);
}

.plan-note {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-faint, rgba(245, 239, 226, 0.5));
  margin: 0;
}

.plan-card .btn {
  justify-content: center;
  margin-top: auto;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px 32px;
  margin-top: 44px;
}

.faq-item h3 {
  font-size: 1rem;
  margin: 0 0 8px;
  color: var(--text);
}

.faq-item p {
  margin: 0;
  line-height: 1.6;
  color: var(--text-dim);
}

/* Utilitaires explicites : aucune page n'a besoin d'un attribut `style`.
   La CSP peut ainsi interdire réellement les styles injectés. */
.centered-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.button-wide {
  width: 100%;
  justify-content: center;
}

.link-accent {
  color: var(--accent);
  font-weight: 600;
}

.footer-link {
  color: var(--text-dim);
  text-decoration: none;
}

.prose-spaced {
  margin-top: 16px;
}

.is-hidden {
  display: none !important;
}

.account-manage {
  margin-bottom: 12px;
}

.account-favorites {
  margin: 8px 0 24px;
}

.account-control {
  margin: 24px 0 0;
  padding: 22px;
  /* Le défilement vers une section ouverte la laisse visible sous la
     barre de navigation collante. */
  scroll-margin-top: 96px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
    var(--bg);
  border: 1px solid var(--border);
}

.account-control + .account-control {
  margin-top: 12px;
}

.account-facts {
  display: grid;
  gap: 9px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.account-facts li {
  position: relative;
  padding-left: 18px;
}

.account-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent);
}

.account-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.account-control-row:first-child {
  border-top: 0;
}

.account-control-row button,
.favorite-row button,
.account-list-heading button {
  flex: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--accent);
  font: 700 0.78rem/1 var(--font-body);
  padding: 9px 11px;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}

.account-control-row button:disabled {
  color: var(--text-faint);
  cursor: default;
}

.account-danger-link {
  margin-top: 16px;
}

.account-danger {
  border-color: color-mix(in srgb, var(--status-error) 32%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--status-error) 7%, transparent), transparent 55%),
    var(--bg);
}

.account-delete-panel {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.account-delete-panel .form-field {
  margin: 0;
}

.account-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-dim);
  font-size: 0.9rem;
  cursor: pointer;
}

.account-confirmation input {
  accent-color: var(--status-error);
  margin-top: 4px;
}

.admin-indefinite {
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.btn-danger {
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--status-error) 65%, transparent);
  background: var(--status-error);
  /* Blanc sur `--clay` sombre restait à 3,57:1 ; la couleur de fond du
     thème, elle, tient 5,38:1 en sombre et 5,33:1 en clair sur ce rouge.
     Un jeton plutôt qu'une teinte nouvelle, pour que le vérificateur de
     contraste continue de tout voir. */
  color: var(--bg);
}

.btn-danger:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* La rubrique des appareils se lit avant « Se déconnecter », mais elle ne doit
   pas peser autant : c'est un recours, pas une action courante. D'où le trait
   qui l'isole et la taille réduite de son explication. */
.account-devices {
  margin-top: 12px;
}

.account-devices .account-empty {
  margin: 0 0 14px;
  font-size: 0.92rem;
}

@media (max-width: 620px) {
  .auth-card.account-card {
    padding: 32px 20px;
  }

  .account-control {
    padding: 18px 16px;
  }

  .account-control-row {
    align-items: flex-start;
  }
}

.account-section-title {
  margin: 0 0 12px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-empty {
  font-size: 0.9rem;
}

.account-list-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 12px;
}

.account-list-heading .account-section-title {
  margin: 0;
}

/* ── Page d'administration : lisibilité de la fiche ──────────────────────── */

/* Ce qui donne l'accès, avant le détail qui l'explique.
   Le relevé aligne six lignes dont trois disent « non renseigné » ou
   « aucun » presque toujours : essai, période payée et droit accordé
   s'excluent en pratique. La phrase nomme celle qui compte, le relevé reste
   dessous pour qui veut vérifier. */
.fiche-verdict {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
  font-weight: 600;
  line-height: 1.45;
}

/* Un relevé se lit en colonnes, pas en puces.
   Les six faits étaient une liste à puces portant « Statut : », « Plan : » :
   six pastilles d'accent pour six paires clé-valeur, ce qui se lit comme de
   la prose alors qu'on vient y chercher une valeur précise. La grille aligne
   les intitulés, et l'œil descend une colonne au lieu de relire six phrases. */
.fiche-releve {
  display: grid;
  gap: 0;
  margin: 0 0 22px;
  padding: 0;
  border: 1px solid var(--border);
}

.fiche-releve > div {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 16px;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
}

.fiche-releve > div:first-child {
  border-top: 0;
}

.fiche-releve dt {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.86rem;
}

.fiche-releve dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: break-word;
  min-width: 0;
}

/* La date appartient au geste qu'elle règle.
   Elle flottait au-dessus de deux boutons dont un seul la lit : « Révoquer »
   voisinait un champ qu'il ignore. Le cadre commun dit ce que la disposition
   taisait. */
.fiche-geste {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.fiche-geste .form-field {
  margin: 0;
}

.field-hint {
  margin: 6px 0 0;
  color: var(--text-faint);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* La révocation ne crie qu'une fois confirmée.
   Elle portait le rouge plein juste à côté de l'action constructive, donc
   deux appels au regard de force égale pour des gestes de conséquence très
   inégale. Le panneau de confirmation, lui, garde son bouton rouge : c'est
   là que le geste devient réel. */
.btn-quiet-danger {
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--status-error) 38%, var(--border));
  background: transparent;
  color: var(--status-error);
}

.btn-quiet-danger:hover,
.btn-quiet-danger:focus-visible {
  border-color: var(--status-error);
  background: color-mix(in srgb, var(--status-error) 10%, transparent);
}

/* La rangée dont la fiche est ouverte.
   Sans ce repère, la fiche s'ouvrait sous une liste où plus rien ne disait de
   quel compte elle parlait. */
.account-control-row.est-ouverte {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Le journal de l'équipe se replie.
   Trente entrées sur tous les comptes s'intercalaient entre la fiche et le
   bas de page, poussant le travail en cours hors de l'écran. Replié, il reste
   à un geste et son compteur dit s'il y a quelque chose à y voir. */
.journal-repli > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.journal-repli > summary::-webkit-details-marker {
  display: none;
}

.journal-repli > summary::after {
  content: "▾";
  color: var(--text-faint);
  transition: transform 0.15s ease;
}

.journal-repli[open] > summary::after {
  transform: rotate(180deg);
}

.journal-compte {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  white-space: nowrap;
}

.admin-request-status {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  white-space: nowrap;
}

.admin-request-status[aria-busy="true"] {
  color: var(--accent);
}

.admin-pagination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.admin-pagination button {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--accent);
  font: 700 0.8rem/1 var(--font-body);
  cursor: pointer;
}

.admin-pagination button:first-child {
  justify-self: start;
}

.admin-pagination button:last-child {
  justify-self: end;
}

.admin-pagination button:disabled {
  color: var(--text-faint);
  cursor: default;
  opacity: 0.62;
}

.admin-pagination span {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  white-space: nowrap;
}

/* Confirmation propre aux gestes sensibles du compte. Le dialogue natif
   fournit le piège de focus, la touche Échap et l'isolation du reste de la
   page ; le style ne remplace donc aucune de ses garanties d'accessibilité. */
.sillaxe-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 28px 90px rgba(5, 2, 10, 0.72);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.sillaxe-dialog::backdrop {
  background: rgba(5, 2, 10, 0.72);
  backdrop-filter: blur(5px);
}

.sillaxe-dialog-content {
  display: grid;
  gap: 14px;
  padding: 28px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--status-error) 7%, transparent), transparent 42%),
    var(--surface);
}

.sillaxe-dialog-content .eyebrow {
  color: var(--status-error);
}

.sillaxe-dialog-content h2 {
  font-size: clamp(1.35rem, 4vw, 1.8rem);
}

.sillaxe-dialog-content p {
  line-height: 1.6;
}

.sillaxe-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.sillaxe-dialog-actions .btn {
  justify-content: center;
  padding-inline: 16px;
}

@media (max-width: 620px) {
  .fiche-releve > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
}

/* La hiérarchie du titre et du sous-titre, qui manquait ici.
   `.favorite-title` et `.favorite-subtitle` n'étaient stylés que sous
   `.favorite-row`, la rangée de la page compte. La page d'administration bâtit
   les mêmes éléments dans `.account-control-row`, où aucune de ces règles ne
   s'appliquait : l'adresse et la ligne « Plan : … » sortaient à la même taille,
   dans la même couleur, sans gras. Une liste de comptes se parcourt par les
   adresses, et elles ne se détachaient pas.

   Le sous-titre s'enroule au lieu de se couper : ce ne sont pas des libellés
   décoratifs mais des dates dont dépend la décision. */
.account-control-row .favorite-text {
  min-width: 0;
}

.account-control-row .favorite-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  /* Une adresse électronique ne contient aucune espace : sans point de
     coupure, elle débordait de sa colonne et se lisait par-dessus le bouton
     de la rangée sur un téléphone (registre des essais, 22/09). Le
     sous-titre avait déjà sa règle ; le titre, non. */
  overflow-wrap: anywhere;
}

.account-control-row .favorite-subtitle {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--text-faint);
  overflow-wrap: break-word;
}

@media (max-width: 620px) {
  /* Sur un téléphone, le bouton passe sous le texte plutôt que de lui
     disputer la largeur : une adresse longue y prend toute la ligne, et le
     geste reste pleinement touchable au lieu d'être réduit à un timbre. */
  .account-control-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .account-control-row button {
    width: 100%;
  }

  /* « Journal de l'équipe » tient sur deux lignes à cette largeur, et le
     compteur restait accroché à la première : la ligne partait de travers.
     Empilés, les deux se lisent dans l'ordre où on les cherche. */
  .journal-repli > summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: relative;
    padding-right: 20px;
  }

  .journal-repli > summary::after {
    position: absolute;
    right: 0;
    top: 0;
  }

  .sillaxe-dialog-content {
    padding: 24px 20px;
  }

  .sillaxe-dialog-actions {
    grid-template-columns: 1fr;
  }

  .admin-pagination {
    grid-template-columns: 1fr 1fr;
  }

  .admin-pagination span {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }
}

@media (forced-colors: active) {
  .auth-card.account-card,
  .account-control,
  .fiche-verdict,
  .sillaxe-dialog {
    border: 1px solid CanvasText;
  }

  .account-control-row.est-ouverte {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
}

/* -------------------------------------------------------------------------
   Accueil · identité produit 2026

   L'app a gagné en sobriété : des surfaces lisibles, une teinte présente
   mais jamais étalée, et une profondeur qui vient de la lumière plutôt que
   d'un halo permanent. Cette passe applique la même règle au site public,
   sans changer son contenu ni ses comportements.
   ------------------------------------------------------------------------- */

body {
  background:
    radial-gradient(900px 520px at 86% -8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 68%),
    radial-gradient(640px 420px at -14% 38%, color-mix(in srgb, var(--sage) 5%, transparent), transparent 70%),
    var(--bg);
}

.site-nav {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom-color: color-mix(in srgb, var(--border) 72%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 3%, transparent);
}

.site-nav .wrap {
  height: 74px;
}

.brand {
  letter-spacing: -0.025em;
}

.brand-mark {
  width: 32px;
  height: 32px;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.nav-links a {
  font-size: 0.86rem;
  letter-spacing: -0.01em;
}

.theme-toggle {
  width: 42px;
  height: 42px;
  border-color: color-mix(in srgb, var(--border) 88%, var(--accent));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--shadow) 35%, transparent);
}

.btn {
  min-height: 50px;
  padding: 13px 23px;
  border-radius: 15px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.btn-primary {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 92%, white 8%), var(--accent));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 26%, transparent);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--accent-hover);
  box-shadow: 0 16px 32px color-mix(in srgb, var(--accent) 34%, transparent);
  transform: translateY(-1px);
}

.btn-ghost {
  border-color: color-mix(in srgb, var(--border) 78%, var(--text));
  background: color-mix(in srgb, var(--surface) 48%, transparent);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  transform: translateY(-1px);
}

.home-main {
  overflow: clip;
}

.home-main .hero {
  isolation: isolate;
  padding: clamp(88px, 10vw, 132px) 0 clamp(78px, 8vw, 110px);
}

.home-main .hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--surface) 78%, transparent), transparent 58%),
    radial-gradient(circle at 76% 34%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 28%);
  pointer-events: none;
}

.home-main .hero::after {
  position: absolute;
  z-index: -1;
  top: 10%;
  right: -18%;
  width: min(62vw, 760px);
  aspect-ratio: 1;
  content: "";
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: 48% 52% 45% 55%;
  transform: rotate(-18deg);
  opacity: 0.74;
  pointer-events: none;
}

.home-main .hero .wrap {
  gap: clamp(44px, 6vw, 82px);
}

.hero-copy {
  position: relative;
}

.hero-copy .eyebrow {
  color: color-mix(in srgb, var(--accent) 86%, var(--text));
}

.hero-copy h1 {
  max-width: 11ch;
  letter-spacing: -0.045em;
}

.hero-copy .lede {
  max-width: 53ch;
  font-size: clamp(1.04rem, 1.45vw, 1.18rem);
  line-height: 1.65;
}

.hero-note {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 56%, transparent);
}

.hero-stage {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-strong) 48%, var(--border));
  border-radius: 30px;
  background:
    radial-gradient(circle at 66% 26%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--bg-elevated) 72%, transparent));
  box-shadow: 0 32px 90px color-mix(in srgb, var(--shadow) 72%, transparent);
}

.journey-demo {
  position: relative;
  background: transparent;
  border-color: color-mix(in srgb, var(--border) 76%, transparent);
}

.demo-shell {
  border: 1px solid color-mix(in srgb, var(--border-strong) 62%, var(--border));
  border-radius: 28px;
  box-shadow: 0 28px 78px color-mix(in srgb, var(--shadow) 76%, transparent);
}

.demo-tabs {
  background: color-mix(in srgb, var(--bg-elevated) 56%, transparent);
}

.demo-tabs button[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.home-main > section:not(.journey-demo) {
  border-top-color: color-mix(in srgb, var(--border) 68%, transparent);
}

.section-head {
  margin-bottom: 42px;
}

.section-head h2 {
  letter-spacing: -0.035em;
}

.home-main .feature-grid {
  gap: 12px;
  border: 0;
  background: transparent;
  clip-path: none;
}

.home-main .feature-card {
  min-height: 224px;
  padding: 30px 28px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 22px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--bg-elevated) 66%, transparent));
  box-shadow: 0 14px 36px color-mix(in srgb, var(--shadow) 32%, transparent);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.home-main .feature-card:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  box-shadow: 0 20px 44px color-mix(in srgb, var(--shadow) 46%, transparent);
  transform: translateY(-3px);
}

.home-main .feature-icon {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  clip-path: none;
}

.home-main .cta-band {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, var(--border));
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--accent) 19%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--bg-elevated) 72%, transparent));
  box-shadow: 0 28px 72px color-mix(in srgb, var(--shadow) 58%, transparent);
  clip-path: none;
}

.site-footer {
  background: color-mix(in srgb, var(--bg-elevated) 48%, transparent);
}

@media (max-width: 900px) {
  .home-main .hero {
    padding-top: 76px;
  }

  .hero-stage {
    border-radius: 24px;
  }
}

@media (max-width: 720px) {
  /* La hauteur fixe de 74 px posée plus haut valait aussi sur téléphone, où
     les liens passent sur une seconde rangée : elle sortait du bandeau, sans
     fond, et le texte de la page défilait dessous (relevé le 24/09). */
  .site-nav .wrap {
    height: auto;
    min-height: 72px;
  }

  .home-main .hero {
    padding: 66px 0 72px;
  }

  .hero-copy h1 {
    max-width: 13ch;
  }

  .hero-note {
    border-radius: 14px;
    line-height: 1.45;
  }

  .hero-stage,
  .demo-shell,
  .home-main .cta-band {
    border-radius: 20px;
  }

  .home-main .feature-grid {
    gap: 10px;
  }

  .home-main .feature-card {
    min-height: 0;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .home-main .feature-card {
    transition: none;
  }
}

/* Les pages utilitaires restent dans le même système que la navigation :
   surfaces claires légèrement lavande, bordure discrète et rayon généreux.
   Le violet signale une action ; il ne colore jamais tout le panneau. */
.legal-header {
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 28px;
  background:
    linear-gradient(138deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 72%, transparent));
  box-shadow: 0 18px 46px color-mix(in srgb, var(--shadow) 38%, transparent);
}

.legal-toc {
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--shadow) 22%, transparent);
}

.legal-body {
  max-width: 76ch;
  gap: 18px;
}

.legal-block {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 18%, transparent);
}

.data-table-wrap,
.account-status,
.account-control,
.etat-ligne,
.etat-incident {
  border-radius: 16px;
}

.auth-card {
  border-radius: 28px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface));
  box-shadow: 0 28px 70px color-mix(in srgb, var(--shadow) 58%, transparent);
  clip-path: none;
}

.form-field input,
.form-field select,
.form-field textarea,
.account-status {
  border-radius: 14px;
}

.centered-wrap {
  max-width: 760px;
}

/* Plusieurs cartes (écrire puis suivre ses demandes) forment un parcours
   vertical, pas deux colonnes comprimées dans un téléphone. */
.auth-page .centered-wrap {
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.support-thread-message { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .auth-page .auth-card { padding: 28px 22px; border-radius: 22px; }
}

/* Les pages de service ont leur propre surface, afin de ne jamais hériter
   d'un ancien fond neutre lorsque le thème clair est choisi. C'est le même
   papier lavande que les panneaux clairs de Sillaxe : lumineux, lisible et
   sans beige. */
:root {
  --utility-canvas: transparent;
  --utility-surface:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
  --utility-card: color-mix(in srgb, var(--surface) 90%, transparent);
  --utility-input: var(--bg);
}

:root[data-theme="light"] {
  --utility-canvas:
    radial-gradient(680px 360px at 100% 0%, rgba(184, 87, 255, 0.08), transparent 70%);
  --utility-surface:
    linear-gradient(145deg, #fffaff 0%, #f4edff 100%);
  --utility-card:
    linear-gradient(145deg, rgba(255, 250, 255, 0.98), rgba(244, 237, 255, 0.94));
  --utility-input: #f2ebfc;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --utility-canvas:
      radial-gradient(680px 360px at 100% 0%, rgba(184, 87, 255, 0.08), transparent 70%);
    --utility-surface:
      linear-gradient(145deg, #fffaff 0%, #f4edff 100%);
    --utility-card:
      linear-gradient(145deg, rgba(255, 250, 255, 0.98), rgba(244, 237, 255, 0.94));
    --utility-input: #f2ebfc;
  }
}

.legal-page,
.auth-page {
  background: var(--utility-canvas);
}

.legal-page .legal-header,
.auth-page .auth-card {
  background: var(--utility-surface);
}

.legal-page .legal-toc,
.legal-page .legal-block,
.auth-page .account-control {
  background: var(--utility-card);
}

.auth-page .form-field input,
.auth-page .form-field select,
.auth-page .form-field textarea {
  background: var(--utility-input);
}

/* Support et compte appartiennent au même parcours que l'accueil : les
   actions et les petits contrôles conservent donc des angles doux. */
.auth-page .btn,
.account-card .btn {
  border-radius: 18px;
}

.account-control-row button,
.favorite-row button,
.account-list-heading button {
  border-radius: 13px;
}

.support-thread {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

.support-thread-messages {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0;
}

.support-thread-message {
  max-width: 88%;
  padding: 0.85rem 1rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

.support-thread-message.is-user {
  justify-self: end;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.support-thread-message strong,
.support-thread-message time {
  display: block;
}

.support-thread-message time {
  margin-top: 0.15rem;
  color: var(--text-faint);
  font-size: 0.75rem;
}

.support-thread-message p {
  margin: 0.65rem 0 0;
  white-space: pre-wrap;
}

.support-reply-form {
  display: grid;
  gap: 0.65rem;
}

.support-reply-form textarea {
  width: 100%;
  resize: vertical;
}

/* Le menu complet dépasse avant le seuil « téléphone », notamment sur
   iPad portrait. Il occupe alors son propre ruban, sans élargir la page. */
@media (min-width: 721px) and (max-width: 1200px) {
  .site-nav .wrap { height: auto; min-height: 74px; flex-wrap: wrap; padding-block: 12px; }
  .site-nav .brand { order: 1; }
  .site-nav .theme-toggle { order: 2; }
  .site-nav .nav-links {
    order: 3; flex-basis: 100%; min-width: 0; max-width: 100%;
    justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap;
    padding: 10px 0 2px; margin: 0;
  }
  .site-nav .nav-links li { flex: none; }
}