/* Direction artistique « Signal » : voir docs/DA.md.
   Règle : aucune couleur en dur hors de :root (vérifié par les tests Go). */

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* Couleurs */
  --color-bg: #0A0C10;
  --color-surface: #12151B;
  --color-surface-raised: #191D25;
  --color-border: #262B35;
  --color-border-input: #646D80;
  --color-text: #ECEFF4;
  --color-text-muted: #A3ACBA;
  --color-volt: #C5F82A;
  --color-volt-hover: #D6FF5E;
  --color-on-volt: #0A0C10;
  --color-pulse: #9B8CFF;
  --color-warning: #FFB547;
  --color-danger: #FF6B6B;
  --color-volt-soft: rgba(197, 248, 42, 0.10);
  --color-pulse-soft: rgba(155, 140, 255, 0.12);
  --color-warning-soft: rgba(255, 181, 71, 0.10);
  --color-danger-soft: rgba(255, 107, 107, 0.10);
  --color-volt-line: rgba(197, 248, 42, 0.35);
  --color-pulse-line: rgba(155, 140, 255, 0.40);
  --color-warning-line: rgba(255, 181, 71, 0.35);
  --color-danger-line: rgba(255, 107, 107, 0.40);
  --color-glow: rgba(197, 248, 42, 0.16);
  --color-hero-glow: rgba(155, 140, 255, 0.18);

  /* Produits : chaque logiciel a sa couleur (repère, jamais pour une action) */
  --color-gtl: #9B8CFF;
  --color-sf: #F2B33D;
  --color-gtl-soft: rgba(155, 140, 255, 0.12);
  --color-sf-soft: rgba(242, 179, 61, 0.12);
  --color-sf-line: rgba(242, 179, 61, 0.40);
  --color-gtl-line: rgba(155, 140, 255, 0.40);
  --color-sf-glow: rgba(242, 179, 61, 0.16);
  --color-gtl-glow: rgba(155, 140, 255, 0.20);
  --color-window-bar: #0F1217;
  --color-window-dot: #2B313C;
  --color-window-shine: rgba(255, 255, 255, 0.06);

  /* Icônes (SVG en ligne) */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-check-on-volt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%230A0C10' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Typographie */
  --font-display: "Space Grotesk", system-ui, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-hero: clamp(2.25rem, 6vw, 3.75rem);
  --leading-tight: 1.15;
  --leading-body: 1.6;
  --tracking-tight: -0.02em;

  /* Espacements (multiples de 4 px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Formes */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --border: 1px solid var(--color-border);
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-pulse);
  --shadow-glow: 0 0 0 1px var(--color-volt-soft), 0 12px 48px var(--color-glow);

  /* Mouvement */
  --duration-fast: 150ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Mise en page */
  --width-content: 65rem;
  --width-narrow: 40rem;
  --gutter: var(--space-4);

  color-scheme: dark;
}

@media (min-width: 48rem) {
  :root { --gutter: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; }
  html { scroll-behavior: auto !important; }
}

/* --- Base ------------------------------------------------------------------ */

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

/* L'attribut hidden l'emporte toujours, même sur un composant qui fixe display. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
p { margin: 0 0 var(--space-4); }

a {
  color: var(--color-pulse);
  text-underline-offset: 3px;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

code, kbd, .mono { font-family: var(--font-mono); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Mise en page ------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--narrow { max-width: var(--width-narrow); }

.section { padding: var(--space-8) 0; }
.section + .section { border-top: var(--border); }

.section__intro {
  max-width: var(--width-narrow);
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }

/* --- Logo -------------------------------------------------------------------- */

.logo {
  display: inline-flex;
  flex-shrink: 0;
  white-space: nowrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}

