/* =========================================================================
   :ROOT — Design tokens (source unique de vérité)
   ========================================================================= */
:root {
  /* ---------- Typographie ---------- */
  --font-family-primary: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-display: "Space Grotesk", "Manrope", system-ui, -apple-system, sans-serif;
  --font-size-base: 17.85px;
  --font-weight-base: 400;
  --font-line-height-base: 28.56px;

  --font-size-xs:  13.39px;
  --font-size-sm:  14px;
  --font-size-md:  15.62px;
  --font-size-lg:  17.85px;
  --font-size-xl:  20.08px;
  --font-size-2xl: 24.54px;
  --font-size-3xl: 26.78px;
  --font-size-4xl: 31.24px;
  --font-size-5xl: 40px;   /* extension cadrée — hero h2 */

  /* ---------- Couleurs sémantiques ---------- */
  --color-text-primary:    #1e1e1e;   /* corps & titres sur fond clair */
  --color-text-secondary:  #e8efed;   /* RESERVÉ aux fonds sombres uniquement */
  --color-text-tertiary:   #726f6b;   /* mentions légales, captions */
  --color-surface-base:    #0f2a25;   /* surface inverse (résultats simulateur) — émeraude foncé */
  --color-surface-raised:  #f8f7f7;   /* fond page & cartes */

  /* Tokens dérivés (variations de la palette) */
  /* Accent — palette « Émeraude » dérivée du vert du logo CryptoSimple. */
  --color-accent:        #1d5a4f;
  --color-accent-hover:  #256e62;
  --color-accent-fg:     #ffffff;   /* texte sur fond accent */
  --color-action-primary:        var(--color-accent);
  --color-action-primary-hover:  var(--color-accent-hover);
  --color-action-secondary:      transparent;
  --color-border-subtle:         rgba(30, 30, 30, 0.12);
  --color-border-strong:         rgba(30, 30, 30, 0.32);
  --color-focus-ring:            var(--color-accent);  /* ≥ 3:1 vs surface-raised ✓ */
  --color-success:               var(--color-accent);  /* check icons monochromes */
  --color-overlay:               rgba(30, 30, 30, 0.55);
  /* Fond de section différencié — léger voile accent, aucune nouvelle teinte */
  --color-surface-tint:          color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-raised));

  /* Ratios de contraste documentés (WCAG 2.2 AA — testés via APCA/WCAG2)
     text-primary #1e1e1e on surface-raised #f8f7f7  → 16.6:1  (AAA body & large)
     text-tertiary #726f6b on surface-raised #f8f7f7 →  4.78:1 (AA body, AAA large)
     text-secondary #e8efed on surface-base #0f2a25  → 13.4:1  (AAA body & large)
     accent #1d5a4f on surface-raised #f8f7f7        →  6.0:1  (AA body, ≥ 3:1 ✓)
     accent-fg #ffffff on accent #1d5a4f             →  6.3:1  (AA body ✓)
     focus-ring #1d5a4f on surface-raised #f8f7f7    →  6.0:1  (≥ 3:1 ✓)
  */

  /* ---------- Espacements (échelle stricte) ---------- */
  --space-1: 4.46px;
  --space-2: 13.39px;
  --space-3: 17.85px;
  --space-4: 22.31px;
  --space-5: 26.78px;
  --space-6: 31.24px;
  --space-7: 35.7px;
  --space-8: 89.25px;

  /* ---------- Rayon / Ombre ---------- */
  --radius-xs: 8px;     /* boutons, inputs, petits éléments */
  --radius-lg: 16px;    /* cartes : simulateur, presse, bénéfices */
  --shadow-1:
    rgba(0,0,0,0.06)  0 3px  8px 0,
    rgba(0,0,0,0.05)  0 14px 14px 0,
    rgba(0,0,0,0.03)  0 31px 19px 0,
    rgba(0,0,0,0.01)  0 55px 22px 0,
    rgba(0,0,0,0.00)  0 86px 24px 0;
  --shadow-card: 0 2px 4px rgba(0,0,0,0.04), 0 10px 28px -14px rgba(0,0,0,0.12);

  /* ---------- Motion ---------- */
  --motion-instant: 250ms;
  --motion-fast:    300ms;
  --motion-normal:  500ms;
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Layout helpers ---------- */
  --container-max: 1280px;
  --header-h: 76px;
  --target-min: 44px; /* WCAG 2.2 Target Size Minimum */
}

