/* ════════════════════════════════════════════════════════════
   MyDeclic Finance — feuille de style du site
   ────────────────────────────────────────────────────────────
   Mise en page inspirée de roccofridge.com : logo centré, hero plein
   écran, titres fins et serrés, boutons en pilule, grandes cartes
   arrondies, mots-clés en capitales, pied de page en grille à filets.

   Couleurs, polices et boutons repris du design system d'Itezia
   (itezia-website/styles/design-system.css) : noir pur, or bruni,
   texte blanc chaud, Space Grotesk et JetBrains Mono. La classe
   .theme-alt passe un bloc sur l'espace profond de l'illustration
   d'accueil, avec un filet or, pour le détacher du fond --void.
   ════════════════════════════════════════════════════════════ */

/* ─── Tokens (valeurs Itezia) ────────────────────────────────── */
:root {
  /* Fonds — noir chaud.
     Le noir reste du noir : le plus clair de la rampe est à 8 % de
     luminosité. Mais il est désaturé vers 41°, et non plus neutre.
     41°, c'est exactement la complémentaire du bleu de --space-mid
     (221,7° + 180 = 41,7°) — et, à 0,8° près, la teinte de l'or Itezia
     --gold (40,9°). Les deux se rejoignent : le fond de page est donc
     l'opposé chromatique des blocs .theme-alt et la même famille que
     l'or, ce qui fait respirer le contraste chaud/froid au lieu de poser
     du bleu sur du gris neutre.
     La saturation décroît à mesure qu'on monte dans la rampe : sur les
     surfaces claires, la même proportion virerait au brun. */
  --void: #0a0805;
  --deep: #0e0c08;
  --surface-1: #13110d;
  --card-1: #181611;

  /* Espace profond, prélevé sur
     design/illustrations-sources/astronaute-paysage.png — le fond entre
     les étoiles, et non la moyenne du ciel : celle-ci est tirée vers le
     haut par la nébuleuse et par le halo du lever de soleil, qui ne
     couvrent qu'une partie de l'image.
     Mesuré en ne retenant que les pixels sombres (luminance < 45) des
     zones d'espace, planète, sol et soleil exclus :
       pourtour de la planète  #1a2131
       champ d'étoiles gauche  #1c2333
       5e percentile du ciel   #1f283a
     Ce sont exactement les trois arrêts ci-dessous. */
  --space-deep: #1a2131;
  --space-mid: #1c2333;
  --space-high: #1f283a;

  /* Teinte moyenne, en repli partout où un aplat suffit. */
  --sky: var(--space-mid);
  --sky-deep: #161c28;
  --sky-card: #252f43;

  /* Bordures — neutres sombres */
  --b-dim: #181818;
  --b-1: #222222;
  --b-2: #333333;
  --b-3: #444444;

  /* Or bruni Itezia */
  --gold: #c0963c;
  --gold-l: #d4af5a;
  --gold-dim: rgba(192, 150, 60, 0.08);
  --gold-glow: rgba(192, 150, 60, 0.16);
  --gold-rule: rgba(192, 150, 60, 0.18);

  /* Textes — blanc chaud */
  --t1: #f2efe8;
  --t2: #a8a49c;
  --t3: #807b75;
  --t4: #6f6a60;
  --off: var(--t4);

  /* Variables lues par les composants */
  --bg: var(--void);
  --surface: var(--surface-1);
  --card: var(--card-1);
  --fg: var(--t1);
  --muted: var(--t2);
  --subtle: var(--t3);
  --rule: var(--b-1);
  --line: var(--b-dim);
  --highlight: var(--gold-l);
  --btn-bg: var(--gold);
  --btn-fg: #000000;
  --btn-hover-bg: var(--gold-l);
  --btn-hover-fg: #000000;

  --font: "Space Grotesk", -apple-system, ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --container: 1320px;
  --gutter: 45px;
  --section-y: 100px;
  --radius: 16px;
  --header-h: 72px;

  color-scheme: dark;
}

/* Bloc détaché : le ciel étoilé de l'illustration d'accueil, filets or
   discrets. Les sections alternent donc entre le noir --void et ce ciel,
   au lieu des deux gris presque indiscernables d'avant (#020202 contre
   #0c0c0c : 1,06:1, soit aucune séparation visible ; le noir était alors
   neutre, il est depuis passé en chaud — voir les tokens de fond).
   Le dégradé rejoue l'orientation de l'illustration — le plus profond en
   haut à gauche du côté de la planète, très légèrement levé en bas à
   droite du côté du soleil. L'écart total est faible, comme dans la
   photo : c'est de l'espace, pas un ciel. Les deux halos reprennent la
   teinte de la nébuleuse en alpha très basse ; ils se devinent sans
   éclaircir le bloc.
   --bg reste un aplat : c'est la valeur que lisent les composants, le
   dégradé ne vit que sur ce bloc. */