.logo__mark { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.logo__tile { fill: var(--color-volt); }

.logo__one {
  fill: none;
  stroke: var(--color-on-volt);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo__tld { color: var(--color-text-muted); font-weight: 500; }

/* --- Navigation ------------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

.nav__links {
  display: none;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__links a {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--color-text); }

@media (min-width: 48rem) {
  .nav__links { display: flex; }
}

.nav__account {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
}

/* Sur petit écran, seul le bouton de déconnexion reste à côté du logo. */
.nav__lang {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font: 600 var(--text-xs) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  text-decoration: none;
}

.nav__lang:hover,
.nav__lang:focus-visible { color: var(--color-text); background: var(--color-surface-raised); }

.nav__user {
  display: none;
  max-width: 12rem;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav__user:hover { text-decoration: underline; }

@media (min-width: 30rem) {
  .nav__user { display: inline-block; }
}

/* --- Boutons ------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: 600 var(--text-base) / 1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px); }
.btn:focus-visible { border-radius: var(--radius-md); }

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

.btn--primary:hover { background: var(--color-volt-hover); }

.btn--secondary {
  background: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn--secondary:hover { border-color: var(--color-border-input); }

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

.btn--danger:hover { background: var(--color-danger-soft); }

.btn--sm {
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn--block { width: 100%; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* --- Badges ---------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font: 600 var(--text-xs) / 1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge--neutral { color: var(--color-text-muted); }
.badge--success { color: var(--color-volt); background: var(--color-volt-soft); }
.badge--info { color: var(--color-pulse); background: var(--color-pulse-soft); }
.badge--warning { color: var(--color-warning); background: var(--color-warning-soft); }
.badge--danger { color: var(--color-danger); background: var(--color-danger-soft); }

/* --- Héros ---------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--space-8);
  background: radial-gradient(60rem 30rem at 50% -10%, var(--color-hero-glow), transparent 70%);
}

.hero__content {
  max-width: 46rem;
  margin: var(--space-8) auto 0;
  text-align: center;
}

.hero__title {
  margin: var(--space-4) 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.hero__title em {
  color: var(--color-volt);
  font-style: normal;
}

.hero__lead {
  margin: 0 auto var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.wave {
  display: block;
  width: 100%;
  height: 4rem;
  margin-top: var(--space-7);
  color: var(--color-pulse);
  opacity: 0.55;
}

/* --- Liste à coches ------------------------------------------------------------------ */

.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-2);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1rem;
  height: 1rem;
  background: var(--color-volt);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

.hero__proof.checklist { margin-top: var(--space-6); }
.hero__proof.checklist li { margin-bottom: 0; }

/* --- Cartes d'étape ---------------------------------------------------------------- */

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  padding: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.step__number {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-volt);
  font: 600 var(--text-sm) / 1.2 var(--font-mono);
}

.step p { margin: 0; color: var(--color-text-muted); }

/* --- Encadrés ----------------------------------------------------------------------- */

.callout {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--callout-line, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--callout-bg, var(--color-surface));
}

.callout .callout__title {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--callout-color, var(--color-text));
  font-weight: 700;
}

.callout p { margin: 0; color: var(--color-text-muted); }
.callout p + p, .callout p + .callout__actions { margin-top: var(--space-3); }

.callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.callout--info { --callout-color: var(--color-pulse); --callout-bg: var(--color-pulse-soft); --callout-line: var(--color-pulse-line); }
.callout--success { --callout-color: var(--color-volt); --callout-bg: var(--color-volt-soft); --callout-line: var(--color-volt-line); }
.callout--warning { --callout-color: var(--color-warning); --callout-bg: var(--color-warning-soft); --callout-line: var(--color-warning-line); }
.callout--danger { --callout-color: var(--color-danger); --callout-bg: var(--color-danger-soft); --callout-line: var(--color-danger-line); }

/* --- Carte d'abonnement --------------------------------------------------------- */

.plan {
  max-width: 30rem;
  margin: 0 auto;
  padding: var(--space-6);
  border: 1px solid var(--color-volt);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-glow);
}

.plan__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.plan__name {
  margin: 0;
  font-size: var(--text-xl);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
}