/* =========================================================================
   RESET minimal
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--font-line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-surface-raised);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
a { color: inherit; text-decoration: none; }

/* Lien d'évitement pour clavier */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-3);
  background: var(--color-surface-base);
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  z-index: 1000;
  font-size: var(--font-size-sm);
  transition: top var(--motion-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--space-3); }

/* =========================================================================
   BASE — typographie globale
   ========================================================================= */
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

main { display: block; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* =========================================================================
   COMPONENT — Buttons
   États implémentés : default / :hover / :focus-visible / :active / :disabled / .is-loading / .has-error
   ========================================================================= */
.btn {
  --btn-bg: var(--color-action-primary);
  --btn-fg: var(--color-accent-fg);
  --btn-bd: var(--color-action-primary);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: 0 var(--space-4);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: 1;
  color: var(--btn-fg);
  background-color: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-xs);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-instant) var(--ease-standard);
}
.btn:hover {
  --btn-bg: var(--color-action-primary-hover);
  --btn-bd: var(--color-action-primary-hover);
}
.btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn.is-loading {
  color: transparent;
  pointer-events: none;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--color-accent-fg);
  animation: spin 0.7s linear infinite;
}
.btn.has-error {
  --btn-bd: var(--color-text-primary);
  box-shadow: 0 0 0 2px var(--color-surface-raised), 0 0 0 4px var(--color-text-primary);
}

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-text-primary);
  --btn-bd: var(--color-border-strong);
}
.btn--secondary:hover {
  --btn-bg: color-mix(in srgb, var(--color-accent) 6%, transparent);
  --btn-bd: var(--color-text-primary);
}

.btn--block { width: 100%; }
.btn--lg { min-height: 52px; font-size: var(--font-size-lg); padding: 0 var(--space-5); }

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

/* =========================================================================
   COMPONENT — Header (sticky)
   États implémentés : default / :hover / :focus-visible / :active / .is-scrolled / .is-menu-open
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-surface-raised);
  border-bottom: 1px solid transparent;
  transition:
    box-shadow var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-1);
  border-bottom-color: var(--color-border-subtle);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--header-h);
}
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  margin-left: calc(var(--space-2) * -1);
  border-radius: var(--radius-xs);
  font-weight: 600;
  font-size: var(--font-size-lg);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.site-logo:hover { background-color: rgba(30,30,30,0.04); }
.site-logo:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.site-logo__mark {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  object-fit: cover;
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-5);
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  height: var(--target-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}
.site-nav__link:hover { background-color: rgba(30,30,30,0.05); }
.site-nav__link:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
}

.site-header__cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.menu-toggle {
  display: none;
  width: var(--target-min);
  height: var(--target-min);
  margin-left: auto;
  border-radius: var(--radius-xs);
  align-items: center;
  justify-content: center;
}
.menu-toggle:hover { background-color: rgba(30,30,30,0.05); }
.menu-toggle:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.menu-toggle__icon { width: 22px; height: 14px; position: relative; }
.menu-toggle__icon::before,
.menu-toggle__icon::after,
.menu-toggle__icon span {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-text-primary);
  border-radius: 1px;
  transition: transform var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard);
}
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon span     { top: 50%; transform: translateY(-50%); display: block; }
.menu-toggle__icon::after  { bottom: 0; }

.site-header.is-menu-open .menu-toggle__icon::before { top: 50%; transform: rotate(45deg); }
.site-header.is-menu-open .menu-toggle__icon::after  { bottom: 50%; transform: rotate(-45deg); }
.site-header.is-menu-open .menu-toggle__icon span    { opacity: 0; }

/* Drawer mobile */
.mobile-drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background-color: var(--color-surface-raised);
  z-index: 49;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-4);
  gap: var(--space-3);
  transform: translateX(100%);
  transition: transform var(--motion-fast) var(--ease-standard);
  visibility: hidden;
}
.mobile-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}
.mobile-drawer__nav { display: flex; flex-direction: column; gap: var(--space-1); }
.mobile-drawer__link {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 var(--space-2);
  font-size: var(--font-size-xl);
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xs);
}
.mobile-drawer__link:hover { background-color: rgba(30,30,30,0.04); }
.mobile-drawer__link:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }
.mobile-drawer__cta { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }

/* =========================================================================
   COMPONENT — Hero
   ========================================================================= */