.theme-alt {
  --bg: var(--sky);
  --surface: var(--sky-deep);
  --card: var(--sky-card);
  --rule: var(--gold-rule);

  background:
    radial-gradient(ellipse 65% 110% at 74% 88%, rgba(95, 108, 131, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 55% 70% at 40% 16%, rgba(91, 102, 125, 0.10) 0%, transparent 72%),
    linear-gradient(152deg, var(--space-deep) 0%, var(--space-mid) 46%, var(--space-high) 100%);
  border-block: 1px solid var(--gold-rule);
}

@media (max-width: 1023px) {
  :root {
    --gutter: 32px;
    --section-y: 72px;
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --section-y: 50px;
    --header-h: 60px;
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img,
video,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--fg);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
}

p {
  margin: 0;
}

strong {
  font-weight: 700;
}

em {
  color: var(--highlight);
  font-style: normal;
}

:focus-visible {
  outline: 2px solid var(--gold-l);
  outline-offset: 3px;
}

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--gold-l);
  color: var(--void);
  text-decoration: none;
}

.skip:focus {
  top: 16px;
}

/* Titre de section : fin, serré, centré. */
.title {
  font-size: clamp(28px, 4.4vw, 60px);
  line-height: 0.95;
  text-align: center;
}

.lead {
  max-width: 640px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: 0.04em;
  text-align: center;
}

/* Repère technique : chasse fixe, capitales. */
.label {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ─── Boutons en pilule ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 40px;
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear;
}

.btn:hover {
  border-color: var(--btn-hover-bg);
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  box-shadow: 0 0 24px var(--gold-glow);
}

/* Contour : actions secondaires (btn-outline-glow d’Itezia). */
.btn--secondary {
  border-color: var(--b-2);
  background: transparent;
  color: var(--t2);
}

.btn--secondary:hover {
  border-color: var(--gold);
  background: transparent;
  color: var(--gold-l);
  box-shadow: 0 0 16px var(--gold-glow);
}

.btn--small {
  min-height: 34px;
  padding: 6px 20px;
  font-size: 14px;
}

.btn--block {
  width: 100%;
  padding-inline: 20px;
}

/* ─── En-tête : navigation à gauche, logo au centre ──────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--void);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
  padding-inline: var(--gutter);
}

.nav {
  display: flex;
  gap: 32px;
}

.nav a {
  color: var(--fg);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.nav a:hover,
.nav a[aria-current] {
  color: var(--gold-l);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-size: 22px;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}

.brand img {
  width: 34px;
  height: 34px;
}

.brand-finance {
  color: var(--gold-l);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

/* Bascule FR / EN. En mono et en petit : c'est un repère, pas une
   destination — il ne doit pas concurrencer la navigation ni le bouton
   d'inscription. La langue courante est un <span>, pas un lien : un lien
   vers la page où l'on se trouve déjà n'a rien à offrir. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.lang-switch a,
.lang-switch span {
  color: var(--t3);
  text-decoration: none;
}

.lang-switch a:hover,
.lang-switch a:focus-visible {
  color: var(--gold-l);
}

.lang-switch [aria-current] {
  color: var(--fg);
}

.lang-switch-sep {
  color: var(--b-3);
}

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--fg);
  transition: transform 0.2s ease;
}

.menu-toggle span {
  position: relative;
}

.menu-toggle span::before,
.menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle span::before {
  top: -7px;
}

.menu-toggle span::after {
  top: 7px;
}

.menu-toggle[aria-expanded="true"] span {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] span::before {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span::after {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1023px) {
  .menu-toggle {
    display: block;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    background: var(--void);
    border-bottom: 1px solid var(--rule);
  }

  .nav.open {
    display: flex;
  }

  .nav a {
    padding: 18px var(--gutter);
    border-top: 1px solid var(--line);
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  .brand {
    font-size: 17px;
  }

  .brand img {
    width: 26px;
    height: 26px;
  }

  .header-actions .btn {
    padding-inline: 14px;
  }

  .header-actions {
    gap: 10px;
  }

  .lang-switch {
    gap: 4px;
    font-size: 11px;
  }
}

/* ─── Hero plein écran ───────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 780px;
  overflow: hidden;
  background: var(--sky); /* le temps que le hero charge : le ciel de l'illustration, déjà prélevé pour .theme-alt */
}

