/* ============================================================
   LIINXE — Main Stylesheet
   Dark Luxury / Geometric Precision
   ============================================================ */

/* --- Google Fonts ---
   Cormorant Garamond : logo / titres display
   Inter              : corps, nav, UI
   ---------------------------------------------------------- */

/* --- Variables -------------------------------------------- */
:root {
  /* Colors */
  --black:        #0d0d0d;
  --surface:      #111111;
  --surface-2:    #181818;
  --surface-3:    #1f1f1f;
  --gold:         #c9a84c;
  --gold-light:   #dfc06e;
  --gold-dim:     rgba(201, 168, 76, 0.15);
  --gold-dim-2:   rgba(201, 168, 76, 0.08);
  --white:        #f0f0f0;
  --grey:         #888888;
  --grey-light:   #b0b0b0;
  --error:        #e05252;
  --success:      #52a852;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  48px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  /* Layout */
  --container:    1140px;
  --header-h:     68px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;

  /* Transitions */
  --ease:         0.2s ease;
  --ease-slow:    0.4s ease;
}

/* --- Reset ------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background-color: var(--black);
  color: var(--white);
  line-height: 1.6;
  padding-top: var(--header-h);
  min-height: 100vh;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* --- Container -------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* --- Typography ------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--white);
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1rem; font-family: var(--font-body); font-weight: 700; }

p { color: var(--grey-light); line-height: 1.7; }

.text-gold  { color: var(--gold); }
.text-grey  { color: var(--grey); }
.text-center { text-align: center; }
.text-small  { font-size: 0.85rem; }

/* --- Buttons ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 22px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--gold);
  color: #0d0d0d;
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

.btn-outline {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.btn-outline:hover {
  background: var(--gold-dim-2);
}

.btn-sm {
  padding: 8px 20px;
  font-size: 0.8rem;
}

.btn-ghost {
  background: transparent;
  color: var(--grey-light);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--white); }

.btn-lg {
  padding: 13px 30px;
  font-size: 0.95rem;
}

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

/* --- Section ---------------------------------------------- */
.section {
  padding: var(--space-3xl) 0;
}
.section-sm {
  padding: var(--space-xl) 0;
}
.section-title {
  margin-bottom: var(--space-xl);
}
.section-title h2 {
  margin-bottom: var(--space-sm);
}
.section-title p {
  font-size: 1.05rem;
  max-width: 560px;
}
.section-title.centered {
  text-align: center;
}
.section-title.centered p {
  margin: 0 auto;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(17, 17, 17, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gold-dim);
  transition: background var(--ease-slow), box-shadow var(--ease-slow);
}

.site-header.scrolled {
  background: rgba(17, 17, 17, 0.98);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.header-inner {
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

/* Logo */
.header-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  flex-shrink: 0;
}

.logo-img {
  height: 32px;
  width: auto;
  display: block;
  transition: opacity var(--ease);
}
.header-logo:hover .logo-img { opacity: 0.85; }

.logo-sub {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
  line-height: 1.4;
}

/* Nav desktop */
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex: 1;
  justify-content: center;
}

.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grey-light);
  letter-spacing: 0.02em;
  position: relative;
  transition: color var(--ease);
  padding: 4px 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width var(--ease);
}

.nav-link:hover {
  color: var(--white);
}
.nav-link:hover::after { width: 100%; }

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
}

.burger span {
  display: block;
  height: 1.5px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease), width var(--ease);
  transform-origin: center;
}

.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   MOBILE NAV
   ============================================================ */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(13, 13, 13, 0.98);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease-slow);
}

.mobile-nav.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  text-align: center;
}

.mobile-nav-link {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.04em;
  transition: color var(--ease);
}
.mobile-nav-link:hover { color: var(--gold); }

.mobile-nav-cta {
  display: inline-block;
  margin-top: var(--space-md);
  padding: 12px 32px;
  background: var(--gold);
  color: #0d0d0d;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background var(--ease);
}
.mobile-nav-cta:hover { background: var(--gold-light); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--gold-dim);
  margin-top: var(--space-3xl);
}

.footer-top {
  padding: var(--space-2xl) 0 var(--space-xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* Footer brand */
.footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-md);
}

.footer-logo-icon {
  height: 36px;
  width: auto;
  display: block;
  opacity: 0.9;
}

.footer-logo-mark {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--white);
}

.footer-tagline {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--grey);
  margin-bottom: var(--space-lg);
}

.footer-copy {
  font-size: 0.78rem;
  color: var(--grey);
  opacity: 0.6;
}

/* Footer columns */
.footer-col-title {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-lg);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-col a {
  font-size: 0.875rem;
  color: var(--grey);
  transition: color var(--ease);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.footer-col a:hover { color: var(--white); }

.footer-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Footer — Bloc Avertissements */
.footer-warnings {
  background: #0a0a0a;
  border-top: 1px solid rgba(201,168,76,0.35);
  border-bottom: 1px solid rgba(201,168,76,0.12);
}

.footer-warnings-inner {
  padding: 48px var(--space-lg);
  max-width: 820px;
}

.footer-warnings-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.footer-warnings-icon {
  color: var(--gold);
  flex-shrink: 0;
}

.footer-warnings-title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--gold);
  text-transform: uppercase;
}

.footer-warnings-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-warnings-list li {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--grey-light);
  padding-left: 1.2em;
  position: relative;
}

.footer-warnings-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
}

.footer-warnings-btn {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

/* Footer bar */
.footer-bar {
  padding: var(--space-xs) 0 0;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.footer-bar-line {
  height: 0;
}

.footer-disclaimer {
  margin-top: var(--space-xs);
  margin-bottom: 40px;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--grey);
  max-width: 860px;
}

/* ============================================================
   PAGE INVESTIR — HERO (Bloc 1)
   ============================================================ */

.inv-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.inv-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.inv-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.inv-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(13,13,13,0.88) 0%,
    rgba(13,13,13,0.65) 60%,
    rgba(13,13,13,0.45) 100%
  );
}

.inv-hero-content {
  position: relative;
  z-index: 1;
  padding: 140px var(--space-lg) 100px;
}

.inv-hero-text {
  max-width: 680px;
}

.inv-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--white);
  margin: var(--space-md) 0 var(--space-lg);
  letter-spacing: 0.01em;
}

.inv-hero-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-style: italic;
  color: var(--gold-light);
  margin-bottom: var(--space-lg);
  letter-spacing: 0.03em;
}

.inv-hero-body {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(240,240,240,0.75);
  max-width: 520px;
  margin-bottom: var(--space-xl);
}

/* PAGE INVESTIR — BLOC 2 */

.inv-b2 {
  background: var(--black);
  padding: var(--space-3xl) 0;
}

.inv-b2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Colonne 1 — visuel placeholder */
.inv-b2-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-b2-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  border: 1px dashed rgba(201,168,76,0.25);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  background: var(--surface);
  color: var(--grey);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Colonne 2 — texte */
.inv-b2-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--white);
  margin: var(--space-lg) 0;
}

.inv-b2-body {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--grey-light);
  margin-bottom: var(--space-md);
}

.inv-b2-body strong {
  color: var(--white);
}

.inv-b2-list {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.inv-b2-list li {
  font-size: 0.9rem;
  color: var(--grey-light);
  padding-left: 1.2em;
  position: relative;
}

.inv-b2-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* PAGE INVESTIR — BLOC 3 */

.inv-b3 {
  background: var(--surface);
  padding: var(--space-3xl) 0;
}

.inv-b3-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.inv-b3-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-b3-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--white);
  margin: var(--space-lg) 0;
}

.inv-b3-title sup {
  font-size: 0.55em;
  vertical-align: super;
  color: var(--grey);
}

.inv-b3-body {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--grey-light);
  margin-bottom: var(--space-md);
}

.inv-b3-body strong {
  color: var(--white);
}

.inv-b3-footnote {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--grey);
  border-left: 2px solid rgba(201,168,76,0.3);
  padding-left: var(--space-md);
  margin-top: var(--space-xl);
  font-style: italic;
}

/* PAGE INVESTIR — BLOC 4 (Chiffres clés) */

.inv-b4 {
  background: var(--surface-2);
  border-top: 1px solid rgba(201,168,76,0.15);
  border-bottom: 1px solid rgba(201,168,76,0.15);
  padding: var(--space-2xl) 0;
}

.inv-b4-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
}

.inv-b4-divider {
  width: 1px;
  height: 80px;
  background: rgba(201,168,76,0.2);
  margin: 0 var(--space-xl);
}

.inv-b4-stat {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}

.inv-b4-number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: var(--space-md);
}

.inv-count {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
}

.inv-b4-prefix,
.inv-b4-suffix {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}

.inv-b4-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.03em;
  margin-bottom: var(--space-xs);
}

.inv-b4-desc {
  font-size: 0.78rem;
  color: var(--grey);
  line-height: 1.5;
}

/* PAGE INVESTIR — BLOC 5 */

.inv-b5 {
  background: var(--black);
  padding: var(--space-3xl) 0;
}

.inv-b5-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}

.inv-b5-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--white);
  margin: var(--space-lg) 0;
}

.inv-b5-body {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--grey-light);
  margin-bottom: var(--space-md);
}

.inv-b5-body strong {
  color: var(--white);
}

/* Accordion steps */
.inv-b5-accordion {
  display: flex;
  flex-direction: column;
}

.inv-acc-item {
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.inv-acc-item:first-child {
  border-top: 1px solid rgba(255,255,255,0.07);
}

.inv-acc-trigger {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  text-align: left;
  color: var(--white);
  transition: color 0.2s;
}

.inv-acc-trigger:hover {
  color: var(--gold-light);
}

.inv-acc-num {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold);
  min-width: 28px;
  font-weight: 600;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.inv-acc-label {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.inv-acc-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
}

.inv-acc-icon::before,
.inv-acc-icon::after {
  content: '';
  position: absolute;
  background: var(--gold);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.inv-acc-icon::before {
  width: 12px;
  height: 1.5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.inv-acc-icon::after {
  width: 1.5px;
  height: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.inv-acc-item.open .inv-acc-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.inv-acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.inv-acc-item.open .inv-acc-panel {
  max-height: 200px;
}

.inv-acc-panel p {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--grey-light);
  padding: 0 0 var(--space-lg) calc(28px + var(--space-md));
}

/* PAGE INVESTIR — BLOC 6a (Manifeste sélection) */

.inv-b6-manifesto {
  background: var(--black);
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.inv-b6-manifesto-inner {
  max-width: 720px;
  text-align: center;
}

.inv-b6-m-hook {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-style: italic;
  color: var(--white);
  line-height: 1.4;
  margin: var(--space-xl) 0 var(--space-lg);
}

.inv-b6-m-body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--grey-light);
  margin-bottom: var(--space-md);
}

.inv-b6-m-body strong {
  color: var(--white);
}

.inv-b6-m-lead {
  font-size: 0.9rem;
  color: var(--grey);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.03em;
}

.inv-b6-m-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.inv-b6-m-list li {
  font-size: 0.9rem;
  color: var(--gold-light);
  font-style: italic;
}

.inv-b6-m-list li::before {
  content: '— ';
  color: var(--gold);
}

/* PAGE INVESTIR — BLOC 6b (Carousel opportunités) */

.inv-b6 {
  background: var(--surface);
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.inv-b6-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.inv-b6-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 600;
  color: var(--white);
}

/* Carousel */
.inv-carousel-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.inv-carousel-viewport {
  overflow: hidden;
}

.inv-carousel-track {
  display: flex;
  gap: 20px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Carte : 3 visibles sur desktop */
.inv-opp-card {
  flex: 0 0 calc((100% - 40px) / 3);
  background: var(--surface-2);
  border: 1px solid rgba(201,168,76,0.12);
  border-top: 3px solid rgba(201,168,76,0.4);
  border-radius: 2px;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: border-color 0.2s;
}

.inv-opp-card:hover {
  border-color: rgba(201,168,76,0.35);
  border-top-color: var(--gold);
}

.inv-opp-num {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.inv-opp-hook {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--grey-light);
  font-style: italic;
}

/* Contrôles */
.inv-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
}

.inv-carousel-btn {
  background: none;
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
  width: 40px;
  height: 40px;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}

.inv-carousel-btn:hover {
  background: var(--gold-dim);
  border-color: var(--gold);
}

.inv-carousel-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.inv-carousel-counter {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--grey);
  min-width: 60px;
  text-align: center;
  letter-spacing: 0.05em;
}

/* PAGE INVESTIR — BLOC 7 (Modalités) */

.inv-b7 {
  background: var(--surface-2);
  padding: var(--space-3xl) 0;
}

.inv-b7-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.inv-b7-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-b7-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--white);
  margin: var(--space-lg) 0 var(--space-xl);
}

/* Deux cartes côte à côte */
.inv-b7-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.inv-b7-card {
  background: var(--surface-3);
  border: 1px solid rgba(201,168,76,0.15);
  border-top: 3px solid var(--gold);
  border-radius: 2px;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: border-color 0.2s;
}

.inv-b7-card:hover {
  border-color: rgba(201,168,76,0.4);
  border-top-color: var(--gold-light);
}

.inv-b7-card-rate {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.01em;
}

.inv-b7-card-details {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.inv-b7-card-details li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.82rem;
  color: var(--grey-light);
  line-height: 1.5;
}

.inv-b7-pct {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
}

.inv-b7-plus {
  font-size: 1rem;
  color: var(--gold);
  font-weight: 600;
  padding: 2px 0;
}

.inv-b7-card-mention {
  font-size: 0.72rem;
  color: var(--grey);
  font-style: italic;
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: var(--space-sm);
}

/* Bouton CTA flottant */
.inv-cta-float {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 900;
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 2px;
  box-shadow: 0 4px 24px rgba(201,168,76,0.35);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.inv-cta-float:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(201,168,76,0.5);
}

/* ============================================================
   BLOC 12 — AVERTISSEMENTS
   ============================================================ */

.warnings {
  background: var(--surface-2);
  border-top: 1px solid rgba(201,168,76,0.2);
  border-bottom: 1px solid rgba(201,168,76,0.2);
}

.warnings-inner {
  padding: 60px var(--space-lg);
  max-width: 820px;
}

.warnings-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

.warnings-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.warnings-list li {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--grey-light);
  padding-left: 1.2em;
  position: relative;
}

.warnings-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
}

.warnings-btn {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 900px) {
  .header-nav { display: none; }
  .burger { display: flex; }
  .header-actions .btn-primary { display: none; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl) var(--space-lg);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Mobile */
@media (max-width: 580px) {
  :root {
    --space-lg: 20px;
    --space-xl: 36px;
    --space-2xl: 56px;
    --space-3xl: 80px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .footer-brand { grid-column: auto; }

  .site-footer { margin-top: var(--space-2xl); }
}

/* ============================================================
   HERO — Bloc 1
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Background image */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Overlay : fort à gauche, s'allège vers la droite + vignette basse */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,  rgba(13,13,13,0.93) 0%, rgba(13,13,13,0.68) 52%, rgba(13,13,13,0.25) 100%),
    linear-gradient(to top,    rgba(13,13,13,0.80) 0%, transparent 45%);
}

/* Content */
.hero-content {
  position: relative;
  z-index: 1;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.hero-text {
  max-width: 640px;
}

/* Eyebrow label */
.hero-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-lg);
}

/* H1 */
.hero-text h1 {
  margin-bottom: var(--space-lg);
  line-height: 1.08;
}

/* Subtitle — italic display */
.hero-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 400;
  font-style: italic;
  color: var(--grey-light);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

/* Body paragraph */
.hero-body {
  font-size: 1rem;
  color: var(--grey-light);
  max-width: 500px;
  margin-bottom: var(--space-xl);
  line-height: 1.8;
}

/* CTA buttons */
.hero-cta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

/* Mention discrète */
.hero-mention {
  font-size: 0.78rem;
  color: var(--grey);
  letter-spacing: 0.01em;
}

/* Scroll hint */
.hero-scroll {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.5;
  transition: opacity var(--ease);
}
.hero-scroll:hover { opacity: 0.9; }

.hero-scroll span {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}

.hero-scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.35; transform: scaleY(0.85); }
  50%       { opacity: 1;    transform: scaleY(1.1);  }
}

/* --- Hero responsive ---------------------------------------- */
@media (max-width: 900px) {
  .hero-overlay {
    background:
      linear-gradient(to bottom, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0.90) 100%);
  }
  .hero-text  { max-width: 100%; }
  .hero-body  { max-width: 100%; }
}

@media (max-width: 580px) {
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-scroll { display: none; }
}

/* ============================================================
   VALUE CHAIN — Bloc 2
   ============================================================ */
.value-chain {
  background: var(--surface);
  border-top: 1px solid var(--gold-dim);
}

.vc-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.section-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

/* Grid : col — divider — col */
.vc-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 var(--space-2xl);
  align-items: start;
}

.vc-divider {
  background: var(--gold-dim);
  align-self: stretch;
  min-height: 200px;
}

.vc-card {
  padding: 0 var(--space-lg);
}

/* Icon cercle */
.vc-icon {
  width: 52px;
  height: 52px;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-bottom: var(--space-lg);
  transition: background var(--ease), border-color var(--ease);
}
.vc-card:hover .vc-icon {
  background: var(--gold-dim);
  border-color: var(--gold);
}

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

/* Title */
.vc-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin-bottom: var(--space-lg);
}

/* Body */
.vc-body {
  font-size: 0.95rem;
  color: var(--grey-light);
  line-height: 1.8;
  margin-bottom: var(--space-lg);
}

.vc-body strong {
  color: var(--white);
  font-weight: 600;
}

/* Bullet list */
.vc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.vc-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--grey);
  line-height: 1.6;
}

.vc-list li::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 14px;
  height: 1px;
  background: var(--gold);
  margin-top: 0.62em;
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 768px) {
  .vc-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl) 0;
  }
  .vc-divider {
    width: 40px;
    min-height: 1px;
    height: 1px;
    justify-self: center;
    align-self: auto;
  }
  .vc-card {
    padding: 0;
  }
}

/* ============================================================
   PROBLEM & MISSION — Bloc 4
   ============================================================ */
.problem-mission {
  background: var(--black);
  border-top: 1px solid var(--gold-dim);
}

/* Grid 2 colonnes */
.pm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

/* --- Colonne texte ----------------------------------------- */
.pm-text .section-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-sm);
}

.pm-text .gold-line {
  margin-bottom: var(--space-lg);
}

.pm-text h2 {
  margin-bottom: var(--space-lg);
}

.pm-body {
  margin-bottom: var(--space-xl);
  line-height: 1.8;
}

.pm-body strong {
  color: var(--white);
  font-weight: 600;
}

/* Encart Mission */
.pm-mission {
  border-left: 2px solid var(--gold);
  padding-left: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.pm-mission-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.pm-mission p {
  font-size: 0.95rem;
  line-height: 1.8;
}

/* CTA + mention */
.pm-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.pm-mention {
  font-size: 0.78rem;
  color: var(--grey);
}

/* --- Colonne image ----------------------------------------- */
.pm-image {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--gold-dim);
}

.pm-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}

.pm-image:hover img {
  transform: scale(1.03);
}

/* Léger dégradé bas pour fondre l'image dans le fond */
.pm-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(13,13,13,0.35) 100%);
  pointer-events: none;
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 900px) {
  .pm-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .pm-image {
    order: -1;
  }
}

/* ============================================================
   STATS BAR — Bloc 3
   ============================================================ */
.stats-bar {
  background: var(--surface-3);
  border-top:    1px solid var(--gold-dim);
  border-bottom: 1px solid var(--gold-dim);
  padding: var(--space-2xl) 0;
}

.stats-grid {
  display: flex;
  align-items: stretch;
}

/* Séparateurs verticaux */
.stat-sep {
  flex-shrink: 0;
  width: 1px;
  background: var(--gold-dim);
  margin: 0 var(--space-xl);
  align-self: stretch;
  min-height: 60px;
}

/* Chaque stat */
.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 0 var(--space-md);
}

/* Wrapper flex du chiffre */
.stat-number {
  display: flex;
  align-items: flex-start;
  line-height: 1;
  margin-bottom: 8px;
}

/* Chiffre principal */
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.01em;
}

/* --- Symboles des stats (contrôle individuel) -------------- */

/* % — après les chiffres */
.stat-pct {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 2.4rem);   /* ← taille */
  font-weight: 400;
  color: var(--gold-light);
  line-height: 1;
  margin-top: 1.3rem;                       /* ← position verticale */
  margin-left: 0.15rem;                     /* ← espace avec le chiffre */
}

/* + — après 600 */
.stat-plus {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.4vw, 2.9rem); /* ← taille */
  font-weight: 400;
  color: var(--gold-light);
  line-height: 1;
  margin-top: 0.7rem;                       /* ← position verticale */
  margin-left: 0.15rem;                     /* ← espace avec le chiffre */
}

/* < — avant 3 */
.stat-lt {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.5vw, 3.0rem); /* ← taille */
  font-weight: 400;
  color: var(--gold-light);
  line-height: 1;
  margin-top: 1.0rem;                       /* ← position verticale */
  margin-right: 0.15rem;                    /* ← espace avec le chiffre */
}

/* Tiret 18–50 : même taille que les chiffres */
.stat-dash {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  font-weight: 400;
  color: var(--gold-light);
  line-height: 1;
  padding: 0 0.05em;
}

/* Label principal */
.stat-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* Sous-label secondaire */
.stat-sub {
  font-size: 0.72rem;
  color: var(--grey);
  letter-spacing: 0.01em;
}

/* --- Responsive ------------------------------------------- */
@media (max-width: 768px) {
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl) 0;
  }
  .stat-sep {
    display: none;
  }
  .stat-item {
    padding: 0 var(--space-sm);
    border-right: 1px solid var(--gold-dim);
  }
  /* Retire la bordure droite des items en colonne 2 */
  .stat-item:nth-child(4),
  .stat-item:nth-child(8) {
    border-right: none;
  }
  /* Ajoute une ligne en dessous de la première rangée */
  .stat-item:nth-child(1),
  .stat-item:nth-child(3) {
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--gold-dim);
  }
}

@media (max-width: 400px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--gold-dim);
    padding-bottom: var(--space-lg);
  }
  .stat-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ============================================================
   THEMES — Bloc 5
   ============================================================ */
.themes {
  background: var(--surface);
  border-top: 1px solid var(--gold-dim);
}

.themes .section-title {
  margin-bottom: var(--space-2xl);
}

.themes .section-title h2 {
  margin-top: var(--space-sm);
}