.hero {
  padding-block: var(--space-7) var(--space-8);
  background-color: var(--color-surface-raised);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr);
  gap: var(--space-7);
  align-items: start;
}
/* Colonne de gauche alignée en haut — convention hero, titre à hauteur des yeux */
.hero__copy { align-self: start; }
/* Bandeau de preuve sociale — pilule au-dessus du titre */
.hero__proof {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 16px 5px 5px;
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-5);
}
.hero__proof-avatars { display: inline-flex; }
.hero__proof-avatars span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid #ffffff;
}
.hero__proof-avatars span + span { margin-left: -10px; }
.hero__proof-avatars span:nth-child(1) { background: var(--color-accent); }
.hero__proof-avatars span:nth-child(2) { background: color-mix(in srgb, var(--color-accent) 72%, #ffffff); }
.hero__proof-avatars span:nth-child(3) { background: color-mix(in srgb, var(--color-accent) 48%, #ffffff); }
.hero__proof-avatars span:nth-child(4) { background: color-mix(in srgb, var(--color-accent) 28%, #ffffff); }
.hero__proof-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  font-weight: 500;
}
.hero__proof-text strong {
  color: var(--color-text-primary);
  font-weight: 700;
}
.hero__h1 {
  font-family: var(--font-family-primary);   /* eyebrow — reste en Manrope */
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-tertiary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.hero__h2 {
  font-size: var(--font-size-5xl);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
  max-width: 20ch;
}
.hero__h2 em {
  font-style: normal;
  display: inline-block;
  font-size: 1.12em;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.hero__lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-tertiary);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 var(--space-6);
}

.hero__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.hero__bullet {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-2);
  align-items: start;
  font-size: var(--font-size-md);
  line-height: 1.5;
}
.hero__bullet-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  color: var(--color-success);
}
.hero__bullet sup {
  font-size: 0.7em;
  margin-left: 1px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.hero__legal {
  font-size: var(--font-size-sm);
  line-height: 1.35;
  color: var(--color-text-tertiary);
  max-width: 60ch;
}
.hero__legal + .hero__legal { margin-top: var(--space-2); }
.hero__legal sup { font-weight: 600; color: var(--color-text-primary); margin-right: 1px; }
.hero__legal-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity var(--motion-fast) var(--ease-standard);
  border-radius: 2px;
}
.hero__legal-link:hover { opacity: 0.75; }
.hero__legal-link:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

/* =========================================================================
   COMPONENT — Hero trust (4 items en grille 2x2 sous les CTAs)
   ========================================================================= */
.hero__trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-5);
  row-gap: var(--space-3);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-3);
  max-width: 560px;
}
.hero__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  line-height: 1.3;
}
.hero__trust-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--color-accent);
}
.hero__trust-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-primary);
  border-radius: 2px;
  transition: color var(--motion-fast) var(--ease-standard);
}
.hero__trust-link:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.hero__trust-link:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }
.hero__trust-link .ext { transition: transform var(--motion-fast) var(--ease-standard); width: 12px; height: 12px; }
.hero__trust-link:hover .ext { transform: translate(2px, -2px); }

/* =========================================================================
   COMPONENT — Simulator card
   États (par sous-composant) documentés au-dessus de chaque bloc.
   ========================================================================= */
.simulator {
  position: relative;
  background-color: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.simulator__title {
  font-size: var(--font-size-3xl);  /* dimensionné pour tenir sur 2 lignes */
  font-weight: 600;
  line-height: 1.25;                /* aéré pour un titre sur 2 lignes */
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
  text-wrap: balance;
  text-align: center;
}
/* Mot accentué du titre — impact visuel via la couleur accent de la palette */
.simulator__title-accent {
  color: var(--color-accent);
  font-weight: 700;
}
.simulator__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin: 0;
  text-align: center;
}

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.field__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  min-height: 1.2em;
  margin-top: calc(4px - var(--space-2));   /* compense le gap parent pour rester collé à l'input */
}

/* Crypto picker — role="radiogroup"
   États : default / :hover / :focus-visible / :active / [aria-checked="true"] / :disabled */
.crypto-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.crypto-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  padding: var(--space-2);
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-instant) var(--ease-standard);
}
.crypto-option:hover { background-color: rgba(30,30,30,0.03); border-color: var(--color-border-strong); }
.crypto-option:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.crypto-option:active { transform: translateY(1px); }
.crypto-option[aria-checked="true"] {
  border-color: var(--color-text-primary);
  background-color: rgba(30,30,30,0.04);
  box-shadow: inset 0 0 0 1px var(--color-text-primary);
}
.crypto-option:disabled { opacity: 0.5; cursor: not-allowed; }
.crypto-option__icon { width: 28px; height: 28px; }
.crypto-option__label { font-size: var(--font-size-sm); font-weight: 500; }
.crypto-option__sub   { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }

/* Amount input — text input
   États : default / :hover / :focus-within / :focus-visible / .has-error / :disabled / .is-loading */
.amount {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xs);
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}
.amount:hover { border-color: var(--color-border-strong); }
.amount:focus-within {
  border-color: var(--color-text-primary);
  box-shadow: 0 0 0 2px rgba(30,30,30,0.12);
}
.amount.has-error {
  border-color: var(--color-text-primary);
  box-shadow: 0 0 0 2px var(--color-text-primary);
}
.amount__prefix {
  padding: 0 var(--space-2) 0 var(--space-3);
  font-size: var(--font-size-lg);
  color: var(--color-text-tertiary);
  user-select: none;
}
.amount__input {
  flex: 1;
  min-width: 0;
  height: var(--target-min);
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-text-primary);
  padding-right: var(--space-3);
}
.amount__input::-webkit-outer-spin-button,
.amount__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount__input[type="number"] { -moz-appearance: textfield; }
.amount__input:disabled { opacity: 0.5; cursor: not-allowed; }
.field__error {
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  font-weight: 500;
  display: none;
}
.field.has-error .field__error { display: block; }
.field.has-error .amount { border-color: var(--color-text-primary); }

/* Duration segmented control
   États : default / :hover / :focus-visible / :active / [aria-checked="true"] / :disabled */
.segmented {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
  background: rgba(30,30,30,0.04);
  border-radius: var(--radius-xs);
}
.segmented__option {
  min-height: 40px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-tertiary);
  background: transparent;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}
.segmented__option:hover { color: var(--color-text-primary); }
.segmented__option:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.segmented__option:active { transform: translateY(1px); }
.segmented__option[aria-checked="true"] {
  background: #ffffff;
  color: var(--color-text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px var(--color-border-subtle);
}
.segmented__option:disabled { opacity: 0.5; cursor: not-allowed; }

/* Results block */
.results {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-base);
  color: var(--color-text-secondary);
  border-radius: var(--radius-xs);
  display: grid;
  gap: var(--space-2);
}
.results__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.results__label {
  font-size: var(--font-size-sm);
  color: rgba(236,235,234,0.7);
  letter-spacing: 0.02em;
}
.results__value {
  font-size: var(--font-size-lg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Ligne mise en avant — total au bout de la période (montant le plus élevé) */
.results__row--hero {
  padding-top: var(--space-2);
  border-top: 1px solid rgba(236,235,234,0.12);
}
.results__row--hero .results__label { font-size: var(--font-size-md); color: var(--color-text-secondary); }
.results__row--hero .results__value {
  font-size: var(--font-size-3xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Groupe valeur + équivalent crypto (ligne Total) */
.results__value-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.results__value-equiv {
  font-size: var(--font-size-xs);
  color: rgba(232, 239, 237, 0.55);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* Ligne mise en avant — rendement annuel (taux) */
.results__row--rate {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(236,235,234,0.12);
}
.results__row--rate .results__label { font-size: var(--font-size-md); color: var(--color-text-secondary); }
.results__row--rate .results__value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Upsell vers 12 mois — visible uniquement quand on n'y est pas */
.results__upsell {
  display: block;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
  border-radius: var(--radius-xs);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
.results__upsell:hover {
  background: color-mix(in srgb, var(--color-accent) 26%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.results__upsell:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.results__upsell strong {
  color: #ffffff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.results__upsell[hidden] { display: none; }

.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}
.trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}
.trust__icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--color-text-primary);
}

/* =========================================================================
   COMPONENT — PSAN banner
   ========================================================================= */
.psan {
  background-color: var(--color-surface-base);
  color: var(--color-text-secondary);
  padding-block: var(--space-5);
}
.psan__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.psan__text {
  font-size: var(--font-size-sm);
  color: rgba(236,235,234,0.78);
  max-width: 75ch;
  line-height: 1.55;
}
.psan__text sup { font-weight: 600; color: var(--color-text-secondary); margin-right: 2px; }
.psan__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  margin-left: auto;
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--color-text-secondary);
  border: 1px solid rgba(236,235,234,0.24);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-instant) var(--ease-standard);
}
.psan__cta:hover { background-color: rgba(236,235,234,0.08); border-color: rgba(236,235,234,0.5); }
.psan__cta:focus-visible { outline: 2px solid var(--color-text-secondary); outline-offset: 2px; }
.psan__cta:active { transform: translateY(1px); }
.psan__cta .arrow { transition: transform var(--motion-fast) var(--ease-standard); }
.psan__cta:hover .arrow { transform: translateX(3px); }

/* =========================================================================
   COMPONENT — Presse / logos médias ("Ils parlent de nous")
   Logos normalisés en gris uniforme (filter grayscale) sur fond clair.
   ========================================================================= */
.press {
  background-color: var(--color-surface-raised);
  padding-block: var(--space-7);
}
.press__header {
  text-align: center;
  max-width: 48ch;
  margin: 0 auto var(--space-6);
}
.press__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.press__title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}
.press__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}
.press__item { display: flex; }