.plan__amount {
  color: var(--color-volt);
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.plan__period { color: var(--color-text-muted); font-size: var(--text-lg); }

.plan__trial { margin: 0 0 var(--space-5); color: var(--color-pulse); font-size: var(--text-sm); }

.plan .checklist { margin: var(--space-5) 0; }

.plan__payment { min-height: 3rem; margin-top: var(--space-5); }

.plan__step .status { margin: 0 0 var(--space-3); }

.plan__fineprint {
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

/* --- Formulaires -------------------------------------------------------------------- */

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
}

.checkbox input {
  appearance: none;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  border: 1.5px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.checkbox input:checked {
  border-color: var(--color-volt);
  background: var(--color-volt) var(--icon-check-on-volt) center / 0.9rem no-repeat;
}

.checkbox input:focus-visible { box-shadow: var(--focus-ring); }
.checkbox--invalid { border-color: var(--color-danger); }

.field {
  display: grid;
  gap: var(--space-2);
}

.field__label { font-size: var(--text-sm); font-weight: 600; }
.field__help { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); }

.field__input {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font: var(--text-base) / 1.4 var(--font-body);
}

.field__input:focus-visible { border-color: var(--color-pulse); }
.field__input--mono { font-family: var(--font-mono); letter-spacing: 0.04em; }

.field--invalid .field__input { border-color: var(--color-danger); }
.field__error { margin: 0; color: var(--color-danger); font-size: var(--text-sm); }

.form {
  display: grid;
  gap: var(--space-4);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* --- Messages d'état ---------------------------------------------------------------- */

.status {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
}

.status--info { color: var(--color-text-muted); }
.status--error { color: var(--color-danger); }

/* --- Panneau de compte ----------------------------------------------------------------- */

.account {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.account > p { margin-top: 0; }

.account__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.account__title { margin: 0; font-size: var(--text-lg); }

.account__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}

.account__meta dt { color: var(--color-text-muted); }
.account__meta dd { margin: 0; font-family: var(--font-mono); overflow-wrap: anywhere; }

.account__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.account .callout { margin-top: var(--space-4); }

/* --- Questions fréquentes ---------------------------------------------------------------- */

.faq {
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.faq + .faq { margin-top: var(--space-3); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg) translateY(-25%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.faq[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.faq summary:focus-visible { border-radius: var(--radius-md); }

.faq p {
  margin: 0;
  padding: 0 var(--space-5) var(--space-4);
  color: var(--color-text-muted);
}

/* --- Pied de page ------------------------------------------------------------------- */

.footer {
  padding: var(--space-7) 0 var(--space-8);
  border-top: var(--border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
}

.footer__links a { color: var(--color-text); }

/* --- Pages de texte (légal) -------------------------------------------------------- */

.prose { padding: var(--space-6) 0 var(--space-8); }
.prose h1 { font-size: var(--text-3xl); margin-top: var(--space-5); }
.prose h2 { margin-top: var(--space-7); font-size: var(--text-xl); }
.prose p, .prose li { color: var(--color-text-muted); }
.prose strong { color: var(--color-text); }

.todo {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
  color: var(--color-warning);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* --- Page des composants -------------------------------------------------------------- */

.swatches {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.swatch {
  border: var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--text-xs);
}

.swatch__color { height: 4rem; background: var(--swatch); }
.swatch__color--bg { --swatch: var(--color-bg); }
.swatch__color--surface { --swatch: var(--color-surface); }
.swatch__color--surface-raised { --swatch: var(--color-surface-raised); }
.swatch__color--border { --swatch: var(--color-border); }
.swatch__color--border-input { --swatch: var(--color-border-input); }
.swatch__color--text { --swatch: var(--color-text); }
.swatch__color--text-muted { --swatch: var(--color-text-muted); }
.swatch__color--volt { --swatch: var(--color-volt); }
.swatch__color--pulse { --swatch: var(--color-pulse); }
.swatch__color--warning { --swatch: var(--color-warning); }
.swatch__color--danger { --swatch: var(--color-danger); }
.swatch__color--gtl { --swatch: var(--color-gtl); }
.swatch__color--sf { --swatch: var(--color-sf); }
.swatch__label { padding: var(--space-2) var(--space-3); font-family: var(--font-mono); }

.showcase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.showcase--stack { display: grid; }

/* --- Produits --------------------------------------------------------------------- */

.product-mark {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.product-mark--lg { width: 3.5rem; height: 3.5rem; margin-bottom: var(--space-4); }

.product-mark--gtl path {
  fill: none;
  stroke: var(--color-gtl);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-mark--sf rect { fill: var(--color-text); }
.product-mark--sf .product-mark__accent { fill: var(--color-sf); }

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--product-line, var(--color-border));
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--product-soft, var(--color-surface)), var(--color-surface) 45%);
}

.product-card--gtl { --product-line: var(--color-gtl-line); --product-soft: var(--color-gtl-soft); }
.product-card--sf { --product-line: var(--color-sf-line); --product-soft: var(--color-sf-soft); }

.product-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.product-card__name { margin: 0 0 var(--space-1); font-size: var(--text-2xl); }
.product-card__tagline { margin: 0; color: var(--color-text); font-size: var(--text-lg); }
.product-card .checklist { flex-grow: 1; color: var(--color-text-muted); }

.product-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border);
}

.product-card__version,
.hero__version {
  color: var(--color-text-muted);
  font: var(--text-xs) / 1.4 var(--font-mono);
}

.hero__version { margin: var(--space-5) 0 0; }

.hero__note {
  max-width: 34rem;
  margin: var(--space-4) auto 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Appel au Pack sous le parcours */
.bundle-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-volt-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--color-surface) 40%, var(--color-surface-raised));
  box-shadow: var(--shadow-glow);
}

.bundle-cta__title { font-family: var(--font-display); font-size: var(--text-xl); }
.bundle-cta__title [data-offer-price] { color: var(--color-volt); }
.bundle-cta__text { max-width: 36rem; margin: var(--space-1) 0 0; color: var(--color-text-muted); }

.link {
  font-weight: 600;
  text-decoration: none;
}

.link::after { content: " →"; }
.link:hover { text-decoration: underline; }

/* Étiquette de produit, sur les étapes du parcours */
.tag {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font: 600 var(--text-xs) / 1.2 var(--font-mono);
}

.tag--gtl { color: var(--color-gtl); background: var(--color-gtl-soft); }
.tag--sf { color: var(--color-sf); background: var(--color-sf-soft); }

/* Héros des pages produit : la lueur prend la couleur du logiciel */
.hero--sf { background: radial-gradient(60rem 30rem at 50% -10%, var(--color-sf-glow), transparent 70%); }
.hero--sf .wave { color: var(--color-sf); }

.hero--product .hero__content { margin-top: var(--space-7); }

/* Fonctions d'un logiciel */
.feature {
  padding: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.feature h3 { font-size: var(--text-lg); }
.feature p { margin: 0; color: var(--color-text-muted); }
.feature code { color: var(--color-text); font-size: var(--text-sm); }

/* Encart vers l'autre logiciel du Pack */
.cross-sell {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--product-line, var(--color-border));
  border-radius: var(--radius-lg);
  background: var(--product-soft, var(--color-surface));
}

.cross-sell--gtl { --product-line: var(--color-gtl-line); --product-soft: var(--color-gtl-soft); }
.cross-sell--sf { --product-line: var(--color-sf-line); --product-soft: var(--color-sf-soft); }
.cross-sell__title { margin-bottom: var(--space-2); font-size: var(--text-xl); }
.cross-sell p { margin: 0; color: var(--color-text-muted); }
.cross-sell .btn { grid-column: 1 / -1; justify-self: start; }

@media (min-width: 48rem) {
  .cross-sell { grid-template-columns: auto 1fr auto; }
  .cross-sell .btn { grid-column: auto; }
}

/* --- Offres ------------------------------------------------------------------------ */

#tarifs .callout { margin-bottom: var(--space-5); }

.offers {
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
}

.offers .plan {
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
  border-color: var(--color-border);
  box-shadow: none;
}

/* Seule l'offre mise en avant (le Pack) porte la lueur Volt. */
.offers .plan--featured {
  border-color: var(--color-volt);
  box-shadow: var(--shadow-glow);
}

.offers .plan--current { border-color: var(--color-pulse); }
.offers .plan--selected { border-color: var(--color-volt); }

.plan__products {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.plan__savings { margin: 0 0 var(--space-3); color: var(--color-volt); font-size: var(--text-sm); font-weight: 600; }
.plan__description { flex-grow: 1; margin: var(--space-3) 0 var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); }

.offers .plan__amount { font-size: var(--text-3xl); }
.offers .plan__price { flex-wrap: wrap; row-gap: 0; }

.offers .plan__header {
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-2);
  min-height: 4.25rem;
}