@media (min-width: 1024px) {
  .hero {
    min-height: max(810px, calc(100dvh - var(--header-h)));
  }
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(10, 8, 5, 0.7) 0%, rgba(10, 8, 5, 0.2) 45%, transparent 65%),
    linear-gradient(0deg, var(--void) 0%, transparent 18%);
}

.hero-content {
  position: absolute;
  z-index: 2;
  top: 40%;
  left: var(--gutter);
  right: var(--gutter);
  transform: translateY(-50%);
}

.hero h1 {
  max-width: 11em;
  font-size: clamp(36px, 5.2vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.hero-text {
  max-width: 460px;
  margin-top: 20px;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: 0.04em;
}

.hero .btn {
  min-width: min(359px, 100%);
  margin-top: 28px;
  font-size: 18px;
}

@media (max-width: 767px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(10, 8, 5, 0.7) 0%, rgba(10, 8, 5, 0.2) 50%, transparent 75%),
      linear-gradient(0deg, var(--void) 0%, transparent 18%);
  }

  .hero-media {
    object-position: 42% 50%;
  }

  .hero-content {
    top: 90px;
    transform: none;
    text-align: center;
  }

  .hero h1,
  .hero-text {
    margin-inline: auto;
  }
}

/* Accueil : astronaute assis à gauche, texte dans le ciel à droite */
.hero--astronaute .hero-media {
  object-position: 0% 50%;
}

.hero--astronaute::before {
  background:
    radial-gradient(ellipse 50% 50% at 82% 36%, rgba(10, 8, 5, 0.45) 0%, transparent 100%),
    linear-gradient(0deg, var(--void) 0%, transparent 18%);
}

.hero--astronaute .hero-content {
  top: 36%;
  left: auto;
  right: var(--gutter);
  text-align: right;
}

.hero--astronaute h1,
.hero--astronaute .hero-text {
  margin-left: auto;
}

@media (max-width: 767px) {
  .hero--astronaute .hero-media {
    top: auto;
    height: 62%;
    object-position: 4% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  }

  .hero--astronaute::before {
    background: linear-gradient(0deg, var(--void) 0%, transparent 12%);
  }

  .hero--astronaute .hero-content {
    top: 90px;
    left: var(--gutter);
    text-align: center;
  }

  .hero--astronaute h1,
  .hero--astronaute .hero-text {
    margin-inline: auto;
  }
}

/* ─── Bandeau des courtiers ──────────────────────────────────── */
.brokers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 56px;
  margin: 0;
  padding: 26px var(--gutter);
  border-bottom: 1px solid var(--rule);
  list-style: none;
}

.brokers li {
  color: var(--subtle);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ─── Sections ───────────────────────────────────────────────── */
.section {
  padding-block: var(--section-y);
}

.section-head {
  margin-bottom: clamp(34px, 5vw, 60px);
}

/* ─── Deux applications ──────────────────────────────────────── */
/* Ce bandeau de titre n'a plus de paragraphe sous le titre : sans
   respiration supplémentaire, le titre se retrouve collé aux cartes.
   Ciblé par « le .section-head suivi de .duo » plutôt que par l'id de la
   section, qui diffère entre l'accueil français (#plateforme) et sa
   traduction (#platform) — une seule règle couvre les deux. */
.section-head:has(+ .duo) {
  margin-bottom: clamp(60px, 8vw, 110px);
}

.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 60px);
}

.duo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.duo-media {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.duo-media img {
  width: 100%;
  aspect-ratio: 645 / 520;
  object-fit: cover;
}

.duo-item h3 {
  margin: 40px 0 20px;
  font-size: clamp(28px, 4.2vw, 60px);
  line-height: 0.92;
}

.duo-item > p {
  max-width: 460px;
  color: var(--muted);
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: 0.04em;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.duo-foot {
  max-width: 720px;
  margin: clamp(34px, 5vw, 60px) auto 0;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 767px) {
  .duo {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .duo-item h3 {
    margin: 21px 0 15px;
  }
}

/* ─── Bloc image et texte à mots-clés (crème) ────────────────── */
.feature-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-band-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 90px) var(--gutter);
}

.feature-band-text h2 {
  font-size: clamp(28px, 4.4vw, 60px);
  line-height: 0.95;
  text-align: center;
}

.bullets {
  margin: 36px 0;
  padding: 0;
  list-style: none;
}

.bullets li {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.4;
  text-align: center;
}

.bullets li:last-child {
  border-bottom: 1px solid var(--rule);
}

.bullets strong,
.proof-list strong {
  font-family: var(--mono);
  font-size: 0.82em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.feature-band-text .btn {
  align-self: center;
  width: 100%;
  max-width: 325px;
}

.feature-band-media img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

@media (max-width: 1023px) {
  .feature-band {
    grid-template-columns: 1fr;
  }

  .feature-band-media {
    order: -1;
  }

  .feature-band-media img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

/* ─── Formules ───────────────────────────────────────────────── */
.billing {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}

.billing-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 999px;
}

.billing-btn {
  min-width: 108px;
  padding: 8px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.billing-btn[aria-pressed="true"] {
  background: var(--gold-l);
  color: var(--void);
}

.billing-save {
  padding: 5px 12px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-l);
  font-family: var(--mono);
  font-size: 12px;
}

.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--fg);
}

