/* Runtime partagé des sections Bayou. Charger après ../styles.css. */
[data-bayou-section] { box-sizing: border-box; color: var(--text-body); }
[data-bayou-section] *, [data-bayou-section] *::before, [data-bayou-section] *::after { box-sizing: border-box; }
[data-bayou-section] img { max-width: 100%; }
.cb-shell { width: min(calc(100% - (var(--grid-margin) * 2)), var(--container-max)); margin-inline: auto; }
.cb-shell--wide { width: min(calc(100% - (var(--grid-margin) * 2)), var(--container-wide)); margin-inline: auto; }
.cb-overline { max-width: none; margin: 0; color: var(--brand-text); font-family: var(--font-mono); font-size: var(--mono-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.cb-section { padding-block: var(--section-space-block); border-bottom: var(--border-width) solid var(--border-subtle); background: var(--surface-raised); }
.cb-section--white { background: var(--surface-card); }
.cb-section-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); align-items: end; gap: var(--space-10); margin-bottom: var(--section-gap-title); }
.cb-section-head h2 { max-width: 16ch; margin: var(--space-4) 0 0; color: var(--text-strong); font-family: var(--font-display); font-size: var(--display-lg); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: var(--display-lg-lh); }
.cb-section-head > p { max-width: 54ch; margin: 0; color: var(--text-subtitle); font-size: var(--body-lg); font-weight: var(--weight-medium); line-height: var(--body-lg-lh); }

.cb-section-head--center { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 860px; margin-inline: auto; margin-bottom: var(--section-gap-title); }
.cb-section-head--center .cb-overline { max-width: none; margin-inline: auto; text-align: center; }
.cb-section-head--center h2,
.cb-section-head--center .cb-section-title { max-width: 24ch; margin: var(--space-4) auto 0; text-align: center; }
.cb-section-head--center > p,
.cb-section-head--center .cb-section-lede { max-width: 58ch; margin: var(--space-4) auto 0; text-align: center; }

.cb-button { min-height: var(--control-height-lg); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding-inline: var(--space-6); border: var(--border-width) solid transparent; border-radius: var(--radius-control); font-weight: var(--weight-bold); text-decoration: none; cursor: pointer; transition: transform var(--dur-snap) var(--ease-snap), background-color var(--dur-snap) var(--ease-snap), border-color var(--dur-snap) var(--ease-snap), color var(--dur-snap) var(--ease-snap); }
.cb-button svg { width: var(--space-5); height: var(--space-5); }
.cb-button--primary { border-color: var(--cta-bg); background: var(--cta-bg); color: var(--cta-text); }
.cb-button--secondary { border-color: var(--border-default); background: var(--surface-card); color: var(--text-strong); }
a.cb-button:hover, button.cb-button:hover { transform: translateY(-2px); text-decoration: none; }
.cb-button--primary:hover { border-color: var(--cta-bg-hover); background: var(--cta-bg-hover); color: var(--cta-text); }
.cb-button--secondary:hover { border-color: var(--border-strong); color: var(--text-strong); }
a.cb-button:active, button.cb-button:active { transform: translateY(2px) scale(.97); transition-duration: var(--dur-instant); }

.cb-hero { padding-block: var(--section-space-block-compact) var(--section-space-block); border-bottom: var(--border-width) solid var(--border-subtle); background-color: var(--surface-raised); background-image: radial-gradient(var(--border-subtle) var(--border-width), transparent var(--border-width)); background-size: var(--space-4) var(--space-4); }
.cb-hero__copy { width: min(100%, 820px); margin-inline: auto; text-align: center; }
.cb-hero__copy .cb-overline { max-width: none; margin-inline: auto; text-align: center; }
.cb-hero__copy h1 { max-width: 22ch; margin: var(--space-4) auto 0; color: var(--text-strong); font-family: var(--font-display); font-size: var(--display-hero); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: var(--display-hero-lh); }
.cb-hero__copy h1 em { color: var(--brand-text); font-style: normal; }
.cb-hero__copy > p:not(.cb-overline) { max-width: 56ch; margin: var(--space-6) auto 0; color: var(--text-subtitle); font-size: var(--body-lg); font-weight: var(--weight-medium); line-height: var(--body-lg-lh); }
.cb-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); }
.cb-product-stage { width: min(100%, 1120px); margin: var(--space-12) auto 0; overflow: hidden; border: var(--border-width) solid var(--border-default); border-radius: var(--radius-2xl); background: var(--surface-card); }
.cb-windowbar { min-height: var(--control-height-lg); display: flex; align-items: center; gap: var(--space-3); padding-inline: var(--space-5); border-bottom: var(--border-width) solid var(--border-subtle); }
.cb-windowbar__dots { display: flex; gap: var(--space-2); }
.cb-windowbar__dots span { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--border-strong); }
.cb-windowbar__label { margin-inline: auto; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--mono-xs); }
.cb-product-stage img { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--surface-raised); object-fit: contain; object-position: center; }

.cb-gallery-panel { padding: clamp(var(--space-6), 5vw, var(--space-12)); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-2xl); background: var(--surface-card); }
.cb-gallery-panel__title { max-width: 24ch; margin: 0 0 var(--space-10); color: var(--text-strong); font-family: var(--font-display); font-size: var(--display-md); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: var(--display-md-lh); }
.cb-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10) var(--space-5); }
.cb-feature { transition: transform var(--dur-snap) var(--ease-snap); }
.cb-feature:hover { transform: translateY(-2px); }
.cb-feature:active { transform: translateY(2px) scale(.97); transition-duration: var(--dur-instant); }
.cb-feature__media { aspect-ratio: 16 / 9; overflow: hidden; border: var(--border-width) solid var(--border-default); border-radius: var(--radius-xl); background: var(--surface-raised); }
.cb-feature__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cb-feature h3, .cb-rail-card h3 { margin: var(--space-4) 0 0; color: var(--text-strong); font-family: var(--font-display); font-size: var(--heading-sm); font-weight: var(--weight-display); }
.cb-feature p, .cb-rail-card p { margin: var(--space-2) 0 0; color: var(--text-subtitle); font-weight: var(--weight-medium); line-height: var(--body-md-lh); }

.cb-rail { overflow: hidden; }
.cb-rail__track, .proof-rail .track { display: flex; gap: var(--space-5); margin: 0; padding: 0; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; scroll-snap-type: x mandatory; list-style: none; }
.cb-rail__track::-webkit-scrollbar, .proof-rail .track::-webkit-scrollbar { display: none; }
.cb-rail-card { flex: 0 0 min(380px, 78vw); scroll-snap-align: start; }
.cb-rail-card__media { aspect-ratio: 1; overflow: hidden; border: var(--border-width) solid var(--border-default); border-radius: var(--radius-xl); background: var(--surface-raised); }
.cb-rail-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cb-rail__controls, .proof-rail .controls { display: flex; gap: var(--space-3); margin-top: var(--space-8); }
.cb-icon-button, .proof-rail .controls button { width: var(--control-height-lg); min-height: var(--control-height-lg); padding: 0; border: var(--border-width) solid var(--border-default); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--text-strong); cursor: pointer; transition: transform var(--dur-snap) var(--ease-snap), border-color var(--dur-snap) var(--ease-snap), background-color var(--dur-snap) var(--ease-snap); }
.cb-icon-button:hover, .proof-rail .controls button:hover { transform: translateY(-2px); border-color: var(--border-strong); background: var(--surface-hover); }
.cb-icon-button:active, .proof-rail .controls button:active { transform: translateY(2px) scale(.97); transition-duration: var(--dur-instant); }
.cb-icon-button:disabled, .proof-rail .controls button:disabled { opacity: .45; cursor: default; transform: none; }

.cb-triptych { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.cb-triptych-card { --triptych-source: var(--danger-text); --triptych-ink: color-mix(in srgb, var(--triptych-source) 58%, var(--text-strong)); --triptych-copy: color-mix(in srgb, var(--triptych-source) 42%, var(--text-body)); min-height: 520px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: var(--border-width) solid var(--border-default); border-radius: var(--radius-2xl); background: var(--danger-surface); }
.cb-triptych-card--green { --triptych-source: var(--success-text); background: var(--success-surface); }
.cb-triptych-card--gold { --triptych-source: var(--warning-text); min-height: 420px; grid-column: 1 / -1; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); grid-template-rows: 1fr; background: var(--warning-surface); }
.cb-triptych-card__copy { align-self: start; padding: clamp(var(--space-6), 5vw, var(--space-10)); }
.cb-triptych-card h3 { margin: 0; color: var(--triptych-ink); font-family: var(--font-display); font-size: var(--display-md); font-weight: var(--weight-display); }
.cb-triptych-card p { margin: var(--space-4) 0 0; color: var(--triptych-copy); font-weight: var(--weight-medium); }
.cb-triptych-card__visual { align-self: end; min-height: 230px; display: grid; place-items: end center; overflow: hidden; }
.cb-triptych-card__visual img { display: block; width: 94%; max-height: 300px; object-fit: contain; object-position: center bottom; }

.cb-scene-wrap { padding-block: var(--space-10); background: var(--surface-card); }
.cb-scene { min-height: 760px; display: grid; align-items: center; padding: clamp(var(--space-8), 7vw, var(--space-12)); overflow: hidden; border: var(--border-width) solid var(--border-default); border-radius: var(--radius-2xl); background-color: var(--surface-page); color: var(--text-body); }
[data-bayou-section="SEC-005"] .cb-scene { background-image: linear-gradient(var(--overlay-scrim), var(--overlay-scrim)), linear-gradient(var(--overlay-scrim), var(--overlay-scrim)), url("../assets/references/visual-proof/baptiste-scene.webp"); background-position: center; background-size: cover; }
.cb-scene__content { width: min(100%, 1040px); margin-inline: auto; text-align: center; }
.cb-scene .cb-overline { display: block; color: var(--accent); text-align: center; }
.cb-scene h2 { max-width: 15ch; margin: var(--space-5) auto 0; color: var(--text-strong); font-family: var(--font-display); font-size: var(--display-xl); font-weight: var(--weight-display); }
.cb-scene__lede { max-width: 62ch; margin: var(--space-5) auto 0; color: var(--text-subtitle); font-size: var(--body-lg); }
.cb-scene__proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-10); text-align: left; }
.cb-glass-card { padding: var(--space-6); border: var(--border-width) solid var(--border-inverse); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--surface-card) 22%, transparent); }
.cb-glass-card b { display: block; color: var(--text-strong); font-family: var(--font-display); font-size: var(--display-md); }
.cb-glass-card strong { display: block; margin-top: var(--space-2); color: var(--text-strong); }
.cb-glass-card p { color: var(--text-subtitle); }

.cb-guided { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); overflow: hidden; border: var(--border-width) solid var(--border-default); border-radius: var(--radius-2xl); background: var(--surface-card); }
.cb-guided__nav { padding: var(--space-8); border-right: var(--border-width) solid var(--border-subtle); background: var(--surface-raised); }
.cb-guided__nav h3 { margin: 0; color: var(--text-strong); font-family: var(--font-display); font-size: var(--heading-lg); }
.cb-guided__nav p { margin: var(--space-3) 0 var(--space-8); color: var(--text-subtitle); font-weight: var(--weight-medium); }
.cb-guided__tabs { display: grid; gap: var(--space-2); }
.cb-guided__tab { width: 100%; min-height: var(--control-height-lg); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-3); border: var(--border-width) solid transparent; border-radius: var(--radius-control); background: transparent; text-align: left; cursor: pointer; transition: transform var(--dur-snap) var(--ease-snap), background-color var(--dur-snap) var(--ease-snap); }
.cb-guided__tab:hover { transform: translateY(-2px); background: var(--surface-hover); }
.cb-guided__tab:active { transform: translateY(2px) scale(.97); transition-duration: var(--dur-instant); }
.cb-guided__tab[aria-selected="true"] { border-color: var(--border-default); background: var(--surface-card); color: var(--text-strong); }
.cb-guided__tab span { width: var(--space-8); height: var(--space-8); display: grid; place-items: center; border-radius: var(--radius-control); background: var(--brand-subtle); color: var(--brand-text); font-family: var(--font-mono); font-size: var(--mono-xs); font-weight: var(--weight-medium); }
.cb-guided__stage { min-width: 0; padding: var(--space-8); }
.cb-guided__stage header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }
.cb-guided__stage h3 { margin: var(--space-2) 0 0; color: var(--text-strong); font-family: var(--font-display); font-size: var(--heading-lg); }
.cb-guided__stage p { color: var(--text-subtitle); font-weight: var(--weight-medium); }
.cb-guided__media { aspect-ratio: 16 / 9; margin-top: var(--space-8); overflow: hidden; border: var(--border-width) solid var(--border-default); border-radius: var(--radius-xl); background: var(--surface-raised); }
.cb-guided__media img { display: block; width: 100%; height: 100%; object-fit: contain; }

.cb-compare, .cb-families { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.cb-compare-card, .cb-family-card { min-height: 520px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: var(--border-width) solid var(--border-default); border-radius: var(--radius-2xl); background: var(--surface-card); }
.cb-compare-card { min-height: 620px; }
.cb-compare-card--after { background: var(--success-surface); }
.cb-compare-card__copy, .cb-family-card__copy { padding: var(--space-8); }
.cb-compare-card__state, .cb-family-card__name { margin: 0 0 var(--space-3); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--mono-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.cb-compare-card--after .cb-compare-card__state, .cb-family-card__name { color: var(--brand-text); }
.cb-family-card:nth-child(2) { background: var(--success-surface); }
.cb-family-card:nth-child(3) { background: var(--info-surface); }
.cb-family-card:nth-child(4) { background: var(--warning-surface); }
.cb-compare-card h3, .cb-family-card h3 { margin: 0; color: var(--text-strong); font-family: var(--font-display); font-size: var(--display-md); font-weight: var(--weight-display); }
.cb-compare-card__visual, .cb-family-card__visual { align-self: end; min-height: 260px; display: grid; place-items: end center; overflow: hidden; }
.cb-compare-card__visual img, .cb-family-card__visual img { display: block; width: 100%; max-height: 380px; object-fit: contain; object-position: center bottom; }

.product-stage-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; gap: var(--space-10); padding: var(--section-space-block-compact) var(--grid-margin); background: var(--surface-page); }
.product-stage-split h1 { margin: var(--space-4) 0 0; color: var(--text-strong); font-family: var(--font-display); font-size: var(--display-lg); font-weight: var(--weight-display); }
.product-stage-split .lede { color: var(--text-subtitle); }
.product-stage-split .stage { padding: var(--space-4); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-xl); background: var(--surface-raised); }
.product-stage-split .stage img { display: block; width: 100%; border-radius: var(--radius-lg); }
.product-stage-split .caption { display: flex; justify-content: space-between; gap: var(--space-4); margin: var(--space-3) 0 0; color: var(--text-subtitle); font-size: var(--body-sm); }
.result-card, .trial-timeline, .proof-rail { width: min(100%, var(--container-max)); margin-inline: auto; padding: var(--space-8); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-xl); background: var(--surface-card); }
.result-card blockquote { margin: var(--space-6) 0; color: var(--text-strong); font-family: var(--font-display); font-size: var(--heading-lg); font-weight: var(--weight-display); }
.result-card .facts, .trial-timeline ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.result-card .fact, .trial-timeline li { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-sunken); }
.trial-timeline ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof-rail > header h2 { max-width: 18ch; margin: var(--space-4) 0 0; color: var(--text-strong); font-family: var(--font-display); font-size: var(--display-lg); }
.proof-rail .track { margin-top: var(--space-8); }
.proof-rail .slide { flex: 0 0 min(320px, 82vw); scroll-snap-align: start; }
.proof-rail .media { aspect-ratio: 1; overflow: hidden; border: var(--border-width) solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-raised); }
.proof-rail .media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.proof-rail .caption { color: var(--text-subtitle); }