/* Quatre offres sur tablette : deux par ligne plutôt que trois puis une. */
@media (min-width: 36rem) and (max-width: 63.99rem) {
  .offers:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}

/* Sur mobile, le Pack passe en tête. */
@media (max-width: 47.99rem) {
  .offers .plan--featured { order: -1; }
}

/* Choix de l'offre, puis accord et paiement */
.checkout {
  max-width: 32rem;
  margin: var(--space-6) auto 0;
  padding: var(--space-5);
  border: 1px solid var(--color-volt-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.checkout__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.checkout__offer { font-family: var(--font-display); font-size: var(--text-xl); }
.checkout__price { color: var(--color-volt); font-weight: 600; }
.checkout__step { display: grid; gap: var(--space-3); }
.checkout__step .status { margin: 0; }

.checkout__fineprint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

/* --- Mon compte --------------------------------------------------------------------- */

.account-page { padding-bottom: var(--space-8); }
.account-page__title { margin-top: var(--space-6); font-size: var(--text-3xl); }
.account-page__subtitle { margin-top: var(--space-7); font-size: var(--text-xl); }
.account-page__note { margin-top: var(--space-3); }
.account-page > .account:first-of-type { margin-top: 0; }

.owned {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.owned--off { opacity: 0.75; }

.owned__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.owned__name { margin: 0; font-size: var(--text-lg); }
.owned .account__meta { margin: 0; }
.owned > .btn { align-self: flex-start; }

.downloads {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.download {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 var(--space-3);
  padding: var(--space-3);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.download__label { font-size: var(--text-sm); font-weight: 600; }
.download__meta { grid-row: 2; color: var(--color-text-muted); font: var(--text-xs) / 1.4 var(--font-mono); overflow-wrap: anywhere; }
.download .btn,
.download .badge { grid-row: 1 / span 2; grid-column: 2; }

/* --- Aperçus des logiciels --------------------------------------------------------
   Une fenêtre d'application (barre de titre, capture réelle) posée sur un halo
   de la couleur du logiciel, puis des cartes de détail. */

.section--preview { padding-top: var(--space-6); }

.preview {
  --preview-glow: var(--color-gtl-glow);
  --preview-line: var(--color-gtl-line);
  position: relative;
  isolation: isolate;
  margin: 0;
}

.preview--sf { --preview-glow: var(--color-sf-glow); --preview-line: var(--color-sf-line); }

.preview::before {
  content: "";
  position: absolute;
  inset: 8% 4% -6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--preview-glow), transparent);
  filter: blur(24px);
}

.window {
  overflow: hidden;
  border: 1px solid var(--preview-line, var(--color-border));
  border-radius: var(--radius-lg);
  background: var(--color-window-bar);
  box-shadow: 0 0 0 1px var(--color-window-shine) inset, 0 24px 80px var(--color-bg);
}

.window__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 2.25rem;
  padding: 0 var(--space-4);
  border-bottom: var(--border);
}

.window__dots { display: inline-flex; gap: 6px; }

.window__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-window-dot);
}