.plan-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}

.plan-name {
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1;
}

/* La carte recommandée : bordure or et halo, comme les cartes mises en avant d’Itezia. */
.plan--featured {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-dim), transparent 60%), var(--card);
  box-shadow: 0 8px 32px var(--gold-glow);
}

.plan--featured .label {
  border-color: var(--gold);
  color: var(--gold-l);
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 24px;
}

.plan-amount {
  color: var(--gold-l);
  font-size: 48px;
  letter-spacing: -0.04em;
  line-height: 1;
}

.plan-period {
  color: var(--muted);
  font-size: 15px;
}

.plan-billed {
  margin-top: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

.plan-features {
  flex: 1;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.plan-features li {
  position: relative;
  padding: 9px 0 9px 26px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.4;
}

.plan-features li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

.plan-features li.is-off {
  color: var(--subtle);
  text-decoration: line-through;
}

.plan-features li.is-off::before {
  top: 18px;
  width: 11px;
  height: 0;
  border-left: 0;
  border-bottom: 2px solid var(--off);
  transform: none;
}

.plan-features li.is-note {
  color: var(--subtle);
}

.plan-features li.is-note::before {
  top: 16px;
  left: 4px;
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background: var(--off);
  transform: none;
}

@media (max-width: 1100px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .plans {
    grid-template-columns: 1fr;
  }
}

/* ─── Comparatif ─────────────────────────────────────────────── */
.compare {
  margin-top: 40px;
  text-align: center;
}

.compare-toggle svg {
  transition: transform 0.2s ease;
}

.compare-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.ctable-wrap {
  margin-top: 32px;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
}

.ctable {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15px;
}

.ctable th,
.ctable td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.ctable thead th {
  border-bottom-color: var(--rule);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-align: center;
}

.ctable thead th:first-child,
.ctable tbody th {
  text-align: left;
}

.ctable thead small {
  display: block;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
}

.ctable tbody th {
  font-weight: 400;
}

.ctable td {
  color: var(--muted);
  text-align: center;
}

.ctable .is-featured {
  background: rgba(212, 175, 90, 0.08);
}

.ctable .ct-group th {
  padding-top: 26px;
  color: var(--gold-l);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ctable tr:last-child th,
.ctable tr:last-child td {
  border-bottom: 0;
}

.yes,
.no {
  display: inline-block;
  vertical-align: middle;
}

.yes {
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--gold-l);
  border-bottom: 2px solid var(--gold-l);
  transform: rotate(-45deg) translate(1px, -2px);
}

.no {
  width: 12px;
  height: 2px;
  background: var(--off);
}

/* ─── Fonctionnalités ────────────────────────────────────────── */
.rows {
  border-top: 1px solid var(--rule);
}

.row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  padding-block: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--rule);
}

.row--reverse .row-media {
  order: 2;
}

.row-media {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.row-media img,
.row-media video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.row-body h3 {
  margin-top: 18px;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 0.98;
}

.row-body h3:first-child {
  margin-top: 0;
}

.row-body > p {
  margin-top: 18px;
  color: var(--muted);
  font-size: 17px;
}

.row-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.row-list li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .row {
    grid-template-columns: 1fr;
  }

  .row--reverse .row-media {
    order: 0;
  }
}

/* ─── Image et liste (« on a pensé à tout », crème) ──────────── */
.proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.proof-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vw, 80px);
  background: var(--void);
}

.proof-media img {
  width: min(460px, 100%);
  border-radius: var(--radius);
}

.proof-body {
  padding: clamp(40px, 5vw, 80px) var(--gutter);
}

.proof-body h2 {
  font-size: clamp(28px, 4.4vw, 60px);
  line-height: 0.95;
}