/* Grille 3 cartes */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

/* Carte */
.theme-card {
  background: var(--surface-2);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}

.theme-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(201, 168, 76, 0.08);
}

/* Icône */
.theme-icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
  transition: background var(--ease), border-color var(--ease);
}

.theme-card:hover .theme-icon {
  background: var(--gold-dim);
  border-color: var(--gold);
}

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

/* Titre carte */
.theme-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
}

/* Corps */
.theme-body {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.7;
  flex: 1;
}

/* Exemple discret */
.theme-example {
  display: inline-block;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--grey);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* Bouton centré */
.themes-cta {
  text-align: center;
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 900px) {
  .themes-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 580px) and (max-width: 900px) {
  .themes-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
  /* La 3e carte prend toute la largeur sur 2 colonnes */
  .theme-card:last-child {
    grid-column: 1 / -1;
    max-width: 480px;
    justify-self: center;
    width: 100%;
  }
}

/* ============================================================
   TESTIMONIALS — Bloc 6
   ============================================================ */
.testimonials {
  background: var(--black);
  border-top: 1px solid var(--gold-dim);
}

.testimonials .section-title {
  margin-bottom: var(--space-2xl);
}

/* Carousel wrapper */
.testi-carousel {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
}

/* Track — flex, animé par translateX */
.testi-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.testi-slide {
  min-width: 100%;
  padding: 0 var(--space-xl);
  box-sizing: border-box;
}

/* Carte */
.testi-card {
  background: var(--surface);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-md);
  padding: var(--space-2xl) var(--space-xl);
  position: relative;
  text-align: center;
}

/* Grand guillemet décoratif */
.testi-quote-mark {
  font-family: var(--font-display);
  font-size: 8rem;
  line-height: 0.6;
  color: var(--gold);
  opacity: 0.18;
  position: absolute;
  top: var(--space-lg);
  left: var(--space-xl);
  pointer-events: none;
  user-select: none;
}

/* Citation */
.testi-quote {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  color: var(--white);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 1;
}

/* Auteur */
.testi-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

/* Avatar placeholder initiales */
.testi-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold);
  flex-shrink: 0;
}

.testi-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.testi-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
}

.testi-role {
  font-size: 0.78rem;
  color: var(--grey);
}

/* Flèches */
.testi-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  background: var(--surface);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
  z-index: 2;
}
.testi-arrow:hover {
  background: var(--gold-dim);
  border-color: var(--gold);
}
.testi-arrow svg { width: 18px; height: 18px; }
.testi-prev { left: 0; }
.testi-next { right: 0; }

/* Dots */
.testi-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.testi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--gold-dim);
  cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}
.testi-dot.active {
  background: var(--gold);
  transform: scale(1.25);
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 580px) {
  .testi-slide { padding: 0; }
  .testi-card  { padding: var(--space-xl) var(--space-lg); }
  .testi-arrow { display: none; }
  .testi-quote-mark { font-size: 5rem; }
}

/* ============================================================
   MODEL & TARIFS — Bloc 7
   ============================================================ */
.model-section {
  background: var(--surface);
  border-top: 1px solid var(--gold-dim);
}

.model-section .section-title {
  margin-bottom: var(--space-2xl);
}

/* --- 3 features -------------------------------------------- */
.model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.model-feature {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}

.model-feature-icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
  transition: background var(--ease), border-color var(--ease);
}
.model-feature:hover .model-feature-icon {
  background: var(--gold-dim);
  border-color: var(--gold);
}
.model-feature-icon svg { width: 20px; height: 20px; }

.model-feature-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 6px;
  line-height: 1.2;
}

.model-feature-body {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.7;
}
.model-feature-body strong {
  color: var(--white);
  font-weight: 600;
}

/* --- Encart Transparence ----------------------------------- */
.model-encart {
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  box-shadow: 0 0 40px rgba(201, 168, 76, 0.06);
}

.model-encart-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}
.model-encart-icon svg { width: 24px; height: 24px; }

.model-encart-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-md);
}

.model-encart-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.model-encart-body p {
  font-size: 0.95rem;
  line-height: 1.8;
}
.model-encart-body strong {
  color: var(--white);
  font-weight: 600;
}

.model-encart-highlight {
  color: var(--gold-light) !important;
  font-weight: 500 !important;
}

.model-encart-body .btn {
  align-self: flex-start;
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 900px) {
  .model-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .model-encart {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ============================================================
   WEBINAR — Bloc 8
   ============================================================ */
.webinar {
  background: var(--black);
  border-top: 1px solid var(--gold-dim);
  position: relative;
  overflow: hidden;
}

/* Halo gold radial au centre */
.webinar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(201,168,76,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.webinar-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  gap: var(--space-md);
}

/* Icône calendrier */
.webinar-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}
.webinar-icon svg { width: 26px; height: 26px; }

.webinar-inner .section-eyebrow { margin-bottom: 0; }

/* Titre */
.webinar-title {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

/* Corps */
.webinar-body {
  font-size: 1.05rem;
  color: var(--grey-light);
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: var(--space-md);
}
.webinar-body strong { color: var(--white); font-weight: 600; }

/* Bouton */
.webinar-btn { margin-bottom: var(--space-sm); }

/* Avertissement SPAM */
.webinar-spam {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--grey);
  font-style: italic;
}
.webinar-spam svg { flex-shrink: 0; color: var(--grey); }

/* ============================================================
   FOUNDER — Bloc 9
   ============================================================ */
.founder {
  background: var(--surface);
  border-top: 1px solid var(--gold-dim);
}

/* Grid : photo (40%) | citation (60%) */
.founder-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-2xl);
  align-items: center;
}

/* --- Photo ------------------------------------------------- */
.founder-photo {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--gold-dim);
  filter: grayscale(20%);
  transition: filter var(--ease-slow);
}
.founder-photo:hover { filter: grayscale(0%); }

.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Dégradé bas pour fondre avec le fond */
.founder-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(17,17,17,0.5) 100%);
  pointer-events: none;
}

/* --- Citation ---------------------------------------------- */
.founder-quote-wrap {
  position: relative;
  padding-left: var(--space-lg);
}

/* Grand guillemet décoratif */
.founder-quote-mark {
  font-family: var(--font-display);
  font-size: 10rem;
  line-height: 0.7;
  color: var(--gold);
  opacity: 0.15;
  position: absolute;
  top: -var(--space-md);
  left: 0;
  pointer-events: none;
  user-select: none;
}

/* Conteneur de la citation — devient un layout neutre */
.founder-quote {
  margin: 0 0 var(--space-xl);
  position: relative;
  z-index: 1;
  border-left: 2px solid var(--gold);
  padding-left: var(--space-xl);
}

/* Hook — phrase d'accroche, Cormorant doré italique */
.founder-lead {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  line-height: 1.4;
  margin: 0 0 var(--space-xl);
  letter-spacing: 0.005em;
}

/* Corps du texte — Inter, lecture confortable */
.founder-text {
  font-family: var(--font-body);
  font-size: 1.025rem;
  font-weight: 400;
  color: var(--grey-light);
  line-height: 1.85;
  margin: 0 0 var(--space-lg);
}

/* Petite emphase intra-paragraphe (ex: "LIINXE est né de cette conviction :") */
.founder-text-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--white);
  display: inline;
  margin-right: 4px;
}

/* Pull-quotes intermédiaires — phrases-clés isolées */
.founder-emphasis {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  line-height: 1.45;
  margin: var(--space-md) 0 var(--space-lg);
  letter-spacing: 0.005em;
}

/* Punchline finale — bloc isolé avec séparateur doré */
.founder-finale {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
}

.founder-finale-line {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--gold);
  margin-bottom: var(--space-lg);
}

.founder-finale-text {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.85vw, 1.45rem);
  font-style: italic;
  font-weight: 400;
  color: var(--white);
  line-height: 1.55;
  margin: 0 0 var(--space-md);
}

.founder-finale-text:last-child { margin-bottom: 0; }

.founder-finale-text strong {
  color: var(--gold);
  font-weight: 600;
  font-style: italic;
}

/* Attribution */
.founder-attribution {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: var(--space-xl);
}

.founder-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.founder-role {
  font-size: 0.8rem;
  color: var(--grey);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 900px) {
  .founder-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .founder-photo {
    max-width: 280px;
    margin: 0 auto;
    aspect-ratio: 2 / 3;
  }
  .founder-quote-wrap {
    padding-left: 0;
  }
  .founder-quote-mark {
    display: none;
  }
}

/* ============================================================
   MANIFESTE — Bloc 10
   ============================================================ */
.manifeste {
  background: var(--surface-2);
  border-top: 1px solid var(--gold-dim);
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
}

/* Halo décoratif en arrière-plan */
.manifeste::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* --- En-tête --------------------------------------------- */
.manifeste-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-2xl);
}

.manifeste-title {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.manifeste-intro {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--grey-light);
  margin-bottom: var(--space-lg);
}

.manifeste-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.02em;
}

/* --- Accordéon -------------------------------------------- */
.manifeste-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.accordion-item {
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--ease);
}
.accordion-item.open {
  border-color: rgba(201,168,76,0.4);
}

/* Trigger */
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: background var(--ease);
  border: none;
  font-family: inherit;
}
.accordion-trigger:hover,
.accordion-item.open .accordion-trigger {
  background: var(--surface-3);
}

.accordion-num {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold);
  opacity: 0.6;
  flex-shrink: 0;
  min-width: 28px;
}

.accordion-label {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
  transition: color var(--ease);
}
.accordion-item.open .accordion-label { color: var(--gold-light); }

/* Icône +/- */
.accordion-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}
.accordion-icon::before,
.accordion-icon::after {
  content: '';
  position: absolute;
  background: var(--gold);
  border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease);
}
.accordion-icon::before { width: 14px; height: 1.5px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.accordion-icon::after  { width: 1.5px; height: 14px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.accordion-item.open .accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* Panel */
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-item.open .accordion-panel {
  max-height: 600px;
}

.accordion-panel > p,
.accordion-panel > ul {
  padding: var(--space-lg) var(--space-xl);
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--grey-light);
}
.accordion-panel > p + p,
.accordion-panel > p + ul,
.accordion-panel > ul + p {
  padding-top: 0;
}
.accordion-panel strong { color: var(--white); font-weight: 600; }

.manifeste-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.manifeste-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.manifeste-list li::before {
  content: '';
  display: block;
  width: 12px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 0.7em;
}

.manifeste-closing {
  color: var(--gold-light) !important;
  font-style: italic;
}

/* ============================================================
   CTA FINAL — Bloc 11
   ============================================================ */
.cta-final {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Image de fond */
.cta-final-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-final-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Overlay plus dense que le Hero — focus sur le CTA */
.cta-final-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0.82) 100%),
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(13,13,13,0.2) 0%, rgba(13,13,13,0.7) 100%);
}

/* Contenu centré */
.cta-final-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  gap: var(--space-lg);
}

.cta-final-content .gold-line {
  margin: 0 auto var(--space-sm);
  width: 56px;
}

/* Titre — plus grand que le H2 normal */
.cta-final-title {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.1;
  color: var(--white);
  letter-spacing: -0.01em;
}

/* Corps */
.cta-final-body {
  font-size: 1.05rem;
  color: var(--grey-light);
  max-width: 460px;
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

/* Bouton légèrement plus grand */
.cta-final-btn {
  padding: 16px 40px;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

/* Mention */
.cta-final-mention {
  font-size: 0.78rem;
  color: var(--grey);
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 580px) {
  .cta-final { min-height: 60vh; }
  .cta-final-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   PRÉ-TENSION — Bloc 2
   ============================================================ */
.pretension {
  background: var(--black);
  padding: var(--space-2xl) 0;
  text-align: center;
  border-top: 1px solid var(--gold-dim);
}

.pretension-inner {
  max-width: 860px;
  margin: 0 auto;
}

.pretension-line1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-style: italic;
  font-weight: 400;
  color: var(--grey-light);
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}

.pretension-line2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.1;
}

/* ============================================================
   TENSION / ACCÈS — Bloc 3
   ============================================================ */
.tension {
  background: var(--surface);
  border-top: 1px solid var(--gold-dim);
}

.tension-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-2xl);
}

.tension-header h2 {
  line-height: 1.2;
}

.tension-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.tension-card {
  background: var(--surface-2);
  border: 1px solid var(--gold-dim);
  border-top: 3px solid rgba(201,168,76,0.35);
  border-radius: var(--radius-sm);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: border-color var(--ease), transform var(--ease);
}

.tension-card:hover {
  border-color: rgba(201,168,76,0.35);
  border-top-color: var(--gold);
  transform: translateY(-4px);
}

.tension-num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--gold);
  opacity: 0.35;
  line-height: 1;
}

.tension-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
}

.tension-card-body {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.75;
}

.tension-conclusion {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.tension-conclusion > p {
  font-size: 1rem;
  color: var(--grey-light);
  line-height: 1.8;
}

.tension-punchline {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-style: italic;
  color: var(--white) !important;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .tension-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 580px) and (max-width: 768px) {
  .tension-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
  .tension-card:last-child {
    grid-column: 1 / -1;
    max-width: 480px;
    justify-self: center;
    width: 100%;
  }
}

/* ============================================================
   STATS BAR — note légale
   ============================================================ */
.stats-note {
  text-align: center;
  font-size: 0.74rem;
  color: var(--grey);
  max-width: 820px;
  margin: var(--space-xl) auto 0;
  line-height: 1.6;
  font-style: italic;
  opacity: 0.8;
}

/* ============================================================
   COMMENT ÇA MARCHE — Bloc 9
   ============================================================ */
.how-it-works {
  background: var(--black);
  border-top: 1px solid var(--gold-dim);
}

.how-it-works .section-title p {
  font-size: 1rem;
  color: var(--grey-light);
}

.htw-steps {
  max-width: 860px;
  margin: 0 auto var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-2xl);
}

.htw-step {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.htw-step-last {
  grid-column: 1 / -1;
  max-width: calc(50% - var(--space-xl));
  border-bottom: none;
}

.htw-step-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--gold);
  opacity: 0.45;
  line-height: 1;
  flex-shrink: 0;
  min-width: 52px;
}

.htw-step-title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.htw-step-body {
  font-size: 0.88rem;
  color: var(--grey-light);
  line-height: 1.75;
}

.htw-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.htw-note {
  font-size: 0.9rem;
  color: var(--grey-light) !important;
  line-height: 1.7;
  font-style: italic;
}

.htw-mention {
  font-size: 0.78rem;
  color: var(--grey) !important;
}

@media (max-width: 768px) {
  .htw-steps {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  .htw-step-last {
    grid-column: auto;
    max-width: 100%;
    border-bottom: none;
  }
  .htw-step:last-child {
    border-bottom: none;
  }
}

/* ============================================================
   FAQ — Bloc 14
   ============================================================ */
.faq {
  background: var(--surface-2);
  border-top: 1px solid var(--gold-dim);
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.faq-item {
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--ease);
}

.faq-item.open {
  border-color: rgba(201,168,76,0.4);
}

.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: background var(--ease);
  border: none;
  font-family: inherit;
}

.faq-trigger:hover,
.faq-item.open .faq-trigger {
  background: var(--surface-3);
}

.faq-question {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.4;
  transition: color var(--ease);
}

.faq-item.open .faq-question {
  color: var(--gold-light);
}

.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--gold);
  border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease);
}

.faq-icon::before {
  width: 14px;
  height: 1.5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-icon::after {
  width: 1.5px;
  height: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-item.open .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.open .faq-panel {
  max-height: 300px;
}

.faq-panel p {
  padding: var(--space-lg) var(--space-xl);
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--grey-light);
}

/* ============================================================
   PAGE INVESTIR — NOUVEAUX BLOCS (update-02)
   ============================================================ */

/* --- Bloc 5 : stats adaptées (2 chiffres + sous-titre) --- */

.inv-b4-grid2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-xl);
}

.inv-b4-static {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
}

.inv-b4-subtitle {
  text-align: center;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--grey);
  letter-spacing: 0.04em;
  border-top: 1px solid rgba(201,168,76,0.15);
  padding-top: var(--space-lg);
}

/* --- Bloc 2 : Pour qui / Pas pour qui --- */

.inv-pour-qui {
  background: var(--surface);
  padding: var(--space-3xl) 0;
}

.inv-pour-qui-inner {
  max-width: 900px;
}

.inv-pour-qui-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.inv-pour-qui-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--white);
  margin-top: var(--space-md);
}

.inv-pour-qui-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
}

.inv-pq-col {
  padding: var(--space-xl);
  border-radius: 2px;
}

.inv-pq-yes {
  background: var(--surface-2);
  border: 1px solid rgba(201,168,76,0.15);
  border-top: 3px solid rgba(201,168,76,0.5);
}

.inv-pq-no {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 3px solid rgba(255,255,255,0.1);
}

.inv-pq-heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-lg);
  letter-spacing: 0.02em;
}

.inv-pq-yes .inv-pq-heading { color: var(--gold-light); }

.inv-pq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.inv-pq-list li {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--grey-light);
  padding-left: 1.4em;
  position: relative;
}

.inv-pq-yes .inv-pq-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.8rem;
}

.inv-pq-no .inv-pq-list li::before {
  content: '×';
  position: absolute;
  left: 0;
  color: var(--grey);
  font-size: 0.9rem;
}

/* --- Bloc 6 : Pourquoi LIINXE est différent --- */

.inv-diff {
  background: var(--black);
  padding: var(--space-3xl) 0;
}

.inv-diff-inner {
  max-width: 960px;
}

.inv-diff-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.inv-diff-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--white);
  margin-top: var(--space-md);
}

.inv-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.inv-diff-card {
  background: var(--surface);
  border: 1px solid rgba(201,168,76,0.12);
  border-top: 3px solid rgba(201,168,76,0.4);
  border-radius: 2px;
  padding: var(--space-xl) var(--space-lg);
  transition: border-color 0.2s;
}

.inv-diff-card:hover {
  border-color: rgba(201,168,76,0.3);
  border-top-color: var(--gold);
}

.inv-diff-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: var(--space-md);
  letter-spacing: 0.03em;
}

.inv-diff-card-body {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--grey-light);
}

/* --- Bloc 8 : CTA intermédiaire --- */

.inv-cta-mid {
  background: var(--surface-2);
  border-top: 1px solid rgba(201,168,76,0.12);
  border-bottom: 1px solid rgba(201,168,76,0.12);
  padding: var(--space-2xl) 0;
  text-align: center;
}

.inv-cta-mid-inner {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.inv-cta-mid-question {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-style: italic;
  color: var(--white);
  line-height: 1.4;
}

.inv-cta-mid-note {
  font-size: 0.78rem;
  color: var(--grey);
  letter-spacing: 0.02em;
}

/* --- Bloc 11 : Modalités (liste simple) --- */

.inv-b7-intro {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--grey-light);
  margin-bottom: var(--space-xl);
}

.inv-b11-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.inv-b11-list li {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--grey-light);
  padding-left: 1.2em;
  position: relative;
}

.inv-b11-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
}

.inv-b11-note {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--grey);
  border-left: 2px solid rgba(201,168,76,0.3);
  padding-left: var(--space-md);
  font-style: italic;
}

/* --- Bloc 12 : Fiscalité --- */

.inv-fiscal {
  background: var(--black);
  padding: var(--space-3xl) 0;
}

.inv-fiscal-inner {
  max-width: 860px;
}

.inv-fiscal-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.inv-fiscal-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 600;
  color: var(--white);
  margin-top: var(--space-md);
}

.inv-fiscal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.inv-fiscal-card {
  background: var(--surface);
  border: 1px solid rgba(201,168,76,0.12);
  border-top: 3px solid rgba(201,168,76,0.4);
  border-radius: 2px;
  padding: var(--space-xl) var(--space-lg);
}

.inv-fiscal-card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: var(--space-md);
  letter-spacing: 0.04em;
}

.inv-fiscal-card-body {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--grey-light);
}

.inv-fiscal-note {
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--grey);
  text-align: center;
  font-style: italic;
  max-width: 600px;
  margin: 0 auto;
}

/* --- Bloc 13 : Objections (wrapper — accordion via .faq-*) --- */

.inv-objections {
  background: var(--surface);
  padding: var(--space-3xl) 0;
}

.inv-objections-inner {
  max-width: 760px;
}

.inv-objections-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.inv-objections-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 600;
  color: var(--white);
  margin-top: var(--space-md);
}

/* --- Bloc 14 : Cercle privé --- */

.inv-cercle {
  background: var(--surface-2);
  padding: var(--space-3xl) 0;
  border-top: 1px solid rgba(201,168,76,0.12);
}

.inv-cercle-inner {
  max-width: 680px;
  text-align: center;
}

.inv-cercle-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-xl);
}

.inv-cercle-body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--grey-light);
  margin-bottom: var(--space-md);
}

.inv-cercle-punchline {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-style: italic;
  color: var(--gold-light);
  line-height: 1.5;
  margin-top: var(--space-xl);
}

.inv-cercle-punchline strong {
  font-style: normal;
  color: var(--white);
}

/* --- Bloc 15 : CTA Final --- */

.inv-final {
  background: var(--black);
  padding: var(--space-3xl) 0;
  text-align: center;
  border-top: 1px solid rgba(201,168,76,0.15);
}

.inv-final-inner {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.inv-final-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
}

.inv-final-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--grey-light);
  max-width: 480px;
}

.inv-final-note {
  font-size: 0.78rem;
  color: var(--grey);
  letter-spacing: 0.02em;
}

/* --- Carousel : tag secteur --- */

.inv-opp-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  border: 1px solid rgba(201,168,76,0.25);
  padding: 3px 8px;
  border-radius: 2px;
  display: inline-block;
}

/* --- Responsive nouveaux blocs --- */

@media (max-width: 760px) {
  .inv-pour-qui-grid,
  .inv-diff-grid,
  .inv-fiscal-grid {
    grid-template-columns: 1fr;
  }

  .inv-b4-grid2 {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-xl);
  }

  .inv-b4-grid2 .inv-b4-divider {
    width: 60px;
    height: 1px;
  }
}

@media (max-width: 580px) {
  .inv-cta-mid-inner .btn-primary {
    width: 100%;
    justify-content: center;
  }
  .inv-final-inner .btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.gold-line {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: var(--space-md) 0;
}

/* ============================================================
   AUTH — Signup / Signin / Merci / Espace membre
   ============================================================ */

/* Bouton outline (header quand connecté) */
.btn-outline {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.btn-outline:hover {
  background: var(--gold-dim);
}

/* Lien "Se connecter" dans le header */
.nav-link--signin {
  margin-right: var(--space-sm);
}

/* Layout centré des pages auth */
.auth-section {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-lg);
}

.auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius-md);
  padding: 40px;
}