@media (max-width: 980px) {
  .cb-section-head { grid-template-columns: 1fr; align-items: start; gap: var(--space-5); }
  .cb-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-guided { grid-template-columns: 1fr; }
  .cb-guided__nav { border-right: 0; border-bottom: var(--border-width) solid var(--border-subtle); }
  .cb-guided__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cb-guided__tab { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .cb-triptych-card--gold { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cb-gallery, .cb-triptych, .cb-compare, .cb-families, .cb-scene__proofs { grid-template-columns: 1fr; }
  .cb-guided__tabs, .result-card .facts, .trial-timeline ol { grid-template-columns: 1fr; }
  .product-stage-split { grid-template-columns: 1fr; }
  .cb-triptych-card--gold { grid-column: auto; }
  .cb-triptych-card, .cb-compare-card, .cb-family-card, .cb-scene { min-height: 0; }
  .cb-guided__tab { grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; text-align: left; }
  .cb-guided__stage header { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-rail__track, .proof-rail .track { scroll-behavior: auto; }
}

/* SEC-015 · extraction fidèle de CrocoClub #cadre .offer-features. */
.cc-visual-benefits {
  --cc-benefit-page: var(--surface-page);
  --cc-benefit-card: var(--surface-card);
  --cc-benefit-raised: var(--surface-raised);
  --cc-benefit-strong: var(--text-strong);
  --cc-benefit-muted: var(--text-muted);
  --cc-benefit-faint: var(--text-faint);
  --cc-benefit-border: var(--border-default);
  --cc-benefit-border-soft: var(--border-subtle);
  --cc-benefit-gold: var(--or-500);
  --cc-benefit-gold-soft: var(--or-400);
  --cc-benefit-live: var(--accent);
  --cc-benefit-type-n2: var(--mono-xs);
  --cc-benefit-type-n1: var(--mono-sm);

  /* Le screenshot de référence cadre la grille comme un module autonome. */
  padding: var(--space-12) 0;
  background: var(--cc-benefit-page);
  color: var(--text-body);
}

.cc-visual-benefits__grid {
  width: min(1180px, calc(100% - 48px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-inline: auto;
}

.cc-visual-benefit { min-width: 0; }

.cc-visual-benefit__visual {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--cc-benefit-border-soft);
  border-radius: 16px;
  background: var(--cc-benefit-card);
}

.cc-visual-benefit:nth-child(1) .cc-visual-benefit__visual,
.cc-visual-benefit:nth-child(5) .cc-visual-benefit__visual {
  background: color-mix(in srgb, var(--brand-solid) 15%, var(--cc-benefit-card));
}

.cc-visual-benefit:nth-child(2) .cc-visual-benefit__visual,
.cc-visual-benefit:nth-child(6) .cc-visual-benefit__visual {
  background: color-mix(in srgb, var(--cc-benefit-gold) 8%, var(--cc-benefit-card));
}

.cc-visual-benefit h3 {
  margin: 15px 0 0;
  color: var(--cc-benefit-strong);
  font-family: var(--font-display);
  font-size: var(--heading-md);
  font-weight: var(--weight-display);
  line-height: 1.1;
}

.cc-visual-benefit > p {
  margin: 7px 0 0;
  color: var(--cc-benefit-muted);
  font-size: var(--cc-benefit-type-n1);
  line-height: 1.55;
}

.cc-visual-benefit__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cc-benefit-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cc-benefit-page) 80%, var(--text-strong) 20%);
  color: var(--cc-benefit-gold-soft);
}

.cc-visual-benefit__icon svg { width: 20px; height: 20px; }

.cc-visual-benefit__mini-title {
  margin-top: 20px;
  color: var(--cc-benefit-strong);
  font-size: var(--cc-benefit-type-n1);
  font-weight: var(--weight-bold);
}

.cc-visual-benefit__bars { display: grid; gap: 8px; margin-top: 18px; }

.cc-visual-benefit__bar {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-strong) 8%, transparent);
}

.cc-visual-benefit__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-solid);
}

.cc-visual-benefit__focus-card {
  position: absolute;
  inset: 30px 20px auto;
  padding: 17px;
  transform: rotate(-1deg);
  border: 1px solid color-mix(in srgb, var(--cc-benefit-gold) 30%, var(--cc-benefit-border));
  border-radius: 13px;
  background: var(--cc-benefit-raised);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--cc-benefit-gold) 10%, transparent);
}

.cc-visual-benefit__focus-card span {
  color: var(--cc-benefit-gold-soft);
  font-family: var(--font-mono);
  font-size: var(--cc-benefit-type-n2);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
}

.cc-visual-benefit__focus-card strong {
  display: block;
  margin-top: 8px;
  color: var(--cc-benefit-strong);
  font-size: var(--cc-benefit-type-n1);
}

.cc-visual-benefit__focus-card small {
  display: block;
  margin-top: 8px;
  color: var(--cc-benefit-muted);
  font-size: var(--cc-benefit-type-n2);
  line-height: 1.4;
}

.cc-visual-benefit__calendar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 28px;
}

.cc-visual-benefit__day {
  min-height: 96px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cc-benefit-border-soft);
  border-radius: 11px;
  background: var(--cc-benefit-raised);
  text-align: center;
}

.cc-visual-benefit__day span {
  color: var(--cc-benefit-faint);
  font-family: var(--font-mono);
  font-size: var(--cc-benefit-type-n2);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
}

.cc-visual-benefit__day strong {
  display: block;
  margin-top: 8px;
  color: var(--cc-benefit-strong);
  font-size: var(--cc-benefit-type-n2);
}

.cc-visual-benefit__day.is-active {
  border-color: color-mix(in srgb, var(--cc-benefit-live) 22%, var(--cc-benefit-border));
  background: color-mix(in srgb, var(--cc-benefit-live) 6%, var(--cc-benefit-raised));
}

.cc-visual-benefit__stack { display: grid; gap: 10px; margin-top: 16px; }

.cc-visual-benefit__stack-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--cc-benefit-border-soft);
  border-radius: 10px;
  background: var(--cc-benefit-raised);
}

.cc-visual-benefit__stack-row svg { width: 17px; height: 17px; color: var(--cc-benefit-gold-soft); }
.cc-visual-benefit__stack-row strong { color: var(--cc-benefit-strong); font-size: var(--cc-benefit-type-n2); }
.cc-visual-benefit__stack-row span { color: var(--cc-benefit-live); font-family: var(--font-mono); font-size: var(--cc-benefit-type-n2); font-weight: var(--weight-medium); }

.cc-visual-benefit__before-after {
  min-height: 180px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.cc-visual-benefit__state {
  padding: 15px;
  border: 1px solid var(--cc-benefit-border-soft);
  border-radius: 11px;
  background: var(--cc-benefit-raised);
}

.cc-visual-benefit__state.is-after { border-color: color-mix(in srgb, var(--cc-benefit-live) 22%, var(--cc-benefit-border)); }

.cc-visual-benefit__state span {
  color: var(--cc-benefit-faint);
  font-family: var(--font-mono);
  font-size: var(--cc-benefit-type-n2);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
}

.cc-visual-benefit__state strong {
  display: block;
  margin-top: 8px;
  color: var(--cc-benefit-strong);
  font-family: var(--font-display);
  font-size: var(--heading-lg);
}

.cc-visual-benefit__state.is-after strong { color: var(--cc-benefit-live); }
.cc-visual-benefit__before-after > svg { width: 18px; height: 18px; color: var(--cc-benefit-gold-soft); }

.cc-visual-benefit__wall { position: relative; min-height: 180px; }

.cc-visual-benefit__wall-card {
  position: absolute;
  width: 76%;
  padding: 12px;
  border: 1px solid var(--cc-benefit-border-soft);
  border-radius: 11px;
  background: var(--cc-benefit-raised);
  box-shadow: var(--shadow-2);
}

.cc-visual-benefit__wall-card:nth-child(1) { top: 8px; left: 2%; transform: rotate(-2deg); }
.cc-visual-benefit__wall-card:nth-child(2) { top: 64px; right: 2%; transform: rotate(1deg); }
.cc-visual-benefit__wall-card:nth-child(3) { bottom: 7px; left: 12%; transform: rotate(-.5deg); }
.cc-visual-benefit__wall-card b { display: block; color: var(--cc-benefit-strong); font-size: var(--cc-benefit-type-n2); }
.cc-visual-benefit__wall-card span { display: block; margin-top: 5px; color: var(--cc-benefit-muted); font-size: var(--cc-benefit-type-n2); line-height: 1.35; }

@media (max-width: 980px) {
  .cc-visual-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .cc-visual-benefits { padding: var(--space-12) 0; }
  .cc-visual-benefits__grid { width: min(100% - 28px, 1180px); grid-template-columns: 1fr; }
  .cc-visual-benefit__calendar { grid-template-columns: repeat(2, 1fr); }
  .cc-visual-benefit__before-after { grid-template-columns: 1fr; }
  .cc-visual-benefit__before-after > svg { margin-inline: auto; transform: rotate(90deg); }
}

/* SEC-016 — SEC-019 · extractions fidèles du Bootcamp IA CrocoClick. */
.bc-week,
.bc-bonus,
.bc-price-section,
.bc-final-section {
  --bc-purple: var(--baptiste-violet);
  --bc-cyan: var(--baptiste-cyan);
  --bc-green: var(--croco-neon);
  --bc-green-hover: var(--croco-neon-hover);
  --bc-green-active: var(--croco-neon-active);
  --bc-page: var(--surface-page);
  --bc-card: var(--surface-card);
  --bc-raised: var(--surface-raised);
  --bc-ink: var(--text-strong);
  --bc-body: var(--text-body);
  --bc-muted: var(--text-muted);
  --bc-border: color-mix(in srgb, var(--bc-purple) 26%, transparent);
  --bc-border-green: color-mix(in srgb, var(--bc-green) 52%, transparent);
  background: var(--bc-page);
  color: var(--bc-ink);
  font-family: "Plus Jakarta Sans", var(--font-body);
  font-weight: var(--weight-medium);
}

.bc-week { padding: var(--space-12) 0; }
.bc-week__shell { width: min(100% - 48px, 1200px); margin-inline: auto; padding: clamp(var(--space-5), 3vw, var(--space-8)); border: 1px solid var(--bc-border); border-radius: 26px; background: linear-gradient(180deg, color-mix(in srgb, var(--bc-purple) 8%, var(--bc-card)), color-mix(in srgb, var(--bc-page) 88%, var(--bc-card))); }
.bc-week__top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid color-mix(in srgb, var(--bc-purple) 18%, transparent); }
.bc-week__month { display: flex; align-items: center; gap: 11px; font-size: var(--heading-md); font-weight: var(--weight-display-max); letter-spacing: var(--tracking-tight); }
.bc-week__month svg { width: 22px; height: 22px; color: var(--bc-purple); }
.bc-week__month span { color: var(--bc-muted); font-weight: var(--weight-semibold); }
.bc-week__top p { margin-top: 5px; color: var(--bc-body); font-size: var(--body-md); }
.bc-week__legend { display: flex; gap: var(--space-4); flex-wrap: wrap; color: var(--bc-body); font-size: var(--body-sm); }
.bc-week__legend span { display: inline-flex; align-items: center; gap: 7px; }
.bc-week__legend i { width: 10px; height: 10px; border-radius: var(--radius-pill); }
.bc-week__legend .is-prep { background: var(--bc-purple); box-shadow: 0 0 8px var(--bc-purple); }
.bc-week__legend .is-live { background: var(--bc-green); box-shadow: 0 0 9px color-mix(in srgb, var(--bc-green) 80%, transparent); }
.bc-week__legend .is-bonus { background: var(--bc-cyan); box-shadow: 0 0 8px var(--bc-cyan); }
.bc-week__legend .is-community { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.bc-week__scroll { overflow-x: auto; margin: var(--space-5) -6px 0; padding: 42px 6px 6px; scrollbar-width: thin; }
.bc-week__scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.bc-week__grid { position: relative; min-width: 860px; display: grid; grid-template-columns: repeat(3, .64fr) repeat(3, 1.12fr) .98fr 1.04fr; grid-template-rows: auto auto; gap: 14px 12px; align-items: stretch; }
.bc-week__live-zone { grid-column: 4 / span 3; grid-row: 1 / span 2; border: 1px solid color-mix(in srgb, var(--bc-green) 34%, transparent); border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--bc-green) 10%, transparent), transparent); box-shadow: 0 24px 70px color-mix(in srgb, var(--bc-green-active) 24%, transparent); }
.bc-week__zone-label { grid-column: 4 / span 3; grid-row: 1; position: relative; z-index: 3; justify-self: center; align-self: start; transform: translateY(-24px); display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--radius-pill); background: linear-gradient(105deg, var(--bc-green), var(--bc-green-hover), var(--bc-green-active)); color: var(--text-on-brand); font-size: var(--mono-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; box-shadow: 0 8px 22px color-mix(in srgb, var(--bc-green-active) 40%, transparent); }
.bc-week__zone-label span { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--text-on-brand); }
.bc-week__date { grid-row: 1; position: relative; z-index: 2; padding: 6px 2px 2px; text-align: center; }
.bc-week__date span { display: block; color: var(--bc-muted); font-family: var(--font-mono); font-size: var(--mono-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.bc-week__date em { display: block; margin-top: 4px; color: var(--bc-body); font-family: "Instrument Serif", Georgia, serif; font-size: 30px; font-weight: var(--weight-regular); line-height: 1; }
.bc-week__date.is-live span { color: var(--bc-green); }
.bc-week__date.is-live em { color: var(--bc-cyan); font-size: 40px; }
.bc-week__date.is-bonus em { color: var(--bc-cyan); }
.bc-week__date.is-community em { color: var(--accent); }
.bc-week__cell { grid-row: 2; position: relative; z-index: 2; min-width: 0; display: flex; flex-direction: column; padding: 15px 13px; border-radius: 15px; }
.bc-week__prep { grid-column: 1 / span 3; justify-content: center; gap: 10px; border: 1px dashed color-mix(in srgb, var(--bc-purple) 42%, transparent); background: color-mix(in srgb, var(--bc-purple) 8%, transparent); }
.bc-week__prep > div { display: flex; align-items: center; gap: 9px; }
.bc-week__prep > div span { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--bc-purple); box-shadow: 0 0 10px var(--bc-purple); }
.bc-week__prep > i { height: 3px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--bc-purple), var(--accent)); }
.bc-week__prep p { color: var(--bc-body); font-size: var(--body-sm); line-height: 1.45; }
.bc-week__live { gap: 8px; align-items: flex-start; transform: translateY(-6px); border: 2px solid var(--bc-border-green); background: linear-gradient(180deg, color-mix(in srgb, var(--bc-green) 12%, transparent), color-mix(in srgb, var(--bc-raised) 60%, transparent)); box-shadow: 0 18px 44px color-mix(in srgb, var(--bc-green-active) 24%, transparent); }
.bc-week__live small { display: inline-flex; align-items: center; gap: 6px; color: var(--bc-green); font-family: var(--font-mono); font-size: var(--mono-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.bc-week__live small span { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--bc-green); box-shadow: 0 0 8px var(--bc-green); }
.bc-week__live > b { padding: 3px 10px; border-radius: 7px; background: var(--bc-green); color: var(--text-on-brand); font-size: var(--body-sm); }
.bc-week__live h3 { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; font-size: 32px; line-height: 1; }
.bc-week__live h3 sup { color: var(--bc-muted); font-size: var(--body-md); }
.bc-week__live h3 em { color: var(--bc-green); font-family: var(--font-body); font-size: var(--heading-sm); font-style: normal; }
.bc-week__live > p { width: 100%; margin-top: auto; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--bc-green) 20%, transparent); font-size: var(--body-sm); }
.bc-week__live > p strong { color: var(--bc-muted); }
.bc-week__bonus { gap: 6px; border: 1px dashed color-mix(in srgb, var(--bc-cyan) 42%, transparent); background: color-mix(in srgb, var(--bc-cyan) 6%, transparent); }
.bc-week__community { gap: 6px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.bc-week__bonus small, .bc-week__community small { align-self: flex-start; padding: 3px 10px; border: 1px solid currentColor; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--mono-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.bc-week__bonus small { color: var(--bc-cyan); }
.bc-week__community small { color: var(--accent); }
.bc-week__bonus h3, .bc-week__community h3 { margin-top: 3px; font-size: var(--heading-sm); }
.bc-week__bonus p, .bc-week__community p { color: var(--bc-body); font-size: var(--body-sm); line-height: 1.4; }
.bc-week__c1, .bc-week__c2 { grid-column: auto; }
.bc-week .is-c1 { grid-column: 1; }.bc-week .is-c2 { grid-column: 2; }.bc-week .is-c3 { grid-column: 3; }.bc-week .is-c4 { grid-column: 4; }.bc-week .is-c5 { grid-column: 5; }.bc-week .is-c6 { grid-column: 6; }.bc-week .is-c7 { grid-column: 7; }.bc-week .is-c8 { grid-column: 8; }
.bc-week__hint { display: none; margin-top: var(--space-3); color: var(--bc-muted); font-size: var(--body-sm); text-align: center; }
.bc-week__foot { display: flex; justify-content: center; gap: 8px 18px; flex-wrap: wrap; margin-top: 22px; color: var(--bc-body); font-size: var(--body-sm); }
.bc-week__foot span { color: var(--bc-purple); }

.bc-bonus { padding: var(--space-24) 0; overflow: hidden; }
.bc-bonus__head { width: min(100% - 48px, 820px); margin-inline: auto; text-align: center; }
.bc-bonus__chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: var(--radius-pill); background: linear-gradient(105deg, var(--bc-green), var(--bc-green-hover), var(--bc-green-active)); color: var(--text-on-brand); font-family: var(--font-mono); font-size: var(--mono-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; box-shadow: 0 10px 30px color-mix(in srgb, var(--bc-green-active) 42%, transparent), 0 0 34px color-mix(in srgb, var(--bc-green) 28%, transparent); }
.bc-bonus__chip i { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--text-on-brand); }
.bc-bonus__head h2 { margin-top: var(--space-6); font-size: clamp(34px, 5vw, 54px); line-height: 1.02; letter-spacing: var(--tracking-display); }
.bc-bonus__head h2 em, .bc-final h2 em { color: var(--bc-cyan); font-family: "Instrument Serif", Georgia, serif; font-weight: var(--weight-regular); }
.bc-bonus__head > p { margin: var(--space-4) auto 0; color: var(--bc-muted); font-size: var(--body-lg); line-height: 1.55; }
.bc-bonus__feature { position: relative; width: min(100% - 48px, 1200px); display: grid; grid-template-columns: 1fr 1fr; margin: var(--space-10) auto 0; overflow: hidden; border: 2px solid var(--bc-border-green); border-radius: 24px; background: color-mix(in srgb, var(--bc-card) 94%, var(--bc-purple)); box-shadow: 0 30px 90px color-mix(in srgb, var(--bc-green-active) 28%, transparent), 0 0 70px color-mix(in srgb, var(--bc-green) 14%, transparent); }
.bc-bonus__video { position: relative; align-self: center; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bc-raised); }
.bc-bonus__video > span { position: absolute; top: 20px; left: -42px; z-index: 3; transform: rotate(-40deg); padding: 7px 48px; background: var(--bc-green); color: var(--text-on-brand); font-family: var(--font-mono); font-size: var(--mono-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; box-shadow: 0 12px 28px color-mix(in srgb, var(--bc-green-active) 45%, transparent); }
.bc-bonus__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bc-bonus__copy { padding: var(--space-8) 38px; }
.bc-bonus__kicker { color: var(--bc-purple); font-family: var(--font-mono); font-size: var(--mono-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.bc-bonus__copy h3 { margin-top: var(--space-3); font-size: var(--heading-lg); }
.bc-bonus__copy > p:not(.bc-bonus__kicker) { margin-top: var(--space-4); color: var(--bc-muted); font-size: var(--body-md); }
.bc-bonus__copy ul { display: grid; gap: 9px; margin-top: var(--space-4); list-style: none; }
.bc-bonus__copy li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; color: var(--bc-body); font-size: var(--body-sm); }
.bc-bonus__copy li > svg { width: 16px; height: 16px; margin-top: 2px; color: var(--bc-purple); }
.bc-bonus__offer { display: flex; align-items: center; gap: 13px; margin-top: 18px; padding: 13px 16px; border: 2px solid var(--bc-border-green); border-radius: 16px; background: color-mix(in srgb, var(--bc-green) 10%, var(--bc-raised)); box-shadow: 0 20px 50px color-mix(in srgb, var(--bc-green-active) 25%, transparent); }
.bc-bonus__offer svg { width: 24px; height: 24px; color: var(--bc-green); flex: none; }
.bc-bonus__offer s { color: var(--bc-muted); font-weight: var(--weight-bold); }
.bc-bonus__offer b { color: var(--bc-green); }
.bc-bonus__shots { width: min(100% - 48px, 1480px); margin: var(--space-8) auto 0; overflow-x: auto; scrollbar-width: thin; }
.bc-bonus__shots:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.bc-bonus__track { display: flex; gap: var(--space-4); width: max-content; }
.bc-bonus__track.is-marquee { animation: bc-bonus-marquee 38s linear infinite; }
.bc-bonus__shots:hover .bc-bonus__track,
.bc-bonus__shots:focus-within .bc-bonus__track { animation-play-state: paused; }
.bc-bonus__track figure { width: min(80vw, 300px); flex: 0 0 auto; }
.bc-bonus__track img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--bc-border); border-radius: 14px; box-shadow: var(--shadow-3); }
.bc-bonus__track figcaption { margin-top: 9px; color: var(--bc-muted); font-size: var(--body-sm); line-height: 1.42; }
@keyframes bc-bonus-marquee { to { transform: translateX(-50%); } }