.proof-list {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.proof-list li {
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.35;
}

@media (max-width: 1023px) {
  .proof {
    grid-template-columns: 1fr;
  }
}

/* ─── Bloc de marque (crème) ─────────────────────────────────── */
.statement {
  padding: clamp(80px, 12vw, 180px) var(--gutter);
  text-align: center;
}

.statement p {
  max-width: 900px;
  margin-inline: auto;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.statement .btn {
  margin-top: 40px;
}

/* ─── FAQ ────────────────────────────────────────────────────── */
.faq {
  max-width: 980px;
  margin-inline: auto;
  border-top: 1px solid var(--rule);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  position: relative;
  padding: 26px 56px 26px 0;
  font-size: clamp(19px, 2vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
}

.faq summary:hover {
  color: var(--gold-l);
}

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

.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--gold-l);
  transition: transform 0.2s ease;
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0);
}

.faq-a {
  max-width: 760px;
  padding: 0 56px 28px 0;
  color: var(--muted);
  font-size: 16px;
}

/* ─── Pied de page en grille (crème) ─────────────────────────── */
.footer {
  border-top: 1px solid var(--rule);
}

.footer-cta {
  display: grid;
  grid-template-columns: 2fr 6fr 2fr;
  min-height: 125px;
  color: var(--fg);
  text-decoration: none;
}

.footer-cta-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-right: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.footer-cta-main {
  display: flex;
  align-items: center;
  padding: 0 36px;
  font-size: clamp(27px, 4vw, 53px);
  letter-spacing: -0.03em;
  line-height: 1;
}

.footer-cta-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--void);
  color: var(--gold-l);
}

.footer-cta-arrow svg {
  width: 56px;
  height: 56px;
  transition: transform 0.1s linear;
}

.footer-cta:hover .footer-cta-arrow svg {
  transform: scale(1.1) translateX(4px);
}

.footer-cta:hover .footer-cta-main {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 3fr 3fr 2fr;
  border-top: 1px solid var(--rule);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  background: var(--void);
}

.footer-brand .brand {
  color: #f2efe8;
}

.footer-brand p {
  color: #a8a49c;
  font-size: 14px;
}

.footer-col {
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule);
  list-style: none;
}

.footer-col li {
  border-bottom: 1px solid var(--rule);
}

.footer-col li:last-child {
  border-bottom: 0;
}

.footer-col a,
.footer-col span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 28px;
  color: var(--fg);
  font-size: 14px;
  text-decoration: none;
}

.footer-col--nav a {
  font-weight: 700;
  text-transform: uppercase;
  transition: background-color 0.1s linear, color 0.1s linear;
}

.footer-col--nav a:hover {
  background: var(--void);
  color: var(--gold-l);
}

.footer-col--legal a:hover,
.footer-col--contact a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-col span a {
  display: inline;
  min-height: 0;
  padding: 0;
}

.footer-col b {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer-bottom {
  padding: 16px var(--gutter);
  border-top: 1px solid var(--rule);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-col {
    border-top: 1px solid var(--rule);
  }

  .footer-col--nav {
    border-left: 0;
  }

  .footer-col--contact {
    grid-column: 1 / -1;
    border-left: 0;
  }
}

@media (max-width: 767px) {
  .footer-cta {
    grid-template-columns: 1fr 88px;
    min-height: 0;
  }

  .footer-cta-label {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .footer-cta-main {
    padding: 22px 20px;
  }

  .footer-cta-arrow svg {
    width: 36px;
    height: 36px;
  }

  .footer-col a,
  .footer-col span {
    padding: 0 20px;
  }
}

/* ─── Bandeau cookies ────────────────────────────────────────── */
.cookie-notice {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: grid;
  gap: 14px;
  max-width: 460px;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  animation: cookieRise 0.35s ease both;
}

@media (min-width: 560px) {
  .cookie-notice {
    left: 24px;
    right: auto;
    bottom: 24px;
  }
}

.cookie-notice-text {
  color: var(--fg);
  font-size: 14px;
  line-height: 1.55;
}

.cookie-notice-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.cookie-notice-more {
  color: var(--muted);
  font-size: 14px;
  text-underline-offset: 3px;
}

.cookie-notice-ok {
  min-height: 36px;
  padding: 6px 22px;
  border: 1px solid var(--gold-l);
  border-radius: 999px;
  background: var(--gold-l);
  color: var(--void);
  font-size: 14px;
}

.cookie-notice-ok:hover {
  border-color: var(--gold-l);
  background: var(--gold-l);
}

.cookie-notice.is-leaving {
  animation: cookieSink 0.25s ease forwards;
}

@keyframes cookieRise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes cookieSink {
  to {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* ─── Mouvement réduit ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}