.window__title {
  color: var(--color-text-muted);
  font: var(--text-xs) / 1 var(--font-mono);
  letter-spacing: 0.04em;
}

.window__shot {
  display: block;
  width: 100%;
  height: auto;
}

.preview__caption {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font: var(--text-xs) / 1.4 var(--font-mono);
  text-align: center;
}

.details {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-top: var(--space-7);
}

.detail {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.detail__media {
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-bottom: var(--border);
  background: var(--color-window-bar);
}

.detail__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.detail__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.detail__title { display: block; font-family: var(--font-display); font-size: var(--text-lg); }
.detail__text { display: block; margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }

@media (min-width: 64rem) {
  .preview--tilt .window {
    transform: perspective(2400px) rotateX(3deg);
    transform-origin: 50% 100%;
  }
}

/* Deux fenêtres qui se chevauchent : SoundFence derrière, go-to-linux devant. */
.duo { position: relative; padding-bottom: 6%; }
.duo__back { width: 74%; margin-left: auto; }
.duo__front { position: absolute; bottom: 0; left: 0; width: 62%; }
.duo .preview__caption { text-align: left; }
.duo__back .preview__caption { text-align: right; }

@media (max-width: 47.99rem) {
  .duo { display: grid; gap: var(--space-5); padding-bottom: 0; }
  .duo__back, .duo__front { position: static; width: 100%; }
  .duo .preview__caption { text-align: center; }
}