.bc-price-section { padding: var(--space-20) 0 var(--space-12); }
.bc-price { position: relative; width: min(100% - 48px, 460px); display: flex; flex-direction: column; margin-inline: auto; padding: 38px; border: 2px solid var(--bc-border); border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--bc-purple) 12%, var(--bc-card)), color-mix(in srgb, var(--bc-card) 96%, transparent)); box-shadow: 0 28px 80px color-mix(in srgb, var(--bc-green-active) 18%, transparent); }
.bc-price::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: linear-gradient(120deg, var(--bc-purple), var(--bc-cyan), var(--accent)); }
.bc-price h2 { font-size: var(--heading-md); }
.bc-price__amount { margin: var(--space-2) 0; font-size: 58px; font-weight: var(--weight-display-max); letter-spacing: var(--tracking-display); line-height: 1; }
.bc-price__amount small { color: var(--bc-muted); font-size: var(--heading-sm); font-weight: var(--weight-semibold); }
.bc-price__who { margin-bottom: var(--space-4); color: var(--bc-muted); }
.bc-price__gift { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--bc-cyan) 50%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--bc-cyan) 8%, transparent); font-size: var(--body-sm); font-weight: var(--weight-semibold); }
.bc-price__gift svg { width: 20px; height: 20px; color: var(--bc-cyan); flex: none; }
.bc-price ul { display: grid; gap: 11px; margin: 4px 0 26px; list-style: none; }
.bc-price li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; font-size: var(--body-md); }
.bc-price li > svg { width: 18px; height: 18px; margin-top: 3px; color: var(--bc-purple); stroke-width: 3; }
.bc-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 var(--space-8); border: 1px solid transparent; border-radius: 12px; background: linear-gradient(105deg, var(--bc-green), var(--bc-green-hover), var(--bc-green-active)); color: var(--text-on-brand); font-weight: var(--weight-bold); text-decoration: none; box-shadow: 0 10px 30px color-mix(in srgb, var(--bc-green-active) 28%, transparent); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
a.bc-cta:hover { color: var(--text-on-brand); text-decoration: none; transform: translateY(-2px); box-shadow: 0 16px 40px color-mix(in srgb, var(--bc-green-active) 36%, transparent); }
a.bc-cta:active { transform: translateY(2px) scale(.97); transition-duration: var(--dur-instant); }
.bc-price__secure { margin-top: var(--space-3); color: var(--bc-muted); font-size: var(--body-sm); text-align: center; }
.bc-price-section__note { width: min(100% - 48px, 760px); margin: 22px auto 0; color: var(--bc-muted); font-size: var(--body-lg); text-align: center; }

.bc-final-section { padding: var(--space-20) 0; }
.bc-final { width: min(100% - 48px, 1200px); display: grid; grid-template-columns: 1.4fr .6fr; gap: var(--space-6); align-items: center; margin-inline: auto; padding: 48px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--bc-purple) 35%, transparent); border-radius: 28px; background: linear-gradient(140deg, color-mix(in srgb, var(--bc-purple) 20%, var(--bc-card)), color-mix(in srgb, var(--accent) 6%, var(--bc-card))); }
.bc-final h2 { max-width: 16ch; font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: var(--tracking-display); }
.bc-final__copy > p { max-width: 46ch; margin-top: var(--space-4); color: var(--bc-muted); font-size: var(--body-lg); }
.bc-final__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.bc-cta--ghost { border-color: color-mix(in srgb, var(--bc-body) 28%, transparent); background: color-mix(in srgb, var(--bc-card) 82%, transparent); color: var(--bc-ink); box-shadow: none; }
a.bc-cta--ghost:hover { border-color: var(--bc-border-green); background: color-mix(in srgb, var(--bc-green) 6%, var(--bc-card)); color: var(--bc-ink); }
.bc-final__widget { margin: -20px -12px -28px 0; }
.bc-final__widget img { display: block; width: 100%; max-height: 520px; object-fit: contain; }
.bc-final__widget figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 900px) {
  .bc-week__hint { display: block; }
  .bc-bonus__feature, .bc-final { grid-template-columns: 1fr; }
  .bc-bonus__video { width: 100%; }
  .bc-final__widget { width: min(100%, 420px); margin: 0 auto -28px; }
}

@media (max-width: 720px) {
  .bc-week__shell, .bc-bonus__head, .bc-bonus__feature, .bc-bonus__shots, .bc-price, .bc-price-section__note, .bc-final { width: min(100% - 28px, 1200px); }
  .bc-week__top { align-items: flex-start; }
  .bc-week__legend { gap: var(--space-2) var(--space-4); }
  .bc-bonus, .bc-price-section, .bc-final-section { padding-block: var(--space-12); }
  .bc-bonus__copy, .bc-price, .bc-final { padding: var(--space-6); }
  .bc-bonus__head h2, .bc-final h2 { font-size: 36px; }
  .bc-bonus__head > p, .bc-final__copy > p { font-size: var(--body-md); }
  .bc-final__actions { flex-direction: column; }
  .bc-final__actions .bc-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bc-bonus__track.is-marquee { animation: none; }
}

/* Faithful extraction of public/index.html .hero and .why. The ag-* namespace
   is the only adaptation: geometry, materials, motion and copy remain intact. */