/* Carte logo — surface blanche surélevée
   États : default / :hover (carte soulevée + logo en couleur) / :focus-visible */
.press__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 128px;
  padding: var(--space-3) var(--space-4);
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
.press__link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-1);
  border-color: var(--color-border-strong);
}
.press__link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.press__logo {
  width: auto;
  height: 32px;
  max-width: 100%;
  object-fit: contain;
  /* Teinte uniforme : désaturation + opacité réduite ; repasse en couleur au survol */
  filter: grayscale(1);
  opacity: 0.55;
  transition:
    filter var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}
.press__link:hover .press__logo,
.press__link:focus-visible .press__logo { filter: grayscale(0); opacity: 1; }
/* Logos agrandis pour équilibrer le poids visuel */
.press__logo--md { height: 72px; }   /* BFM Business */
.press__logo--xl { height: 84px; }   /* French Tech (logo très compact) */

/* =========================================================================
   COMPONENT — « Comment ça marche » : schéma du staking crypto
   ========================================================================= */
.how {
  background-color: var(--color-surface-tint);
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}
.how__header {
  text-align: center;
  max-width: 64ch;
  margin: 0 auto var(--space-8);
}
.how__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.how__title {
  font-size: var(--font-size-4xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
.how__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: 0;
}
.how__subtitle strong {
  color: var(--color-accent);
  font-weight: 600;
}
/* --- Déroulé en étapes — timeline verticale --- */
.how__steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.how__step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--space-4);
  align-items: start;
}
/* Trait reliant les étapes — couvert par les pastilles numérotées */
.how__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 0;
  bottom: calc(-1 * var(--space-6));
  width: 2px;
  background: var(--color-border-subtle);
}
.how__step-num {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: 600;
}
.how__step-body { padding-top: var(--space-1); }
.how__step-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}
.how__step-text {
  font-size: var(--font-size-md);
  color: var(--color-text-tertiary);
  line-height: 1.65;
  margin: 0;
}
/* CTA de fin de section */
.how__cta {
  margin-top: var(--space-8);
  text-align: center;
}
.how__cta .btn {
  min-height: 60px;
  padding-inline: var(--space-7);
  font-size: var(--font-size-xl);
}
.how__cta-note {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
}
/* Encart de réassurance — sécurité du placement */
.how__reassurance {
  max-width: 680px;
  margin: var(--space-6) auto 0;
  padding: var(--space-4) var(--space-5);
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-md);
  color: var(--color-text-tertiary);
  line-height: 1.6;
}
.how__reassurance strong { color: var(--color-text-primary); font-weight: 700; }

/* =========================================================================
   COMPONENT — Taux de rendement par crypto
   ========================================================================= */