.auth-card--center {
  text-align: center;
}

.auth-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.auth-header {
  margin-bottom: var(--space-xl);
}

.auth-title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin-bottom: var(--space-sm);
}

.auth-subtitle {
  font-size: 0.9rem;
  color: var(--grey);
  margin-top: var(--space-sm);
}

.auth-error {
  background: rgba(224, 82, 82, 0.08);
  border: 1px solid rgba(224, 82, 82, 0.35);
  border-radius: var(--radius-sm);
  color: #e07070;
  font-size: 0.875rem;
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.auth-success {
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.35);
  border-radius: var(--radius-sm);
  color: #81c784;
  font-size: 0.875rem;
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--color-gold);
  cursor: pointer;
  text-decoration: underline;
}

.btn-link:hover {
  opacity: 0.8;
}

.auth-forgot-link {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.8rem;
  color: var(--color-gold);
  text-align: right;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.auth-forgot-link:hover {
  opacity: 1;
  text-decoration: underline;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey-light);
}

.form-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--grey);
}

.form-group input {
  background: var(--surface-2);
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-size: 0.95rem;
  padding: 11px var(--space-md);
  transition: border-color var(--ease), box-shadow var(--ease);
  outline: none;
  width: 100%;
}

.form-group input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim-2);
}

.form-group input::placeholder {
  color: var(--grey);
}

.btn-full {
  width: 100%;
  justify-content: center;
  padding: 13px 22px;
}

.auth-footer-link {
  text-align: center;
  margin-top: var(--space-lg);
  font-size: 0.875rem;
  color: var(--grey);
}

.auth-footer-link a {
  color: var(--gold);
  font-weight: 600;
  transition: color var(--ease);
}

.auth-footer-link a:hover {
  color: var(--gold-light);
}

/* Merci — icône email */
.merci-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(82, 168, 82, 0.1);
  border: 1px solid rgba(82, 168, 82, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  color: #52a852;
}

.merci-email {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 0.875rem;
  color: var(--gold);
  margin-top: var(--space-sm);
}

.merci-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  text-align: left;
}

.merci-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.merci-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1px solid rgba(201, 168, 76, 0.3);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.merci-step p {
  font-size: 0.9rem;
  color: var(--grey-light);
  margin: 0;
}

.merci-step strong {
  color: var(--white);
  font-weight: 600;
}

/* Espace membre placeholder */
.membre-section {
  min-height: calc(100vh - var(--header-h));
  padding: var(--space-3xl) 0;
}

.membre-header {
  margin-bottom: var(--space-2xl);
}

.membre-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: var(--space-sm);
}

.membre-subtitle {
  color: var(--grey);
}

.membre-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.membre-card {
  background: var(--surface);
  border: 1px solid rgba(201, 168, 76, 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  position: relative;
}

.membre-card--disabled {
  opacity: 0.5;
}

.membre-card-icon {
  font-size: 0.6rem;
  color: var(--gold);
  margin-bottom: var(--space-md);
}

.membre-card h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}

.membre-card p {
  font-size: 0.85rem;
}

.membre-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}

.membre-footer {
  margin-top: var(--space-xl);
}

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

/* ============================================================
   SIGNUP — Formulaire multi-étapes
   ============================================================ */

/* Carte élargie pour le signup */
.auth-card--wide {
  max-width: 580px;
}

/* --- Stepper -------------------------------------------- */
.stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: var(--space-xl);
}

.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.stepper-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  border: 2px solid rgba(201, 168, 76, 0.2);
  color: var(--grey);
  background: var(--surface-2);
  transition: background var(--ease), border-color var(--ease), color var(--ease);
  user-select: none;
}

.stepper-step.active .stepper-circle {
  background: var(--gold);
  border-color: var(--gold);
  color: #0d0d0d;
}

.stepper-step.completed .stepper-circle {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

.stepper-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey);
  text-align: center;
  line-height: 1.3;
  transition: color var(--ease);
}

.stepper-step.active .stepper-label    { color: var(--gold); }
.stepper-step.completed .stepper-label { color: var(--grey-light); }

.stepper-line {
  flex: 1;
  height: 2px;
  background: rgba(201, 168, 76, 0.15);
  margin-top: 17px;
  min-width: 28px;
  transition: background var(--ease-slow);
}

.stepper-line.completed { background: var(--gold); }

/* --- Étapes du formulaire ------------------------------- */
.form-step         { display: none; }
.form-step.active  {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.step-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--white);
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-xs);
}

/* --- Notice informative dans une étape ---------------- */
.step-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  background: rgba(201, 168, 76, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 6px;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.75rem;
  color: var(--grey-light);
  line-height: 1.5;
  margin-bottom: var(--space-xs);
}
.step-notice-icon {
  color: var(--gold);
  font-style: normal;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.step-separator {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xs) 0;
}
.step-separator::before,
.step-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(201, 168, 76, 0.15);
}
.step-separator span {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--grey-light);
  white-space: nowrap;
}

/* --- Champs select -------------------------------------- */
.form-group select {
  background: var(--surface-2);
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-size: 0.95rem;
  padding: 11px var(--space-md);
  padding-right: 36px;
  transition: border-color var(--ease), box-shadow var(--ease);
  outline: none;
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.form-group select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim-2);
}
.form-group select option {
  background: #1a1a1a;
  color: var(--white);
}
.form-group select option:disabled { color: var(--grey); }
.form-group select optgroup { color: var(--grey); }

/* --- Labels bloc et requis ----------------------------- */
.form-label-block {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey-light);
  line-height: 1.5;
}
.form-required {
  color: var(--gold);
  font-weight: 700;
  margin-left: 1px;
}

/* --- Radio boutons styled ------------------------------ */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.radio-group.group-error .radio-option {
  border-color: rgba(224, 82, 82, 0.5);
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(201, 168, 76, 0.15);
  background: var(--surface-2);
  transition: border-color var(--ease), background var(--ease);
  user-select: none;
}
.radio-option--wide { flex: 1; min-width: 160px; }
.radio-option:hover { border-color: rgba(201, 168, 76, 0.4); }
.radio-option input[type="radio"] { display: none; }
.radio-option:has(input:checked) {
  border-color: var(--gold);
  background: var(--gold-dim);
}
.radio-label {
  font-size: 0.9rem;
  color: var(--grey-light);
  transition: color var(--ease);
}
.radio-option:has(input:checked) .radio-label {
  color: var(--white);
  font-weight: 600;
}

/* --- Checkbox styled ----------------------------------- */
.checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  cursor: pointer;
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(201, 168, 76, 0.15);
  background: var(--surface-2);
  transition: border-color var(--ease);
}
.checkbox-option:hover { border-color: rgba(201, 168, 76, 0.35); }

.checkbox-option input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1.5px solid rgba(201, 168, 76, 0.3);
  border-radius: 3px;
  background: var(--surface-3);
  appearance: none;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}
.checkbox-option input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l4 4 6-7' stroke='%230d0d0d' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72%;
}
.checkbox-label {
  font-size: 0.85rem;
  color: var(--grey-light);
  line-height: 1.55;
}

/* --- États d'erreur ------------------------------------ */
.field-error {
  border-color: rgba(224, 82, 82, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(224, 82, 82, 0.07) !important;
}

/* --- Navigation entre étapes --------------------------- */
.form-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(201, 168, 76, 0.1);
}
.form-step-nav--right { justify-content: flex-end; }

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 600px) {
  .auth-card--wide  { max-width: 100%; }
  .stepper-label    { display: none; }
  .stepper-line     { min-width: 16px; }
  .form-step-nav    { flex-direction: column-reverse; }
  .form-step-nav .btn { width: 100%; justify-content: center; }
  .radio-option--wide { min-width: 100%; }
}

@media (max-width: 540px) {
  .auth-card {
    padding: var(--space-lg);
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .membre-cards {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   HEADER MEMBRE (nav privée — pages 5+)
   ============================================================ */
.mnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(13, 13, 13, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gold-dim);
}

.mnav-inner {
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* Logo */
.mnav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
.mnav-logo .logo-img { height: 28px; width: auto; }
.mnav-logo .logo-sub { font-size: 0.55rem; }

/* Nav links desktop */
.mnav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex: 1;
  justify-content: center;
}

.mnav-link {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--grey-light);
  letter-spacing: 0.02em;
  white-space: nowrap;
  position: relative;
  padding: 4px 0;
  text-decoration: none;
  transition: color var(--ease);
  cursor: pointer;
}

.mnav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width var(--ease);
}

.mnav-link:hover { color: var(--white); }
.mnav-link:hover::after { width: 100%; }

.mnav-link.active {
  color: var(--gold);
}
.mnav-link.active::after { width: 100%; }

.mnav-link--disabled {
  color: var(--grey);
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.mnav-link--disabled::after { display: none; }

/* Actions droite */
.mnav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

.mnav-connected {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--grey-light);
  letter-spacing: 0.04em;
}

.mnav-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #52a852;
  box-shadow: 0 0 6px rgba(82, 168, 82, 0.6);
  flex-shrink: 0;
}

.mnav-signout {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--grey);
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}
.mnav-signout:hover {
  color: var(--white);
  border-color: var(--grey-light);
}

/* Burger membre */
.mnav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  padding: 6px;
}
.mnav-burger span {
  display: block;
  height: 1.5px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease);
  transform-origin: center;
}
.mnav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mnav-burger.open span:nth-child(2) { opacity: 0; }
.mnav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile overlay nav membre */
.mnav-mobile {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(13, 13, 13, 0.99);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease-slow);
}
.mnav-mobile.open {
  opacity: 1;
  pointer-events: all;
}
.mnav-mobile-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  text-align: center;
  width: 100%;
  padding: 0 var(--space-lg);
}
.mnav-mobile-link {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.04em;
  transition: color var(--ease);
  cursor: pointer;
}
.mnav-mobile-link:hover { color: var(--gold); }
.mnav-mobile-link--disabled {
  color: var(--grey);
  opacity: 0.4;
  pointer-events: none;
}
.mnav-mobile-cta {
  margin-top: var(--space-sm);
}

/* Bouton flottant */
.membre-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 998;
  background: var(--gold);
  color: #0d0d0d;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.3);
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
  white-space: nowrap;
  text-decoration: none;
}
.membre-fab:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(201, 168, 76, 0.4);
}

/* Responsive mnav */
@media (max-width: 1080px) {
  .mnav-links { gap: var(--space-md); }
  .mnav-link  { font-size: 0.75rem; }
}

@media (max-width: 860px) {
  .mnav-links      { display: none; }
  .mnav-connected  { display: none; }
  .mnav-signout    { display: none; }
  .mnav-burger     { display: flex; }
  .membre-fab      { bottom: 16px; right: 16px; font-size: 0.75rem; padding: 10px 16px; }
}

/* ============================================================
   ESPACE MEMBRE — HERO (Bloc 1)
   ============================================================ */
.body-membre { padding-top: var(--header-h); }

.em-hero {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
  background-image: url('/images/landing/Fond_Hero_page_5.png');
  background-size: cover;
  background-position: center;
}

.em-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
  pointer-events: none;
}

.em-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Hero centré (sans visuel) */
.em-hero .em-hero-content {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.em-hero .em-hero-content .em-hero-subtitle,
.em-hero .em-hero-content .em-hero-body {
  max-width: 580px;
  margin: 0 auto;
}

.em-hero .em-hero-content .em-hero-body {
  padding-left: 0;
  border-left: none;
  color: var(--grey-light);
}

.em-hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.em-hero-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  color: var(--white);
  letter-spacing: -0.02em;
}

.em-hero-subtitle {
  font-size: 1rem;
  color: var(--grey-light);
  line-height: 1.7;
  max-width: 480px;
}

.em-hero-body {
  font-size: 0.9rem;
  color: var(--grey);
  line-height: 1.7;
  max-width: 480px;
  padding-left: var(--space-md);
  border-left: 2px solid var(--gold-dim);
}

.em-hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.em-hero-note {
  font-size: 0.75rem;
  color: var(--grey);
  letter-spacing: 0.02em;
  font-style: italic;
}

.em-hero-visual {
  aspect-ratio: 4 / 5;
  background: var(--surface-2);
  border: 1px solid rgba(201, 168, 76, 0.08);
  border-radius: var(--radius-md);
}

/* Responsive hero */
@media (max-width: 860px) {
  .em-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .em-hero-visual { aspect-ratio: 16 / 9; }
  .em-hero-subtitle,
  .em-hero-body   { max-width: 100%; }
}

/* ============================================================
   PLACEHOLDERS (mes-capacites, mon-portefeuille, espace-investir)
   ============================================================ */
.em-placeholder {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) 0;
}

.em-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
  max-width: 600px;
  margin: 0 auto;
}

.em-placeholder-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.em-placeholder-title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--white);
}

.em-placeholder-sub {
  font-size: 1rem;
  color: var(--grey-light);
  line-height: 1.7;
  max-width: 480px;
}

.em-placeholder-secondary {
  margin-top: var(--space-sm);
}

.em-placeholder-back {
  font-size: 0.85rem;
  color: var(--grey);
  border-bottom: 1px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}
.em-placeholder-back:hover {
  color: var(--white);
  border-color: var(--grey);
}

/* ============================================================
   ESPACE MEMBRE — Styles communs (eyebrow réutilisable)
   ============================================================ */
.em-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-md);
}

/* ============================================================
   ESPACE MEMBRE — BLOC 2 — Les 4 étapes
   ============================================================ */
.em-steps-header {
  margin-bottom: var(--space-3xl);
}
.em-steps-header h2 {
  margin-top: var(--space-sm);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.em-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
}

.em-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg);
  background: var(--surface-2);
  border: 1px solid rgba(201, 168, 76, 0.08);
  border-radius: var(--radius-md);
  position: relative;
  transition: border-color var(--ease-slow), background var(--ease-slow);
}
.em-step:hover {
  border-color: rgba(201, 168, 76, 0.2);
  background: var(--surface-3);
}

.em-step-num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--gold);
  opacity: 0.25;
  line-height: 1;
  letter-spacing: -0.02em;
}

.em-step-title {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--white);
  line-height: 1.35;
}

.em-step-body {
  font-size: 0.875rem;
  color: var(--grey);
  line-height: 1.65;
}

.em-steps-note {
  font-size: 0.85rem;
  color: var(--grey);
  line-height: 1.7;
  font-style: italic;
  max-width: 520px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .em-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .em-steps-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ESPACE MEMBRE — BLOC 3 — Teasers projets
   ============================================================ */
.em-teasers-header {
  margin-bottom: var(--space-3xl);
}
.em-teasers-header h2 {
  margin-top: var(--space-sm);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.em-teasers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
}

.em-teaser-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid rgba(201, 168, 76, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--ease-slow);
}
.em-teaser-card:hover {
  border-color: rgba(201, 168, 76, 0.18);
}

.em-teaser-body {
  flex: 1;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.em-teaser-category {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
}

.em-teaser-title {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--white);
  line-height: 1.25;
}

.em-teaser-desc {
  font-size: 0.875rem;
  color: var(--grey-light);
  line-height: 1.65;
}

.em-teaser-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.em-teaser-tags li {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--grey-light);
  background: rgba(201, 168, 76, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.14);
  border-radius: 2px;
  padding: 3px 10px;
}

/* Section verrou */
.em-teaser-lock {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid rgba(201, 168, 76, 0.08);
  background: rgba(201, 168, 76, 0.03);
}

.em-teaser-lock-icon {
  font-size: 0.45rem;
  color: var(--gold);
  opacity: 0.5;
  flex-shrink: 0;
  margin-top: 5px;
}

.em-teaser-lock p {
  font-size: 0.75rem;
  color: var(--grey);
  line-height: 1.55;
  font-style: italic;
}

/* CTA centré sous les cartes */
.em-teasers-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.em-teasers-note {
  font-size: 0.75rem;
  color: var(--grey);
  font-style: italic;
}

@media (max-width: 860px) {
  .em-teasers-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   ESPACE MEMBRE — BLOC 4 — Ce que débloque l'activation
   ============================================================ */
.em-unlocks-header {
  margin-bottom: var(--space-3xl);
}
.em-unlocks-header h2 {
  margin-top: var(--space-sm);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.em-unlocks-intro {
  margin-top: var(--space-lg);
  font-size: 0.95rem;
  color: var(--grey-light);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.em-unlocks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
}

.em-unlock-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--surface-2);
  border: 1px solid rgba(201, 168, 76, 0.08);
  border-left: 2px solid var(--gold-dim);
  border-radius: var(--radius-md);
  transition: border-color var(--ease-slow), background var(--ease-slow);
}
.em-unlock-card:hover {
  background: var(--surface-3);
  border-left-color: rgba(201, 168, 76, 0.4);
}

.em-unlock-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--gold);
  opacity: 0.3;
  line-height: 1;
  flex-shrink: 0;
  min-width: 48px;
}

.em-unlock-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.em-unlock-title {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
}

.em-unlock-body {
  font-size: 0.875rem;
  color: var(--grey);
  line-height: 1.65;
}

.em-unlocks-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.em-unlocks-reassurance {
  font-size: 0.85rem;
  color: var(--grey);
  font-style: italic;
  max-width: 480px;
  line-height: 1.65;
}

@media (max-width: 700px) {
  .em-unlocks-grid {
    grid-template-columns: 1fr;
  }
  .em-unlock-card {
    gap: var(--space-md);
  }
}

/* ============================================================
   ESPACE MEMBRE — BLOC 5 — Pourquoi activer maintenant
   ============================================================ */
.em-why {
  background: var(--surface);
}

.em-why-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.em-why-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.em-why-title {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.15;
  color: var(--white);
}

.em-why-body {
  font-size: 0.95rem;
  color: var(--grey-light);
  line-height: 1.75;
}

.em-why-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.em-why-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.5;
}

.em-why-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 7px;
}

/* Callout droit — la phrase clé */
.em-why-callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-xl);
  border-left: 2px solid var(--gold);
  position: sticky;
  top: calc(var(--header-h) + var(--space-xl));
}

.em-why-callout-title {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
}

.em-why-callout-body {
  font-size: 0.95rem;
  color: var(--grey-light);
  line-height: 1.7;
}

@media (max-width: 800px) {
  .em-why-inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .em-why-callout {
    position: static;
    border-left: none;
    border-top: 1px solid var(--gold-dim);
    padding: var(--space-lg) 0 0;
  }
}

/* ============================================================
   ESPACE MEMBRE — BLOC 6 — Offre d'activation
   ============================================================ */
.em-offer-frame {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  padding: var(--space-3xl);
  background: var(--surface-2);
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: var(--radius-lg);
}

.em-offer-header h2 {
  margin-top: var(--space-sm);
}

.em-offer-intro {
  margin-top: var(--space-lg);
  font-size: 0.95rem;
  color: var(--grey-light);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.em-offer-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl) var(--space-3xl);
}

.em-offer-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.em-offer-check {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}

.em-offer-feat-title {
  font-size: 0.95rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-xs);
}

.em-offer-feat-body {
  font-size: 0.85rem;
  color: var(--grey);
  line-height: 1.6;
}

.em-offer-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--gold-dim);
}

.em-offer-tagline {
  font-size: 0.9rem;
  color: var(--grey-light);
  font-style: italic;
  max-width: 460px;
  line-height: 1.65;
}

.em-offer-note {
  font-size: 0.75rem;
  color: var(--grey);
  font-style: italic;
}

@media (max-width: 640px) {
  .em-offer-frame    { padding: var(--space-xl) var(--space-lg); }
  .em-offer-features { grid-template-columns: 1fr; }
}

/* ============================================================
   ESPACE MEMBRE — BLOC 7 — Plateforme partenaire
   ============================================================ */
.em-platform {
  background: var(--surface);
}

.em-platform-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.em-platform-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.em-platform-title {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.15;
}

.em-platform-body {
  font-size: 0.95rem;
  color: var(--grey-light);
  line-height: 1.75;
}

.em-platform-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.em-platform-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.5;
}
.em-platform-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 7px;
}

.em-platform-visual-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: flex-start;
}

.em-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 16px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(201, 168, 76, 0.05);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-transform: uppercase;
}

.em-platform-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(201, 168, 76, 0.5);
}

.em-platform-visual {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border: 1px solid rgba(201, 168, 76, 0.08);
  border-radius: var(--radius-md);
}

@media (max-width: 800px) {
  .em-platform-inner {
    grid-template-columns: 1fr;
  }
  .em-platform-visual-wrap {
    align-items: stretch;
  }
}

/* ============================================================
   ESPACE MEMBRE — BLOC 8 — FAQ
   ============================================================ */
.em-faq-header {
  margin-bottom: var(--space-3xl);
}
.em-faq-header h2 {
  margin-top: var(--space-sm);
}

.em-faq-list {
  max-width: 760px;
  margin: 0 auto;
  background: transparent;
}

/* ============================================================
   ESPACE MEMBRE — BLOC 9 — CTA Final
   ============================================================ */
.em-cta-final {
  padding: var(--space-3xl) 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(201,168,76,0.07) 0%, transparent 70%),
              var(--surface-2);
  border-top: 1px solid var(--gold-dim);
}

.em-cta-final-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  max-width: 640px;
  margin: 0 auto;
}

.em-cta-final-title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--white);
}

.em-cta-final-sub {
  font-size: 1.05rem;
  color: var(--grey-light);
  line-height: 1.65;
}

.em-cta-final-body {
  font-size: 0.95rem;
  color: var(--grey);
  line-height: 1.75;
}

.em-cta-final-mention {
  font-size: 0.8rem;
  color: var(--grey);
  letter-spacing: 0.04em;
  font-style: italic;
}

.em-cta-final-note {
  font-size: 0.75rem;
  color: var(--grey);
  font-style: italic;
}

.gold-line.centered { margin: var(--space-md) auto; }

/* ============================================================
   PAGE 5-2 — MES CAPACITÉS
   ============================================================ */

/* --- Bloc 1 : Hero simple --- */
.mc-hero {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
  background-image: url('/images/landing/Fond_Hero_page_5.png');
  background-size: cover;
  background-position: center;
}

.mc-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
  pointer-events: none;
}

.mc-hero-inner,
.mc-hero-scroll {
  position: relative;
  z-index: 1;
}

.mc-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
  max-width: 640px;
  margin: 0 auto;
}

