/* ==================================================================
   Aimex Trade 2.5 — feuille de styles des pages secondaires (legal / info)
   ------------------------------------------------------------------
   Reprend a l'identique les variables et regles de theme de la page
   d'accueil (bloc <style id="cms-theme">), afin que les pages legales
   soient visuellement identiques au reste du site, puis ajoute la
   typographie de contenu long.
   ================================================================== */

:root {
  --cms-brand-from: #6ee7b7;
  --cms-brand-to: #10b981;
  --cms-glow: rgba(16, 185, 129, 0.32);
  --cms-page-bg: #030a07;
  --cms-surface: #030a07;
  --cms-surface-elevated: #071210;
  --cms-text: #ecfdf5;
  --cms-text-muted: #6ee7b7;
  --cms-text-faint: #34d399;
  --cms-accent: #34d399;
  --cms-card-bg: rgba(8, 22, 16, 0.5);
  --cms-card-border: rgba(52, 211, 153, 0.14);
  --cms-card-border-hover: rgba(110, 231, 183, 0.4);
  --cms-ring: rgba(52, 211, 153, 0.4);
  --cms-radius: 1.35rem;
  --cms-radius-lg: 1.75rem;
  --cms-radius-btn: 1.1rem;
  --cms-section-py: 2.16rem;
  --cms-card-pad: 1.75rem;
  --cms-card-pad-lg: 2.75rem;
  --cms-content-max: 90rem;
  --cms-h1-scale: 1.04;
  --cms-h2-scale: 1.02;
  --cms-editor-bg: #071210;
  --cms-editor-text: #d1fae5;
}

html {
  background-color: var(--cms-page-bg);
}

body.h-full.bg-ink-950 {
  background: var(--cms-page-bg) !important;
  background-color: var(--cms-page-bg) !important;
}

.mx-auto.max-w-7xl,
      .mx-auto.max-w-6xl,
      .mx-auto.max-w-5xl {
  max-width: var(--cms-content-max) !important;
}

.bg-ink-950,
      .bg-ink-950\/80,
      .bg-ink-950\/95,
      .bg-ink-900\/95,
      .bg-ink-900\/80,
      .bg-ink-900\/70,
      .bg-ink-900\/60,
      .bg-ink-800\/60,
      .bg-ink-950\/80 {
  background-color: var(--cms-card-bg) !important;
}

header.sticky,
      header {
  background-color: color-mix(
  in srgb,
  var(--cms-page-bg) 88%,
  transparent
  ) !important;
  border-color: rgba(52, 211, 153, 0.08) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.bg-brand-gradient {
  background-image: linear-gradient(
  135deg,
  var(--cms-brand-from) 0%,
  var(--cms-brand-to) 100%
  ) !important;
  border-radius: var(--cms-radius-btn) !important;
}

.text-gradient {
  background-image: linear-gradient(
  135deg,
  var(--cms-brand-from),
  var(--cms-brand-to)
  ) !important;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.shadow-glow {
  box-shadow:
  0 0 0 1px color-mix(in srgb, var(--cms-brand-from) 18%, transparent),
  0 20px 60px -20px var(--cms-glow) !important;
}

.rounded-xl,
      .rounded-2xl,
      .rounded-3xl {
  border-radius: var(--cms-radius-lg) !important;
}

.rounded-lg {
  border-radius: var(--cms-radius) !important;
}

.text-teal-400,
      [class*="text-teal-"] {
  color: var(--cms-accent) !important;
}

.border-teal-400\/30,
      .hover\:border-teal-400\/30:hover {
  border-color: var(--cms-card-border-hover) !important;
}

.ring-teal-400\/30 {
  --tw-ring-color: var(--cms-ring) !important;
}

.bg-teal-500\/10 {
  background-color: color-mix(
  in srgb,
  var(--cms-accent) 12%,
  transparent
  ) !important;
}

.fill-teal-400 {
  fill: var(--cms-accent) !important;
}

.stroke-teal-400 {
  stroke: var(--cms-accent) !important;
}

.border-white\/5,
      .border-white\/10 {
  border-color: var(--cms-divider, rgba(52, 211, 153, 0.08)) !important;
}

.rounded-full.border.border-white\/10.bg-white\/5,
      .inline-flex.rounded-full.border.bg-white\/5 {
  background-color: rgba(16, 185, 129, 0.1) !important;
  border-color: var(--cms-card-border) !important;
  color: #a7f3d0 !important;
}

body.h-full.bg-ink-950 {
  color: var(--cms-text) !important;
}

.text-slate-200,
      .text-slate-300,
      .text-slate-400 {
  color: var(--cms-text-muted) !important;
}

.text-slate-500,
      .text-slate-600 {
  color: var(--cms-text-faint) !important;
}

#cms-site-header.cms-header-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 50 !important;
}

body.cms-header-fixed-offset {
  padding-top: var(--cms-header-offset, 4.5rem) !important;
}


/* ==================================================================
   Mise en page des pages de contenu
   ================================================================== */

.page-prose {
  color: var(--cms-text);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.page-prose > * + * {
  margin-top: 1rem;
}

.page-prose h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.25rem;
  font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  scroll-margin-top: 6rem;
}

.page-prose h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

.page-prose p,
.page-prose li {
  color: var(--cms-text-muted);
}

.page-prose strong {
  color: #ffffff;
  font-weight: 600;
}

.page-prose ul,
.page-prose ol {
  margin-left: 1.125rem;
  padding-left: 0.5rem;
  display: grid;
  gap: 0.5rem;
}

.page-prose ul {
  list-style: disc;
}

.page-prose ol {
  list-style: decimal;
}

.page-prose a {
  color: var(--cms-accent);
  text-decoration: none;
  font-weight: 500;
}

.page-prose a:hover {
  text-decoration: underline;
}

.page-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.page-prose th,
.page-prose td {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--cms-card-border);
  text-align: left;
  vertical-align: top;
  color: var(--cms-text-muted);
}

.page-prose th {
  background-color: rgba(16, 185, 129, 0.08);
  color: #ffffff;
  font-weight: 600;
}

.page-prose .page-note {
  margin-top: 1.25rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--cms-card-border);
  border-left-width: 3px;
  border-left-color: var(--cms-accent);
  border-radius: 0.75rem;
  background-color: var(--cms-card-bg);
}

.page-prose .page-note p {
  margin: 0;
}

/* Sommaire */
.page-toc a {
  color: var(--cms-text-muted);
  font-weight: 400;
}

.page-toc a:hover {
  color: var(--cms-accent);
}

@media (max-width: 639.98px) {
  .page-prose h2 {
    font-size: 1.125rem;
  }
}