.rates {
  background-color: var(--color-surface-raised);
  padding-block: var(--space-8);
}
.rates__header {
  text-align: center;
  max-width: 64ch;
  margin: 0 auto var(--space-8);
}
.rates__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.rates__title {
  font-size: var(--font-size-4xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
.rates__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: 0;
}
.rates__subtitle strong {
  color: var(--color-accent);
  font-weight: 700;
}
.rates__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 1080px;
  margin: 0 auto;
}
/* Carte de taux par crypto — états : default / :hover */
.rate-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
.rate-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-1);
  border-color: var(--color-border-strong);
}
.rate-card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-family: var(--font-family-primary);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, #ffffff);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rate-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.rate-card__icon { width: 36px; height: 36px; flex: none; }
.rate-card__crypto {
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.rate-card__crypto-symbol {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-tertiary);
  letter-spacing: 0.1em;
  margin-left: 6px;
}
.rate-card__hero {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rate-card__rate-value {
  font-family: var(--font-family-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: -0.02em;
}
.rate-card__rate-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}
.rate-card__tiers {
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rate-card__tiers li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--font-size-md);
}
.rate-card__tiers li span { color: var(--color-text-tertiary); }
.rate-card__tiers li strong {
  color: var(--color-text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Tier 12 mois mis en valeur — correspond au taux héros affiché en haut */
.rate-card__tier--max {
  background: color-mix(in srgb, var(--color-accent) 10%, #ffffff);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  margin-top: 4px;
}
.rate-card__tier--max span {
  color: var(--color-text-primary);
  font-weight: 600;
}
.rate-card__tier--max strong {
  color: var(--color-accent);
  font-size: var(--font-size-lg);
}
/* Eyebrow "Jusqu'à" au-dessus du grand chiffre */
.rate-card__rate-eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rate-card__perk {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  line-height: 1.5;
  margin: 0;
}
.rate-card__cta { margin-top: auto; }
/* Lien vers le simulateur sous les 3 cartes */
.rates__simlink {
  text-align: center;
  margin-top: var(--space-6);
  font-size: var(--font-size-md);
  color: var(--color-text-tertiary);
}
.rates__simlink a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rates__simlink a:hover { opacity: 0.75; }

/* =========================================================================
   COMPONENT — Sécurité (section sombre, piliers de confiance)
   ========================================================================= */
.security {
  position: relative;
  background: var(--color-surface-base);
  color: var(--color-text-secondary);
  padding-block: var(--space-8);
  overflow: hidden;
}
/* Bouclier décoratif en filigrane, en arrière-plan */
.security__watermark {
  position: absolute;
  top: -60px;
  right: -80px;
  width: 480px;
  height: auto;
  opacity: 0.05;
  color: var(--color-accent);
  pointer-events: none;
}
.security__header {
  position: relative;
  text-align: center;
  max-width: 56ch;
  margin: 0 auto var(--space-7);
}
.security__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: rgba(232, 239, 237, 0.65);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.security__title {
  font-size: var(--font-size-4xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 var(--space-3);
}
.security__subtitle {
  font-size: var(--font-size-lg);
  color: rgba(232, 239, 237, 0.8);
  line-height: 1.55;
  margin: 0;
}
.security__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1080px;
}
/* Carte sécurité — verre teinté sur fond sombre */
.security-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
.security-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.security-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--color-accent) 24%, transparent);
  color: color-mix(in srgb, var(--color-accent) 55%, #ffffff);
}
.security-card__icon svg { width: 22px; height: 22px; }
.security-card__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
}
.security-card__text {
  font-size: var(--font-size-md);
  color: rgba(232, 239, 237, 0.78);
  line-height: 1.55;
  margin: 0;
}
.security-card__text strong { color: #ffffff; font-weight: 600; }
.security-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
}
.security-card__tags li {
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: rgba(232, 239, 237, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}
/* Sceau PSAN/AMF en bas de section */
.security__seal {
  position: relative;
  margin: var(--space-6) auto 0;
  padding: var(--space-3) var(--space-4);
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: rgba(232, 239, 237, 0.75);
  text-align: center;
}
.security__seal-icon {
  width: 22px;
  height: 22px;
  flex: none;
  color: color-mix(in srgb, var(--color-accent) 55%, #ffffff);
}
.security__seal strong { color: #ffffff; font-weight: 600; }
.security__seal a {
  color: color-mix(in srgb, var(--color-accent) 35%, #ffffff);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.security__seal a:hover { opacity: 0.8; }

/* =========================================================================
   COMPONENT — FAQ (accordéon natif <details>)
   ========================================================================= */
.faq {
  background: var(--color-surface-raised);
  padding-block: var(--space-8);
}
.faq__header {
  text-align: center;
  max-width: 64ch;
  margin: 0 auto var(--space-7);
}
.faq__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.faq__title {
  font-size: var(--font-size-4xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
.faq__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-tertiary);
  line-height: 1.55;
  margin: 0;
}
.faq__list {
  max-width: 760px;
  margin: 0 auto;
}
.faq__item {
  border-top: 1px solid var(--color-border-subtle);
}
.faq__item:last-of-type {
  border-bottom: 1px solid var(--color-border-subtle);
}
/* Question — résumé cliquable */
.faq__question {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-text-primary);
  transition: color var(--motion-fast) var(--ease-standard);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--color-accent); }
.faq__question:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}
/* Icône +/× — tourne à 45° à l'ouverture */
.faq__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-text-primary);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}
.faq__item[open] .faq__icon {
  transform: rotate(45deg);
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-fg);
}
/* Réponse */
.faq__answer {
  padding: 0 0 var(--space-5);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-md);
  line-height: 1.65;
  max-width: 70ch;
}
.faq__answer p { margin: 0; }
.faq__answer p + p { margin-top: var(--space-3); }
.faq__answer ul {
  margin: var(--space-3) 0;
  padding-left: var(--space-3);
  list-style: disc;
}
.faq__answer ul li { margin: var(--space-1) 0; padding-left: var(--space-1); }
.faq__answer strong { color: var(--color-text-primary); font-weight: 600; }
/* Pied de section — lien conseiller */
.faq__footer {
  text-align: center;
  margin-top: var(--space-7);
}
.faq__footer p {
  font-size: var(--font-size-md);
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-3);
}