.mc-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.mc-hero-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  color: var(--white);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.mc-hero-subtitle {
  font-size: 1rem;
  color: var(--grey-light);
  line-height: 1.75;
  max-width: 520px;
}

/* --- Bloc 1 : chevron scroll --- */
.mc-hero-scroll {
  display: flex;
  justify-content: center;
  padding-bottom: var(--space-md);
  margin-top: var(--space-2xl);
  transition: transform var(--ease);
}
.mc-hero-scroll:hover {
  transform: translateY(3px);
}

.mc-hero-chevron {
  color: var(--gold);
  opacity: 0.7;
  animation: mc-bounce 2s ease-in-out infinite;
}
.mc-hero-scroll:hover .mc-hero-chevron {
  opacity: 1;
}

@keyframes mc-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%       { transform: translateY(6px); opacity: 1; }
}

/* --- Bloc 3 : Réassurance --- */
.mc-reassure {
  border-top: 1px solid var(--border);
}

.mc-reassure-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mc-reassure-title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--white);
}

.mc-reassure-body {
  font-size: 1rem;
  color: var(--grey-light);
  line-height: 1.75;
}

.mc-reassure-list {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: fit-content;
  text-align: left;
  padding: var(--space-lg) var(--space-xl);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-left: 2px solid rgba(190, 160, 100, 0.35);
  border-radius: 4px;
}

.mc-reassure-list li {
  font-size: 0.95rem;
  color: var(--grey-light);
  line-height: 1.6;
  padding-left: 1.4em;
  position: relative;
}

.mc-reassure-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.5;
}

.mc-reassure-card {
  margin: var(--space-sm) auto 0;
  padding: var(--space-lg) var(--space-xl);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-left: 2px solid rgba(190, 160, 100, 0.35);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 520px;
  text-align: left;
}

/* ============================================================
   PAGE 6 — ESPACE INVESTIR (TUNNEL ACTIVATION)
   ============================================================ */

/* --- Bloc 1 : Hero gauche --- */
.ei-hero {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
  background-image: url('/images/landing/Fond_Hero_page_6.png');
  background-size: cover;
  background-position: center right;
}

.ei-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.55) 55%,
    rgba(0,0,0,0.15) 100%
  );
  pointer-events: none;
}

.ei-hero .container {
  position: relative;
  z-index: 1;
}

.ei-hero-content {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.ei-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.ei-hero-title {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.08;
  color: var(--white);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.ei-hero-subtitle {
  font-size: 1rem;
  color: var(--grey-light);
  line-height: 1.75;
  max-width: 440px;
}

@media (max-width: 640px) {
  .ei-hero {
    background-position: 70% center;
  }
  .ei-hero::before {
    background: rgba(0,0,0,0.75);
  }
  .ei-hero-content {
    max-width: 100%;
  }
}

/* --- Bloc 2 : Barre de confiance --- */
.ei-trust {
  background: rgba(255, 255, 255, 0.025);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3xl) 0;
}

.ei-trust-bar {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}

.ei-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding: 0 var(--space-2xl);
  flex: 1;
  position: relative;
}

.ei-trust-item::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--gold);
  opacity: 0.6;
  margin-bottom: var(--space-sm);
}

.ei-trust-value {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 200;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 5ch;
  display: inline-block;
}

.ei-trust-label {
  font-size: 0.7rem;
  color: var(--grey);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  max-width: 120px;
}

.ei-trust-sep {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
  margin: var(--space-sm) 0;
}

@media (max-width: 768px) {
  .ei-trust-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl) var(--space-lg);
  }
  .ei-trust-sep { display: none; }
  .ei-trust-item { padding: 0; }
}

/* --- Bloc 3 : Sélecteur des niveaux --- */
.ei-selector {
  border-top: 1px solid var(--border);
}

.ei-selector-header {
  margin-bottom: var(--space-2xl);
}

.ei-selector-title {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: var(--space-md);
}

.ei-selector-subtitle {
  font-size: 0.95rem;
  color: var(--grey-light);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}

.ei-selector-k-note {
  margin-top: var(--space-sm);
  font-size: 0.98rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Track (carousel) */
.ei-selector-track-outer {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Masques dégradés latéraux : ne laissent voir qu'une ~1/2 vignette de chaque côté */
.ei-selector-track-outer::before,
.ei-selector-track-outer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24%;
  z-index: 2;
  pointer-events: none;
}

.ei-selector-track-outer::before {
  left: 0;
  background: linear-gradient(to right, var(--black) 12%, rgba(13, 13, 13, 0) 100%);
}

.ei-selector-track-outer::after {
  right: 0;
  background: linear-gradient(to left, var(--black) 12%, rgba(13, 13, 13, 0) 100%);
}

/* Flèches de navigation */
.ei-selector-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(20, 20, 20, 0.65);
  backdrop-filter: blur(4px);
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.ei-selector-arrow:hover {
  background: rgba(40, 40, 40, 0.9);
  border-color: var(--gold);
  color: var(--gold);
}

.ei-selector-arrow--left  { left: 20px; }
.ei-selector-arrow--right { right: 20px; }

.ei-selector-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: var(--space-lg) calc(50% - 120px);
  cursor: grab;
}

.ei-selector-track::-webkit-scrollbar { display: none; }
.ei-selector-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

/* Cartes */
.ei-card {
  scroll-snap-align: center;
  flex-shrink: 0;
  width: 240px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  cursor: pointer;
  transition: transform 0.35s ease, opacity 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  opacity: 0.5;
  transform: scale(0.95);
  user-select: none;
}

.ei-card.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 0 0 1px var(--gem, var(--gold)), 0 8px 40px rgba(0,0,0,0.4);
}

.ei-card:hover:not(.is-active) {
  opacity: 0.75;
  transform: scale(0.97);
}

/* Barre couleur gemme */
.ei-card-gem-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--gem, var(--gold));
  margin-bottom: var(--space-sm);
}

.ei-card-gem-bar--opal {
  background: linear-gradient(90deg, #c8a060, #a060c8, #60a8c8, #70c870, #c86060, #c8a060);
  background-size: 200% 100%;
  animation: opal-shimmer 3s linear infinite;
}

@keyframes opal-shimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

.ei-card-name {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gem, var(--gold));
}

.ei-card-ktotal {
  font-size: 3.2rem;
  font-weight: 200;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.03em;
}

.ei-card-ktotal span {
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--grey-light);
  margin-left: 2px;
}

.ei-card-bonus {
  font-size: 0.92rem;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ei-card-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-xs) 0;
}

.ei-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ei-card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}

.ei-card-meta-label {
  font-size: 0.72rem;
  color: var(--grey);
  letter-spacing: 0.04em;
}

.ei-card-meta-val {
  font-size: 0.9rem;
  color: var(--white);
  font-weight: 400;
}

.ei-card-meta-dim .ei-card-meta-label,
.ei-card-meta-dim .ei-card-meta-val {
  color: var(--grey);
  font-size: 0.78rem;
}

/* Hint VIP discret */
.ei-selector-vip-hint {
  margin-top: var(--space-xl);
  text-align: center;
  font-size: 0.8rem;
  color: var(--grey);
  font-style: italic;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .ei-card { width: 82vw; }
  .ei-selector-track { padding: var(--space-lg) 9vw; }
}

/* ============================================================
   PAGE 5-3 — MON PORTEFEUILLE
   ============================================================ */

/* --- Bloc 3 : Projection --- */
.mp-projection {
  background: rgba(255, 255, 255, 0.018);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.mp-projection-header {
  margin-bottom: var(--space-2xl);
}

.mp-projection-title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.3;
  margin-top: var(--space-sm);
}

.mp-projection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  max-width: 860px;
  margin: 0 auto;
}

.mp-proj-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  opacity: 0.55;
  transition: opacity var(--ease), border-color var(--ease);
}

.mp-proj-card:hover {
  opacity: 0.85;
  border-color: rgba(201,168,76,0.25);
}

.mp-proj-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  opacity: 0.7;
}

.mp-proj-label {
  font-size: 0.85rem;
  color: var(--grey-light);
  line-height: 1.5;
}

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

/* --- Blocs 4 & 5 : CTA --- */
.mc-cta {
  border-top: 1px solid var(--border);
}

.mc-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.mc-cta-btn {
  min-width: 320px;
  justify-content: center;
}

.mc-cta-note {
  font-size: 0.8rem;
  color: var(--grey);
  font-style: italic;
  margin-top: calc(-1 * var(--space-sm));
}

.mc-cta-back {
  font-size: 0.85rem;
  color: var(--grey);
  border-bottom: 1px solid transparent;
  transition: color var(--ease), border-color var(--ease);
  margin-top: var(--space-sm);
}
.mc-cta-back:hover {
  color: var(--white);
  border-color: var(--grey);
}

/* --- Bloc 2 : Explication simple --- */
.mc-explain {
  border-top: 1px solid var(--border);
  scroll-margin-top: var(--header-h);
}

.mc-explain-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mc-explain-title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--white);
}

.mc-explain-body {
  font-size: 1rem;
  color: var(--grey-light);
  line-height: 1.75;
}

.mc-explain-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: fit-content;
  text-align: left;
}

.mc-explain-card {
  margin-top: var(--space-sm);
  padding: var(--space-lg) var(--space-xl);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: 4px;
}

.mc-explain-list li {
  font-size: 0.95rem;
  color: var(--grey-light);
  line-height: 1.6;
  padding-left: 1.4em;
  position: relative;
}

.mc-explain-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--gold);
}


/* ============================================================
   PAGE 7 — ACTIVATION INVESTISSEUR
   ============================================================ */

/* --- BLOC 1 : Hero court centré -------------------------------- */
.act-hero {
  padding: 100px 0 72px;
  text-align: center;
  background: var(--black);
}

.act-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}

.act-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.act-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 24px;
}

.act-hero-subtitle {
  font-size: 1rem;
  color: var(--grey-light);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}

/* --- BLOC 2 : Récapitulatif niveau choisi --------------------- */
.act-recap {
  padding: 48px 0 72px;
  background: var(--black);
}

.act-recap-inner {
  max-width: 520px;
  margin: 0 auto;
}

.act-recap-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  text-align: center;
  margin-bottom: 20px;
}

.act-recap-card {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 3px solid var(--gem, var(--gold));
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.act-recap-gem-bar {
  height: 2px;
  background: var(--gem, var(--gold));
  opacity: 0.5;
  margin-bottom: 0;
}

.act-recap-top {
  padding: 32px 36px 24px;
  text-align: center;
}

.act-recap-name {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gem, var(--gold));
  margin-bottom: 12px;
}

.act-recap-ktotal {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 300;
  color: var(--white);
  line-height: 1;
  margin-bottom: 6px;
}

.act-recap-ktotal span {
  font-size: 1.8rem;
  color: var(--grey-light);
  margin-left: 2px;
}

.act-recap-kdetail {
  font-size: 0.88rem;
  color: var(--grey);
}

.act-recap-kbonus {
  color: var(--gem, var(--gold));
}

.act-recap-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 0 36px;
}

.act-recap-coop {
  padding: 24px 36px;
}

.act-recap-coop-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gem, var(--gold));
  border: 1px solid var(--gem, var(--gold));
  border-radius: 3px;
  padding: 4px 10px;
  margin-bottom: 14px;
  opacity: 0.85;
}

.act-recap-coop-value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--gem, var(--gold));
  margin-bottom: 10px;
}

.act-recap-coop-value span {
  font-size: 1rem;
  color: var(--grey-light);
}

.act-recap-coop-text {
  font-size: 0.88rem;
  color: var(--grey-light);
  line-height: 1.65;
  margin-bottom: 8px;
}

.act-recap-coop-hint {
  font-size: 0.8rem;
  color: var(--grey);
  line-height: 1.6;
  font-style: italic;
}

.act-recap-pricing {
  padding: 20px 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.act-recap-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.act-recap-price-label {
  font-size: 0.88rem;
  color: var(--grey-light);
}

.act-recap-price-val {
  font-size: 0.95rem;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.act-recap-price-row--dim .act-recap-price-label,
.act-recap-price-row--dim .act-recap-price-val {
  color: var(--grey);
  font-size: 0.82rem;
}

.act-recap-price-row--total {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 10px;
  margin-top: 2px;
}

.act-recap-price-row--total .act-recap-price-label {
  font-weight: 600;
  color: var(--white);
}

.act-recap-price-row--total .act-recap-price-val {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gem, var(--gold));
}

.act-recap-back {
  text-align: center;
  margin-top: 20px;
}

.act-recap-back-link {
  font-size: 0.82rem;
  color: var(--grey);
  text-decoration: none;
  transition: color 0.2s;
}

.act-recap-back-link:hover {
  color: var(--gold);
}

/* --- BLOC 3 : Activation ambassadeur -------------------------- */
.act-ambass {
  padding: 64px 0;
  background: var(--surface);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.act-ambass-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.act-ambass-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  padding: 5px 12px;
  margin-bottom: 28px;
}

.act-ambass-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 24px;
}

.act-ambass-text {
  font-size: 0.92rem;
  color: var(--grey-light);
  line-height: 1.75;
  margin-bottom: 16px;
}

.act-ambass-text--hint {
  font-size: 0.82rem;
  color: var(--grey);
  font-style: italic;
}

.act-ambass-obsidienne-list {
  list-style: none;
  padding: 0;
  margin: 24px auto 20px;
  text-align: left;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.act-ambass-obsidienne-list li {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.6;
  padding-left: 28px;
  position: relative;
}

.act-ambass-obsidienne-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.7;
}

.act-ambass-calc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 32px 0;
  padding: 24px 32px;
  background: var(--surface-2);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 6px;
}

.act-ambass-calc-base {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--white);
}

.act-ambass-calc-op,
.act-ambass-calc-eq {
  font-size: 1.2rem;
  color: var(--grey);
}

.act-ambass-calc-result {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--gold);
}

.act-ambass-rarity {
  font-size: 0.8rem;
  color: var(--grey);
  line-height: 1.65;
  font-style: italic;
  margin-top: 8px;
}

/* --- BLOC 4 : Optimisation niveau avant confirmation ---------- */
.act-optim {
  padding: 80px 0;
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.act-optim-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 56px;
}

.act-optim-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.act-optim-subtitle {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.7;
}

/* Grille adaptative selon le nombre de cartes */
.act-optim-grid {
  display: grid;
  gap: 20px;
  align-items: start;
}

.act-optim-grid--1 { grid-template-columns: minmax(0, 400px); justify-content: center; }
.act-optim-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }
.act-optim-grid--3 { grid-template-columns: repeat(3, 1fr); }
.act-optim-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Carte générique */
.act-optim-card {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.act-optim-card--current {
  border-color: rgba(255,255,255,0.12);
}

.act-optim-card--recommended {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(201,168,76,0.2), 0 8px 32px rgba(0,0,0,0.3);
  position: relative;
}

.act-optim-card--ambitious {
  border-color: rgba(255,255,255,0.08);
  opacity: 0.85;
}

.act-optim-card--lower {
  border-color: rgba(255,255,255,0.08);
  opacity: 0.85;
}

.act-optim-card-eyebrow {
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 4px;
}

.act-optim-card--recommended .act-optim-card-eyebrow {
  color: var(--gold);
}

.act-optim-card-name {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gem, var(--grey-light));
}

.act-optim-card-ktotal {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 300;
  color: var(--white);
  line-height: 1;
}

.act-optim-card-ktotal span {
  font-size: 1.2rem;
  color: var(--grey-light);
  margin-left: 2px;
}

.act-optim-card-kcoop {
  font-size: 0.82rem;
  color: var(--gold);
}

.act-optim-card-kcoop--entry {
  color: var(--grey-light);
  font-style: italic;
}

.act-optim-card-price {
  font-size: 0.95rem;
  color: var(--white);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.act-optim-card-price-ttc {
  font-size: 0.95rem;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.act-optim-card-cta {
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  margin-top: 8px;
}

.act-optim-card-cta--keep {
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--grey-light);
  background: transparent;
}

.act-optim-card-cta--keep:hover {
  border-color: rgba(255,255,255,0.3);
  color: var(--white);
}

.act-optim-card-cta--upgrade {
  background: var(--gold);
  color: var(--black);
  border: 1px solid var(--gold);
}

.act-optim-card-cta--upgrade:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

.act-optim-card-cta--lower {
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--grey-light);
  background: transparent;
}

.act-optim-card-cta--lower:hover {
  border-color: rgba(255,255,255,0.3);
  color: var(--white);
}

.act-optim-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--grey);
  line-height: 1.55;
  font-style: italic;
  margin-top: 24px;
}

/* Responsive */
@media (max-width: 1024px) and (min-width: 769px) {
  .act-optim-grid--4 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }
}

@media (max-width: 768px) {
  .act-optim-grid--4 { grid-template-columns: 1fr; }
  .act-optim-grid--3 { grid-template-columns: 1fr; }
  .act-optim-grid--2 { grid-template-columns: 1fr; }
}

/* --- BLOC 5 : Réassurance ------------------------------------- */
.act-reassure {
  padding: 72px 0;
  background: var(--surface);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.act-reassure-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.act-reassure-anchor {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: 8px;
}

.act-reassure-sub {
  font-size: 0.95rem;
  color: var(--grey-light);
  margin-bottom: 36px;
}

.act-reassure-caption {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 16px;
  order: 2;
}

.act-reassure-list {
  list-style: none;
  padding: 0;
  margin: 0;
  order: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  width: 100%;
  max-width: 400px;
}

.act-reassure-list li {
  font-size: 0.9rem;
  color: var(--grey-light);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

.act-reassure-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* --- BLOC 4 BIS : Informations de facturation ----------------- */
.act-billing {
  padding: 80px 0 0;
  background: var(--black);
}

.act-billing-inner {
  max-width: 680px;
  margin: 0 auto;
}

.act-billing-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 12px;
}

.act-billing-subtitle {
  font-size: 0.875rem;
  color: var(--grey);
  line-height: 1.65;
  margin-bottom: 36px;
}

/* Toggle Particulier / Société */
.act-billing-toggle {
  display: flex;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
  margin-bottom: 32px;
}

.act-billing-toggle-btn {
  background: transparent;
  border: none;
  color: var(--grey);
  font-size: 0.85rem;
  padding: 10px 28px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  letter-spacing: 0.03em;
}

.act-billing-toggle-btn--active {
  background: rgba(200,170,90,0.12);
  color: var(--gold);
}

.act-billing-toggle-btn:hover:not(.act-billing-toggle-btn--active) {
  background: rgba(255,255,255,0.05);
  color: var(--white);
}

/* Champs */
.act-billing-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.act-billing-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 0;
}

.act-billing-row {
  display: grid;
  gap: 16px;
}

.act-billing-row--2 { grid-template-columns: 1fr 1fr; }
.act-billing-row--3 { grid-template-columns: 140px 1fr 140px; }

.act-billing-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.act-billing-field--grow {
  flex: 1;
}

.act-billing-label {
  font-size: 0.75rem;
  color: var(--grey);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.act-billing-req {
  color: var(--gold);
}

.act-billing-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: var(--white);
  font-size: 0.9rem;
  padding: 12px 14px;
  transition: border-color 0.2s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.act-billing-input:focus {
  border-color: rgba(200,170,90,0.5);
}

.act-billing-input::placeholder {
  color: rgba(255,255,255,0.2);
}

.act-billing-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

.act-billing-error {
  color: #e07070;
  font-size: 0.82rem;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid rgba(220,80,80,0.3);
  border-radius: 4px;
  background: rgba(220,80,80,0.06);
}

/* Responsive */
@media (max-width: 600px) {
  .act-billing-row--2,
  .act-billing-row--3 { grid-template-columns: 1fr; }
}

/* --- BLOC 6 : Validation finale ------------------------------- */
.act-final {
  padding: 60px 0 100px;
  margin-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}

.act-final-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.act-final-btn {
  font-size: 1.05rem;
  padding: 18px 48px;
  letter-spacing: 0.04em;
}

.act-final-summary {
  font-size: 0.88rem;
  color: var(--grey-light);
  margin-top: 4px;
}

.act-final-kcoop {
  font-size: 0.78rem;
  color: var(--grey);
  font-style: italic;
}

.act-final-ref {
  margin-top: 20px;
  padding: 14px 24px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.act-final-ref-label {
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}

.act-final-ref-code {
  font-family: 'Courier New', monospace;
  font-size: 0.92rem;
  color: var(--gold);
  letter-spacing: 0.06em;
  user-select: all;
}

/* ============================================================
   PAGE 8 — CONFIRMATION D'ACTIVATION
   ============================================================ */

/* --- BLOC 1 : Hero ----------------------------------------- */
.acf-hero {
  padding: 100px 0 80px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.acf-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}

.acf-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.acf-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

.acf-hero-subtitle {
  font-size: 1.05rem;
  color: var(--grey-light);
  margin-bottom: var(--space-sm);
}

.acf-hero-body {
  font-size: 0.9rem;
  color: var(--grey);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.acf-hero-cockpit {
  font-size: 0.85rem;
  color: var(--gold);
  opacity: 0.75;
  font-style: italic;
}

/* --- BLOC 2 : Récapitulatif --------------------------------- */
.acf-recap {
  padding: var(--space-xl) 0;
}

.acf-recap-inner {
  max-width: 560px;
  margin: 0 auto;
}

.acf-recap-card {
  background: var(--surface-2);
  border: 1px solid var(--gem, rgba(255,255,255,0.12));
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

.acf-recap-gem-bar {
  height: 3px;
  background: var(--gem, var(--gold));
}

.acf-recap-top {
  padding: 28px 32px 20px;
  text-align: center;
}

.acf-recap-name {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gem, var(--gold));
  margin-bottom: 10px;
}

.acf-recap-ktotal {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 300;
  color: var(--white);
  line-height: 1;
}

.acf-recap-ktotal span {
  font-size: 1.4rem;
  color: var(--grey-light);
  margin-left: 3px;
}

.acf-recap-kdetail {
  font-size: 0.82rem;
  color: var(--grey-light);
  margin-top: 8px;
}

.acf-recap-kbonus {
  color: var(--gold);
}

.acf-recap-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 0 32px;
}

.acf-recap-coop {
  padding: 16px 32px;
  text-align: center;
}

.acf-recap-coop-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-light);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  padding: 4px 10px;
}

.acf-recap-coop-text {
  font-size: 0.78rem;
  color: var(--grey);
  line-height: 1.65;
  margin-top: 10px;
  font-style: italic;
}

.acf-recap-coop-value {
  font-size: 1rem;
  color: var(--gold);
}