.ag-shell { width: min(var(--container-max), calc(100% - (2 * var(--space-8)))); margin-inline: auto; }
.ag-mono-label { font-family: var(--font-mono); font-size: var(--mono-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; }

.ag-hero { position: relative; min-height: 100svh; overflow: hidden; padding: calc(var(--space-20) + var(--space-16)) 0 var(--space-16); background: var(--marais-950); color: var(--nuit-text-body); }
.ag-hero-canvas, .ag-hero-scales, .ag-hero-glow { position: absolute; inset: 0; pointer-events: none; }
.ag-hero-canvas { width: 100%; height: 100%; opacity: .9; }
.ag-hero-scales,
.ag-manifesto-scales {
  background-image:
    radial-gradient(ellipse 34px 16px at 50% 100%, transparent 66%, color-mix(in srgb, var(--accent) 6%, transparent) 68%, transparent 72%),
    radial-gradient(ellipse 34px 16px at 0 0, transparent 66%, color-mix(in srgb, var(--nuit-text-strong) 3%, transparent) 68%, transparent 72%);
  background-size: 68px 34px;
  background-position: 0 0, 34px 17px;
}
.ag-hero-scales { opacity: .34; }
.ag-hero-glow { background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%), linear-gradient(to bottom, transparent 64%, var(--marais-950)); }
.ag-hero-inner { position: relative; z-index: 2; text-align: center; }
.ag-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--croco-300); }
.ag-hero-eyebrow::before, .ag-hero-eyebrow::after { content: ""; width: 28px; height: 2px; border-radius: var(--radius-pill); background: var(--brand-solid); }
.ag-hero h1 { max-width: none; margin: var(--space-6) auto 0; color: var(--nuit-text-strong); font-family: var(--font-display); font-size: clamp(3.4rem, 7vw, 7.4rem); font-weight: 800; line-height: .91; letter-spacing: -.04em; text-wrap: balance; }
.ag-hero h1 .ag-line { display: block; overflow: hidden; }
.ag-hero h1 .ag-line > span { display: inline-block; white-space: nowrap; transform: translateY(110%); animation: ag-hero-rise 1.05s var(--ease-out) forwards; }
.ag-hero h1 .ag-line:nth-child(2) > span { animation-delay: 90ms; }
.ag-hero h1 em { color: var(--accent); font-style: normal; }
@keyframes ag-hero-rise { to { transform: translateY(0); } }
.ag-hero-lede { max-width: 68ch; margin: var(--space-8) auto 0; color: var(--nuit-text-muted); font-size: var(--body-lg); line-height: var(--body-lg-lh); opacity: 0; animation: ag-hero-fade var(--dur-slow) var(--ease-out) 540ms forwards; }
.ag-hero-lede strong { color: var(--nuit-text-strong); font-weight: 700; }
@keyframes ag-hero-fade { to { opacity: 1; } }
.ag-hero-counts { margin-top: var(--space-6); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); opacity: 0; animation: ag-hero-fade var(--dur-slow) var(--ease-out) 700ms forwards; }
.ag-hero-count { min-height: 34px; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid color-mix(in srgb, var(--nuit-text-strong) 14%, transparent); border-radius: var(--radius-pill); color: var(--nuit-text-muted); background: color-mix(in srgb, var(--marais-900) 78%, transparent); }
.ag-hero-count b { color: var(--nuit-text-strong); font-family: var(--font-display); font-size: var(--heading-sm); }
.ag-dual-core { width: min(1020px, 100%); margin: var(--space-12) auto 0; padding: var(--space-6); border: 1px solid color-mix(in srgb, var(--nuit-text-strong) 12%, transparent); border-radius: var(--radius-modal); background: color-mix(in srgb, var(--marais-900) 70%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow-3); opacity: 0; animation: ag-hero-fade var(--dur-slow) var(--ease-out) 860ms forwards; }
.ag-core-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-5); align-items: stretch; }
.ag-core-card { position: relative; min-height: 190px; display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-6); border: 1px solid color-mix(in srgb, var(--core-accent) 34%, transparent); border-radius: var(--radius-card); background: linear-gradient(145deg, color-mix(in srgb, var(--core-accent) 10%, transparent), transparent 48%), color-mix(in srgb, var(--marais-950) 72%, transparent); color: var(--nuit-text-body); text-align: left; text-decoration: none; box-shadow: 0 22px 60px -38px color-mix(in srgb, var(--core-accent) 65%, transparent); transition: transform var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap); }
a.ag-core-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--core-accent) 66%, transparent); box-shadow: 0 28px 70px -34px color-mix(in srgb, var(--core-accent) 68%, transparent); color: var(--nuit-text-body); text-decoration: none; }
a.ag-core-card:active { transform: translateY(2px) scale(.97); transition-duration: var(--dur-instant); }
.ag-core-click { --core-accent: var(--accent); }
.ag-core-club { --core-accent: var(--or-400); }
.ag-core-kicker { color: color-mix(in srgb, var(--core-accent) 72%, var(--nuit-text-strong)); }
.ag-core-logo { height: 42px; width: auto; object-fit: contain; object-position: left center; margin-top: var(--space-4); }
.ag-core-card h2 { margin: var(--space-5) 0 0; color: var(--nuit-text-strong); font-size: var(--heading-lg); line-height: var(--heading-lg-lh); }
.ag-core-card p { margin: var(--space-3) 0 0; color: var(--nuit-text-muted); font-size: var(--body-sm); line-height: var(--body-sm-lh); }
.ag-core-card .ag-core-go { margin-top: auto; padding-top: var(--space-5); display: inline-flex; align-items: center; gap: var(--space-2); color: color-mix(in srgb, var(--core-accent) 78%, var(--nuit-text-strong)); font-weight: 700; }
.ag-core-joint { width: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: var(--nuit-text-muted); text-align: center; }
.ag-core-joint::before, .ag-core-joint::after { content: ""; width: 1px; flex: 1; min-height: 20px; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 46%, transparent), transparent); }
.ag-core-joint img { width: 58px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 35%, transparent)); }
.ag-core-joint span { max-width: 9ch; }
.ag-satellite-wrap { position: relative; margin-top: var(--space-6); padding-top: var(--space-6); }
.ag-satellite-wrap::before { content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 34%, transparent), transparent); }
.ag-satellite-label { color: var(--nuit-text-muted); }
.ag-satellites { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.ag-satellite { min-width: 0; padding: var(--space-3); border: 1px solid color-mix(in srgb, var(--nuit-text-strong) 10%, transparent); border-radius: var(--radius-control); background: color-mix(in srgb, var(--marais-950) 58%, transparent); text-align: left; }
.ag-satellite b { display: block; color: var(--nuit-text-strong); font-size: var(--body-sm); }
.ag-satellite span { display: block; margin-top: 3px; color: var(--nuit-text-muted); font-size: var(--mono-xs); }
.ag-scroll-cue { margin: var(--space-10) auto 0; width: max-content; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); color: var(--nuit-text-muted); text-decoration: none; }
a.ag-scroll-cue:hover { color: var(--nuit-text-strong); text-decoration: none; }
.ag-scroll-cue::after { content: ""; width: 1px; height: 44px; background: linear-gradient(var(--accent), transparent); animation: ag-scroll-drop 1.8s ease-in-out infinite; }
@keyframes ag-scroll-drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.ag-manifesto { position: relative; background: var(--marais-950); color: var(--nuit-text-body); overflow: clip; }
.ag-manifesto-bg { position: absolute; inset: 0; pointer-events: none; }
.ag-manifesto-blob { position: absolute; width: 46vw; height: 46vw; min-width: 420px; min-height: 420px; border-radius: 50%; filter: blur(110px); opacity: .8; }
.ag-manifesto-blob-a { left: -12%; top: 6%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent), transparent 65%); animation: ag-manifesto-drift-a 22s ease-in-out infinite alternate; }
.ag-manifesto-blob-b { right: -14%; top: 30%; background: radial-gradient(circle, color-mix(in srgb, var(--ia) 38%, transparent), transparent 65%); animation: ag-manifesto-drift-b 27s ease-in-out infinite alternate; }
.ag-manifesto-blob-c { left: 24%; bottom: -18%; background: radial-gradient(circle, color-mix(in srgb, var(--or-500) 28%, transparent), transparent 65%); animation: ag-manifesto-drift-a 31s ease-in-out infinite alternate-reverse; }
@keyframes ag-manifesto-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(9vw, 6vh) scale(1.15); } }
@keyframes ag-manifesto-drift-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-8vw, -5vh) scale(.95); } }
.ag-manifesto-scales { position: absolute; inset: 0; opacity: .2; }
.ag-manifesto-stage { position: relative; z-index: 2; padding: var(--section-space-block) 0; }
.ag-manifesto-content { max-width: 1120px; margin-inline: auto; }
.ag-manifesto-track { display: grid; gap: clamp(.45rem, 1vh, .85rem); }
.ag-manifesto-statement { margin: 0; color: var(--nuit-text-strong); font-family: var(--font-display); font-size: clamp(1.3rem, 2.25vw, 2.55rem); font-weight: 700; line-height: 1.13; letter-spacing: -.03em; text-wrap: pretty; }
.ag-manifesto-statement strong { color: inherit; font-weight: 800; }
.ag-manifesto-title { margin-bottom: clamp(.8rem, 1.8vh, 1.5rem); font-size: clamp(2.4rem, 5vw, 5.4rem); line-height: .98; }
.ag-manifesto-statement em { font-family: var(--font-display); font-style: italic; font-weight: 700; letter-spacing: -.025em; color: var(--accent); }
.ag-manifesto.is-pinned { height: 300svh; }
.ag-manifesto.is-pinned .ag-manifesto-stage { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; padding: clamp(var(--space-6), 5vh, var(--space-16)) 0; }
.ag-manifesto.is-pinned .ag-manifesto-stage .ag-shell { width: min(100% - (2 * var(--space-8)), 1200px); }
.ag-manifesto.is-pinned .ag-manifesto-word { will-change: color; }
.ag-manifesto-tone-good { --ag-manifesto-tone: var(--accent); }
.ag-manifesto-tone-club { --ag-manifesto-tone: var(--or-500); }
.ag-manifesto-tone-bad { --ag-manifesto-tone: var(--danger-text); }
.ag-manifesto-brand { display: inline-flex; align-items: center; gap: .18em; white-space: nowrap; }
.ag-manifesto-brand-lockup { height: .82em; vertical-align: -.05em; }

@media (max-width: 1040px) { .ag-satellites { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .ag-shell { width: min(100% - (2 * var(--space-5)), var(--container-max)); }
  .ag-hero { padding-top: calc(var(--space-20) + var(--space-10)); }
  .ag-hero h1 { font-size: clamp(3rem, 14vw, 6.5rem); }
  .ag-hero h1 .ag-line > span { white-space: normal; }
  .ag-dual-core { padding: var(--space-4); }
  .ag-core-grid { grid-template-columns: 1fr; }
  .ag-core-joint { width: auto; min-height: 88px; flex-direction: row; }
  .ag-core-joint::before, .ag-core-joint::after { min-height: 1px; height: 1px; width: auto; min-width: 40px; }
  .ag-satellites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ag-hero-eyebrow::before, .ag-hero-eyebrow::after { display: none; }
  .ag-hero h1 { font-size: clamp(2.8rem, 16vw, 5.2rem); }
  .ag-satellite:last-child { grid-column: 1 / -1; }
  .ag-core-card { min-height: 0; padding: var(--space-5); }
  .ag-manifesto.is-pinned { height: 340svh; }
  .ag-manifesto.is-pinned .ag-manifesto-stage .ag-shell { width: min(100% - (2 * var(--space-5)), 1200px); }
  .ag-manifesto-title { font-size: clamp(2.35rem, 13vw, 4rem); }
}
@media (max-height: 700px) { .ag-manifesto-statement { font-size: clamp(1.12rem, 1.8vw, 1.92rem); } .ag-manifesto-track { gap: .4rem; } }
@media (prefers-reduced-motion: reduce) {
  .ag-hero h1 .ag-line > span { transform: none; }
  .ag-hero-lede, .ag-hero-counts, .ag-dual-core { opacity: 1; }
  .ag-manifesto-blob { animation: none; }
}

/* SEC-020 · bandeau affilié CrocoClick fidèle au Custom Code GHL fourni. */
.ccao-sticky-template {
  position: fixed;
  z-index: 30;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 14px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
}

.ccao-shell {
  position: relative;
  isolation: isolate;
  width: min(1160px, 100%);
  min-height: 82px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-inline: auto;
  padding: 12px 13px 12px 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text-strong) 11%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 21%),
    radial-gradient(circle at 78% 120%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 28%),
    color-mix(in srgb, var(--surface-card) 96.5%, transparent);
  box-shadow:
    0 24px 65px color-mix(in srgb, var(--text-strong) 18%, transparent),
    0 4px 14px color-mix(in srgb, var(--text-strong) 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--surface-card) 90%, transparent);
  backdrop-filter: blur(18px) saturate(145%);
  pointer-events: auto;
  animation: ccao-enter var(--dur-reveal) var(--ease-out) both;
}

.ccao-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 16px;
  left: 16px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--surface-card)), var(--brand), transparent);
  background-size: 220% 100%;
  opacity: .88;
  animation: ccao-shimmer 5s linear infinite;
}

.ccao-medal {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--wordmark) 22%, transparent);
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-card) 85%, transparent), color-mix(in srgb, var(--accent) 32%, var(--surface-card)));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--surface-card) 90%, transparent);
  transform: rotate(-3deg);
}