/* =========================================================================
   COMPONENT — Footer (fond sombre, mentions légales + certification AMF)
   ========================================================================= */
.site-footer {
  background: var(--color-surface-base);
  color: rgba(232, 239, 237, 0.7);
  padding-block: var(--space-8) var(--space-5);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__brand { max-width: 380px; }
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--font-size-lg);
  letter-spacing: -0.01em;
  color: #ffffff;
  text-decoration: none;
  margin-bottom: var(--space-3);
}
.site-footer__logo .site-logo__mark {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  object-fit: cover;
}
.site-footer__logo:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.site-footer__about {
  font-size: var(--font-size-sm);
  color: rgba(232, 239, 237, 0.7);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}
/* Badge certification AMF — prominent dans la colonne marque */
.site-footer__amf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xs);
  color: rgba(232, 239, 237, 0.85);
  font-size: var(--font-size-xs);
  text-decoration: none;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
.site-footer__amf:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.site-footer__amf:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.site-footer__amf-icon {
  width: 36px;
  height: 36px;
  flex: none;
  color: color-mix(in srgb, var(--color-accent) 55%, #ffffff);
}
.site-footer__amf strong {
  display: block;
  color: #ffffff;
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-bottom: 2px;
}
/* Colonnes de liens */
.site-footer__nav { display: contents; }
.site-footer__col h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-3);
}
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-footer__col a {
  color: rgba(232, 239, 237, 0.7);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--motion-fast) var(--ease-standard);
}
.site-footer__col a:hover { color: #ffffff; }
.site-footer__col a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
/* Mention de risque — obligatoire crypto */
.site-footer__warning {
  font-size: var(--font-size-xs);
  color: rgba(232, 239, 237, 0.55);
  line-height: 1.5;
  margin: var(--space-5) 0 var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 90ch;
}
.site-footer__warning strong { color: rgba(232, 239, 237, 0.9); font-weight: 600; }
/* Barre du bas — copyright + ligne PSAN */
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: rgba(232, 239, 237, 0.5);
}
.site-footer__bottom p { margin: 0; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .simulator { padding: var(--space-5); }
  .press__grid { grid-template-columns: repeat(3, 1fr); }
  /* Footer — bloc marque sur toute la largeur, 3 colonnes de liens dessous */
  .site-footer__top { grid-template-columns: repeat(3, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }
  .site-nav,
  .site-header__cta { display: none; }
  .menu-toggle { display: inline-flex; }

  .hero { padding-block: var(--space-5) var(--space-7); }
  .hero__h2 { font-size: var(--font-size-4xl); line-height: 1.15; max-width: 18ch; }
  .simulator__title { font-size: var(--font-size-2xl); }
  .hero__ctas .btn { flex: 1; min-width: 0; }
  .simulator { padding: var(--space-4); }
  .results__row--hero .results__value { font-size: var(--font-size-2xl); }
  .results__row--rate .results__value { font-size: var(--font-size-lg); }
  .results__row--rate .results__label { font-size: var(--font-size-sm); }
  .results__upsell { line-height: 1.3; }
  #startBtn { font-size: var(--font-size-md); }
  .results__label { line-height: 1.25; }
  .results__label-extra { display: none; }                    /* "sur la période" masqué sur mobile */
  .segmented__option { line-height: 1; min-height: 36px; }    /* boutons durée plus compacts */
  .results__value-equiv { font-size: 11px; white-space: nowrap; }  /* équivalent crypto sur une seule ligne */
  /* Cartes crypto plus compactes verticalement */
  .crypto-option { gap: 2px; }
  .crypto-option__label, .crypto-option__sub { line-height: 1.1; }

  .trust { grid-template-columns: 1fr; gap: var(--space-2); }
  .psan__inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .psan__cta { margin-left: 0; }
  .press__grid { grid-template-columns: repeat(2, 1fr); }
  .press__link { min-height: 108px; }
  .press__logo { height: 28px; }
  .press__logo--md { height: 50px; }
  .press__logo--xl { height: 66px; }
  .how__title { font-size: var(--font-size-3xl); }
  .how__cta .btn { width: 100%; }
  /* Bandeau preuve sociale — compact, sur une seule ligne */
  .hero__proof { padding: 4px 12px 4px 4px; gap: var(--space-1); margin-bottom: var(--space-3); }
  .hero__proof-avatars span { width: 20px; height: 20px; }
  .hero__proof-avatars span + span { margin-left: -8px; }
  .hero__proof-avatars span:nth-child(4) { display: none; }
  .hero__proof-text { font-size: 12px; white-space: nowrap; }
  /* Cartes de taux — empilées sur mobile */
  .rates__grid { grid-template-columns: 1fr; }
  .rate-card__rate-value { font-size: 48px; }
  /* Piliers sécurité empilés sur mobile */
  .security__grid { grid-template-columns: 1fr; }
  .security__title { font-size: var(--font-size-3xl); }
  /* FAQ — texte et icône plus compacts sur mobile */
  .faq__title { font-size: var(--font-size-3xl); }
  .faq__question { font-size: var(--font-size-md); padding: var(--space-3) 0; gap: var(--space-3); }
  .faq__icon { width: 28px; height: 28px; font-size: 18px; }
  /* Footer — empilé sur mobile */
  .site-footer__top { grid-template-columns: 1fr; gap: var(--space-5); }
  .site-footer__brand { max-width: none; }
  .site-footer__bottom { flex-direction: column; gap: var(--space-1); }
}

@media (max-width: 480px) {
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
}

/* =========================================================================
   PREFERS-REDUCED-MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .mobile-drawer { transition: none; }
  .btn.is-loading::after { animation: none; }
}

/* =========================================================================
   PAGES SEO / ARTICLES — mise en page éditoriale
   ========================================================================= */
.article-hero {
  background: var(--color-surface-raised);
  padding-block: var(--space-7) var(--space-6);
}
.breadcrumb {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
}
.breadcrumb a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumb a:hover { opacity: 0.75; }
.article-hero__title {
  font-family: var(--font-family-display);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  max-width: 22ch;
}
.article-hero__lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-tertiary);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0 0 var(--space-5);
}
.article-hero__lead strong {
  color: var(--color-text-primary);
  font-weight: 600;
}
.article-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.article {
  background: var(--color-surface-raised);
  padding-block: var(--space-6) var(--space-8);
}
.article__container {
  max-width: 760px;
  /* aligné à gauche du .container parent — pas de margin-inline: auto */
}
.article section + section { margin-top: var(--space-7); }
.article h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  color: var(--color-text-primary);
}
.article h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: var(--space-5) 0 var(--space-3);
  color: var(--color-text-primary);
}
.article p {
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  line-height: 1.7;
  margin: 0 0 var(--space-3);
}
.article p strong { font-weight: 600; }
.article ul {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-3);
  list-style: disc;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  line-height: 1.7;
}
.article ul li { margin-bottom: var(--space-2); padding-left: var(--space-1); }
.article a:not(.btn) {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.article a:not(.btn):hover { opacity: 0.8; }
.article-inline-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-raised));
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
  border-radius: var(--radius-xs);
  color: var(--color-accent) !important;
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-decoration: none !important;
}
.article-inline-cta:hover {
  background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface-raised));
}
/* Tableau de taux dans l'article */
.article-rates {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: var(--font-size-md);
}
.article-rates th,
.article-rates td {
  padding: var(--space-2) var(--space-3);
  text-align: right;
  border-bottom: 1px solid var(--color-border-subtle);
}
.article-rates th:first-child,
.article-rates td:first-child {
  text-align: left;
}
.article-rates thead th {
  font-weight: 600;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.article-rates tbody td:last-child {
  font-weight: 700;
  color: var(--color-accent);
}
/* CTA final de fin d'article */
.article-cta {
  background: var(--color-surface-tint);
  padding-block: var(--space-7);
  text-align: center;
}
.article-cta h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
.article-cta p {
  font-size: var(--font-size-lg);
  color: var(--color-text-tertiary);
  margin: 0 auto var(--space-5);
  max-width: 56ch;
}
@media (max-width: 768px) {
  .article-hero__title { font-size: 36px; }
  .article h2 { font-size: var(--font-size-2xl); }
  .article h3 { font-size: var(--font-size-lg); }
  .article-rates { font-size: var(--font-size-sm); }
  .article-rates th, .article-rates td { padding: var(--space-1) var(--space-2); }
  .article-cta h2 { font-size: var(--font-size-2xl); }
}