.acf-recap-coop-value span {
  font-size: 0.8rem;
  color: var(--grey);
}

.acf-recap-pricing {
  padding: 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acf-recap-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.88rem;
}

.acf-recap-price-label {
  color: var(--grey);
}

.acf-recap-price-val {
  color: var(--grey-light);
  font-variant-numeric: tabular-nums;
}

.acf-recap-price-row--dim .acf-recap-price-label,
.acf-recap-price-row--dim .acf-recap-price-val {
  opacity: 0.6;
  font-size: 0.8rem;
}

.acf-recap-price-row--total .acf-recap-price-label {
  color: var(--white);
  font-weight: 500;
}

.acf-recap-price-row--total .acf-recap-price-val {
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.acf-recap-rib {
  padding: 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acf-recap-rib-label {
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 4px;
}

.acf-recap-rib-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 0.84rem;
}

.acf-recap-rib-key {
  color: var(--grey);
  flex-shrink: 0;
  min-width: 70px;
}

.acf-recap-rib-val {
  color: var(--grey-light);
  text-align: right;
}

.acf-recap-rib-val--mono {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--white);
}

.acf-recap-ref {
  padding: 20px 32px 28px;
  text-align: center;
  background: rgba(201,168,76,0.05);
}

.acf-recap-ref-label {
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.acf-recap-ref-value {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  font-weight: 600;
  user-select: all;
}

.acf-recap-microcopy {
  font-size: 0.78rem;
  color: var(--grey);
  text-align: center;
  margin-top: var(--space-md);
  font-style: italic;
  line-height: 1.6;
}

/* --- BLOC 3 : Étapes --------------------------------------- */
.acf-steps {
  padding: var(--space-xl) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.acf-steps-inner {
  max-width: 640px;
  margin: 0 auto;
}

.acf-steps-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: var(--space-lg);
}

.acf-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  counter-reset: step-counter;
}

.acf-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  counter-increment: step-counter;
}

.acf-step-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  position: relative;
}

.acf-step-icon svg {
  width: 18px;
  height: 18px;
}

.acf-step-content {
  padding-top: 9px;
}

.acf-step-text {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.65;
}

/* --- BLOC 4 : Délai réservation ---------------------------- */
.acf-reservation {
  padding: var(--space-xl) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.acf-reservation-inner {
  max-width: 640px;
  margin: 0 auto;
}

.acf-reservation-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: var(--space-md);
}

.acf-reservation-body {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.acf-reservation-secondary {
  font-size: 0.82rem;
  color: var(--grey);
  font-style: italic;
}

/* --- BLOC 5 : Réassurance ---------------------------------- */
.acf-reassure {
  padding: var(--space-xl) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.acf-reassure-inner {
  max-width: 640px;
  margin: 0 auto;
}

.acf-reassure-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: var(--space-md);
}

.acf-reassure-body {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.acf-reassure-cockpit {
  font-size: 0.85rem;
  color: var(--grey);
  line-height: 1.65;
  font-style: italic;
}

/* --- BLOC 6 : CTA ----------------------------------------- */
.acf-cta {
  padding: 80px 0 var(--space-2xl);
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}

.acf-cta-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.acf-cta-btn {
  justify-content: center;
  min-width: 280px;
}

.acf-cta-secondary {
  margin: 0;
}

.acf-cta-contact {
  font-size: 0.85rem;
  color: var(--grey);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}

.acf-cta-contact:hover {
  color: var(--grey-light);
  border-color: rgba(255,255,255,0.35);
}

.acf-cta-note {
  font-size: 0.78rem;
  color: var(--grey);
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}

/* ============================================================
   PAGE 9 — COCKPIT INVESTISSEUR
   ============================================================ */

/* --- BLOC 1 : Hero ----------------------------------------- */
.ck-hero {
  padding: 100px 0 80px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ck-hero-inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.ck-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.ck-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
}

.ck-hero-subtitle {
  font-size: 1rem;
  color: var(--grey-light);
  line-height: 1.7;
}

.ck-hero-body {
  font-size: 0.88rem;
  color: var(--grey);
  line-height: 1.65;
}

.ck-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid rgba(201,168,76,0.25);
  background: rgba(201,168,76,0.06);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-top: 8px;
}

.ck-hero-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.8;
  animation: ck-pulse 2s ease-in-out infinite;
}

@keyframes ck-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.75); }
}

/* --- BLOC 2 : Grille 6 cartes ------------------------------ */
.ck-grid-section {
  padding: var(--space-2xl) 0 var(--space-xl);
}

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

/* Carte générique */
.ck-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 28px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  cursor: pointer;
}

.ck-card:hover {
  border-color: rgba(201,168,76,0.35);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

/* Cartes "bientôt disponible" — légèrement atténuées */
.ck-card--soon {
  opacity: 0.72;
}

.ck-card--soon:hover {
  opacity: 1;
}

/* Carte "en attente de validation" */
.ck-card--pending {
  border-color: rgba(201,168,76,0.18);
}

/* Icône */
.ck-card-icon {
  width: 44px;
  height: 44px;
  color: var(--gold);
  opacity: 0.8;
  flex-shrink: 0;
}

.ck-card-icon svg {
  width: 100%;
  height: 100%;
}

/* Corps */
.ck-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ck-card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--white);
  line-height: 1.25;
}

.ck-card-desc {
  font-size: 0.82rem;
  color: var(--grey);
  line-height: 1.65;
}

/* Footer carte */
.ck-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.ck-card-arrow {
  font-size: 1rem;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}

.ck-card:hover .ck-card-arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* Badge "Bientôt disponible" */
.ck-card-soon-badge {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
  padding: 3px 8px;
}

/* Badge "Validation en cours" */
.ck-card-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold);
  opacity: 0.85;
}

.ck-card-pending-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: ck-pulse 2s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 960px) {
  .ck-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ============================================================
   PAGE 10 — COOPTATION / INVITATIONS PRIVÉES
   ============================================================ */

/* --- BLOC 1 : Hero ----------------------------------------- */
.coop-hero {
  padding: 100px 0 80px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.coop-hero-inner {
  max-width: 700px;
  margin: 0 auto;
}

.coop-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  opacity: 0.85;
}

.coop-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 24px;
}

.coop-hero-subtitle {
  font-size: 1rem;
  color: var(--grey-light);
  line-height: 1.7;
  margin-bottom: 16px;
}

.coop-hero-body {
  font-size: 0.88rem;
  color: var(--grey);
  line-height: 1.75;
  max-width: 580px;
  margin: 0 auto;
  font-style: italic;
}

/* --- BLOC 2 : Philosophie ---------------------------------- */
.coop-philo {
  padding: 80px 0;
  background: var(--surface);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.coop-philo-inner {
  max-width: 640px;
  margin: 0 auto;
}

.coop-philo-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 32px;
  line-height: 1.3;
}

.coop-philo-body {
  font-size: 0.92rem;
  color: var(--grey-light);
  line-height: 1.8;
  margin-bottom: 20px;
}

.coop-philo-body:last-child {
  margin-bottom: 0;
}

/* --- BLOC 3 : Cas Obsidienne ------------------------------- */
.coop-obsidienne {
  padding: 80px 0;
  background: var(--black);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}

.coop-obsidienne-inner {
  max-width: 560px;
  margin: 0 auto;
}

.coop-obsidienne-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-light);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 3px;
  padding: 4px 12px;
  margin-bottom: 24px;
}

.coop-obsidienne-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--white);
  line-height: 1.35;
  margin-bottom: 24px;
}

.coop-obsidienne-body {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.75;
  margin-bottom: 16px;
}

.coop-obsidienne-body--hint {
  font-size: 0.82rem;
  color: var(--grey);
  font-style: italic;
  margin-bottom: 32px;
}

.coop-obsidienne-cta {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(200,170,90,0.3);
  padding-bottom: 2px;
  transition: border-color 0.2s, opacity 0.2s;
}

.coop-obsidienne-cta:hover {
  border-color: var(--gold);
  opacity: 0.85;
}

/* ============================================================
   PAGE 10 — BLOC 4 — VOS INVITATIONS PRIVÉES DU MOIS
   ============================================================ */

.coop-vip-intro {
  padding: 80px 0;
  background: var(--surface);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.coop-vip-intro-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.coop-vip-intro-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 28px;
}

.coop-vip-intro-accroche {
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  font-weight: 400;
}

.coop-vip-intro-body {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.78;
  margin-bottom: 20px;
}

.coop-vip-intro-url {
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  color: var(--grey-light);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
  padding: 2px 8px;
  white-space: nowrap;
}

.coop-vip-intro-rarete {
  font-size: 0.82rem;
  color: var(--grey);
  font-style: italic;
  line-height: 1.75;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ============================================================
   PAGE 10 — BLOC 5 — CARTE DE SYNTHÈSE
   ============================================================ */

.coop-synthese {
  padding: 64px 0;
  background: var(--black);
}

.coop-synthese-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 48px 40px;
  text-align: center;
}

.coop-synthese-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 32px;
}

/* Compteur principal */
.coop-synthese-counter-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.coop-synthese-counter-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}

.coop-synthese-counter-num {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 200;
  color: var(--gold);
  line-height: 1;
}

.coop-synthese-counter-num--zero {
  color: var(--grey);
}

.coop-synthese-counter-sep {
  font-size: 2rem;
  font-weight: 200;
  color: rgba(255,255,255,0.2);
}

.coop-synthese-counter-total {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 200;
  color: rgba(255,255,255,0.3);
}

.coop-synthese-counter-label {
  font-size: 0.8rem;
  color: var(--grey-light);
  letter-spacing: 0.04em;
}

/* Sous-texte */
.coop-synthese-subtext {
  font-size: 0.82rem;
  color: var(--grey);
  font-style: italic;
  line-height: 1.65;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Indicateurs secondaires */
.coop-synthese-indicators {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
  text-align: left;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.coop-synthese-indicator {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
}

.coop-synthese-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.coop-synthese-indicator-dot--rewarded {
  background: var(--gold);
}

.coop-synthese-indicator-dot--pending {
  background: rgba(255,255,255,0.3);
}

.coop-synthese-indicator-value {
  font-weight: 500;
  color: var(--white);
  min-width: 16px;
  text-align: right;
  flex-shrink: 0;
  line-height: 1.5;
}

.coop-synthese-indicator-label {
  color: var(--grey-light);
  text-align: left;
}

/* CTAs */
.coop-synthese-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.coop-synthese-cta-primary {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--gold);
  border-radius: 3px;
  padding: 12px 28px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.coop-synthese-cta-primary:hover {
  opacity: 0.88;
}

.coop-synthese-cta-secondary {
  font-size: 0.82rem;
  color: var(--grey-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 1px;
  letter-spacing: 0.02em;
  transition: color 0.2s, border-color 0.2s;
}

.coop-synthese-cta-secondary:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.4);
}

.coop-synthese-cta-empty {
  font-size: 0.85rem;
  color: var(--grey);
  font-style: italic;
  line-height: 1.7;
  max-width: 380px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .coop-synthese-card {
    padding: 36px 24px;
  }
  .coop-synthese-counter-num {
    font-size: 3rem;
  }
  .coop-synthese-indicators {
    max-width: 100%;
  }
}

/* ============================================================
   PAGE 10 — BLOC 6 — LISTE DÉTAILLÉE DES LIENS VIP
   ============================================================ */

.coop-liste {
  padding: 80px 0;
  background: var(--surface);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.coop-liste-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  text-align: center;
  margin-bottom: 40px;
}

/* État vide */
.coop-liste-empty {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.coop-liste-empty-text {
  font-size: 0.9rem;
  color: var(--grey);
  font-style: italic;
  line-height: 1.75;
}

/* Grille des cartes */
.coop-liste-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* Carte individuelle */
.coop-liste-card {
  background: var(--black);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 5px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s;
}

.coop-liste-card--rewarded {
  border-color: rgba(200,170,90,0.25);
}

.coop-liste-card--expired,
.coop-liste-card--cancelled {
  opacity: 0.5;
}

/* Header : numéro + badge statut */
.coop-liste-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.coop-liste-card-num {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}

.coop-liste-card-status {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  white-space: nowrap;
}

.coop-liste-card-status--available    { background: rgba(255,255,255,0.08); color: var(--grey-light); }
.coop-liste-card-status--copied       { background: rgba(200,170,90,0.12);  color: var(--gold); }
.coop-liste-card-status--opened       { background: rgba(100,160,220,0.12); color: #7fb4e0; }
.coop-liste-card-status--registered   { background: rgba(100,160,220,0.15); color: #7fb4e0; }
.coop-liste-card-status--pending      { background: rgba(220,160,60,0.15);  color: #e0a84a; }
.coop-liste-card-status--rewarded     { background: rgba(200,170,90,0.18);  color: var(--gold); }
.coop-liste-card-status--expired      { background: rgba(255,255,255,0.05); color: var(--grey); }
.coop-liste-card-status--cancelled    { background: rgba(255,255,255,0.05); color: var(--grey); }

/* URL du lien */
.coop-liste-card-url {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 3px;
  padding: 7px 10px;
  overflow: hidden;
}

.coop-liste-card-url-text {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  color: var(--grey-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Profil coopté */
.coop-liste-card-coopte {
  font-size: 0.82rem;
  color: var(--grey-light);
  display: flex;
  gap: 6px;
  align-items: center;
}

.coop-liste-card-coopte-label {
  color: var(--grey);
  font-size: 0.78rem;
}

.coop-liste-card-coopte-name {
  font-weight: 500;
  color: var(--white);
}

/* Date dernier événement */
.coop-liste-card-date {
  font-size: 0.75rem;
  color: var(--grey);
}

/* Boutons d'action */
.coop-liste-card-actions {
  margin-top: auto;
  padding-top: 4px;
}

.coop-liste-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
  text-decoration: none;
}

.coop-liste-card-btn--copy {
  background: var(--gold);
  color: var(--black);
}

.coop-liste-card-btn--copy:hover {
  opacity: 0.85;
}

.coop-liste-card-btn--copy.copied {
  background: rgba(200,170,90,0.15);
  color: var(--gold);
  cursor: default;
}

.coop-liste-card-btn--rewarded {
  background: transparent;
  color: var(--gold);
  font-size: 0.78rem;
  padding: 8px 0;
}

.coop-liste-card-btn--info {
  background: rgba(255,255,255,0.06);
  color: var(--grey-light);
}

.coop-liste-card-btn--disabled {
  background: transparent;
  color: var(--grey);
  font-size: 0.78rem;
  padding: 8px 0;
  cursor: default;
}

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

/* ============================================================
   PAGE 10 — BLOC 7 — K COOPTATION POTENTIELS
   ============================================================ */

.coop-k {
  padding: 80px 0;
  background: var(--black);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.coop-k-inner {
  max-width: 820px;
  margin: 0 auto;
}

.coop-k-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--white);
  text-align: center;
  margin-bottom: 36px;
}

.coop-k-body {
  max-width: 620px;
  margin: 0 auto 48px;
  text-align: center;
}

.coop-k-body p {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.78;
  margin-bottom: 16px;
}

.coop-k-body p:last-child {
  margin-bottom: 0;
}

/* Tableau */
.coop-k-table-wrap {
  overflow-x: auto;
  margin-bottom: 40px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 5px;
}

.coop-k-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.coop-k-table thead tr {
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.coop-k-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}

.coop-k-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.coop-k-table tbody tr:last-child {
  border-bottom: none;
}

.coop-k-table td {
  padding: 14px 16px;
  vertical-align: middle;
}

.coop-k-table-situation {
  font-size: 0.82rem;
  color: var(--grey);
  font-style: italic;
}

/* Badges de niveau */
.coop-k-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px;
  white-space: nowrap;
}

.coop-k-badge--low {
  background: rgba(255,255,255,0.06);
  color: var(--grey-light);
  border: 1px solid rgba(255,255,255,0.1);
}

.coop-k-badge--mid {
  background: rgba(200,170,90,0.1);
  color: var(--gold);
  border: 1px solid rgba(200,170,90,0.2);
}

.coop-k-badge--high {
  background: rgba(200,170,90,0.18);
  color: var(--gold);
  border: 1px solid rgba(200,170,90,0.35);
}

/* Mention premium */
.coop-k-mention {
  text-align: center;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--grey);
  letter-spacing: 0.02em;
}

@media (max-width: 700px) {
  .coop-k-table th,
  .coop-k-table td {
    padding: 10px 12px;
  }
  .coop-k-table-situation {
    min-width: 130px;
  }
}

/* ============================================================
   PAGE 10 — BLOC 8 — ACTIONS DE PARTAGE
   ============================================================ */

.coop-share {
  padding: 80px 0;
  background: var(--surface);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.coop-share-inner {
  max-width: 900px;
  margin: 0 auto;
}

.coop-share-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  text-align: center;
  margin-bottom: 40px;
}

.coop-share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.coop-share-card {
  background: var(--black);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 5px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s;
}

.coop-share-card:hover {
  border-color: rgba(255,255,255,0.14);
}

.coop-share-card-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  color: var(--gold);
  flex-shrink: 0;
}

.coop-share-card-icon svg {
  width: 18px;
  height: 18px;
}

.coop-share-card-title {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.4;
}

.coop-share-card-desc {
  font-size: 0.8rem;
  color: var(--grey);
  line-height: 1.7;
  flex-grow: 1;
}

.coop-share-card-btn {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s, background 0.2s;
  margin-top: auto;
}

.coop-share-card-btn--primary {
  background: var(--gold);
  color: var(--black);
}

.coop-share-card-btn--primary:hover {
  opacity: 0.88;
}

.coop-share-card-btn--primary.copied {
  background: rgba(200,170,90,0.15);
  color: var(--gold);
  cursor: default;
}

.coop-share-card-btn--secondary {
  background: rgba(255,255,255,0.06);
  color: var(--grey-light);
  border: 1px solid rgba(255,255,255,0.08);
}

.coop-share-card-btn--secondary:hover {
  background: rgba(255,255,255,0.1);
  color: var(--white);
}

.coop-share-card-btn--disabled {
  background: transparent;
  color: var(--grey);
  font-size: 0.75rem;
  font-style: italic;
  padding: 9px 0;
  cursor: default;
  border: none;
}

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

/* ============================================================
   PAGE 10 — BLOC 9 — TIMELINE DE L'INVITATION
   ============================================================ */

.coop-timeline {
  padding: 80px 0;
  background: var(--black);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.coop-timeline-inner {
  max-width: 960px;
  margin: 0 auto;
}

.coop-timeline-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--white);
  text-align: center;
  margin-bottom: 56px;
}

/* Track — toujours vertical */
.coop-timeline-track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 560px;
  margin: 0 auto;
}

/* Étape */
.coop-timeline-step {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

/* Marqueur numéroté */
.coop-timeline-step-marker {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.coop-timeline-step-marker--final {
  background: rgba(200,170,90,0.12);
  border-color: rgba(200,170,90,0.4);
}

.coop-timeline-step-num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--grey-light);
}

.coop-timeline-step-marker--final .coop-timeline-step-num {
  color: var(--gold);
}

/* Contenu texte */
.coop-timeline-step-content {
  padding: 8px 0 0;
}

.coop-timeline-step-label {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.4;
  margin-bottom: 6px;
}

.coop-timeline-step--final .coop-timeline-step-label {
  color: var(--gold);
}

.coop-timeline-step-desc {
  font-size: 0.85rem;
  color: var(--grey);
  line-height: 1.7;
}

/* Connecteur vertical */
.coop-timeline-connector {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.1);
  margin-left: 19px; /* centre sous le marqueur de 40px */
}

/* ============================================================
   PAGE 10 — BLOC 10 — CHARTE DE RECOMMANDATION
   ============================================================ */

.coop-charte {
  padding: 80px 0;
  background: var(--surface);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}

.coop-charte-inner {
  max-width: 620px;
  margin: 0 auto;
}

.coop-charte-eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 20px;
}

.coop-charte-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 36px;
}

.coop-charte-body p {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.8;
  margin-bottom: 18px;
}

.coop-charte-body p:last-child {
  margin-bottom: 0;
  color: var(--grey);
  font-style: italic;
}

/* ============================================================
   PAGE 10 — BLOC 11 — FAQ
   ============================================================ */

.coop-faq {
  padding: 80px 0 100px;
  background: var(--black);
}

.coop-faq-inner {
  max-width: 680px;
  margin: 0 auto;
}

.coop-faq-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--white);
  text-align: center;
  margin-bottom: 48px;
}

.coop-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.coop-faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.coop-faq-item:first-child {
  border-top: 1px solid rgba(255,255,255,0.07);
}

.coop-faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: none;
  border: none;
  padding: 22px 0;
  cursor: pointer;
  text-align: left;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  transition: color 0.2s;
}

.coop-faq-trigger:hover {
  color: var(--gold);
}

.coop-faq-trigger[aria-expanded="true"] {
  color: var(--gold);
}

.coop-faq-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--grey);
  transition: transform 0.25s ease;
}

.coop-faq-trigger[aria-expanded="true"] .coop-faq-icon {
  transform: rotate(180deg);
  color: var(--gold);
}

.coop-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.coop-faq-item.open .coop-faq-answer {
  max-height: 200px;
}

.coop-faq-answer p {
  font-size: 0.88rem;
  color: var(--grey-light);
  line-height: 1.75;
  padding-bottom: 22px;
}

/* ============================================================
   PAGE 11 — ACTIVATION COMPLÉMENTAIRE
   ============================================================ */

/* --- Bloc 1 : Hero --- */
.ac-hero {
  padding: 96px 0 72px;
  text-align: center;
}

.ac-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}

.ac-hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}

.ac-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 24px;
}

.ac-hero-subtitle {
  font-size: 1.05rem;
  color: var(--grey-light);
  line-height: 1.7;
  margin-bottom: 16px;
}

.ac-hero-body {
  font-size: 0.92rem;
  color: var(--grey);
  line-height: 1.75;
  font-style: italic;
}

/* --- Bloc 2 : Statut investisseur actuel --- */
.ac-status {
  padding: 0 0 72px;
}

.ac-status-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  text-align: center;
  margin-bottom: 32px;
}

.ac-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}

/* La carte niveau actuel + niveau suivant : plus larges */
.ac-stat-card--level,
.ac-stat-card--next {
  grid-column: span 2;
}

.ac-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.ac-stat-card:hover {
  border-color: rgba(212, 175, 55, 0.25);
}

.ac-stat-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}

.ac-stat-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.1;
}