.ccao-medal img { display: block; width: 39px; height: 39px; object-fit: contain; filter: drop-shadow(0 5px 8px color-mix(in srgb, var(--text-strong) 12%, transparent)); }
.ccao-sparkle { position: absolute; top: -6px; right: 1px; width: 13px; height: 13px; color: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); animation: ccao-sparkle 2.8s ease-in-out infinite; }
.ccao-bonus { position: absolute; right: -8px; bottom: -7px; min-width: 31px; min-height: 22px; display: grid; place-items: center; padding-inline: 6px; border: 2px solid var(--surface-card); border-radius: var(--radius-pill); background: var(--text-strong); color: var(--surface-card); font-family: var(--font-mono); font-size: 8px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); transform: rotate(3deg); box-shadow: 0 7px 14px color-mix(in srgb, var(--text-strong) 20%, transparent); }
.ccao-copy { min-width: 0; }
.ccao-eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; color: var(--brand-text); font-family: var(--font-mono); font-size: 9px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.ccao-live-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: var(--radius-pill); background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent), 0 0 10px color-mix(in srgb, var(--brand) 35%, transparent); }
.ccao-title { margin: 0; color: var(--text-strong); font-family: var(--font-display); font-size: clamp(16px, 1.45vw, 20px); font-weight: var(--weight-display-max); letter-spacing: var(--tracking-display); line-height: 1.08; }
.ccao-copy-guard { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ccao-title em { color: var(--wordmark); font-family: inherit; font-style: normal; background: linear-gradient(90deg, var(--wordmark), var(--accent), var(--wordmark)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.ccao-subtitle { margin: 4px 0 0; color: var(--text-body); font-size: 12px; font-weight: var(--weight-semibold); line-height: 1.4; }
.ccao-subtitle strong { color: var(--brand-text); font-weight: var(--weight-display-max); }
.ccao-action { display: flex; align-items: center; gap: 10px; }
.ccao-proof { min-width: 84px; text-align: right; }
.ccao-proof strong, .ccao-proof span { display: block; }
.ccao-proof strong { color: var(--text-strong); font-family: var(--font-mono); font-size: 13px; font-weight: var(--weight-semibold); }
.ccao-proof span { margin-top: 2px; color: var(--text-body); font-size: 8px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.ccao-button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; border: 1px solid color-mix(in srgb, var(--brand-active) 32%, transparent); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 86%, var(--surface-card)), var(--brand)); box-shadow: 0 13px 26px color-mix(in srgb, var(--brand) 24%, transparent), inset 0 1px 0 color-mix(in srgb, var(--surface-card) 28%, transparent); color: var(--surface-card); font-size: 12px; font-weight: var(--weight-display-max); letter-spacing: var(--tracking-tight); text-decoration: none; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
a.ccao-button:hover { transform: translateY(-2px); filter: saturate(1.08); box-shadow: 0 17px 32px color-mix(in srgb, var(--brand) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--surface-card) 32%, transparent); color: var(--surface-card); text-decoration: none; }
a.ccao-button:active { transform: translateY(2px) scale(.97); transition-duration: var(--dur-instant); }
a.ccao-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent); outline-offset: 3px; }
.ccao-button svg { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.ccao-button:hover svg { transform: translateX(2px); }
.ccao-mobile-label { display: none; }

.cb-homepage-specimen--sticky { position: relative; min-height: 310px; overflow: clip; background: linear-gradient(180deg, var(--surface-raised), var(--surface-page)); }
.cb-homepage-specimen--sticky .ccao-sticky-template { position: absolute; z-index: 3; }

@keyframes ccao-enter { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ccao-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes ccao-sparkle { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }

@media (max-width: 820px) {
  .ccao-sticky-template { right: 9px; bottom: calc(9px + env(safe-area-inset-bottom)); left: 9px; }
  .ccao-shell { min-height: 0; grid-template-columns: auto minmax(0, 1fr); gap: 13px; padding: 11px; border-radius: 19px; }
  .ccao-medal { width: 50px; height: 50px; }
  .ccao-medal img { width: 34px; height: 34px; }
  .ccao-action { grid-column: 1 / -1; width: 100%; }
  .ccao-proof { display: none; }
  .ccao-button { width: 100%; min-height: 44px; border-radius: 12px; }
  .ccao-desktop-label { display: none; }
  .ccao-mobile-label { display: inline; }
}

@media (max-width: 430px) {
  .ccao-eyebrow { font-size: 7.5px; }
  .ccao-title { font-size: 15px; }
  .ccao-subtitle { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ccao-shell, .ccao-shell::before, .ccao-sparkle { animation: none; }
  .ccao-button, .ccao-button svg { transition: none; }
}

/* SEC-021 · familles de fonctionnalités CrocoClick. */

.ccf-feature {
  --ccf-source-00eb79: var(--ccf-source-00eb79-override, #00eb79);
  --ccf-source-047a30: var(--ccf-source-047a30-override, #047a30);
  --ccf-source-05ab45: var(--ccf-source-05ab45-override, #05ab45);
  --ccf-source-07110c: var(--ccf-source-07110c-override, #07110c);
  --ccf-source-101a14: var(--ccf-source-101a14-override, #101a14);
  --ccf-source-111b15: var(--ccf-source-111b15-override, #111b15);
  --ccf-source-14231c: var(--ccf-source-14231c-override, #14231c);
  --ccf-source-17231c: var(--ccf-source-17231c-override, #17231c);
  --ccf-source-1b2821: var(--ccf-source-1b2821-override, #1b2821);
  --ccf-source-1d2b23: var(--ccf-source-1d2b23-override, #1d2b23);
  --ccf-source-1e2b23: var(--ccf-source-1e2b23-override, #1e2b23);
  --ccf-source-24627d: var(--ccf-source-24627d-override, #24627d);
  --ccf-source-253229: var(--ccf-source-253229-override, #253229);
  --ccf-source-25332b: var(--ccf-source-25332b-override, #25332b);
  --ccf-source-26312b: var(--ccf-source-26312b-override, #26312b);
  --ccf-source-26342c: var(--ccf-source-26342c-override, #26342c);
  --ccf-source-33473d: var(--ccf-source-33473d-override, #33473d);
  --ccf-source-405047: var(--ccf-source-405047-override, #405047);
  --ccf-source-536159: var(--ccf-source-536159-override, #536159);
  --ccf-source-56635c: var(--ccf-source-56635c-override, #56635c);
  --ccf-source-566a61: var(--ccf-source-566a61-override, #566a61);
  --ccf-source-657169: var(--ccf-source-657169-override, #657169);
  --ccf-source-66736b: var(--ccf-source-66736b-override, #66736b);
  --ccf-source-6e56cf: var(--ccf-source-6e56cf-override, #6e56cf);
  --ccf-source-6e7a73: var(--ccf-source-6e7a73-override, #6e7a73);
  --ccf-source-77837d: var(--ccf-source-77837d-override, #77837d);
  --ccf-source-7b8780: var(--ccf-source-7b8780-override, #7b8780);
  --ccf-source-7c8781: var(--ccf-source-7c8781-override, #7c8781);
  --ccf-source-7d8882: var(--ccf-source-7d8882-override, #7d8882);
  --ccf-source-819089: var(--ccf-source-819089-override, #819089);
  --ccf-source-87918b: var(--ccf-source-87918b-override, #87918b);
  --ccf-source-87918c: var(--ccf-source-87918c-override, #87918c);
  --ccf-source-89938e: var(--ccf-source-89938e-override, #89938e);
  --ccf-source-8c9691: var(--ccf-source-8c9691-override, #8c9691);
  --ccf-source-8d9792: var(--ccf-source-8d9792-override, #8d9792);
  --ccf-source-8e9893: var(--ccf-source-8e9893-override, #8e9893);
  --ccf-source-929b96: var(--ccf-source-929b96-override, #929b96);
  --ccf-source-93a099: var(--ccf-source-93a099-override, #93a099);
  --ccf-source-9aa39e: var(--ccf-source-9aa39e-override, #9aa39e);
  --ccf-source-9ba49f: var(--ccf-source-9ba49f-override, #9ba49f);
  --ccf-source-9fe6b7: var(--ccf-source-9fe6b7-override, #9fe6b7);
  --ccf-source-a0a9a4: var(--ccf-source-a0a9a4-override, #a0a9a4);
  --ccf-source-a992ff: var(--ccf-source-a992ff-override, #a992ff);
  --ccf-source-c4ecd4: var(--ccf-source-c4ecd4-override, #c4ecd4);
  --ccf-source-caeeff: var(--ccf-source-caeeff-override, #caeeff);
  --ccf-source-d5ddd8: var(--ccf-source-d5ddd8-override, #d5ddd8);
  --ccf-source-ddd1ff: var(--ccf-source-ddd1ff-override, #ddd1ff);
  --ccf-source-dff4ff: var(--ccf-source-dff4ff-override, #dff4ff);
  --ccf-source-e4ff73: var(--ccf-source-e4ff73-override, #e4ff73);
  --ccf-source-e5ebe7: var(--ccf-source-e5ebe7-override, #e5ebe7);
  --ccf-source-e7f7ee: var(--ccf-source-e7f7ee-override, #e7f7ee);
  --ccf-source-e8f8ee: var(--ccf-source-e8f8ee-override, #e8f8ee);
  --ccf-source-eaf9f0: var(--ccf-source-eaf9f0-override, #eaf9f0);
  --ccf-source-eee9ff: var(--ccf-source-eee9ff-override, #eee9ff);
  --ccf-source-eef2ef: var(--ccf-source-eef2ef-override, #eef2ef);
  --ccf-source-f0f3f1: var(--ccf-source-f0f3f1-override, #f0f3f1);
  --ccf-source-f1f4f2: var(--ccf-source-f1f4f2-override, #f1f4f2);
  --ccf-source-f1fbff: var(--ccf-source-f1fbff-override, #f1fbff);
  --ccf-source-f5f1ff: var(--ccf-source-f5f1ff-override, #f5f1ff);
  --ccf-source-f5f7f5: var(--ccf-source-f5f7f5-override, #f5f7f5);
  --ccf-source-f6f8f6: var(--ccf-source-f6f8f6-override, #f6f8f6);
  --ccf-source-f6fff9: var(--ccf-source-f6fff9-override, #f6fff9);
  --ccf-source-f7f6fb: var(--ccf-source-f7f6fb-override, #f7f6fb);
  --ccf-source-f7ffd3: var(--ccf-source-f7ffd3-override, #f7ffd3);
  --ccf-source-fbf6f0: var(--ccf-source-fbf6f0-override, #fbf6f0);
  --ccf-source-fbfcfb: var(--ccf-source-fbfcfb-override, #fbfcfb);
  --ccf-source-fcfefd: var(--ccf-source-fcfefd-override, #fcfefd);
  --ccf-source-ffdcbc: var(--ccf-source-ffdcbc-override, #ffdcbc);
  --ccf-source-fff: var(--ccf-source-fff-override, #fff);
  --ccf-source-fff5e9: var(--ccf-source-fff5e9-override, #fff5e9);
  --ccf-source-fffdfb: var(--ccf-source-fffdfb-override, #fffdfb);
  --ccf-source-ffffff: var(--ccf-source-ffffff-override, #ffffff);
  --ccf-green: var(--croco-500, var(--ccf-source-05ab45));
  --ccf-green-700: var(--croco-700, var(--ccf-source-047a30));
  --ccf-green-100: var(--croco-100, var(--ccf-source-c4ecd4));
  --ccf-green-50: var(--croco-50, var(--ccf-source-e7f7ee));
  --ccf-neon: var(--croco-neon, var(--ccf-source-00eb79));
  --ccf-ink: var(--encre, var(--ccf-source-14231c));
  --ccf-text: var(--encre-700, var(--ccf-source-33473d));
  --ccf-muted: var(--encre-500, var(--ccf-source-566a61));
  --ccf-line: rgba(20,35,28,.11);
  --ccf-white: var(--ccf-source-fff);
  --ccf-warm: var(--white-warm, var(--ccf-source-fffdfb));
  --ccf-soft: var(--sable-50, var(--ccf-source-fbf6f0));
  display: block;
  width: min(1280px, calc(100% - 32px));
  margin-inline: auto;
  color: var(--ccf-text);
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.ccf-feature, .ccf-feature * { box-sizing: border-box; }
.ccf-feature button { font: inherit; appearance: none; -webkit-appearance: none; }
.ccf-feature h3, .ccf-feature p { margin: 0; }
.ccf-feature svg.lucide { width: 1em; height: 1em; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ccf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ccf-shell {
  overflow: hidden;
  border: 1px solid var(--ccf-line);
  border-radius: 42px;
  background: var(--ccf-white);
  box-shadow: 0 30px 90px rgba(23,54,38,.14), 0 2px 5px rgba(23,54,38,.03);
}
.ccf-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 82px;
  border-bottom: 1px solid var(--ccf-line);
  background: rgba(255,255,255,.86);
}
.ccf-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-right: 1px solid var(--ccf-line);
  background: transparent;
  color: var(--ccf-source-77837d);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.ccf-tab:last-child { border-right: 0; }
.ccf-tab::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 24px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--ccf-green);
  transform: scaleX(0);
  transition: transform .18s ease;
}
.ccf-tab__icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--ccf-source-f5f7f5);
  font-size: 15px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ccf-tab[aria-selected="true"] {
  background: linear-gradient(180deg, rgba(231,247,238,.9), rgba(244,251,247,.74));
  color: var(--ccf-green-700);
}
.ccf-tab[aria-selected="true"]::after { transform: scaleX(1); }
.ccf-tab[aria-selected="true"] .ccf-tab__icon {
  border-color: rgba(5,171,69,.15);
  background: var(--ccf-white);
  color: var(--ccf-green);
  box-shadow: 0 5px 18px rgba(5,171,69,.10);
}
.ccf-tab:focus-visible { z-index: 2; outline: 3px solid rgba(0,235,121,.32); outline-offset: -3px; }

.ccf-panel {
  display: none;
  grid-template-columns: .86fr 1.14fr;
  min-height: 642px;
}
.ccf-panel.is-active {
  display: grid;
  animation: ccf-panel-in .36s cubic-bezier(.22,1,.36,1) both;
}
@keyframes ccf-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ccf-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(42px, 5vw, 68px);
  background: var(--ccf-warm);
}
.ccf-copy__number {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  color: var(--ccf-green);
  font-family: "Red Hat Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
.ccf-copy__number::before { content: ""; width: 22px; height: 2px; border-radius: 999px; background: currentColor; }
.ccf-copy h3 {
  max-width: 9.6ch;
  color: var(--ccf-source-07110c);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(34px, 4.2vw, 44px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: .98;
}
.ccf-copy p {
  max-width: 42ch;
  margin-top: 24px;
  color: var(--ccf-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.68;
}
.ccf-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ccf-pill {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--ccf-line);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: var(--ccf-ink);
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ccf-visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}
.ccf-visual::before,
.ccf-visual::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(2px);
  opacity: .5;
  pointer-events: none;
}
.ccf-visual::before { width: 330px; height: 330px; top: -150px; right: -90px; background: rgba(255,255,255,.9); }
.ccf-visual::after { width: 260px; height: 260px; bottom: -150px; left: -90px; background: rgba(255,255,255,.72); }
.ccf-panel[data-feature="create"] .ccf-visual { background: linear-gradient(145deg, var(--ccf-source-e4ff73) 0%, var(--ccf-source-f7ffd3) 100%); }
.ccf-panel[data-feature="broadcast"] .ccf-visual { background: linear-gradient(145deg, var(--ccf-source-caeeff) 0%, var(--ccf-source-f1fbff) 100%); }
.ccf-panel[data-feature="convert"] .ccf-visual { background: linear-gradient(145deg, var(--ccf-source-ffdcbc) 0%, var(--ccf-source-fff5e9) 100%); }
.ccf-panel[data-feature="orchestrate"] .ccf-visual { background: linear-gradient(145deg, var(--ccf-source-ddd1ff) 0%, var(--ccf-source-f5f1ff) 100%); }
.ccf-app {
  position: absolute;
  z-index: 2;
  top: 68px;
  left: 50%;
  width: min(88%, 760px);
  min-height: 480px;
  overflow: hidden;
  border: 1px solid rgba(13,21,17,.13);
  border-radius: 22px;
  background: var(--ccf-white);
  box-shadow: 0 34px 70px rgba(30,54,42,.19), 0 8px 18px rgba(30,54,42,.08);
  transform: translateX(-50%) rotate(-1.15deg);
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
.ccf-app__chrome {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid var(--ccf-line);
  background: var(--ccf-source-fbfcfb);
}
.ccf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ccf-source-d5ddd8); }
.ccf-url {
  min-width: 0;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 8px;
  padding: 0 11px;
  border: 1px solid rgba(20,35,28,.07);
  border-radius: 7px;
  background: var(--ccf-source-fff);
  color: var(--ccf-source-87918c);
  font-family: "Red Hat Mono", monospace;
  font-size: 7px;
}
.ccf-url svg { color: var(--ccf-green); font-size: 10px; }
.ccf-url__favicon { width: 11px; height: 11px; object-fit: contain; flex: 0 0 auto; }
.ccf-app__body { display: grid; grid-template-columns: 120px 1fr; min-height: 440px; }
.ccf-sidebar {
  padding: 14px 10px;
  border-right: 1px solid var(--ccf-line);
  background: var(--ccf-source-fbfcfb);
}
.ccf-brand {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin: 1px 5px 17px;
}
.ccf-brand__logo {
  display: block;
  width: 88px;
  max-width: 100%;
  height: 24px;
  object-fit: contain;
  object-position: left center;
}
.ccf-nav-label { margin: 13px 7px 6px; color: var(--ccf-source-a0a9a4); font-family: "Red Hat Mono", monospace; font-size: 6px; letter-spacing: .08em; text-transform: uppercase; }
.ccf-nav-item {
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--ccf-source-7d8882);
  font-size: 7.5px;
  font-weight: 700;
}
.ccf-nav-item svg { font-size: 12px; }
.ccf-nav-item.is-active { background: var(--ccf-green-50); color: var(--ccf-green-700); }
.ccf-workspace { min-width: 0; background: var(--ccf-source-fff); }
.ccf-toolbar {
  min-height: 55px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--ccf-line);
}
.ccf-toolbar__title { min-width: 0; }
.ccf-toolbar__title strong { display: block; color: var(--ccf-source-111b15); font-size: 9px; }
.ccf-toolbar__title span { display: block; margin-top: 2px; color: var(--ccf-source-9aa39e); font-family: "Red Hat Mono", monospace; font-size: 6px; }
.ccf-toolbar__spacer { flex: 1; }
.ccf-mini-btn {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--ccf-line);
  border-radius: 7px;
  background: var(--ccf-source-fff);
  color: var(--ccf-source-56635c);
  font-size: 6.5px;
  font-weight: 800;
}
.ccf-mini-btn.is-primary { border-color: var(--ccf-green); background: var(--ccf-green); color: var(--ccf-source-fff); box-shadow: 0 7px 14px rgba(5,171,69,.15); }
.ccf-mini-btn svg { font-size: 10px; }

/* CREATE */
.ccf-builder-layout { display: grid; grid-template-columns: 102px 1fr; min-height: 385px; background: var(--ccf-source-f5f7f5); }
.ccf-blocks { padding: 11px 9px; border-right: 1px solid var(--ccf-line); background: var(--ccf-source-fff); }
.ccf-blocks__title { margin: 0 4px 9px; color: var(--ccf-source-89938e); font-size: 6.5px; font-weight: 800; }
.ccf-block { min-height: 36px; display: flex; align-items: center; gap: 7px; margin-bottom: 7px; padding: 0 8px; border: 1px solid var(--ccf-line); border-radius: 8px; background: var(--ccf-source-fff); color: var(--ccf-source-536159); font-size: 6.5px; font-weight: 700; box-shadow: 0 2px 5px rgba(20,35,28,.025); }
.ccf-block svg { color: var(--ccf-green); font-size: 11px; }
.ccf-canvas-wrap { padding: 16px 18px; }
.ccf-canvas-label { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--ccf-source-8d9792); font-family: "Red Hat Mono", monospace; font-size: 6px; }
.ccf-page {
  position: relative;
  min-height: 324px;
  overflow: hidden;
  border: 1px solid rgba(20,35,28,.09);
  border-radius: 12px;
  background: var(--ccf-source-fff);
  box-shadow: 0 12px 28px rgba(20,35,28,.07);
}
.ccf-page__nav { height: 28px; display: flex; align-items: center; padding: 0 13px; border-bottom: 1px solid var(--ccf-line); }
.ccf-page__logo { display: flex; align-items: center; min-width: 58px; }
.ccf-page__logo-img { display: block; width: 54px; height: 14px; object-fit: contain; object-position: left center; }
.ccf-page__nav i { flex: 1; }
.ccf-page__nav b { width: 40px; height: 12px; border-radius: 4px; background: var(--ccf-green); }
.ccf-page__hero { min-height: 145px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 14px; padding: 20px; background: linear-gradient(135deg,var(--ccf-source-f6fff9),var(--ccf-source-eaf9f0)); }
.ccf-page__eyebrow { display: inline-block; margin-bottom: 7px; color: var(--ccf-green); font-size: 5.5px; font-weight: 800; text-transform: uppercase; }
.ccf-page__headline { max-width: 13ch; color: var(--ccf-source-07110c); font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -.05em; line-height: .95; }
.ccf-page__copy { max-width: 27ch; margin-top: 7px; color: var(--ccf-source-7c8781); font-size: 5.5px; line-height: 1.5; }
.ccf-page__cta { width: 76px; height: 17px; margin-top: 10px; border-radius: 5px; background: var(--ccf-green); box-shadow: 0 7px 14px rgba(5,171,69,.18); }
.ccf-page__visual { position: relative; min-height: 100px; }
.ccf-page__sheet {
  position: absolute;
  inset: 8px 8px 10px 10px;
  overflow: hidden;
  border: 1px solid rgba(20,35,28,.09);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--ccf-source-ffffff) 0%, var(--ccf-source-fcfefd) 100%);
  transform: rotate(-6deg);
  transform-origin: center center;
  box-shadow: 0 10px 22px rgba(20,35,28,.08);
}
.ccf-page__line {
  position: absolute;
  right: 14px;
  height: 2px;
  border-radius: 999px;
  transform-origin: right center;
}
.ccf-page__line--1 { top: 22px; width: 78px; background: var(--ccf-green); transform: rotate(-8deg); }
.ccf-page__line--2 { top: 32px; width: 92px; background: var(--ccf-green); transform: rotate(-8deg); }
.ccf-page__line--3 { top: 42px; width: 62px; background: var(--ccf-source-9fe6b7); transform: rotate(-8deg); }
.ccf-page__badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  min-height: 19px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--ccf-source-07110c);
  color: var(--ccf-source-fff);
  font-family: "Red Hat Mono", monospace;
  font-size: 5.5px;
  box-shadow: 0 8px 16px rgba(7,17,12,.18);
}
.ccf-page__cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 11px 20px 17px; }
.ccf-page__card { min-height: 56px; padding: 9px; border: 1px solid var(--ccf-line); border-radius: 8px; background: var(--ccf-source-fff); }
.ccf-page__card i { display: block; width: 18px; height: 18px; margin-bottom: 6px; border-radius: 6px; background: var(--ccf-green-50); }
.ccf-page__card b { display: block; width: 60%; height: 4px; margin-bottom: 4px; border-radius: 3px; background: var(--ccf-source-253229); }
.ccf-page__card span { display: block; width: 83%; height: 3px; border-radius: 3px; background: var(--ccf-source-e5ebe7); }
.ccf-event-chip {
  position: absolute;
  z-index: 4;
  right: 22px;
  bottom: 22px;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid rgba(20,35,28,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  color: var(--ccf-source-26342c);
  box-shadow: 0 14px 32px rgba(20,35,28,.14);
  backdrop-filter: blur(10px);
  font-size: 7px;
  font-weight: 800;
}
.ccf-event-chip__icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; background: var(--ccf-green); color: var(--ccf-source-fff); font-size: 13px; box-shadow: 0 8px 16px rgba(5,171,69,.20); }
.ccf-event-chip small { display: block; margin-top: 3px; color: var(--ccf-source-87918b); font-size: 5.5px; font-weight: 600; }

/* BROADCAST */
.ccf-inbox { display: grid; grid-template-columns: 132px 1fr 155px; min-height: 385px; }
.ccf-channel-list { padding: 12px 9px; border-right: 1px solid var(--ccf-line); background: var(--ccf-source-fbfcfb); }
.ccf-channel-title { margin: 2px 6px 9px; color: var(--ccf-source-9aa39e); font-size: 6px; font-weight: 800; text-transform: uppercase; }
.ccf-channel { min-height: 39px; display: flex; align-items: center; gap: 7px; margin-bottom: 5px; padding: 0 8px; border-radius: 9px; color: var(--ccf-source-6e7a73); font-size: 6.5px; font-weight: 700; }
.ccf-channel.is-active { background: var(--ccf-source-e8f8ee); color: var(--ccf-green-700); }
.ccf-channel__icon { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 7px; background: var(--ccf-source-fff); color: var(--ccf-green); box-shadow: 0 3px 8px rgba(20,35,28,.05); font-size: 11px; }
.ccf-channel b { margin-left: auto; min-width: 15px; height: 15px; display: grid; place-items: center; border-radius: 999px; background: var(--ccf-green); color: var(--ccf-source-fff); font-family: "Red Hat Mono", monospace; font-size: 5px; }
.ccf-thread { min-width: 0; padding: 14px; }
.ccf-thread__head { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--ccf-line); }
.ccf-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--ccf-source-dff4ff); color: var(--ccf-source-24627d); font-size: 7px; font-weight: 800; }
.ccf-thread__head strong { display: block; color: var(--ccf-source-1e2b23); font-size: 8px; }
.ccf-thread__head span { display: block; margin-top: 2px; color: var(--ccf-source-9aa39e); font-size: 5.5px; }
.ccf-thread__head i { flex: 1; }
.ccf-thread__tag { min-height: 19px; display: grid !important; place-items: center; padding: 0 7px; border-radius: 999px; background: var(--ccf-green-50); color: var(--ccf-green-700) !important; font-size: 5.5px !important; font-weight: 800; }
.ccf-messages { display: grid; gap: 8px; padding: 15px 0; }
.ccf-message { max-width: 78%; padding: 9px 10px; border-radius: 11px 11px 11px 3px; background: var(--ccf-source-f1f4f2); color: var(--ccf-source-657169); font-size: 6px; line-height: 1.5; }
.ccf-message.is-user { justify-self: end; border-radius: 11px 11px 3px 11px; background: var(--ccf-source-07110c); color: var(--ccf-source-fff); }
.ccf-composer { min-height: 64px; padding: 9px; border: 1px solid var(--ccf-line); border-radius: 11px; }
.ccf-composer__text { color: var(--ccf-source-7c8781); font-size: 6px; }
.ccf-composer__actions { display: flex; align-items: center; margin-top: 13px; color: var(--ccf-source-93a099); font-size: 10px; }
.ccf-composer__actions i { flex: 1; }
.ccf-send { width: 44px; height: 19px; border-radius: 6px; background: var(--ccf-green); }
.ccf-contact-side { padding: 14px 12px; border-left: 1px solid var(--ccf-line); background: var(--ccf-source-fbfcfb); }
.ccf-contact-side__title { color: var(--ccf-source-26342c); font-size: 7px; font-weight: 800; }
.ccf-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.ccf-stat { min-height: 52px; padding: 9px; border: 1px solid var(--ccf-line); border-radius: 9px; background: var(--ccf-source-fff); }
.ccf-stat strong { display: block; color: var(--ccf-source-17231c); font-family: "Bricolage Grotesque",sans-serif; font-size: 13px; }
.ccf-stat span { display: block; margin-top: 3px; color: var(--ccf-source-9aa39e); font-size: 5px; }
.ccf-contact-meta { margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--ccf-source-fff); border: 1px solid var(--ccf-line); }
.ccf-contact-meta div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--ccf-line); color: var(--ccf-source-9aa39e); font-size: 5.5px; }
.ccf-contact-meta div:last-child { border-bottom: 0; }
.ccf-contact-meta b { color: var(--ccf-source-405047); }

/* CONVERT */
.ccf-pipeline { padding: 14px; background: var(--ccf-source-f6f8f6); min-height: 385px; }
.ccf-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 12px; }
.ccf-kpi { min-height: 48px; padding: 9px 10px; border: 1px solid var(--ccf-line); border-radius: 9px; background: var(--ccf-source-fff); }
.ccf-kpi span { display: block; color: var(--ccf-source-9ba49f); font-size: 5px; }
.ccf-kpi strong { display: block; margin-top: 4px; color: var(--ccf-source-17231c); font-family: "Bricolage Grotesque", sans-serif; font-size: 13px; }
.ccf-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.ccf-column { min-height: 276px; padding: 9px; border: 1px solid var(--ccf-line); border-radius: 11px; background: var(--ccf-source-eef2ef); }
.ccf-column__head { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; color: var(--ccf-source-66736b); font-size: 6px; font-weight: 800; }
.ccf-column__head b { width: 16px; height: 16px; display: grid; place-items: center; margin-left: auto; border-radius: 999px; background: var(--ccf-source-fff); color: var(--ccf-source-819089); font-family: "Red Hat Mono",monospace; font-size: 5px; }
.ccf-deal { min-height: 71px; margin-bottom: 7px; padding: 9px; border: 1px solid rgba(20,35,28,.08); border-radius: 9px; background: var(--ccf-source-fff); box-shadow: 0 4px 10px rgba(20,35,28,.04); }
.ccf-deal__person { display: flex; align-items: center; gap: 7px; }
.ccf-deal__avatar { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--ccf-source-e8f8ee); color: var(--ccf-green-700); font-size: 5.5px; font-weight: 800; }
.ccf-deal strong { display: block; color: var(--ccf-source-25332b); font-size: 6.5px; }
.ccf-deal small { display: block; margin-top: 2px; color: var(--ccf-source-9aa39e); font-size: 4.8px; }
.ccf-deal__foot { display: flex; justify-content: space-between; margin-top: 10px; color: var(--ccf-source-8e9893); font-family: "Red Hat Mono",monospace; font-size: 5px; }
.ccf-deal__foot b { color: var(--ccf-green-700); font-size: 5px; }
.ccf-floating-card { position: absolute; z-index: 4; border: 1px solid rgba(20,35,28,.1); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 16px 35px rgba(20,35,28,.16); backdrop-filter: blur(9px); }
.ccf-payment-success { right: 18px; bottom: 22px; width: 165px; padding: 13px; transform: rotate(2deg); }
.ccf-payment-success__head { display: flex; align-items: center; gap: 8px; }
.ccf-check { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 9px; background: var(--ccf-green); color: var(--ccf-source-fff); font-size: 13px; }
.ccf-payment-success strong { display: block; color: var(--ccf-source-1d2b23); font-size: 7px; }
.ccf-payment-success span { display: block; margin-top: 3px; color: var(--ccf-source-87918c); font-size: 5.5px; }
.ccf-payment-success__amount { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--ccf-line); color: var(--ccf-source-101a14); font-family: "Bricolage Grotesque",sans-serif; font-size: 18px; font-weight: 800; }
.ccf-calendar-float { left: 18px; bottom: 18px; width: 150px; padding: 11px; transform: rotate(-2deg); }
.ccf-calendar-float strong { color: var(--ccf-source-26342c); font-size: 6.5px; }
.ccf-times { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 9px; }
.ccf-times span { min-height: 20px; display: grid; place-items: center; border-radius: 6px; background: var(--ccf-source-f0f3f1); color: var(--ccf-source-8c9691); font-size: 5px; }
.ccf-times span.is-active { background: var(--ccf-source-07110c); color: var(--ccf-source-fff); }

/* ORCHESTRATE */
.ccf-workflow { display: grid; grid-template-columns: 1fr 154px; min-height: 385px; background: var(--ccf-source-f7f6fb); }
.ccf-workflow-canvas { position: relative; overflow: hidden; padding: 17px 15px; background-image: radial-gradient(circle, rgba(99,82,151,.13) 1px, transparent 1px); background-size: 15px 15px; }
.ccf-workflow-canvas::before { content: ""; position: absolute; top: 54px; bottom: 55px; left: 50%; width: 2px; background: linear-gradient(var(--ccf-source-a992ff),var(--ccf-source-6e56cf),var(--ccf-source-05ab45)); transform: translateX(-50%); opacity: .7; }
.ccf-wf-node { position: relative; z-index: 2; width: 72%; min-height: 56px; display: flex; align-items: center; gap: 9px; margin: 0 auto 13px; padding: 0 11px; border: 1px solid rgba(54,41,102,.12); border-radius: 11px; background: var(--ccf-source-fff); box-shadow: 0 8px 17px rgba(54,41,102,.08); }
.ccf-wf-node__icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--ccf-source-eee9ff); color: var(--ccf-source-6e56cf); font-size: 13px; }
.ccf-wf-node.is-trigger .ccf-wf-node__icon { background: var(--ccf-source-e7f7ee); color: var(--ccf-green-700); }
.ccf-wf-node.is-success .ccf-wf-node__icon { background: var(--ccf-source-07110c); color: var(--ccf-neon); }
.ccf-wf-node strong { display: block; color: var(--ccf-source-26312b); font-size: 6.8px; }
.ccf-wf-node small { display: block; margin-top: 3px; color: var(--ccf-source-929b96); font-size: 5px; }
.ccf-wf-branch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 90%; margin: 0 auto 13px; position: relative; z-index: 2; }
.ccf-wf-branch .ccf-wf-node { width: 100%; margin: 0; }
.ccf-workflow-side { padding: 14px 12px; border-left: 1px solid var(--ccf-line); background: rgba(255,255,255,.76); }
.ccf-live-badge { min-height: 28px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border-radius: 8px; background: var(--ccf-source-07110c); color: var(--ccf-source-fff); font-size: 6px; font-weight: 800; }
.ccf-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ccf-neon); box-shadow: 0 0 8px var(--ccf-neon); }
.ccf-side-metric { margin-top: 9px; padding: 10px; border: 1px solid var(--ccf-line); border-radius: 10px; background: var(--ccf-source-fff); }
.ccf-side-metric span { display: block; color: var(--ccf-source-9aa39e); font-size: 5px; }
.ccf-side-metric strong { display: block; margin-top: 5px; color: var(--ccf-source-1b2821); font-family: "Bricolage Grotesque",sans-serif; font-size: 14px; }
.ccf-activity { margin-top: 10px; }
.ccf-activity__title { margin-bottom: 7px; color: var(--ccf-source-66736b); font-size: 6px; font-weight: 800; }
.ccf-activity-row { display: flex; align-items: flex-start; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--ccf-line); }
.ccf-activity-row:last-child { border-bottom: 0; }
.ccf-activity-row i { width: 6px; height: 6px; flex: 0 0 auto; margin-top: 2px; border-radius: 50%; background: var(--ccf-green); }
.ccf-activity-row span { color: var(--ccf-source-7b8780); font-size: 5px; line-height: 1.4; }

@media (max-width: 980px) {
  .ccf-panel { grid-template-columns: 1fr; }
  .ccf-copy { min-height: 390px; }
  .ccf-copy h3 { max-width: 12ch; }
  .ccf-visual { min-height: 600px; }
}
@media (max-width: 720px) {
  .ccf-feature { width: min(100% - 20px, 1280px); }
  .ccf-shell { border-radius: 28px; }
  .ccf-tabs { grid-template-columns: repeat(2,1fr); min-height: 138px; }
  .ccf-tab { min-height: 69px; border-bottom: 1px solid var(--ccf-line); }
  .ccf-tab:nth-child(2) { border-right: 0; }
  .ccf-tab:nth-child(n+3) { border-bottom: 0; }
  .ccf-copy { min-height: 0; padding: 38px 25px 40px; }
  .ccf-copy h3 { font-size: clamp(39px, 11vw, 52px); }
  .ccf-copy p { font-size: 14px; }
  .ccf-visual { min-height: 470px; }
  .ccf-app { top: 42px; width: 165%; max-width: none; transform: translateX(-50%) rotate(-1deg) scale(.59); transform-origin: top center; }
  .ccf-event-chip { right: 14px; bottom: 15px; }
}
@media (max-width: 420px) {
  .ccf-tab { gap: 7px; font-size: 11px; }
  .ccf-tab__icon { width: 27px; height: 27px; }
  .ccf-visual { min-height: 430px; }
  .ccf-app { top: 36px; width: 180%; transform: translateX(-50%) rotate(-1deg) scale(.53); }
}
@media (prefers-reduced-motion: reduce) {
  .ccf-panel.is-active { animation: none; }
  .ccf-app, .ccf-tab, .ccf-tab::after, .ccf-tab__icon { transition: none; }
}

/* SEC-022 · panneaux accordéon synchronisés avec des preuves produit réelles. */
.bayou-proof-accordion {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  width: min(1760px, calc(100% - 32px));
  margin-inline: auto;
  padding: clamp(var(--space-8), 5vw, var(--space-16)) 0;
  color: var(--text-body);
}
.bayou-proof-accordion__copy { display: flex; min-width: 0; flex-direction: column; }
.bayou-proof-accordion__eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--brand-text);
  font-family: var(--font-mono);
  font-size: var(--mono-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bayou-proof-accordion h2 {
  max-width: 13ch;
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(42px, 4vw, 68px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.045em;
}
.bayou-proof-accordion__items { display: grid; gap: var(--space-2); margin-top: auto; padding-top: clamp(var(--space-10), 8vw, var(--space-20)); }
.bayou-proof-toggle { border-radius: var(--radius-xl); transition: background var(--dur-fast) var(--ease-out); }
.bayou-proof-toggle.is-active { background: var(--surface-hover); }
.bayou-proof-toggle h3 { margin: 0; }
.bayou-proof-toggle button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 0;
  background: transparent;
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: clamp(18px, 1.45vw, 24px);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.bayou-proof-toggle button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; border-radius: var(--radius-xl); }
.bayou-proof-toggle__icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
}
.bayou-proof-toggle__icon svg { width: 17px; height: 17px; stroke-width: 2.4; }
.bayou-proof-toggle__icon .proof-check { display: none; }
.bayou-proof-toggle.is-active .bayou-proof-toggle__icon .proof-check { display: block; }
.bayou-proof-toggle.is-active .bayou-proof-toggle__icon .proof-plus { display: none; }
.bayou-proof-toggle.is-active .bayou-proof-toggle__icon { border-color: var(--brand-solid); background: var(--brand-solid); color: var(--text-on-brand); }
.bayou-proof-toggle__content { padding: 0 var(--space-6) var(--space-5) calc(var(--space-5) + 46px); }
.bayou-proof-toggle__content p { max-width: 48ch; margin: 0; color: var(--text-muted); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; }
.bayou-proof-accordion__stage {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: clamp(var(--radius-2xl), 3vw, 42px);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.bayou-proof-accordion__visual {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  margin: 0;
  padding: clamp(var(--space-5), 3vw, var(--space-10));
  animation: bayou-proof-visual-in var(--dur-slow) var(--ease-out) both;
}
.bayou-proof-accordion__visual[hidden] { display: none; }
.bayou-proof-accordion__visual img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: var(--radius-xl);
  background: var(--surface-page);
  box-shadow: var(--shadow-card);
}
.bayou-proof-accordion__visual figcaption {
  justify-self: end;
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--mono-sm);
  font-weight: 600;
}
@keyframes bayou-proof-visual-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 901px) {
  .bayou-proof-accordion__items { padding-bottom: var(--space-6); }
}
@media (max-width: 900px) {
  .bayou-proof-accordion { grid-template-columns: 1fr; }
  .bayou-proof-accordion h2 { max-width: 14ch; }
  .bayou-proof-accordion__items { padding-top: var(--space-8); }
  .bayou-proof-accordion__stage { min-height: 520px; }
}
@media (max-width: 560px) {
  .bayou-proof-accordion { width: min(100% - 20px, 1760px); padding-block: var(--space-8); }
  .bayou-proof-accordion h2 { font-size: clamp(38px, 12vw, 52px); }
  .bayou-proof-toggle button { padding: var(--space-4); }
  .bayou-proof-toggle__content { padding: 0 var(--space-4) var(--space-4) 60px; }
  .bayou-proof-accordion__stage { min-height: 360px; border-radius: var(--radius-xl); }
  .bayou-proof-accordion__visual { padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .bayou-proof-toggle, .bayou-proof-accordion__visual { transition: none; animation: none; }
}

/* ==========================================================================
   SEC-023 : SpaghettiVsEngine (Autopsie du Stack SaaS)
   ========================================================================== */
.cb-spaghetti { padding-block: var(--section-space-block-loose); }
.cb-spaghetti-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.cb-spaghetti-card { border-radius: var(--radius-2xl); border: var(--border-width) solid var(--border-default); padding: var(--space-8); display: flex; flex-direction: column; background: var(--surface-card); }
.cb-spaghetti-card--frankenstein { background: var(--surface-raised); border-style: dashed; }
.cb-spaghetti-card--monolith { background: var(--surface-card); box-shadow: var(--shadow-modal); }
.cb-spaghetti-card__badge { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--mono-xs); font-weight: var(--weight-semibold); width: fit-content; margin-bottom: var(--space-4); }
.cb-spaghetti-card__badge--danger { background: color-mix(in srgb, var(--surface-sunken) 70%, transparent); color: var(--text-strong); border: var(--border-width) solid var(--border-strong); }
.cb-spaghetti-card__badge--success { background: var(--brand-subtle); color: var(--brand-text); }
.cb-spaghetti-card__title { margin: 0; font-family: var(--font-display); font-size: var(--heading-md); font-weight: var(--weight-display); color: var(--text-strong); }
.cb-spaghetti-card__desc { margin: var(--space-2) 0 var(--space-6); color: var(--text-subtitle); font-size: var(--body-sm); }
.cb-spaghetti-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cb-spaghetti-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: var(--border-width) solid var(--border-subtle); background: var(--surface-sunken); }
.cb-spaghetti-icon { display: inline-grid; place-items: center; width: var(--space-6); height: var(--space-6); border-radius: var(--radius-control); font-weight: var(--weight-bold); font-size: var(--body-sm); flex-shrink: 0; }
.cb-spaghetti-item.is-broken .cb-spaghetti-icon { background: color-mix(in srgb, var(--surface-raised) 50%, transparent); color: var(--text-muted); border: var(--border-width) solid var(--border-default); }
.cb-spaghetti-item.is-unified .cb-spaghetti-icon { background: var(--brand-subtle); color: var(--brand-text); }
.cb-spaghetti-info { flex: 1; min-width: 0; }
.cb-spaghetti-info strong { display: block; color: var(--text-strong); font-size: var(--body-sm); font-weight: var(--weight-bold); }
.cb-spaghetti-info small { display: block; color: var(--text-muted); font-size: var(--mono-xs); font-family: var(--font-mono); font-weight: var(--weight-medium); margin-top: 2px; }
.cb-spaghetti-cost { font-family: var(--font-mono); font-size: var(--mono-xs); font-weight: var(--weight-semibold); color: var(--text-muted); }
.cb-spaghetti-tag { font-family: var(--font-mono); font-size: var(--mono-xs); font-weight: var(--weight-semibold); color: var(--brand-text); background: var(--brand-subtle); padding: 2px 6px; border-radius: var(--radius-control); }
.cb-spaghetti-alert { margin-top: auto; padding-top: var(--space-6); display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); font-size: var(--body-sm); font-family: var(--font-mono); font-weight: var(--weight-medium); }
.cb-spaghetti-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-solid); display: inline-block; animation: bayou-eyepulse var(--dur-ambient) infinite; }
.cb-spaghetti-footer { margin-top: auto; padding-top: var(--space-6); border-top: var(--border-width) solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--space-4); }
.cb-spaghetti-footer p { margin: 0; font-family: var(--font-display); font-size: var(--body-md); color: var(--text-strong); font-style: italic; }

/* ==========================================================================
   SEC-024 : LeakyBucketCalculator (Le Seau Percé Interactif)
   ========================================================================== */
.cb-bucket { padding-block: var(--section-space-block-loose); }
.cb-bucket-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-8); margin-top: var(--space-8); align-items: start; }
.cb-bucket-controls { display: flex; flex-direction: column; gap: var(--space-6); }
.cb-bucket-control { padding: var(--space-6); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-xl); background: var(--surface-card); }
.cb-bucket-control__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.cb-bucket-control__head label { font-family: var(--font-display); font-size: var(--heading-sm); font-weight: var(--weight-bold); color: var(--text-strong); }
.cb-bucket-val { font-family: var(--font-mono); font-size: var(--heading-sm); font-weight: var(--weight-semibold); color: var(--brand-text); background: var(--brand-subtle); padding: 2px var(--space-3); border-radius: var(--radius-control); }
.cb-bucket-range { width: 100%; height: var(--space-2); background: var(--surface-sunken); border-radius: var(--radius-pill); outline: none; appearance: none; cursor: pointer; }
.cb-bucket-range::-webkit-slider-thumb { appearance: none; width: var(--space-6); height: var(--space-6); border-radius: 50%; background: var(--brand); cursor: pointer; border: 2px solid var(--surface-card); box-shadow: var(--shadow-card); }
.cb-bucket-range-bounds { display: flex; justify-content: space-between; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--mono-xs); color: var(--text-muted); font-weight: var(--weight-medium); }
.cb-bucket-fissures { display: flex; flex-direction: column; gap: var(--space-3); }
.cb-fissure-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); border: var(--border-width) solid var(--border-subtle); background: var(--surface-card); }
.cb-fissure-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-solid); flex-shrink: 0; }
.cb-fissure-item div { flex: 1; }
.cb-fissure-item strong { display: block; font-size: var(--body-sm); font-weight: var(--weight-bold); color: var(--text-strong); }
.cb-fissure-item p { margin: 2px 0 0; font-size: var(--body-sm); color: var(--text-muted); }
.cb-fissure-loss { font-family: var(--font-mono); font-size: var(--mono-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
.cb-bucket-summary { border-radius: var(--radius-2xl); border: var(--border-width) solid var(--border-default); padding: var(--space-8); background: var(--surface-card); position: sticky; top: calc(var(--control-height-lg) + var(--space-12)); }
.cb-bucket-total { margin-block: var(--space-6); }
.cb-bucket-total__label { display: block; font-size: var(--body-sm); color: var(--text-subtitle); }
.cb-bucket-total__amount { display: block; font-family: var(--font-display); font-size: var(--display-lg); font-weight: var(--weight-display); color: var(--accent); margin-top: var(--space-2); }
.cb-bucket-total__sub { display: block; font-size: var(--body-sm); color: var(--text-muted); margin-top: var(--space-1); }
.cb-bucket-total__sub strong { color: var(--text-strong); }
.cb-bucket-fix-card { padding: var(--space-5); border-radius: var(--radius-lg); border: var(--border-width) solid var(--border-subtle); background: var(--surface-sunken); margin-bottom: var(--space-6); }
.cb-bucket-fix-card h4 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--heading-xs); font-weight: var(--weight-bold); color: var(--text-strong); }
.cb-bucket-fix-card p { margin: 0; font-size: var(--body-sm); color: var(--text-muted); line-height: 1.5; }
.cb-bucket-cta { width: 100%; text-align: center; }

/* ==========================================================================
   SEC-025 : ExecutionReceipt (Le Ticket Thermique des Tâches Évitées)
   ========================================================================== */
.cb-receipt { padding-block: var(--section-space-block-loose); }
.cb-receipt-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-8); margin-top: var(--space-8); align-items: center; }
.cb-ticket { position: relative; background: var(--surface-card); box-shadow: var(--shadow-modal); border-radius: var(--radius-lg); overflow: hidden; border: var(--border-width) solid var(--border-default); }
.cb-ticket__body { padding: var(--space-8); font-family: var(--font-mono); font-size: var(--mono-xs); color: var(--text-body); font-weight: var(--weight-medium); }
.cb-ticket__header { text-align: center; margin-bottom: var(--space-4); }
.cb-ticket__logo { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--heading-sm); font-weight: var(--weight-bold); color: var(--text-strong); }
.cb-ticket__logo img { width: 22px; height: 22px; }
.cb-ticket__meta { margin: var(--space-2) 0 0; color: var(--text-muted); letter-spacing: var(--tracking-label); font-weight: var(--weight-semibold); }
.cb-ticket__date { margin: 2px 0 0; color: var(--brand-text); font-weight: var(--weight-semibold); }
.cb-ticket__divider { text-align: center; color: var(--border-strong); margin-block: var(--space-4); overflow: hidden; user-select: none; }
.cb-ticket__table { width: 100%; border-collapse: collapse; text-align: left; }
.cb-ticket__table th { padding-block: var(--space-2); border-bottom: var(--border-width) solid var(--border-default); color: var(--text-muted); font-size: var(--mono-xs); letter-spacing: var(--tracking-label); font-weight: var(--weight-semibold); }
.cb-ticket__table td { padding-block: var(--space-3); border-bottom: var(--border-width) dashed var(--border-subtle); color: var(--text-strong); font-size: var(--mono-xs); font-weight: var(--weight-medium); }
.cb-ticket-badge { background: var(--brand-subtle); color: var(--brand-text); padding: 2px 6px; border-radius: var(--radius-control); font-weight: var(--weight-semibold); }
.cb-ticket__total { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.cb-ticket__total-row { display: flex; justify-content: space-between; color: var(--text-strong); font-size: var(--mono-sm); }
.cb-ticket__total-row--highlight { color: var(--brand-text); font-weight: var(--weight-bold); font-size: var(--mono-md); }
.cb-ticket__footer { text-align: center; margin-top: var(--space-6); }
.cb-ticket__barcode { font-family: monospace; font-size: var(--body-lg); letter-spacing: 2px; color: var(--text-strong); margin-bottom: var(--space-2); }
.cb-ticket__seal { font-size: var(--mono-xs); color: var(--text-muted); font-weight: var(--weight-semibold); margin: 0; }
.cb-receipt-aside { display: flex; flex-direction: column; }
.cb-receipt-card { border-radius: var(--radius-2xl); border: var(--border-width) solid var(--border-default); padding: var(--space-8); background: var(--surface-card); }
.cb-receipt-card h3 { margin: 0; font-family: var(--font-display); font-size: var(--heading-md); font-weight: var(--weight-display); color: var(--text-strong); }
.cb-receipt-card p { margin: var(--space-4) 0; color: var(--text-subtitle); font-size: var(--body-md); line-height: 1.6; }
.cb-receipt-perks { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cb-receipt-perks li { display: flex; align-items: center; gap: var(--space-2); color: var(--text-strong); font-size: var(--body-sm); font-weight: var(--weight-medium); }
.cb-receipt-perks li span { color: var(--brand-text); font-weight: var(--weight-bold); }

/* ==========================================================================
   SEC-026 : FrictionMuseum (Le Musée des Micro-Horreurs)
   ========================================================================== */
.cb-museum { padding-block: var(--section-space-block-loose); }
.cb-museum-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.cb-museum-card { display: flex; flex-direction: column; border-radius: var(--radius-xl); border: var(--border-width) solid var(--border-default); background: var(--surface-card); overflow: hidden; }
.cb-museum-glass { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--surface-raised), var(--surface-card)); }
.cb-museum-tag { font-family: var(--font-mono); font-size: var(--mono-xs); font-weight: var(--weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); margin-bottom: var(--space-4); }
.cb-museum-mockup { min-height: 130px; display: grid; place-items: center; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-sunken); border: var(--border-width) solid var(--border-subtle); margin-bottom: var(--space-4); }
.cb-museum-email { font-size: var(--body-sm); width: 100%; }
.cb-museum-from { display: block; font-family: var(--font-mono); font-size: var(--mono-xs); color: var(--text-muted); margin-bottom: 2px; }
.cb-museum-subject { display: block; font-weight: var(--weight-bold); margin-bottom: var(--space-1); }
.cb-museum-body { margin: 0; color: var(--text-subtitle); font-size: var(--body-xs); }
.cb-museum-email.is-fixed { background: var(--brand-subtle); padding: var(--space-2); border-radius: var(--radius-control); }
.cb-museum-email.is-fixed .cb-museum-subject { color: var(--brand-text); }
.cb-museum-mobile { width: 100%; }
.cb-museum-mobile__screen { background: var(--surface-card); border-radius: var(--radius-md); padding: var(--space-3); border: var(--border-width) solid var(--border-subtle); }
.cb-museum-mobile__screen p { margin: 0 0 var(--space-2); font-weight: var(--weight-bold); font-size: var(--body-xs); }
.cb-museum-btn-wrap { position: relative; }
.cb-fake-btn { display: block; text-align: center; padding: var(--space-2); background: var(--cta-bg); color: var(--cta-text); border-radius: var(--radius-control); font-size: var(--body-xs); font-weight: var(--weight-bold); }
.cb-fake-chat-bubble { position: absolute; right: -8px; bottom: -8px; background: var(--surface-inverse); color: var(--text-inverse); font-size: 10px; padding: 4px 8px; border-radius: var(--radius-pill); box-shadow: var(--shadow-modal); }
.cb-museum-mobile.is-fixed .cb-fake-chat-bubble { display: none; }
.cb-museum-input-box { width: 100%; font-size: var(--body-sm); }
.cb-museum-input-box label { display: block; font-weight: var(--weight-bold); margin-bottom: 2px; font-size: var(--body-xs); }
.cb-museum-input-box input { width: 100%; padding: var(--space-2); border-radius: var(--radius-control); border: var(--border-width) solid var(--border-default); background: var(--surface-card); font-family: var(--font-mono); font-size: var(--mono-xs); }
.cb-input-error { display: block; color: var(--accent); font-family: var(--font-mono); font-size: var(--mono-xs); margin-top: 2px; }
.cb-museum-input-box.is-fixed .cb-input-error { color: var(--brand-text); }
.cb-museum-diagnosis { font-size: var(--body-sm); color: var(--text-subtitle); margin-top: auto; }
.cb-museum-diagnosis strong { color: var(--text-strong); }
.cb-museum-actions { padding: var(--space-4) var(--space-6); border-top: var(--border-width) solid var(--border-subtle); background: var(--surface-card); }
.cb-museum-actions .cb-button { width: 100%; }
.cb-museum-foot { margin-top: var(--space-8); padding: var(--space-6) var(--space-8); border-radius: var(--radius-2xl); border: var(--border-width) solid var(--border-default); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.cb-museum-tally { display: flex; align-items: center; gap: var(--space-3); }
.cb-museum-tally__num { font-family: var(--font-mono); font-size: var(--heading-md); font-weight: var(--weight-semibold); color: var(--brand-text); background: var(--brand-subtle); padding: 4px 10px; border-radius: var(--radius-control); }

/* ==========================================================================
   SEC-027 : TimeCompressionSlider (La Machine à Remonter le Temps)
   ========================================================================== */
.cb-velocity { padding-block: var(--section-space-block-loose); }
.cb-velocity-box { margin-top: var(--space-8); }
.cb-velocity-nav { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); justify-content: center; flex-wrap: wrap; }
.cb-velocity-step { padding: var(--space-3) var(--space-6); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: var(--space-2); transition: all var(--dur-snap) var(--ease-snap); }
.cb-velocity-step b { font-family: var(--font-mono); font-size: var(--mono-sm); }
.cb-velocity-step span { font-size: var(--body-sm); font-weight: var(--weight-semibold); }
.cb-velocity-step:hover { transform: translateY(-2px); color: var(--text-strong); border-color: var(--border-strong); }
.cb-velocity-step:active { transform: translateY(2px) scale(.97); transition-duration: var(--dur-instant); }
.cb-velocity-step.is-active { background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--border-inverse); }
.cb-velocity-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.cb-velocity-lane { border-radius: var(--radius-2xl); border: var(--border-width) solid var(--border-default); padding: var(--space-8); background: var(--surface-card); display: flex; flex-direction: column; }
.cb-velocity-lane--slow { background: var(--surface-raised); border-style: dashed; }
.cb-velocity-lane__head { margin-bottom: var(--space-6); }
.cb-velocity-badge { font-family: var(--font-mono); font-size: var(--mono-xs); font-weight: var(--weight-semibold); padding: 2px 8px; border-radius: var(--radius-control); display: inline-block; margin-bottom: var(--space-2); }
.cb-velocity-badge--danger { background: color-mix(in srgb, var(--surface-sunken) 70%, transparent); color: var(--text-muted); border: var(--border-width) solid var(--border-default); }
.cb-velocity-badge--success { background: var(--brand-subtle); color: var(--brand-text); }
.cb-velocity-lane__head h3 { margin: 0; font-family: var(--font-display); font-size: var(--heading-md); font-weight: var(--weight-display); color: var(--text-strong); }
.cb-velocity-card { margin-top: auto; padding: var(--space-6); border-radius: var(--radius-xl); border: var(--border-width) solid var(--border-subtle); background: var(--surface-sunken); }
.cb-velocity-time { font-family: var(--font-mono); font-size: var(--mono-xs); color: var(--brand-text); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); text-transform: uppercase; }
.cb-velocity-title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--heading-sm); font-weight: var(--weight-bold); color: var(--text-strong); }
.cb-velocity-desc { margin: 0 0 var(--space-6); font-size: var(--body-md); color: var(--text-subtitle); line-height: 1.6; }
.cb-velocity-meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--mono-xs); font-weight: var(--weight-semibold); color: var(--text-muted); border-top: var(--border-width) solid var(--border-subtle); padding-top: var(--space-4); }

/* ==========================================================================
   SEC-028 : FourElementsWheel (Le Cadran Alchimique des 4 Équilibres)
   ========================================================================== */
.cb-wheel { padding-block: var(--section-space-block-loose); }
.cb-wheel-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-8); margin-top: var(--space-8); align-items: center; }
.cb-wheel-dial { position: relative; width: min(380px, 100%); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; border: var(--border-width) solid var(--border-default); display: grid; grid-template-columns: repeat(2, 1fr); padding: var(--space-3); gap: var(--space-3); background: var(--surface-raised); }
.cb-wheel-sector { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-xl); border: var(--border-width) solid var(--border-subtle); background: var(--surface-card); color: var(--text-body); cursor: pointer; transition: all var(--dur-snap) var(--ease-snap); padding: var(--space-4); }
.cb-wheel-sector img { width: 36px; height: 36px; }
.cb-wheel-sector span { font-family: var(--font-mono); font-size: var(--mono-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); }
.cb-wheel-sector:hover { transform: translateY(-2px); border-color: var(--border-strong); color: var(--text-strong); }
.cb-wheel-sector:active { transform: translateY(2px) scale(.97); transition-duration: var(--dur-instant); }
.cb-wheel-sector.is-active { background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--border-inverse); }
.cb-wheel-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 50%; background: var(--surface-inverse); color: var(--text-inverse); border: var(--border-width) solid var(--border-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: var(--shadow-modal); pointer-events: none; }
.cb-wheel-eye { width: 28px; height: 28px; animation: bayou-look var(--dur-ambient) var(--ease-in-out) infinite; }
.cb-wheel-center span { font-family: var(--font-mono); font-size: var(--mono-xs); font-weight: var(--weight-semibold); color: var(--accent); letter-spacing: var(--tracking-label); }
.cb-wheel-revelation { border-radius: var(--radius-2xl); border: var(--border-width) solid var(--border-default); padding: var(--space-8); background: var(--surface-card); }
.cb-wheel-card__head { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
.cb-wheel-glyph { font-size: var(--display-md); line-height: 1; color: var(--accent); }
.cb-wheel-card__head h3 { margin: 0; font-family: var(--font-display); font-size: var(--heading-md); font-weight: var(--weight-display); color: var(--text-strong); }
.cb-wheel-card__head p { margin: var(--space-1) 0 0; color: var(--text-subtitle); font-size: var(--body-md); }
.cb-wheel-card__quote { margin: 0 0 var(--space-6); padding: var(--space-5); border-left: 3px solid var(--accent); background: var(--surface-sunken); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-family: var(--font-display); font-size: var(--body-lg); color: var(--text-strong); font-style: italic; line-height: 1.6; }
.cb-wheel-card__manifestation { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface-sunken); border: var(--border-width) solid var(--border-subtle); font-size: var(--body-sm); color: var(--text-body); }
.cb-wheel-card__manifestation strong { display: block; color: var(--text-strong); font-weight: var(--weight-bold); margin-bottom: 2px; }

@media (max-width: 860px) {
  .cb-spaghetti-grid, .cb-bucket-layout, .cb-receipt-wrap, .cb-museum-grid, .cb-velocity-comparison, .cb-wheel-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SEC-029 : CommunityBenefitCarousel
   ========================================================================== */
.cb-community-carousel { overflow: hidden; padding-block: var(--section-space-block); background: var(--surface-raised); color: var(--text-body); }
.cb-community-carousel__head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .75fr);
  align-items: end;
  gap: var(--space-8);
  width: min(calc(100% - (var(--grid-margin) * 2)), var(--container-wide));
  margin: 0 auto var(--section-gap-title);
}
.cb-community-carousel__head .cb-overline { margin: 0 0 var(--space-3); }
.cb-community-carousel__head h2 {
  max-width: 13ch;
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, var(--display-lg));
  font-weight: var(--weight-display);
  line-height: .98;
  letter-spacing: var(--tracking-display);
}
.cb-community-carousel__head > p { max-width: 48ch; margin: 0; color: var(--text-subtitle); font-size: var(--body-lg); line-height: 1.55; }
.cb-community-carousel__viewport { width: 100%; overflow: hidden; }
.cb-community-carousel__track {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  padding: 0 max(var(--grid-margin), calc((100vw - var(--container-wide)) / 2)) var(--space-3);
  scroll-behavior: smooth;
  scroll-padding-inline: max(var(--grid-margin), calc((100vw - var(--container-wide)) / 2));
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  cursor: grab;
  user-select: none;
}
.cb-community-carousel__track::-webkit-scrollbar { display: none; }
.cb-community-carousel__track:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.cb-community-carousel__track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.cb-community-card {
  display: flex;
  flex: 0 0 clamp(340px, 31vw, 470px);
  min-height: 680px;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: start;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.cb-community-card__visual { display: grid; height: 420px; padding: var(--space-5) var(--space-5) 0; overflow: hidden; place-items: center; background: var(--surface-page); }
.cb-community-card__visual img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.cb-community-card__copy { padding: var(--space-6) var(--space-6) var(--space-8); }
.cb-community-card h3 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(var(--heading-md), 2vw, 26px);
  font-weight: var(--weight-display);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
}
.cb-community-card p { margin: var(--space-3) 0 0; color: var(--text-subtitle); font-size: var(--body-md); line-height: 1.55; }
.cb-community-carousel__controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  width: min(calc(100% - (var(--grid-margin) * 2)), var(--container-wide));
  margin: var(--space-5) auto 0;
}
.cb-community-carousel__arrow {
  display: grid;
  width: 54px;
  height: 54px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--heading-sm);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.cb-community-carousel__arrow:hover { transform: translateY(-2px); }
.cb-community-carousel__arrow:active { transform: translateY(2px) scale(.97); transition-duration: var(--dur-instant); }
.cb-community-carousel__arrow:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.cb-community-carousel__arrow:disabled { opacity: .28; cursor: default; transform: none; }
@media (max-width: 900px) {
  .cb-community-carousel__head { grid-template-columns: 1fr; gap: var(--space-4); }
  .cb-community-carousel__head > p { font-size: var(--body-md); }
  .cb-community-carousel__track { gap: var(--space-4); }
  .cb-community-card { flex-basis: min(86vw, 390px); min-height: 620px; }
  .cb-community-card__visual { height: 360px; padding: var(--space-4) var(--space-4) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-community-carousel__track { scroll-behavior: auto; }
  .cb-community-carousel__arrow { transition: none; }
}