.ac-stat-value--gem {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ac-stat-value--gold {
  color: var(--gold);
}

.ac-stat-value--muted {
  color: var(--grey);
  font-size: 1.4rem;
}

.ac-stat-unit {
  font-family: inherit;
  font-size: 0.75em;
  font-weight: 400;
  color: var(--grey-light);
  margin-left: 2px;
}

.ac-stat-note {
  font-size: 0.78rem;
  color: var(--grey);
  line-height: 1.5;
  margin-top: 2px;
}

/* Barre de couleur gemme en bas de la carte */
.ac-stat-gem-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.6;
  border-radius: 0 0 10px 10px;
}

/* Note Obsidienne sous la grille */
.ac-status-obsidienne-note {
  max-width: 480px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--grey);
  font-style: italic;
  line-height: 1.7;
}

/* Responsive tablette */
@media (max-width: 860px) {
  .ac-status-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ac-stat-card--level,
  .ac-stat-card--next {
    grid-column: span 1;
  }
}

/* Responsive mobile */
@media (max-width: 540px) {
  .ac-status-grid {
    grid-template-columns: 1fr;
  }
  .ac-stat-card--level,
  .ac-stat-card--next {
    grid-column: span 1;
  }
}

/* --- Bloc 3 : Sélecteur des niveaux --- */
.ac-selector {
  padding: 16px 0 56px;
}

.ac-selector-header {
  text-align: center;
  margin-bottom: 36px;
}

.ac-selector-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: 10px;
}

.ac-selector-note {
  font-size: 0.78rem;
  color: var(--grey);
  letter-spacing: 0.06em;
}

/* Outer track avec masques latéraux */
.ac-selector-outer {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.ac-selector-outer::before,
.ac-selector-outer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24%;
  z-index: 2;
  pointer-events: none;
}

.ac-selector-outer::before {
  left: 0;
  background: linear-gradient(to right, var(--black) 12%, rgba(13, 13, 13, 0) 100%);
}

.ac-selector-outer::after {
  right: 0;
  background: linear-gradient(to left, var(--black) 12%, rgba(13, 13, 13, 0) 100%);
}

/* Flèches de navigation */
.ac-selector-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--grey-light);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.ac-selector-arrow:hover {
  background: rgba(212,175,55,0.12);
  color: var(--gold);
}

.ac-selector-arrow--left  { left: 16px; }
.ac-selector-arrow--right { right: 16px; }

/* Track scrollable */
.ac-selector-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px calc(50% - 104px);
  cursor: grab;
}

.ac-selector-track::-webkit-scrollbar { display: none; }
.ac-selector-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

/* Carte niveau */
.ac-level-card {
  flex: 0 0 208px;
  scroll-snap-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  cursor: pointer;
  user-select: none;
}

.ac-level-card:hover:not(.ac-level-card--locked) {
  border-color: rgba(212,175,55,0.3);
}

.ac-level-card.is-active {
  border-color: var(--gem);
  box-shadow: 0 0 0 1px var(--gem), 0 8px 32px rgba(0,0,0,0.3);
}

/* Carte locked */
.ac-level-card--locked {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* Badge "Niveau actuel" sur la carte locked du niveau actif */
.ac-level-card--current {
  opacity: 0.55;
}

.ac-level-badge-current {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 4px;
  align-self: flex-start;
}

/* Barre couleur gemme en haut */
.ac-level-gem-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gem);
  opacity: 0.7;
  border-radius: 12px 12px 0 0;
}

@keyframes opal-ac {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.ac-level-gem-bar--opal {
  background: linear-gradient(90deg, #c8a060, #88c8f0, #9040c8, #c04060, #3aaa70, #c8a060);
  background-size: 300% 100%;
  animation: opal-ac 4s linear infinite;
  opacity: 0.85;
}

/* Nom du niveau */
.ac-level-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.01em;
}

/* Delta K (niveaux disponibles) */
.ac-level-delta {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--gem);
  line-height: 1;
  margin-top: 6px;
}

.ac-level-delta span {
  font-size: 0.6em;
  font-weight: 400;
  color: var(--grey-light);
  margin-left: 2px;
}

.ac-level-delta-label {
  font-size: 0.7rem;
  color: var(--grey);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

/* K total (niveaux locked) */
.ac-level-ktotal {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--grey-light);
  line-height: 1;
  margin-top: 6px;
}

.ac-level-ktotal span {
  font-size: 0.6em;
  font-weight: 400;
  margin-left: 2px;
}

/* Séparateur */
.ac-level-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0 6px;
}

/* Méta */
.ac-level-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ac-level-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.ac-level-meta-dim {
  opacity: 0.7;
}

.ac-level-meta-label {
  font-size: 0.68rem;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.ac-level-meta-val {
  font-size: 0.82rem;
  color: var(--grey-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Cartes pack de recharge (page 11 — ac-pack-*) ---- */
.ac-pack-card {
  flex: 0 0 200px;
  scroll-snap-align: center;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 22px 16px 18px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  user-select: none;
}

.ac-pack-card:hover {
  border-color: rgba(212,175,55,0.3);
}

.ac-pack-card.is-active {
  border-color: var(--gem);
  box-shadow: 0 0 0 1px var(--gem), 0 8px 32px rgba(0,0,0,0.3);
}

.ac-pack-gem-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gem);
}

@keyframes opal-ac-pack {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.ac-pack-gem-bar--opal {
  background: linear-gradient(90deg, #c8a060, #88c8f0, #9040c8, #c04060, #3aaa70, #c8a060);
  background-size: 300% 100%;
  animation: opal-ac-pack 4s linear infinite;
}

.ac-pack-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--white);
  margin-top: 10px;
  margin-bottom: 10px;
}

.ac-pack-ktotal {
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ac-pack-ktotal span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--gold);
  margin-left: 3px;
}

.ac-pack-bonus {
  font-size: 0.78rem;
  color: var(--grey);
  margin-top: 4px;
  min-height: 1.2em;
}

.ac-pack-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 12px 0;
}

.ac-pack-meta { display: flex; flex-direction: column; gap: 4px; }

.ac-pack-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ac-pack-meta-label {
  font-size: 0.75rem;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ac-pack-meta-val {
  font-size: 0.82rem;
  color: var(--grey-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Hint sous le sélecteur */
.ac-selector-hint {
  max-width: 520px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--grey);
  font-style: italic;
  line-height: 1.7;
}

/* Cas niveau maximum (Black Opal) */
.ac-selector-max {
  padding: 32px 0 64px;
}

.ac-selector-max-inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.ac-selector-max-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--white);
}

.ac-selector-max-body {
  font-size: 0.92rem;
  color: var(--grey-light);
  line-height: 1.75;
}

/* --- Bloc 4 : Récapitulatif de l'activation --- */
.ac-recap {
  padding: 8px 0 64px;
}

.ac-recap-card {
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 34px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--gem), 0 12px 40px rgba(0,0,0,0.32);
  transition: box-shadow 0.3s ease;
}

.ac-recap-gem-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gem);
  opacity: 0.8;
  border-radius: 14px 14px 0 0;
}

.ac-recap-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
  text-align: center;
}

.ac-recap-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}

.ac-recap-niveau {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--gem);
  line-height: 1.1;
}

.ac-recap-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ac-recap-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.ac-recap-label {
  font-size: 0.86rem;
  color: var(--grey-light);
}

.ac-recap-val {
  font-size: 0.95rem;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ac-recap-val--gold {
  color: var(--gold);
  font-weight: 600;
}

.ac-recap-row--hero .ac-recap-label {
  font-size: 0.92rem;
  color: var(--white);
}

.ac-recap-row--hero .ac-recap-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
}

.ac-recap-row--dim {
  opacity: 0.7;
}

.ac-recap-row--ttc .ac-recap-label,
.ac-recap-row--ttc .ac-recap-val {
  font-weight: 600;
  color: var(--white);
  font-size: 1.02rem;
}

.ac-recap-row--total .ac-recap-label {
  font-size: 0.92rem;
  color: var(--white);
}

.ac-recap-row--total .ac-recap-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
}

.ac-recap-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.ac-recap-microcopy {
  max-width: 460px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 0.76rem;
  color: var(--grey);
  font-style: italic;
  line-height: 1.7;
}

@media (max-width: 540px) {
  .ac-recap-card {
    padding: 28px 22px 24px;
  }
}

/* --- Bloc 5 : Validation --- */
.ac-validation {
  padding: 0 0 72px;
}

.ac-validation-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.ac-validation-btn {
  min-width: 340px;
  text-align: center;
}

.ac-validation-note {
  font-size: 0.8rem;
  color: var(--grey);
  text-align: center;
  line-height: 1.7;
}

@media (max-width: 540px) {
  .ac-validation-btn {
    min-width: 0;
    width: 100%;
  }
}

/* --- Bloc 6 : Réassurance --- */
.ac-reassure {
  padding: 56px 0 96px;
  border-top: 1px solid var(--border);
}

.ac-reassure-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ac-reassure-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 300;
  color: var(--white);
}

.ac-reassure-body {
  font-size: 0.92rem;
  color: var(--grey-light);
  line-height: 1.8;
}

.ac-reassure-list {
  margin-top: 8px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 26px;
}

.ac-reassure-list-label {
  font-size: 0.82rem;
  color: var(--grey-light);
  margin-bottom: 14px;
  line-height: 1.6;
}

.ac-reassure-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ac-reassure-list ul li {
  font-size: 0.86rem;
  color: var(--grey-light);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.ac-reassure-list ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.75rem;
}

/* ============================================================
   PAGE 12 — CONFIRMATION RECHARGE (acr-*)
   ============================================================ */

/* --- BLOC 1 : Hero ----------------------------------------- */
.acr-hero {
  padding: 100px 0 80px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.acr-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}

.acr-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.acr-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

.acr-hero-subtitle {
  font-size: 1.05rem;
  color: var(--grey-light);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.acr-hero-body {
  font-size: 0.9rem;
  color: var(--grey);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.acr-hero-cockpit {
  font-size: 0.85rem;
  color: var(--gold);
  opacity: 0.75;
  font-style: italic;
}

/* --- BLOC 2 : Récap pack ------------------------------------ */
.acr-recap {
  padding: var(--space-xl) 0;
}

.acr-recap-inner {
  max-width: 480px;
  margin: 0 auto;
}

.acr-recap-card {
  background: var(--surface-2);
  border: 1px solid var(--gem, rgba(255,255,255,0.12));
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

.acr-recap-gem-bar {
  height: 3px;
  background: var(--gem, var(--gold));
}

.acr-recap-top {
  padding: 28px 32px 20px;
  text-align: center;
}

.acr-recap-name {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gem, var(--gold));
  margin-bottom: 10px;
}

.acr-recap-ktotal {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 300;
  color: var(--white);
  line-height: 1;
}

.acr-recap-ktotal span {
  font-size: 1.4rem;
  color: var(--grey-light);
  margin-left: 3px;
}

.acr-recap-kbonus {
  font-size: 0.82rem;
  color: var(--gold);
  opacity: 0.75;
  margin-top: 8px;
}

.acr-recap-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 0 32px;
}

.acr-recap-pricing {
  padding: 20px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acr-recap-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.88rem;
}

.acr-recap-price-label {
  color: var(--grey);
}

.acr-recap-price-val {
  color: var(--grey-light);
  font-variant-numeric: tabular-nums;
}

.acr-recap-price-row--dim .acr-recap-price-label,
.acr-recap-price-row--dim .acr-recap-price-val {
  opacity: 0.6;
  font-size: 0.8rem;
}

.acr-recap-price-row--total .acr-recap-price-label {
  color: var(--white);
  font-weight: 500;
}

.acr-recap-price-row--total .acr-recap-price-val {
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.acr-recap-microcopy {
  font-size: 0.78rem;
  color: var(--grey);
  text-align: center;
  margin-top: var(--space-md);
  font-style: italic;
  line-height: 1.6;
}

.acr-recap-rib {
  padding: 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acr-recap-rib-label {
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 4px;
}

.acr-recap-rib-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 0.84rem;
}

.acr-recap-rib-key {
  color: var(--grey);
  flex-shrink: 0;
  min-width: 70px;
}

.acr-recap-rib-val {
  color: var(--grey-light);
  text-align: right;
}

.acr-recap-rib-val--mono {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--white);
}

.acr-recap-ref {
  padding: 20px 32px 28px;
  text-align: center;
  background: rgba(201,168,76,0.05);
}

.acr-recap-ref-label {
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.acr-recap-ref-value {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  font-weight: 600;
  user-select: all;
}

/* --- BLOC 3 : Billing ---------------------------------------- */
.acr-billing {
  padding: 80px 0 0;
}

.acr-billing-inner {
  max-width: 680px;
  margin: 0 auto;
}

.acr-billing-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 12px;
}

.acr-billing-subtitle {
  font-size: 0.875rem;
  color: var(--grey);
  line-height: 1.65;
  margin-bottom: 36px;
}

.acr-billing-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.acr-billing-toggle {
  display: flex;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
  margin-bottom: 32px;
}

.acr-billing-toggle-btn {
  background: transparent;
  border: none;
  color: var(--grey);
  font-size: 0.85rem;
  padding: 10px 28px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  letter-spacing: 0.03em;
}

.acr-billing-toggle-btn--active {
  background: rgba(200,170,90,0.12);
  color: var(--gold);
}

.acr-billing-toggle-btn:hover:not(.acr-billing-toggle-btn--active) {
  background: rgba(255,255,255,0.05);
  color: var(--white);
}

/* --- ÉTAT B — BLOC 6 : CTA Cockpit -------------------------- */
.acr-cta {
  padding: 80px 0 var(--space-2xl);
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}

.acr-cta-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.acr-cta-btn {
  justify-content: center;
  min-width: 280px;
}

.acr-cta-secondary {
  margin: 0;
}

.acr-cta-contact {
  font-size: 0.85rem;
  color: var(--grey);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}

.acr-cta-contact:hover {
  color: var(--grey-light);
  border-color: rgba(255,255,255,0.35);
}

.acr-cta-note {
  font-size: 0.78rem;
  color: var(--grey);
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}

/* --- ÉTAT B — BLOC 5 : Réassurance -------------------------- */
.acr-reassure {
  padding: var(--space-xl) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.acr-reassure-inner {
  max-width: 640px;
  margin: 0 auto;
}

.acr-reassure-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: var(--space-md);
}

.acr-reassure-body {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.acr-reassure-note {
  font-size: 0.85rem;
  color: var(--grey);
  line-height: 1.65;
  font-style: italic;
}

/* --- ÉTAT B — BLOC 4 : Délai réservation -------------------- */
.acr-reservation {
  padding: var(--space-xl) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.acr-reservation-inner {
  max-width: 640px;
  margin: 0 auto;
}

.acr-reservation-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: var(--space-md);
}

.acr-reservation-body {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.acr-reservation-secondary {
  font-size: 0.82rem;
  color: var(--grey);
  font-style: italic;
}

/* --- ÉTAT B — BLOC 3 : Étapes -------------------------------- */
.acr-steps {
  padding: var(--space-xl) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.acr-steps-inner {
  max-width: 640px;
  margin: 0 auto;
}

.acr-steps-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: var(--space-lg);
}

.acr-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.acr-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.acr-step-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.acr-step-icon svg {
  width: 18px;
  height: 18px;
}

.acr-step-content {
  padding-top: 9px;
}

.acr-step-text {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.65;
}

/* --- BLOC 4 : CTA Confirmation ------------------------------- */
.acr-final {
  margin-top: 48px;
  padding: 40px 0 80px;
  border-top: 1px solid rgba(255,255,255,0.07);
  text-align: center;
}

.acr-final-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.acr-final-btn {
  min-width: 280px;
  padding: 16px 40px;
  font-size: 1rem;
}

.acr-final-summary {
  font-size: 0.88rem;
  color: var(--grey-light);
  letter-spacing: 0.02em;
}

.acr-final-note {
  font-size: 0.78rem;
  color: var(--grey);
  font-style: italic;
  line-height: 1.6;
  max-width: 380px;
}

/* ============================================================
   PAGE 13 — MON PORTEFEUILLE (/cockpit/portefeuille)
   Prefix : cpf-
   ============================================================ */

/* --- Bloc 1 : Hero ----------------------------------------- */
.cpf-hero {
  padding: 110px 0 90px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cpf-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}

.cpf-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.cpf-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: var(--space-md);
}

.cpf-hero-subtitle {
  font-size: 1.05rem;
  color: var(--grey-light);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto;
}

/* --- Bloc 2 : Synthèse globale ----------------------------- */
.cpf-stats {
  padding: 64px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cpf-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cpf-stat-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 28px 28px 24px;
  transition: border-color var(--ease);
}

.cpf-stat-card:hover {
  border-color: rgba(201,168,76,0.2);
}

.cpf-stat-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 12px;
}

.cpf-stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cpf-stat-value--gold {
  color: var(--gold);
}

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

@media (max-width: 480px) {
  .cpf-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cpf-stat-card { padding: 20px 18px; }
  .cpf-stat-value { font-size: 1.6rem; }
}

/* --- Bloc 3 : Tableau portefeuille ------------------------- */
.cpf-table-section {
  padding: 80px 0 100px;
}

/* État rempli — tableau */
.cpf-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.cpf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.cpf-table thead tr {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cpf-table th {
  padding: 18px 24px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}

.cpf-table-row {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background var(--ease);
}

.cpf-table-row:last-child {
  border-bottom: none;
}

.cpf-table-row:hover {
  background: rgba(201,168,76,0.04);
}

.cpf-table td {
  padding: 20px 24px;
  vertical-align: middle;
  color: var(--grey-light);
}

.cpf-td-projet { color: var(--white); }
.cpf-projet-name { font-weight: 500; }

.cpf-td-montant {
  font-variant-numeric: tabular-nums;
  color: var(--white);
  font-weight: 500;
}

.cpf-td-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cpf-td-valo { font-style: italic; }

.cpf-td-link {
  color: var(--gold);
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: opacity var(--ease);
}

.cpf-td-link:hover { opacity: 0.7; }

/* Badges statut */
.cpf-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.cpf-badge--actif,
.cpf-badge--en_suivi,
.cpf-badge--investissement_confirme {
  background: rgba(82, 168, 82, 0.12);
  color: #6fcf6f;
  border: 1px solid rgba(82,168,82,0.2);
}

.cpf-badge--en_structuration {
  background: rgba(201, 168, 76, 0.10);
  color: var(--gold-light);
  border: 1px solid rgba(201,168,76,0.2);
}

.cpf-badge--cloture,
.cpf-badge--sortie_realisee {
  background: rgba(255,255,255,0.05);
  color: var(--grey);
  border: 1px solid rgba(255,255,255,0.08);
}

/* État vide */
.cpf-empty {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

/* En-tête fantôme : colonnes + lignes ghost */
.cpf-table-ghost {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 0 24px;
}

.cpf-ghost-cols {
  display: flex;
  gap: 32px;
  padding: 18px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cpf-ghost-cols span {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(136,136,136,0.4);
  flex: 1;
}

.cpf-ghost-cols span:first-child { flex: 2; }

.cpf-ghost-rows {
  padding: 8px 0;
}

.cpf-ghost-row {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.cpf-ghost-row:last-child { border-bottom: none; }

.cpf-ghost-cell {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  flex: 1;
  opacity: 0.5;
}

.cpf-ghost-cell--lg { flex: 2; width: 140px; }
.cpf-ghost-cell--md { width: 80px; }
.cpf-ghost-cell--sm { width: 50px; flex: none; }

/* Corps de l'état vide */
.cpf-empty-body {
  padding: 56px 40px 60px;
  text-align: center;
}

.cpf-empty-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 28px;
  color: var(--gold);
  opacity: 0.45;
}

.cpf-empty-icon svg {
  width: 100%;
  height: 100%;
}

.cpf-empty-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 300;
  color: var(--white);
  margin-bottom: var(--space-md);
  line-height: 1.3;
}

.cpf-empty-text {
  font-size: 0.95rem;
  color: var(--grey-light);
  line-height: 1.75;
  max-width: 520px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .cpf-ghost-cols,
  .cpf-ghost-row { gap: 16px; }
  .cpf-ghost-cols span:nth-child(n+4),
  .cpf-ghost-cell:nth-child(n+4) { display: none; }
  .cpf-empty-body { padding: 40px 24px 48px; }
}

/* --- Bloc 4 : Actions ---------------------------------------- */
.cpf-actions {
  padding: 0 0 100px;
}

.cpf-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.cpf-action-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  text-decoration: none;
  transition: border-color var(--ease), background var(--ease);
}

.cpf-action-card:hover {
  border-color: rgba(201,168,76,0.25);
  background: var(--surface-2);
}

.cpf-action-card--soon {
  opacity: 0.5;
  pointer-events: none;
}

.cpf-action-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: var(--gold);
  opacity: 0.7;
}

.cpf-action-icon svg {
  width: 100%;
  height: 100%;
}

.cpf-action-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 12px;
}

.cpf-action-title {
  font-size: 0.92rem;
  color: var(--white);
  font-weight: 400;
  line-height: 1.4;
}

.cpf-action-arrow {
  color: var(--gold);
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform var(--ease);
}

.cpf-action-card:hover .cpf-action-arrow {
  transform: translateX(4px);
}

.cpf-action-soon {
  font-size: 0.72rem;
  color: var(--grey);
  font-style: italic;
  flex-shrink: 0;
}

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

/* ============================================================
   PAGE 14 — HISTORIQUE DES TRANSACTIONS (/cockpit/historique)
   Prefix : cht-
   ============================================================ */

/* --- Bloc 1 : Hero ----------------------------------------- */
.cht-hero {
  padding: 110px 0 90px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cht-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}

.cht-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.cht-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: var(--space-md);
}

.cht-hero-subtitle {
  font-size: 1.05rem;
  color: var(--grey-light);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto;
}

/* --- Bloc 2 : Résumé global -------------------------------- */
.cht-stats {
  padding: 64px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cht-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cht-stat-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 28px 28px 24px;
  transition: border-color var(--ease);
}

.cht-stat-card:hover {
  border-color: rgba(201,168,76,0.2);
}

.cht-stat-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 12px;
}

.cht-stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cht-stat-value--gold { color: var(--gold); }

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

@media (max-width: 480px) {
  .cht-stats-grid { gap: 12px; }
  .cht-stat-card  { padding: 20px 18px; }
  .cht-stat-value { font-size: 1.6rem; }
}

/* --- Bloc 3 : Tableau transactions ------------------------- */
.cht-table-section {
  padding: 80px 0 100px;
}

.cht-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.cht-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.cht-table thead tr {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cht-table th {
  padding: 18px 24px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}

.cht-table-row {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background var(--ease);
}

.cht-table-row:last-child { border-bottom: none; }

.cht-table-row:hover { background: rgba(201,168,76,0.04); }

.cht-table td {
  padding: 20px 24px;
  vertical-align: middle;
  color: var(--grey-light);
}

.cht-td-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--grey);
  font-size: 0.85rem;
}

.cht-td-type {
  color: var(--white);
  font-weight: 500;
}

.cht-td-niveau {
  font-size: 0.88rem;
  color: var(--grey-light);
}

.cht-td-mouvement {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  font-size: 0.95rem;
}

.cht-td-mouvement--credit { color: var(--gold-light); }
.cht-td-mouvement--debit  { color: var(--grey); }

.cht-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.cht-badge--validated {
  background: rgba(82,168,82,0.12);
  color: #6fcf6f;
  border: 1px solid rgba(82,168,82,0.2);
}

.cht-badge--pending {
  background: rgba(201,168,76,0.10);
  color: var(--gold-light);
  border: 1px solid rgba(201,168,76,0.2);
}

.cht-badge--cancelled {
  background: rgba(255,255,255,0.05);
  color: var(--grey);
  border: 1px solid rgba(255,255,255,0.08);
}

.cht-td-link {
  color: var(--gold);
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: opacity var(--ease);
}

.cht-td-link:hover { opacity: 0.7; }

/* Mobile : cartes */
.cht-cards-mobile { display: none; }

.cht-card-mobile {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 10px;
}

.cht-card-mobile-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 12px;
}

.cht-card-mobile-type {
  font-weight: 500;
  color: var(--white);
  font-size: 0.92rem;
}

.cht-card-mobile-mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cht-card-mobile-date {
  font-size: 0.8rem;
  color: var(--grey);
  font-variant-numeric: tabular-nums;
}

.cht-card-mobile-niveau {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--grey);
  font-style: italic;
}

@media (max-width: 700px) {
  .cht-table-wrap  { display: none; }
  .cht-cards-mobile { display: block; }
}

/* État vide */
.cht-empty {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 72px 40px 80px;
  text-align: center;
}

.cht-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 28px;
  color: var(--gold);
  opacity: 0.4;
}

.cht-empty-icon svg { width: 100%; height: 100%; }

.cht-empty-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 300;
  color: var(--white);
  margin-bottom: var(--space-md);
}

.cht-empty-text {
  font-size: 0.95rem;
  color: var(--grey-light);
  line-height: 1.75;
  max-width: 480px;
  margin: 0 auto;
}

/* --- Bloc 4 : Actions -------------------------------------- */
.cht-actions {
  padding: 0 0 100px;
}

.cht-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.cht-action-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  text-decoration: none;
  transition: border-color var(--ease), background var(--ease);
}

.cht-action-card:hover {
  border-color: rgba(201,168,76,0.25);
  background: var(--surface-2);
}

.cht-action-card--soon {
  opacity: 0.5;
  pointer-events: none;
}

.cht-action-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: var(--gold);
  opacity: 0.7;
}

.cht-action-icon svg { width: 100%; height: 100%; }

.cht-action-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 12px;
}

.cht-action-title {
  font-size: 0.92rem;
  color: var(--white);
  font-weight: 400;
  line-height: 1.4;
}

.cht-action-arrow {
  color: var(--gold);
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform var(--ease);
}

.cht-action-card:hover .cht-action-arrow {
  transform: translateX(4px);
}

.cht-action-soon {
  font-size: 0.72rem;
  color: var(--grey);
  font-style: italic;
  flex-shrink: 0;
}

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

/* ============================================================
   PAGE 15 — MES INFORMATIONS (/mes-informations)
   Prefix : cmi-
   ============================================================ */

/* --- Bloc 1 : Hero ----------------------------------------- */
.cmi-hero {
  padding: 110px 0 90px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cmi-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}

.cmi-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.cmi-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: var(--space-md);
}

.cmi-hero-subtitle {
  font-size: 1.05rem;
  color: var(--grey-light);
  line-height: 1.75;
  max-width: 520px;
  margin: 0 auto;
}

/* --- Bloc 2 : Statut investisseur -------------------------- */
.cmi-statut {
  padding: 56px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cmi-statut-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.cmi-statut-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.cmi-statut-badge--actif {
  background: rgba(82,168,82,0.1);
  color: #7dd87d;
  border: 1px solid rgba(82,168,82,0.25);
}

.cmi-statut-badge--pending {
  background: rgba(201,168,76,0.1);
  color: var(--gold-light);
  border: 1px solid rgba(201,168,76,0.25);
}

.cmi-statut-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cmi-statut-badge--actif  .cmi-statut-dot { background: #7dd87d; }
.cmi-statut-badge--pending .cmi-statut-dot {
  background: var(--gold);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.cmi-statut-sub {
  font-size: 0.88rem;
  color: var(--grey);
  line-height: 1.65;
  max-width: 460px;
}

/* --- Blocs 3, 4, 5 : sections infos ------------------------ */
.cmi-section {
  padding: 64px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cmi-section-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 32px;
}

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

.cmi-grid--address {
  margin-top: 16px;
  grid-template-columns: 2fr 1fr 1fr 1fr;
}

.cmi-field {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  transition: border-color var(--ease);
}

.cmi-field:hover {
  border-color: rgba(201,168,76,0.15);
}

.cmi-field--wide {
  grid-column: span 1;
}

.cmi-field-label {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 8px;
}

.cmi-field-value {
  font-size: 0.95rem;
  color: var(--white);
  line-height: 1.5;
  font-weight: 400;
}

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

@media (max-width: 520px) {
  .cmi-grid,
  .cmi-grid--address { grid-template-columns: 1fr; }
}

.cmi-grid--k {
  margin-top: 16px;
  grid-template-columns: repeat(4, 1fr);
}

.cmi-field-value--mono {
  font-family: 'Courier New', monospace;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--grey-light);
}

.cmi-field-value--large {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cmi-field-value--gold { color: var(--gold); }

.cmi-k-unit {
  font-size: 1rem;
  color: var(--grey);
  font-family: var(--font-body);
  font-weight: 400;
}

.cmi-inline-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 500;
}

.cmi-inline-badge--actif {
  background: rgba(82,168,82,0.12);
  color: #7dd87d;
  border: 1px solid rgba(82,168,82,0.2);
}

.cmi-inline-badge--pending {
  background: rgba(201,168,76,0.10);
  color: var(--gold-light);
  border: 1px solid rgba(201,168,76,0.2);
}

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

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

.cmi-field--wide2 {
  grid-column: span 1;
}

.cmi-grid--rep {
  margin-top: 16px;
  grid-template-columns: repeat(3, 1fr);
}

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

@media (max-width: 520px) {
  .cmi-grid--rep { grid-template-columns: 1fr; }
}

/* --- Bloc 6 : Actions -------------------------------------- */
.cmi-actions {
  padding: 64px 0 100px;
}

.cmi-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cmi-action-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  text-decoration: none;
  transition: border-color var(--ease), background var(--ease);
}

.cmi-action-card:hover {
  border-color: rgba(201,168,76,0.25);
  background: var(--surface-2);
}

.cmi-action-card--soon {
  opacity: 0.5;
  pointer-events: none;
}

.cmi-action-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  color: var(--gold);
  opacity: 0.7;
}

.cmi-action-icon svg { width: 100%; height: 100%; }

.cmi-action-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 12px;
}

.cmi-action-title {
  font-size: 0.92rem;
  color: var(--white);
  font-weight: 400;
  line-height: 1.4;
}

.cmi-action-arrow {
  color: var(--gold);
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform var(--ease);
}

.cmi-action-card:hover .cmi-action-arrow {
  transform: translateX(4px);
}

.cmi-action-soon {
  font-size: 0.72rem;
  color: var(--grey);
  font-style: italic;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .cmi-actions-grid { grid-template-columns: 1fr; }
}

/* --- Bloc 7 : Confidentialité ------------------------------ */
.cmi-confidentialite {
  padding: 48px 0 80px;
}

.cmi-confid-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: 28px 32px;
}

.cmi-confid-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--gold);
  opacity: 0.4;
}

.cmi-confid-icon svg { width: 100%; height: 100%; }

.cmi-confid-text {
  font-size: 0.83rem;
  color: var(--grey);
  line-height: 1.7;
  font-style: italic;
}

@media (max-width: 600px) {
  .cmi-confid-inner { flex-direction: column; text-align: center; padding: 24px 20px; }
}

/* ============================================================
   PAGE 16 — MES DOCUMENTS (/cockpit/mes-documents)
   Prefix : cmd-
   ============================================================ */

/* --- Bloc 1 : Hero ----------------------------------------- */
.cmd-hero {
  padding: 110px 0 90px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cmd-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}

.cmd-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.cmd-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: var(--space-md);
}

.cmd-hero-subtitle {
  font-size: 1.05rem;
  color: var(--grey-light);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto;
}

/* --- Bloc 2 : Résumé documentaire -------------------------- */
.cmd-stats {
  padding: 64px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cmd-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.cmd-stat-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  transition: border-color var(--ease);
}

.cmd-stat-card:hover {
  border-color: rgba(201,168,76,0.2);
}

.cmd-stat-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 12px;
  line-height: 1.4;
}

.cmd-stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cmd-stat-value--gold { color: var(--gold); }

@media (max-width: 900px) {
  .cmd-stats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .cmd-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .cmd-stat-card  { padding: 18px 16px; }
  .cmd-stat-value { font-size: 1.6rem; }
}

/* --- Bloc 5 : Filtres & recherche -------------------------- */
.cmd-filters {
  padding: 32px 0 0;
}

.cmd-filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.cmd-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cmd-filter-tab {
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--grey);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}

.cmd-filter-tab:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.18);
}

.cmd-filter-tab--active {
  color: var(--gold);
  border-color: rgba(201,168,76,0.35);
  background: rgba(201,168,76,0.07);
}

.cmd-search-wrap {
  position: relative;
  flex-shrink: 0;
}

.cmd-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--grey);
  pointer-events: none;
}

.cmd-search-input {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 8px 16px 8px 36px;
  font-size: 0.82rem;
  color: var(--white);
  width: 220px;
  outline: none;
  transition: border-color var(--ease);
  font-family: var(--font-body);
}

.cmd-search-input::placeholder { color: var(--grey); }

.cmd-search-input:focus {
  border-color: rgba(201,168,76,0.3);
}

@media (max-width: 700px) {
  .cmd-filters-bar { flex-direction: column; align-items: stretch; }
  .cmd-search-input { width: 100%; }
}

/* --- Bloc 3 : Tableau documents ---------------------------- */
.cmd-table-section {
  padding: 80px 0 40px;
}

.cmd-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.cmd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.cmd-table thead tr {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cmd-table th {
  padding: 18px 24px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}

.cmd-table-row {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background var(--ease);
}

.cmd-table-row:last-child { border-bottom: none; }
.cmd-table-row:hover { background: rgba(201,168,76,0.04); }

.cmd-table td {
  padding: 20px 24px;
  vertical-align: middle;
  color: var(--grey-light);
}

.cmd-td-name   { color: var(--white); font-weight: 500; }
.cmd-td-projet { font-size: 0.88rem; }
.cmd-td-date   { font-size: 0.85rem; color: var(--grey); font-variant-numeric: tabular-nums; white-space: nowrap; }

.cmd-td-action {
  color: var(--gold);
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: opacity var(--ease);
}
.cmd-td-action:hover { opacity: 0.7; }

/* Badges catégorie */
.cmd-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.cmd-badge--facture        { background: rgba(201,168,76,0.10); color: var(--gold-light); border: 1px solid rgba(201,168,76,0.2); }
.cmd-badge--attestation    { background: rgba(82,168,82,0.10);  color: #7dd87d;           border: 1px solid rgba(82,168,82,0.2); }
.cmd-badge--investissement { background: rgba(100,140,220,0.10); color: #8aabf0;          border: 1px solid rgba(100,140,220,0.2); }
.cmd-badge--reporting      { background: rgba(180,120,220,0.10); color: #c49fe0;          border: 1px solid rgba(180,120,220,0.2); }
.cmd-badge--administratif  { background: rgba(255,255,255,0.05); color: var(--grey-light); border: 1px solid rgba(255,255,255,0.08); }

/* Badges statut */
.cmd-badge--statut-disponible    { background: rgba(82,168,82,0.10);  color: #7dd87d;           border: 1px solid rgba(82,168,82,0.2); }
.cmd-badge--statut-en_preparation { background: rgba(201,168,76,0.10); color: var(--gold-light); border: 1px solid rgba(201,168,76,0.2); }
.cmd-badge--statut-nouveau        { background: rgba(100,140,220,0.10); color: #8aabf0;          border: 1px solid rgba(100,140,220,0.2); }
.cmd-badge--statut-archive        { background: rgba(255,255,255,0.05); color: var(--grey);      border: 1px solid rgba(255,255,255,0.07); }

/* Mobile : cartes */
.cmd-cards-mobile { display: none; }

.cmd-card-mobile {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 10px;
}

.cmd-card-mobile-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.cmd-card-mobile-name  { font-weight: 500; color: var(--white); font-size: 0.92rem; }

.cmd-card-mobile-mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cmd-card-mobile-date   { font-size: 0.8rem; color: var(--grey); font-variant-numeric: tabular-nums; }

.cmd-card-mobile-action {
  display: inline-block;
  color: var(--gold);
  font-size: 0.85rem;
  text-decoration: none;
}

@media (max-width: 700px) {
  .cmd-table-wrap    { display: none; }
  .cmd-cards-mobile  { display: block; }
}

/* État vide */
.cmd-empty {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.cmd-table-ghost   { border-bottom: 1px solid rgba(255,255,255,0.07); padding: 0 24px; }

.cmd-ghost-cols {
  display: flex;
  gap: 24px;
  padding: 18px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cmd-ghost-cols span {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(136,136,136,0.4);
  flex: 1;
}

.cmd-ghost-cols span:first-child { flex: 2; }

.cmd-ghost-rows  { padding: 8px 0; }

.cmd-ghost-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.cmd-ghost-row:last-child { border-bottom: none; }

.cmd-ghost-cell {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  opacity: 0.5;
  flex: 1;
}

.cmd-ghost-cell--xl { flex: 2; }
.cmd-ghost-cell--md { width: 80px; flex: none; }
.cmd-ghost-cell--sm { width: 60px; flex: none; }
.cmd-ghost-cell--xs { width: 40px; flex: none; }

.cmd-empty-body {
  padding: 56px 40px 60px;
  text-align: center;
}

.cmd-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 28px;
  color: var(--gold);
  opacity: 0.4;
}

.cmd-empty-icon svg { width: 100%; height: 100%; }

.cmd-empty-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 300;
  color: var(--white);
  margin-bottom: var(--space-md);
}

.cmd-empty-text {
  font-size: 0.95rem;
  color: var(--grey-light);
  line-height: 1.75;
  max-width: 480px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .cmd-ghost-cols span:nth-child(n+4),
  .cmd-ghost-cell:nth-child(n+4) { display: none; }
  .cmd-empty-body { padding: 40px 24px 48px; }
}

/* --- Bloc 4 : Note fiche détaillée ------------------------- */
.cmd-fiche-note {
  padding: 56px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cmd-fiche-inner {
  max-width: 860px;
  margin: 0 auto;
}

.cmd-fiche-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cmd-fiche-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.cmd-fiche-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: var(--gold);
  opacity: 0.5;
  margin-top: 2px;
}

.cmd-fiche-icon svg { width: 100%; height: 100%; }

.cmd-fiche-item-title {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 6px;
}

.cmd-fiche-item-text {
  font-size: 0.82rem;
  color: var(--grey);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .cmd-fiche-items { grid-template-columns: 1fr; gap: 16px; }
}

/* --- Bloc 6 : Actions -------------------------------------- */
.cmd-actions {
  padding: 64px 0 100px;
}

.cmd-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.cmd-action-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  text-decoration: none;
  transition: border-color var(--ease), background var(--ease);
}

.cmd-action-card:hover {
  border-color: rgba(201,168,76,0.25);
  background: var(--surface-2);
}

.cmd-action-card--soon {
  opacity: 0.5;
  pointer-events: none;
}

.cmd-action-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  color: var(--gold);
  opacity: 0.7;
}

.cmd-action-icon svg { width: 100%; height: 100%; }

.cmd-action-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 12px;
}

.cmd-action-title {
  font-size: 0.92rem;
  color: var(--white);
  font-weight: 400;
  line-height: 1.4;
}

.cmd-action-arrow {
  color: var(--gold);
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform var(--ease);
}

.cmd-action-card:hover .cmd-action-arrow {
  transform: translateX(4px);
}

.cmd-action-soon {
  font-size: 0.72rem;
  color: var(--grey);
  font-style: italic;
  flex-shrink: 0;
}

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


/* ============================================================
   PAGE 17 — FICHE INVESTISSEMENT (/cockpit/investissement/:id)
   Prefix : civ-
   ============================================================ */

/* --- Bloc 1 : Hero ----------------------------------------- */
.civ-hero {
  padding: 110px 0 90px;
  text-align: center;
  background: var(--black);
}

.civ-hero-inner {
  max-width: 700px;
  margin: 0 auto;
}

.civ-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.civ-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: var(--space-md);
  letter-spacing: -0.01em;
}

.civ-hero-subtitle {
  font-size: 1.05rem;
  color: var(--grey-light);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto;
}

/* --- Bloc 2 : Synthèse investisseur ----------------------- */
.civ-synthese {
  padding: 0 0 80px;
  background: var(--black);
}

.civ-synthese-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.civ-synthese-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 28px 28px 24px;
  transition: border-color var(--ease);
}

.civ-synthese-card:hover {
  border-color: rgba(201,168,76,0.2);
}

.civ-synthese-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 14px;
}

.civ-synthese-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.civ-synthese-value--md {
  font-size: 1.15rem;
  font-weight: 400;
  font-family: var(--font-body);
  color: var(--white);
  line-height: 1.4;
}

.civ-synthese-value--gold { color: var(--gold); }

.civ-synthese-unit {
  font-size: 0.85em;
  color: var(--grey-light);
  font-family: var(--font-body);
  font-weight: 400;
}

/* Badges statut */
.civ-synthese-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  margin-top: 4px;
}

.civ-synthese-badge--actif               { background: rgba(74,222,128,0.12); color: #4ade80; }
.civ-synthese-badge--en_suivi            { background: rgba(201,168,76,0.14); color: var(--gold); }
.civ-synthese-badge--en_structuration    { background: rgba(147,197,253,0.12); color: #93c5fd; }
.civ-synthese-badge--investissement_confirme { background: rgba(74,222,128,0.12); color: #4ade80; }
.civ-synthese-badge--cloture             { background: rgba(156,163,175,0.12); color: #9ca3af; }
.civ-synthese-badge--sortie_realisee     { background: rgba(201,168,76,0.14); color: var(--gold); }

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

@media (max-width: 480px) {
  .civ-synthese-grid { gap: 12px; }
  .civ-synthese-card { padding: 20px 18px; }
  .civ-synthese-value { font-size: 1.6rem; }
}

/* --- Bloc 3 : Présentation du projet ---------------------- */
.civ-projet {
  padding: 80px 0 80px;
  background: var(--surface);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.civ-projet-header {
  margin-bottom: 48px;
}

.civ-projet-eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.civ-projet-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
}

.civ-projet-resume {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 28px 32px;
  margin-bottom: 40px;
}

.civ-projet-resume-text {
  font-size: 1.05rem;
  color: var(--white);
  line-height: 1.8;
}

.civ-projet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.civ-projet-item {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: 28px 28px 24px;
  transition: border-color var(--ease);
}

.civ-projet-item:hover {
  border-color: rgba(201,168,76,0.15);
}

.civ-projet-item-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.civ-projet-item-body {
  font-size: 0.95rem;
  color: var(--grey-light);
  line-height: 1.75;
}

.civ-projet-approche {
  background: rgba(201,168,76,0.04);
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: var(--radius-md);
  padding: 32px 36px;
}

.civ-projet-approche-body {
  font-size: 0.98rem;
  color: var(--grey-light);
  line-height: 1.8;
  font-style: italic;
}

@media (max-width: 700px) {
  .civ-projet-grid { grid-template-columns: 1fr; }
  .civ-projet-resume { padding: 22px 22px; }
  .civ-projet-approche { padding: 24px 22px; }
}

/* --- Bloc 4 : Timeline suivi ------------------------------ */
.civ-timeline {
  padding: 80px 0;
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.civ-timeline-header {
  margin-bottom: 56px;
}

.civ-timeline-eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.civ-timeline-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
}

.civ-timeline-track {
  max-width: 720px;
}

.civ-timeline-event {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.civ-timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
  padding-top: 4px;
}

.civ-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
  flex-shrink: 0;
  transition: box-shadow var(--ease);
}

.civ-timeline-event--entree .civ-timeline-dot {
  width: 16px;
  height: 16px;
  box-shadow: 0 0 0 4px rgba(201,168,76,0.2);
}

.civ-timeline-event:hover .civ-timeline-dot {
  box-shadow: 0 0 0 5px rgba(201,168,76,0.25);
}

.civ-timeline-line {
  width: 1px;
  flex: 1;
  min-height: 48px;
  background: linear-gradient(to bottom, rgba(201,168,76,0.4), rgba(201,168,76,0.08));
  margin-top: 6px;
}

.civ-timeline-content {
  padding-bottom: 48px;
  flex: 1;
}

.civ-timeline-event:last-child .civ-timeline-content {
  padding-bottom: 0;
}

.civ-timeline-date {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.civ-timeline-event-title {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.35;
}

.civ-timeline-event-body {
  font-size: 0.92rem;
  color: var(--grey-light);
  line-height: 1.75;
}

@media (max-width: 600px) {
  .civ-timeline-track { max-width: 100%; }
  .civ-timeline-event { gap: 18px; }
  .civ-timeline-content { padding-bottom: 36px; }
}

/* --- Bloc 5 : Documents associés -------------------------- */
.civ-docs {
  padding: 80px 0;
  background: var(--surface);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.civ-docs-header {
  margin-bottom: 48px;
}

.civ-docs-eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.civ-docs-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
}

.civ-docs-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
}

.civ-docs-table {
  width: 100%;
  border-collapse: collapse;
}

.civ-docs-th {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 16px 24px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  white-space: nowrap;
}

.civ-docs-th--action { text-align: right; }

.civ-docs-tr {
  transition: background var(--ease);
}

.civ-docs-tr:hover {
  background: rgba(255,255,255,0.02);
}

.civ-docs-tr:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.civ-docs-td {
  padding: 18px 24px;
  font-size: 0.92rem;
  color: var(--grey-light);
  vertical-align: middle;
}

.civ-docs-td--titre {
  color: var(--white);
  font-weight: 400;
}

.civ-docs-td--date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.civ-docs-td--action { text-align: right; }

/* Badges catégorie */
.civ-docs-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.civ-docs-badge--souscription { background: rgba(201,168,76,0.12); color: var(--gold); }
.civ-docs-badge--juridique    { background: rgba(147,197,253,0.12); color: #93c5fd; }
.civ-docs-badge--synthese     { background: rgba(167,243,208,0.12); color: #6ee7b7; }
.civ-docs-badge--reporting    { background: rgba(196,181,253,0.12); color: #c4b5fd; }
.civ-docs-badge--attestation  { background: rgba(253,186,116,0.12); color: #fdba74; }

/* Bouton télécharger */
.civ-docs-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 20px;
  padding: 5px 14px;
  transition: background var(--ease), border-color var(--ease);
  white-space: nowrap;
}

.civ-docs-btn:hover {
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.5);
}

.civ-docs-btn-soon {
  font-size: 0.78rem;
  color: var(--grey);
  font-style: italic;
}

/* État vide */
.civ-docs-empty {
  text-align: center;
  padding: 72px 24px;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
}

.civ-docs-empty-icon {
  color: var(--gold);
  opacity: 0.4;
  margin-bottom: 20px;
}

.civ-docs-empty-title {
  font-size: 1rem;
  color: var(--white);
  font-weight: 400;
  margin-bottom: 8px;
}

.civ-docs-empty-body {
  font-size: 0.88rem;
  color: var(--grey);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .civ-docs-th,
  .civ-docs-td { padding: 14px 16px; }
}

/* --- Bloc 6 : Mises à jour investisseur ------------------- */
.civ-actu {
  padding: 80px 0;
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.civ-actu-header {
  margin-bottom: 48px;
}

.civ-actu-eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.civ-actu-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
}

.civ-actu-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 820px;
}

.civ-actu-item {
  padding: 36px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background var(--ease);
}

.civ-actu-item:first-child {
  border-top: 1px solid rgba(255,255,255,0.06);
}

.civ-actu-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.civ-actu-date {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  font-variant-numeric: tabular-nums;
}

.civ-actu-tag {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,168,76,0.1);
  padding: 3px 10px;
  border-radius: 20px;
}

.civ-actu-item-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.4;
  margin-bottom: 12px;
}

.civ-actu-item-body {
  font-size: 0.93rem;
  color: var(--grey-light);
  line-height: 1.8;
}

/* État vide */
.civ-actu-empty {
  text-align: center;
  padding: 72px 24px;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  max-width: 820px;
}

.civ-actu-empty-icon {
  color: var(--gold);
  opacity: 0.4;
  margin-bottom: 20px;
}

.civ-actu-empty-title {
  font-size: 1rem;
  color: var(--white);
  font-weight: 400;
  margin-bottom: 8px;
}

.civ-actu-empty-body {
  font-size: 0.88rem;
  color: var(--grey);
  line-height: 1.6;
}

/* --- Bloc 7 : Actions disponibles ------------------------- */
.civ-actions {
  padding: 80px 0 100px;
  background: var(--surface);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.civ-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.civ-action-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  text-decoration: none;
  transition: border-color var(--ease), background var(--ease);
}

.civ-action-card:hover {
  border-color: rgba(201,168,76,0.3);
  background: rgba(201,168,76,0.03);
}

.civ-action-icon {
  color: var(--gold);
  opacity: 0.75;
  flex-shrink: 0;
  transition: opacity var(--ease);
}

.civ-action-card:hover .civ-action-icon {
  opacity: 1;
}

.civ-action-body {
  flex: 1;
}

.civ-action-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 4px;
}

.civ-action-sub {
  font-size: 0.78rem;
  color: var(--grey);
  line-height: 1.4;
}

.civ-action-arrow {
  color: var(--gold);
  font-size: 1rem;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform var(--ease), opacity var(--ease);
}

.civ-action-card:hover .civ-action-arrow {
  transform: translateX(4px);
  opacity: 1;
}

@media (max-width: 700px) {
  .civ-actions-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .civ-action-card { padding: 20px 20px; gap: 16px; }
}


/* ============================================================
   PAGE 18 — DÉTAIL MOUVEMENT K (/cockpit/mouvement/:id)
   Prefix : cmv-
   ============================================================ */

/* --- Bloc 1 : Hero ----------------------------------------- */
.cmv-hero {
  padding: 110px 0 90px;
  text-align: center;
  background: var(--black);
}

.cmv-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}

.cmv-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.cmv-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: var(--space-md);
  letter-spacing: -0.01em;
}

.cmv-hero-subtitle {
  font-size: 1.05rem;
  color: var(--grey-light);
  line-height: 1.75;
  max-width: 540px;
  margin: 0 auto;
}

/* --- Bloc 2 : Synthèse du mouvement ----------------------- */
.cmv-synthese {
  padding: 0 0 80px;
  background: var(--black);
}

.cmv-synthese-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cmv-synthese-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 28px 28px 24px;
  transition: border-color var(--ease);
}

.cmv-synthese-card:hover {
  border-color: rgba(201,168,76,0.2);
}

.cmv-synthese-card--wide {
  grid-column: span 2;
}

.cmv-synthese-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 14px;
}

.cmv-synthese-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cmv-synthese-value--lg {
  font-size: 1.5rem;
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
}

.cmv-synthese-value--md {
  font-size: 1.15rem;
  font-weight: 400;
  font-family: var(--font-body);
  color: var(--white);
  line-height: 1.4;
}

.cmv-synthese-value--gold { color: var(--gold); }

.cmv-synthese-unit {
  font-size: 0.85em;
  color: var(--grey-light);
  font-family: var(--font-body);
  font-weight: 400;
}

/* Référence monospace */
.cmv-synthese-ref {
  font-size: 0.9rem;
  font-family: 'Courier New', monospace;
  color: var(--gold);
  letter-spacing: 0.04em;
  line-height: 1.4;
  word-break: break-all;
  user-select: all;
}

/* Badges statut */
.cmv-synthese-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  margin-top: 4px;
}

.cmv-synthese-badge--validated  { background: rgba(74,222,128,0.12);  color: #4ade80; }
.cmv-synthese-badge--pending    { background: rgba(201,168,76,0.14);  color: var(--gold); }
.cmv-synthese-badge--active     { background: rgba(74,222,128,0.12);  color: #4ade80; }
.cmv-synthese-badge--completed  { background: rgba(167,243,208,0.12); color: #6ee7b7; }
.cmv-synthese-badge--processing { background: rgba(147,197,253,0.12); color: #93c5fd; }
.cmv-synthese-badge--archived   { background: rgba(156,163,175,0.12); color: #9ca3af; }
.cmv-synthese-badge--cancelled  { background: rgba(156,163,175,0.12); color: #9ca3af; }

@media (max-width: 760px) {
  .cmv-synthese-grid { grid-template-columns: repeat(2, 1fr); }
  .cmv-synthese-card--wide { grid-column: span 2; }
}

@media (max-width: 480px) {
  .cmv-synthese-grid { gap: 12px; }
  .cmv-synthese-card { padding: 20px 18px; }
  .cmv-synthese-card--wide { grid-column: span 2; }
}

/* --- Bloc 3 : Détail financier ----------------------------- */
.cmv-finance {
  padding: 80px 0;
  background: var(--surface);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.cmv-finance-header {
  margin-bottom: 48px;
}

.cmv-finance-eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.cmv-finance-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
}

.cmv-finance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.cmv-finance-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 36px 36px 32px;
}

.cmv-finance-card-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}

.cmv-finance-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
}

.cmv-finance-row-key {
  font-size: 0.9rem;
  color: var(--grey);
  line-height: 1.4;
}

.cmv-finance-row-val {
  font-size: 1rem;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex-shrink: 0;
}

.cmv-finance-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 8px 0;
}

.cmv-finance-row--total {
  padding-top: 14px;
}

.cmv-finance-row--total .cmv-finance-row-key {
  color: var(--white);
  font-weight: 500;
}

.cmv-finance-row-val--total {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--white);
}

.cmv-finance-row-val--gold {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--gold);
}

@media (max-width: 700px) {
  .cmv-finance-grid { grid-template-columns: 1fr; }
  .cmv-finance-card { padding: 28px 24px; }
}

/* --- Bloc 4 : Timeline de l'opération --------------------- */
.cmv-timeline {
  padding: 80px 0;
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.cmv-timeline-header {
  margin-bottom: 56px;
}

.cmv-timeline-eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.cmv-timeline-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
}

.cmv-timeline-track {
  max-width: 680px;
}

.cmv-timeline-step {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.cmv-timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
  padding-top: 2px;
}

.cmv-timeline-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

/* done : cercle plein doré + checkmark */
.cmv-timeline-step--done .cmv-timeline-dot {
  background: var(--gold);
  color: var(--black);
}

/* active : cercle contour + pulse */
.cmv-timeline-step--active .cmv-timeline-dot {
  background: rgba(201,168,76,0.1);
  border: 2px solid var(--gold);
}

.cmv-timeline-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: cmv-pulse 1.8s ease-in-out infinite;
}

@keyframes cmv-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

/* pending : cercle outline gris discret */
.cmv-timeline-step--pending .cmv-timeline-dot {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.15);
}

.cmv-timeline-line {
  width: 1px;
  flex: 1;
  min-height: 40px;
  margin-top: 4px;
}

.cmv-timeline-step--done + .cmv-timeline-step .cmv-timeline-line,
.cmv-timeline-step--done .cmv-timeline-line {
  background: linear-gradient(to bottom, rgba(201,168,76,0.5), rgba(201,168,76,0.15));
}

.cmv-timeline-step--active .cmv-timeline-line,
.cmv-timeline-step--pending .cmv-timeline-line {
  background: rgba(255,255,255,0.08);
}

.cmv-timeline-content {
  padding-bottom: 44px;
  flex: 1;
}

.cmv-timeline-step:last-child .cmv-timeline-content {
  padding-bottom: 0;
}

.cmv-timeline-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}

.cmv-timeline-step-num {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.cmv-timeline-date {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--grey);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.cmv-timeline-step-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 6px;
  line-height: 1.35;
}

.cmv-timeline-step--pending .cmv-timeline-step-title {
  color: var(--grey);
}

.cmv-timeline-step-body {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.75;
}

.cmv-timeline-step--pending .cmv-timeline-step-body {
  color: var(--grey);
  opacity: 0.6;
}

@media (max-width: 600px) {
  .cmv-timeline-track { max-width: 100%; }
  .cmv-timeline-step { gap: 18px; }
  .cmv-timeline-dot { width: 24px; height: 24px; }
  .cmv-timeline-marker { width: 24px; }
}

/* --- Bloc 5 : Documents associés -------------------------- */
.cmv-docs {
  padding: 80px 0;
  background: var(--surface);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.cmv-docs-header { margin-bottom: 48px; }

.cmv-docs-eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.cmv-docs-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
}

.cmv-docs-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
}

.cmv-docs-table { width: 100%; border-collapse: collapse; }

.cmv-docs-th {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 16px 24px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  white-space: nowrap;
}

.cmv-docs-th--action { text-align: right; }

.cmv-docs-tr { transition: background var(--ease); }
.cmv-docs-tr:hover { background: rgba(255,255,255,0.02); }
.cmv-docs-tr:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.05); }

.cmv-docs-td {
  padding: 18px 24px;
  font-size: 0.92rem;
  color: var(--grey-light);
  vertical-align: middle;
}

.cmv-docs-td--titre { color: var(--white); font-weight: 400; }
.cmv-docs-td--date  { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmv-docs-td--action { text-align: right; }

.cmv-docs-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.cmv-docs-badge--facture      { background: rgba(201,168,76,0.12);  color: var(--gold); }
.cmv-docs-badge--confirmation { background: rgba(74,222,128,0.12);  color: #4ade80; }
.cmv-docs-badge--attestation  { background: rgba(253,186,116,0.12); color: #fdba74; }
.cmv-docs-badge--justificatif { background: rgba(147,197,253,0.12); color: #93c5fd; }
.cmv-docs-badge--administratif{ background: rgba(196,181,253,0.12); color: #c4b5fd; }

.cmv-docs-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 20px;
  padding: 5px 14px;
  transition: background var(--ease), border-color var(--ease);
  white-space: nowrap;
}

.cmv-docs-btn:hover {
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.5);
}

.cmv-docs-btn-soon {
  font-size: 0.78rem;
  color: var(--grey);
  font-style: italic;
}

.cmv-docs-empty {
  text-align: center;
  padding: 72px 24px;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
}

.cmv-docs-empty-icon   { color: var(--gold); opacity: 0.4; margin-bottom: 20px; }
.cmv-docs-empty-title  { font-size: 1rem; color: var(--white); font-weight: 400; margin-bottom: 8px; }
.cmv-docs-empty-body   { font-size: 0.88rem; color: var(--grey); line-height: 1.6; }

@media (max-width: 640px) {
  .cmv-docs-th, .cmv-docs-td { padding: 14px 16px; }
}

/* --- Bloc 6 : Impact sur le cockpit ----------------------- */
.cmv-impact {
  padding: 80px 0;
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.cmv-impact-header { margin-bottom: 56px; }

.cmv-impact-eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.cmv-impact-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
}

.cmv-impact-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 700px;
}

.cmv-impact-state {
  flex: 1;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 36px 36px 32px;
  text-align: center;
  transition: border-color var(--ease);
}

.cmv-impact-state--after {
  border-color: rgba(201,168,76,0.25);
}

.cmv-impact-state-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 20px;
}

.cmv-impact-state-k {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 300;
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.cmv-impact-state-k--before { color: var(--grey-light); }
.cmv-impact-state-k--after  { color: var(--gold); }

.cmv-impact-state-unit {
  font-size: 0.5em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--grey);
  vertical-align: middle;
}

.cmv-impact-state-sub {
  font-size: 0.82rem;
  color: var(--grey);
  margin-bottom: 16px;
}

.cmv-impact-state-niveau {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  background: rgba(201,168,76,0.12);
  color: var(--gold);
}

.cmv-impact-state-niveau--none {
  background: rgba(255,255,255,0.05);
  color: var(--grey);
}

.cmv-impact-state-niveau--gold {
  background: rgba(201,168,76,0.14);
  color: var(--gold);
}

.cmv-impact-arrow {
  color: var(--gold);
  opacity: 0.5;
  flex-shrink: 0;
}

.cmv-impact-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  max-width: 700px;
  font-size: 0.88rem;
  color: var(--grey-light);
  background: rgba(201,168,76,0.05);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  line-height: 1.55;
}

.cmv-impact-note svg {
  color: var(--gold);
  flex-shrink: 0;
}

.cmv-impact-note strong { color: var(--white); font-weight: 500; }

@media (max-width: 600px) {
  .cmv-impact-wrap { flex-direction: column; gap: 0; }
  .cmv-impact-state { width: 100%; }
  .cmv-impact-arrow { transform: rotate(90deg); margin: 4px 0; }
  .cmv-impact-state { padding: 28px 24px; }
}

/* --- Bloc 7 : Actions disponibles ------------------------- */
.cmv-actions {
  padding: 80px 0 100px;
  background: var(--surface);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.cmv-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.cmv-action-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  text-decoration: none;
  transition: border-color var(--ease), background var(--ease);
}

.cmv-action-card:hover {
  border-color: rgba(201,168,76,0.3);
  background: rgba(201,168,76,0.03);
}

.cmv-action-icon {
  color: var(--gold);
  opacity: 0.75;
  flex-shrink: 0;
  transition: opacity var(--ease);
}

.cmv-action-card:hover .cmv-action-icon { opacity: 1; }

.cmv-action-body { flex: 1; }

.cmv-action-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 4px;
}

.cmv-action-sub {
  font-size: 0.78rem;
  color: var(--grey);
  line-height: 1.4;
}

.cmv-action-arrow {
  color: var(--gold);
  font-size: 1rem;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform var(--ease), opacity var(--ease);
}

.cmv-action-card:hover .cmv-action-arrow {
  transform: translateX(4px);
  opacity: 1;
}

@media (max-width: 700px) {
  .cmv-actions-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cmv-action-card { padding: 20px 20px; gap: 16px; }
}


/* ============================================================
   PAGE 19 — CENTRE DOCUMENTAIRE (/cockpit/centre-documentaire)
   Prefix : ccd-
   ============================================================ */

/* --- Bloc 1 : Hero ----------------------------------------- */
.ccd-hero {
  padding: 110px 0 80px;
  text-align: center;
  background: var(--black);
}

.ccd-hero-inner { max-width: 680px; margin: 0 auto; }

.ccd-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.ccd-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: var(--space-md);
  letter-spacing: -0.01em;
}

.ccd-hero-subtitle {
  font-size: 1.05rem;
  color: var(--grey-light);
  line-height: 1.75;
  max-width: 540px;
  margin: 0 auto 20px;
}

.ccd-hero-count {
  font-size: 0.78rem;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* --- État vide premium ------------------------------------- */
.ccd-empty-main {
  padding: 60px 0 100px;
  background: var(--black);
}

.ccd-empty-sections {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.ccd-empty-section-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  text-align: center;
  opacity: 0.7;
}

.ccd-empty-section-icon {
  color: var(--gold);
  opacity: 0.5;
  margin-bottom: 16px;
}

.ccd-empty-section-label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.4;
}

.ccd-empty-section-desc {
  font-size: 0.78rem;
  color: var(--grey);
  line-height: 1.6;
}

.ccd-empty-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--grey-light);
  background: rgba(201,168,76,0.04);
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
}

.ccd-empty-note svg { color: var(--gold); flex-shrink: 0; }

@media (max-width: 900px) { .ccd-empty-sections { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .ccd-empty-sections { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* --- Filtres & recherche ----------------------------------- */
.ccd-filters {
  background: var(--surface);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 20;
}

.ccd-filters-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.ccd-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ccd-filter-tab {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--grey);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 6px 16px;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}

.ccd-filter-tab:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.25);
}

.ccd-filter-tab--active {
  color: var(--gold);
  border-color: rgba(201,168,76,0.4);
  background: rgba(201,168,76,0.07);
}

.ccd-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 7px 16px;
  min-width: 220px;
  transition: border-color var(--ease);
}

.ccd-search-wrap:focus-within {
  border-color: rgba(201,168,76,0.3);
}

.ccd-search-icon { color: var(--grey); flex-shrink: 0; }

.ccd-search-input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.85rem;
  color: var(--white);
  width: 100%;
}

.ccd-search-input::placeholder { color: var(--grey); }

/* --- Sous-sections communes -------------------------------- */
.ccd-section {
  padding: 60px 0;
  background: var(--black);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ccd-section:nth-child(even) { background: var(--surface); }

.ccd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.ccd-section-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ccd-section-icon {
  width: 40px;
  height: 40px;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}

.ccd-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
}

.ccd-section-count {
  font-size: 0.72rem;
  color: var(--grey);
  margin-top: 3px;
  letter-spacing: 0.05em;
}

/* --- Tableaux communs -------------------------------------- */
.ccd-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
}

.ccd-table { width: 100%; border-collapse: collapse; }

.ccd-th {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 14px 22px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  white-space: nowrap;
  background: rgba(255,255,255,0.02);
}

.ccd-th--action { text-align: right; }

.ccd-tr { transition: background var(--ease); }
.ccd-tr:hover { background: rgba(255,255,255,0.025); }
.ccd-tr:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.05); }
.ccd-tr--hidden { display: none; }

.ccd-td {
  padding: 16px 22px;
  font-size: 0.9rem;
  color: var(--grey-light);
  vertical-align: middle;
}

.ccd-td--titre { color: var(--white); font-weight: 400; }
.ccd-td--date  { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ccd-td--action { text-align: right; }

/* Badges type */
.ccd-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.ccd-badge--activation  { background: rgba(201,168,76,0.12); color: var(--gold); }
.ccd-badge--rechargement{ background: rgba(147,197,253,0.12); color: #93c5fd; }
.ccd-badge--avoir       { background: rgba(196,181,253,0.12); color: #c4b5fd; }

/* Statuts */
.ccd-statut {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.ccd-statut--disponible     { color: #4ade80; }
.ccd-statut--archive        { color: var(--grey); }
.ccd-statut--mis_a_jour     { color: var(--gold); }
.ccd-statut--en_preparation { color: #93c5fd; font-style: italic; }

/* Bouton télécharger */
.ccd-btn-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 20px;
  padding: 5px 13px;
  transition: background var(--ease), border-color var(--ease);
  white-space: nowrap;
}

.ccd-btn-dl:hover {
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.5);
}

.ccd-btn-soon {
  font-size: 0.78rem;
  color: var(--grey);
  font-style: italic;
}

/* --- Actions ----------------------------------------------- */
.ccd-actions {
  padding: 80px 0 100px;
  background: var(--surface);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.ccd-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.ccd-action-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  text-decoration: none;
  transition: border-color var(--ease), background var(--ease);
}

.ccd-action-card:hover {
  border-color: rgba(201,168,76,0.3);
  background: rgba(201,168,76,0.03);
}

.ccd-action-card--soon {
  opacity: 0.5;
  pointer-events: none;
}

.ccd-action-icon {
  color: var(--gold);
  opacity: 0.75;
  flex-shrink: 0;
  transition: opacity var(--ease);
}

.ccd-action-card:hover .ccd-action-icon { opacity: 1; }
.ccd-action-body { flex: 1; }

.ccd-action-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 4px;
}

.ccd-action-sub {
  font-size: 0.78rem;
  color: var(--grey);
  line-height: 1.4;
}

.ccd-action-arrow {
  color: var(--gold);
  font-size: 1rem;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform var(--ease), opacity var(--ease);
}

.ccd-action-card:hover .ccd-action-arrow {
  transform: translateX(4px);
  opacity: 1;
}

@media (max-width: 900px) {
  .ccd-filters-inner { flex-direction: column; align-items: flex-start; }
  .ccd-search-wrap { width: 100%; }
}

@media (max-width: 700px) {
  .ccd-actions-grid { grid-template-columns: 1fr; }
  .ccd-section { padding: 48px 0; }
}

@media (max-width: 640px) {
  .ccd-th, .ccd-td { padding: 12px 14px; }
}