/* ═════════════════════════════════════════════════════════════════════════════
   TCHEFON PUBLIC — Site marketing, pricing, onboarding, dashboard client
   UX.md compliant : dopamine design, micro-interactions, typography scale
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Charte Tchefon */
  --tch-primary: #1E2A5A;
  --tch-primary-deep: #0f1a3d;
  --tch-primary-hover: #16204A;
  --tch-secondary: #1F7A5C;
  --tch-accent: #C6A15B;
  --tch-accent-hover: #b08d4b;
  --tch-bg: #FFF7EA;
  --tch-surface: #FFFFFF;
  --tch-text: #1a1a2e;
  --tch-text-muted: #6b6b7b;
  --tch-border: #e8e4df;
  --tch-error: #DC2626;
  --tch-warning: #D97706;

  /* Easing UX.md */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography Scale — Major Third (1.25) */
  --fs-display: clamp(2.8rem, 5vw, 3.8rem);
  --fs-headline: clamp(2rem, 3.5vw, 2.8rem);
  --fs-title: clamp(1.5rem, 2.5vw, 1.95rem);
  --fs-lead: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.85rem;
  --fs-caption: 0.75rem;

  /* Spacing Scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;
}

/* ─── RESET ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.tch-public {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--tch-text);
  background: var(--tch-surface);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ─── SCROLL REVEAL ─────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 60ms; }
.reveal-delay-2 { transition-delay: 120ms; }
.reveal-delay-3 { transition-delay: 180ms; }
.reveal-delay-4 { transition-delay: 240ms; }
.reveal-delay-5 { transition-delay: 300ms; }
.reveal-delay-6 { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── LAYOUT ────────────────────────────────────────────────────────────── */
.tch-container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-md); }
.tch-section { padding: clamp(48px, 8vw, 96px) 0; }
.tch-section--ivory { background: var(--tch-bg); }

/* ═════════════════════════════════════════════════════════════════════════════
   NAVIGATION
   ═════════════════════════════════════════════════════════════════════════════ */
.tch-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-sm) 0;
  transition: background 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.tch-nav--scrolled {
  background: rgba(15, 26, 61, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
.tch-nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.tch-nav__logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--tch-accent);
  text-decoration: none;
  letter-spacing: 0.08em;
}
.tch-nav__links { display: flex; align-items: center; gap: var(--space-md); }
.tch-nav__link {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  transition: color 0.2s ease;
  position: relative;
}
.tch-nav__link:hover { color: #fff; }
.tch-nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--tch-accent);
  transition: width 0.3s var(--ease-out-expo);
}
.tch-nav__link:hover::after { width: 100%; }
.tch-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--tch-accent);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.25s var(--ease-out-expo);
}
.tch-nav__cta:hover {
  background: var(--tch-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(198, 161, 91, 0.3);
}

/* ═════════════════════════════════════════════════════════════════════════════
   HERO
   ═════════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  background: linear-gradient(170deg, var(--tch-primary) 0%, var(--tch-primary-deep) 55%, #080e24 100%);
  overflow: hidden;
}

/* Orbe lumineux subtil */
.hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 161, 91, 0.07) 0%, transparent 65%);
  pointer-events: none;
  animation: orb-float 20s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 122, 92, 0.05) 0%, transparent 65%);
  pointer-events: none;
  animation: orb-float 25s ease-in-out infinite reverse;
}
@keyframes orb-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -20px); }
}

.hero__content { position: relative; z-index: 1; max-width: 720px; }

/* Eyebrow */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(198, 161, 91, 0.1);
  border: 1px solid rgba(198, 161, 91, 0.2);
  border-radius: 100px;
  font-size: var(--fs-small);
  color: var(--tch-accent);
  font-weight: 500;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-lg);
}

.hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-display);
  font-weight: 500;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}
.hero__title-accent {
  display: block;
  color: var(--tch-accent);
  font-style: italic;
  font-weight: 400;
}

.hero__subtitle {
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.hero__actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-lg); }

.hero__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.3);
}
.hero__trust i { color: rgba(31, 122, 92, 0.7); }

/* Scroll cue */
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.25);
  font-size: var(--fs-caption);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: scroll-cue 2.5s var(--ease-in-out-circ) infinite;
}
@keyframes scroll-cue {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.25; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 0.5; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═════════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: var(--fs-body);
  text-decoration: none;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.25s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.btn--primary {
  padding: 15px 32px;
  background: var(--tch-accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--tch-accent-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(198, 161, 91, 0.28);
}
.btn--ghost {
  padding: 15px 32px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}
.btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}
.btn--large { padding: 18px 44px; font-size: 1.05rem; }
.btn--dark {
  padding: 15px 32px;
  background: var(--tch-primary);
  color: #fff;
}
.btn--dark:hover {
  background: var(--tch-primary-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(30, 42, 90, 0.2);
}

/* ═════════════════════════════════════════════════════════════════════════════
   SECTION HEADERS
   ═════════════════════════════════════════════════════════════════════════════ */
.section-header { text-align: center; margin-bottom: var(--space-xl); }
.section-eyebrow {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--tch-accent);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-sm);
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-headline);
  font-weight: 500;
  color: var(--tch-primary);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}
.section-subtitle {
  font-size: var(--fs-lead);
  color: var(--tch-text-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ═════════════════════════════════════════════════════════════════════════════
   BEFORE / AFTER (PROBLEM / SOLUTION)
   ═════════════════════════════════════════════════════════════════════════════ */
.contrast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  max-width: 860px;
  margin: 0 auto;
}
@media (max-width: 640px) { .contrast-grid { grid-template-columns: 1fr; } }

.contrast-card {
  padding: var(--space-lg);
  border-radius: 20px;
  border: 1px solid var(--tch-border);
  background: var(--tch-surface);
  transition: transform 0.4s var(--ease-out-expo);
}
.contrast-card:hover { transform: translateY(-4px); }
.contrast-card--before { opacity: 0.7; }
.contrast-card--after {
  border-color: rgba(198, 161, 91, 0.3);
  background: linear-gradient(135deg, #fff 0%, rgba(198, 161, 91, 0.03) 100%);
  opacity: 1;
  box-shadow: 0 8px 40px rgba(198, 161, 91, 0.08);
}
.contrast-card__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 1.3rem;
  margin-bottom: var(--space-md);
}
.contrast-card--before .contrast-card__icon { background: #f3f4f6; color: var(--tch-text-muted); }
.contrast-card--after .contrast-card__icon { background: rgba(198, 161, 91, 0.1); color: var(--tch-accent); }
.contrast-card__title {
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--tch-primary);
  margin-bottom: var(--space-xs);
}
.contrast-card__text { font-size: var(--fs-body); color: var(--tch-text-muted); line-height: 1.7; }

/* ═════════════════════════════════════════════════════════════════════════════
   FEATURES
   ═════════════════════════════════════════════════════════════════════════════ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .features-grid { grid-template-columns: 1fr; } }

.feature-card {
  padding: var(--space-lg) var(--space-md);
  border-radius: 20px;
  background: var(--tch-surface);
  border: 1px solid var(--tch-border);
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(30, 42, 90, 0.07);
}
.feature-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--tch-bg);
  color: var(--tch-primary);
  font-size: 1.4rem;
  margin-bottom: var(--space-md);
  transition: background 0.3s ease, color 0.3s ease;
}
.feature-card:hover .feature-card__icon {
  background: var(--tch-primary);
  color: var(--tch-accent);
}
.feature-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tch-primary);
  margin-bottom: var(--space-xs);
}
.feature-card__text { font-size: var(--fs-small); color: var(--tch-text-muted); line-height: 1.65; }

/* ═════════════════════════════════════════════════════════════════════════════
   PRICING CARDS
   ═════════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────────
   PRICING — Refonte design haut de gamme.
   Ressentir le luxe par : Cormorant Garamond serif, accents or parcimonieux,
   espace négatif généreux, micro-interactions 220-320ms ease-out-expo,
   ornements typographiques (filets, points) plutôt que d'icônes lourdes.
   ───────────────────────────────────────────────────────────────────────── */

.pricing-area {
  position: relative;
}
.pricing-area__title em {
  font-style: italic;
  color: var(--tch-accent);
  font-weight: 500;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-top: 2.5rem;
}
@media (max-width: 980px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 2.5rem auto 0; gap: 2rem; }
}

.pricing-card {
  --card-pad: 2rem;
  position: relative;
  padding: var(--card-pad) calc(var(--card-pad) - 0.25rem) calc(var(--card-pad) - 0.5rem);
  border-radius: 22px;
  background: #FFFFFF;
  border: 1px solid color-mix(in srgb, var(--tch-primary) 8%, transparent);
  text-align: center;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 22px 50px -28px rgba(30, 42, 90, 0.18);
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Filet décoratif intérieur — détail subtil qui nourrit la perception de soin */
.pricing-card::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 17px;
  border: 1px solid color-mix(in srgb, var(--tch-accent) 6%, transparent);
  pointer-events: none;
  z-index: -1;
  transition: border-color 320ms ease-out;
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 32px 70px -28px rgba(30, 42, 90, 0.28);
  border-color: color-mix(in srgb, var(--tch-primary) 16%, transparent);
}
.pricing-card:hover::before {
  border-color: color-mix(in srgb, var(--tch-accent) 18%, transparent);
}

/* Carte recommandée — traitement éditorial avec halo or et fond légèrement tiède */
.pricing-card--featured {
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--tch-accent) 11%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--tch-bg) 60%, #FFFFFF) 100%);
  border-color: color-mix(in srgb, var(--tch-accent) 38%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 30px 70px -28px rgba(198, 161, 91, 0.4),
    0 12px 36px -20px rgba(30, 42, 90, 0.25);
  transform: translateY(-8px);
  /* Laisse dépasser le ruban « Recommandé » (top: -16px) sans le couper. */
  overflow: visible;
}
.pricing-card--featured::before {
  border-color: color-mix(in srgb, var(--tch-accent) 22%, transparent);
}
.pricing-card--featured:hover {
  transform: translateY(-14px);
}

/* Badge « Recommandé » — médaillon or fin */
.pricing-card__badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--tch-accent) 0%, color-mix(in srgb, var(--tch-accent) 78%, #000) 100%);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.5rem 1.2rem 0.5rem 1.05rem;
  border-radius: 999px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 12px 24px -10px rgba(198, 161, 91, 0.55);
  z-index: 2;
}
.pricing-card__badge i {
  font-size: 0.62rem;
  color: #FFFFFF;
}

/* En-tête de la carte — nom + ornement */
.pricing-card__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.pricing-card__name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--tch-primary);
  letter-spacing: -0.015em;
  line-height: 1;
  font-style: italic;
}
.pricing-card--featured .pricing-card__name {
  color: var(--tch-primary);
}
.pricing-card__ornament {
  width: 42px;
  height: 1px;
  background: color-mix(in srgb, var(--tch-accent) 65%, transparent);
  position: relative;
}
.pricing-card__ornament::before,
.pricing-card__ornament::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tch-accent);
  transform: translateY(-50%);
}
.pricing-card__ornament::before { left: -7px; }
.pricing-card__ornament::after { right: -7px; }

/* Bloc prix — sérif italique géant, FCFA discret */
.pricing-card__price-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}
.pricing-card__price {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.45rem;
  color: var(--tch-primary);
}
.pricing-card__price-value {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-style: italic;
}
.pricing-card__currency {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--tch-text-muted);
  text-transform: uppercase;
}
.pricing-card--featured .pricing-card__price-value {
  color: var(--tch-primary);
}

/* Prix barré — discret, ton or désaturé */
.pricing-card__price-old {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--tch-text-muted) 80%, #6b7280);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--tch-accent) 60%, transparent);
  text-decoration-thickness: 1px;
  letter-spacing: 0.02em;
}

.pricing-card__billing {
  font-size: 0.78rem;
  color: var(--tch-text-muted);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 1.4;
}
.pricing-card__billing-sep {
  color: var(--tch-accent);
  font-weight: 600;
}

/* Liste des features — lignes fines, checkmark or, lignes désactivées en gris désaturé */
.pricing-card__features {
  list-style: none;
  text-align: left;
  margin: 0 0 1.5rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--tch-primary) 8%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.pricing-card__features li {
  font-size: 0.92rem;
  color: var(--tch-text);
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  line-height: 1.45;
}
.pricing-card__features li i {
  font-size: 0.7rem;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-top: 0.15rem;
}
.pricing-card__features li .fa-check {
  color: var(--tch-secondary);
  background: color-mix(in srgb, var(--tch-secondary) 12%, transparent);
}
.pricing-card__features li .fa-times {
  color: color-mix(in srgb, var(--tch-text-muted) 70%, #9CA3AF);
  background: color-mix(in srgb, var(--tch-text-muted) 8%, transparent);
}
.pricing-card__feature--disabled,
.pricing-card__features .pricing-card__feature--disabled {
  color: color-mix(in srgb, var(--tch-text-muted) 90%, #6b7280);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--tch-text-muted) 40%, transparent);
  text-decoration-thickness: 1px;
}

/* CTA — bouton magnétique avec gradient subtil */
.pricing-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: auto;
  padding: 1rem 1.4rem;
  border-radius: 14px;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: linear-gradient(180deg, var(--tch-primary) 0%, color-mix(in srgb, var(--tch-primary) 85%, #000) 100%);
  color: #FFFFFF;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 10px 24px -14px rgba(30, 42, 90, 0.55);
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background 220ms ease-out;
}
.pricing-card__cta i {
  font-size: 0.78rem;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pricing-card__cta:hover,
.pricing-card__cta:focus-visible {
  transform: translateY(-2px);
  color: #FFFFFF;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 16px 32px -14px rgba(30, 42, 90, 0.6);
}
.pricing-card__cta:hover i,
.pricing-card__cta:focus-visible i {
  transform: translateX(3px);
}
.pricing-card__cta:focus-visible {
  outline: 2px solid var(--tch-accent);
  outline-offset: 3px;
}

/* CTA carte recommandée — or */
.pricing-card--featured .pricing-card__cta {
  background: linear-gradient(180deg, var(--tch-accent) 0%, color-mix(in srgb, var(--tch-accent) 78%, #000) 100%);
  color: #FFFFFF;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 14px 28px -14px rgba(198, 161, 91, 0.6);
}
.pricing-card--featured .pricing-card__cta:hover,
.pricing-card--featured .pricing-card__cta:focus-visible {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 20px 38px -14px rgba(198, 161, 91, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .pricing-card__cta,
  .pricing-card__cta i,
  .pricing-card::before {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   BANDEAU CODE DE LANCEMENT — Carte horizontale, sceau or à gauche
   ───────────────────────────────────────────────────────────────────────── */

.pricing-launch-banner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.5rem 1.1rem 1.1rem;
  margin: 0 auto 2rem;
  max-width: 760px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tch-accent) 7%, #FFFFFF) 0%, #FFFFFF 60%);
  border: 1px solid color-mix(in srgb, var(--tch-accent) 40%, transparent);
  border-radius: 16px;
  box-shadow: 0 18px 36px -24px rgba(198, 161, 91, 0.35);
  color: var(--tch-text);
  line-height: 1.55;
}
.pricing-launch-banner__seal {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--tch-accent), color-mix(in srgb, var(--tch-accent) 75%, #000));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 8px 18px -8px rgba(198, 161, 91, 0.5);
}
.pricing-launch-banner__seal i {
  font-size: 1.1rem;
}
.pricing-launch-banner__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.pricing-launch-banner__eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tch-accent);
}
.pricing-launch-banner__code {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--tch-primary);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.pricing-launch-banner__detail {
  font-size: 0.88rem;
  color: var(--tch-text);
  line-height: 1.5;
}
.pricing-launch-banner__detail strong {
  color: var(--tch-primary);
  font-weight: 700;
}

@media (max-width: 640px) {
  .pricing-launch-banner {
    flex-direction: column;
    text-align: center;
    padding: 1.25rem;
  }
  .pricing-launch-banner__body {
    align-items: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   GARANTIE DE PAIEMENT — Sceau émeraude sur ligne discrète
   ───────────────────────────────────────────────────────────────────────── */

.pricing-guarantee {
  text-align: center;
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-size: 0.88rem;
  color: var(--tch-text);
  width: 100%;
  line-height: 1.5;
}
.pricing-guarantee__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tch-secondary) 14%, transparent);
  color: var(--tch-secondary);
}
.pricing-guarantee__seal i { font-size: 0.9rem; }

/* ═════════════════════════════════════════════════════════════════════════════
   CTA FINAL
   ═════════════════════════════════════════════════════════════════════════════ */
.cta-final {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  background: linear-gradient(170deg, var(--tch-primary) 0%, var(--tch-primary-deep) 100%);
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 161, 91, 0.06) 0%, transparent 60%);
  pointer-events: none;
}
.cta-final__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-headline);
  color: #fff;
  position: relative;
  margin-bottom: var(--space-sm);
}
.cta-final__subtitle {
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-lg);
  position: relative;
}

/* ═════════════════════════════════════════════════════════════════════════════
   FOOTER
   ═════════════════════════════════════════════════════════════════════════════ */
.site-footer {
  padding: var(--space-lg) var(--space-md);
  background: #080e24;
  text-align: center;
}
.site-footer__logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--tch-accent);
  letter-spacing: 0.08em;
}
.site-footer__tagline { font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.35); margin-top: 2px; margin-bottom: var(--space-sm); }
.site-footer__links { display: flex; justify-content: center; gap: var(--space-md); margin-bottom: var(--space-sm); }
.site-footer__links a {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: color 0.2s ease;
}
.site-footer__links a:hover { color: var(--tch-accent); }
/* Liens vers pages légales — affichés sous les liens principaux quand au
   moins une page est publiée (cf. _footer_legal_links.html.twig). Style
   sobre, plus discret que les liens primaires pour ne pas concurrencer
   les CTAs. */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs, 0.5rem);
  margin-bottom: var(--space-sm);
  font-size: var(--fs-caption);
}
.site-footer__legal a {
  color: rgba(255, 255, 255, 0.28);
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer__legal a:hover { color: var(--tch-accent); }
.site-footer__legal-sep { color: rgba(255, 255, 255, 0.18); }
.site-footer__copy { font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.35); }
.site-footer__poweredby { margin-left: 6px; opacity: 0.85; }
.site-footer__poweredby a {
    color: var(--tch-accent, #C6A15B);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.site-footer__poweredby a:hover { text-decoration: underline; }

/* ═════════════════════════════════════════════════════════════════════════════
   ONBOARDING — Refonte split-screen Dale Carnegie / UX.md
   - Aside émotionnel sticky avec récap dynamique
   - Formulaire 3 sections, validation visuelle progressive
   - Stagger reveal, micro-interactions, force du mot de passe
   ═════════════════════════════════════════════════════════════════════════════ */
.onboarding-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--tch-accent) 6%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--tch-secondary) 5%, transparent) 0%, transparent 55%),
    var(--tch-bg);
  padding: var(--space-lg) var(--space-md);
}

.onboarding-shell {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: var(--space-lg);
  align-items: start;
}

@media (max-width: 991.98px) {
  .onboarding-shell {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* ── ASIDE ───────────────────────────────────────────────────────────────── */
.onboarding-aside {
  position: sticky;
  top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (max-width: 991.98px) {
  .onboarding-aside { position: static; }
}

.onboarding-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tch-text-muted);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  align-self: flex-start;
  padding: 8px 14px 8px 10px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--tch-surface) 70%, transparent);
  backdrop-filter: blur(8px);
  transition: color 0.25s var(--ease-out-expo), transform 0.25s var(--ease-out-expo);
}
.onboarding-back:hover {
  color: var(--tch-primary);
  transform: translateX(-3px);
}

.onboarding-aside__hero { display: flex; flex-direction: column; gap: 0.65rem; }
.onboarding-aside__eyebrow {
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tch-accent);
}
.onboarding-aside__title {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: clamp(2.2rem, 3.8vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--tch-primary);
  font-weight: 600;
}
.onboarding-aside__lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--tch-text-muted);
  max-width: 38ch;
}

/* Récap card — verrou visuel de la décision, mis à jour en JS */
.onboarding-recap-card {
  background: linear-gradient(155deg, var(--tch-primary) 0%, var(--tch-primary-deep) 100%);
  color: #fff;
  border-radius: 20px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 50px -20px rgba(30, 42, 90, 0.45);
}
.onboarding-recap-card::after {
  content: '';
  position: absolute;
  inset: auto -40px -60px auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tch-accent) 35%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.onboarding-recap-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.onboarding-recap-card__label {
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}
.onboarding-recap-card__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tch-accent);
  letter-spacing: 0.01em;
}
.onboarding-recap-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.onboarding-recap-card__amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: opacity 0.4s var(--ease-out-expo);
}
.onboarding-recap-card__currency {
  font-size: var(--fs-small);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}
.onboarding-recap-card__billing {
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.1rem;
}
/* Ligne de réduction — apparaît au-dessus des perks quand un code est validé */
.onboarding-recap-card__discount,
.onboarding-recap-card__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.onboarding-recap-card__discount {
  color: color-mix(in srgb, var(--tch-accent) 90%, #fff 10%);
}
.onboarding-recap-card__discount-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: 600;
}
.onboarding-recap-card__discount-label i {
  font-size: 0.78rem;
  color: var(--tch-accent);
}
.onboarding-recap-card__discount-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
}
.onboarding-recap-card__total-label {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.onboarding-recap-card__total-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #fff;
}

.onboarding-recap-card__perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.onboarding-recap-card__perks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.92);
}
.onboarding-recap-card__perks i {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tch-accent) 22%, transparent);
  color: var(--tch-accent);
  font-size: 0.78rem;
  flex-shrink: 0;
}

/* Réassurances Dale Carnegie */
.onboarding-trust {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.onboarding-trust li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--tch-surface) 78%, transparent);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}
.onboarding-trust li:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(30, 42, 90, 0.18);
}
.onboarding-trust i {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tch-secondary) 12%, transparent);
  color: var(--tch-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.onboarding-trust strong {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--tch-primary);
  margin-bottom: 2px;
}
.onboarding-trust span {
  font-size: var(--fs-caption);
  color: var(--tch-text-muted);
  line-height: 1.5;
}

/* Témoignage — micro social proof */
.onboarding-testimonial {
  background: var(--tch-surface);
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  border-left: 3px solid var(--tch-accent);
}
.onboarding-testimonial__stars {
  display: flex;
  gap: 3px;
  color: var(--tch-accent);
  font-size: 0.78rem;
  margin-bottom: 0.55rem;
}
.onboarding-testimonial__quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--tch-primary);
  font-style: italic;
  margin-bottom: 0.6rem;
}
.onboarding-testimonial__author {
  display: flex;
  flex-direction: column;
}
.onboarding-testimonial__author span {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--tch-primary);
}
.onboarding-testimonial__author small {
  font-size: var(--fs-caption);
  color: var(--tch-text-muted);
}

/* Variante engagement équipe — quand on n'a pas encore de témoignages réels. */
.onboarding-testimonial--founders {
  background: linear-gradient(135deg, var(--tch-bg) 0%, var(--tch-surface) 100%);
  border-left-color: var(--tch-primary);
}
.onboarding-testimonial__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tch-primary);
  color: var(--tch-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}

/* ── FORMULAIRE ──────────────────────────────────────────────────────────── */
.onboarding-form-wrap {
  background: var(--tch-surface);
  border-radius: 24px;
  padding: var(--space-lg);
  box-shadow: 0 24px 60px -32px rgba(30, 42, 90, 0.18);
  position: relative;
  overflow: hidden;
}

@media (max-width: 540px) {
  .onboarding-form-wrap { padding: var(--space-md); border-radius: 18px; }
}

.onboarding-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: color-mix(in srgb, var(--tch-accent) 12%, transparent);
}
.onboarding-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--tch-accent), color-mix(in srgb, var(--tch-accent) 70%, var(--tch-secondary)));
  transition: width 0.6s var(--ease-out-expo);
}

.onboarding-form-wrap__head {
  margin-bottom: var(--space-md);
  padding-top: 0.5rem;
}
.onboarding-form-wrap__eyebrow {
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tch-accent);
  font-weight: 600;
  display: inline-block;
  margin-bottom: 0.4rem;
}
.onboarding-form-wrap__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.85rem, 3vw, 2.2rem);
  line-height: 1.1;
  color: var(--tch-primary);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.onboarding-form-wrap__sub {
  font-size: var(--fs-body);
  color: var(--tch-text-muted);
  line-height: 1.55;
}

.onboarding-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  margin-bottom: var(--space-md);
  font-size: var(--fs-small);
}
.onboarding-alert--error {
  background: color-mix(in srgb, var(--tch-error) 8%, var(--tch-surface));
  color: color-mix(in srgb, var(--tch-error) 80%, #2b1414);
  border: 1px solid color-mix(in srgb, var(--tch-error) 20%, transparent);
}
.onboarding-alert i { font-size: 1.1rem; flex-shrink: 0; }

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

.onboarding-card {
  background: var(--tch-bg);
  border-radius: 18px;
  padding: var(--space-md);
  transition: box-shadow 0.4s var(--ease-out-expo);
}
.onboarding-card:focus-within {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tch-accent) 22%, transparent);
}
.onboarding-card__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.onboarding-card__step {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tch-accent) 0%, color-mix(in srgb, var(--tch-accent) 70%, #8b6a36) 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--tch-accent) 55%, transparent);
}
.onboarding-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  color: var(--tch-primary);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.onboarding-card__hint {
  font-size: var(--fs-small);
  color: var(--tch-text-muted);
  line-height: 1.5;
}

/* Sous-blocs de l'étape fusionnée « Formule & univers » : deux choix empilés
   sous une même carte, chacun introduit par un intertitre sobre. */
.onboarding-subblock + .onboarding-subblock {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--tch-primary) 10%, transparent);
}
.onboarding-subhead {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--tch-primary);
  line-height: 1.2;
  margin-bottom: 0.85rem;
}
.onboarding-subhead__hint {
  font-size: var(--fs-small);
  color: var(--tch-text-muted);
  line-height: 1.5;
  margin: -0.5rem 0 0.85rem;
}

/* Packages — cards radio */
.onboarding-packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}
@media (max-width: 640px) {
  .onboarding-packages { grid-template-columns: 1fr; }
}

.onboarding-package {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 0.9rem 0.95rem;
  background: var(--tch-surface);
  border: 1.5px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition:
    border-color 0.3s var(--ease-out-expo),
    transform 0.25s var(--ease-out-expo),
    box-shadow 0.3s var(--ease-out-expo);
}
.onboarding-package:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -16px rgba(30, 42, 90, 0.25);
}
.onboarding-package input { position: absolute; opacity: 0; pointer-events: none; }
.onboarding-package.is-selected,
.onboarding-package:has(input:checked) {
  border-color: var(--tch-accent);
  background: linear-gradient(155deg, var(--tch-surface) 0%, color-mix(in srgb, var(--tch-accent) 6%, var(--tch-surface)) 100%);
}
.onboarding-package__check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tch-accent);
  color: #fff;
  font-size: 0.68rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s var(--ease-out-expo), transform 0.25s var(--ease-spring);
}
.onboarding-package.is-selected .onboarding-package__check,
.onboarding-package:has(input:checked) .onboarding-package__check {
  opacity: 1;
  transform: scale(1);
}
.onboarding-package__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--tch-primary);
}
.onboarding-package__price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tch-primary);
}
.onboarding-package__price small {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--tch-text-muted);
}
.onboarding-package__pitch {
  font-size: var(--fs-caption);
  color: var(--tch-text-muted);
  margin-top: 0.15rem;
}

/* ── Onboarding theme picker — étape 2 (Refacto 2026-05-23) ───────────────── */
.onboarding-themes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}
@media (max-width: 640px) {
  .onboarding-themes { grid-template-columns: 1fr; }
}

.onboarding-theme {
  --ob-theme-primary: #1E2A5A;
  --ob-theme-accent: #C6A15B;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 0.9rem 0.95rem;
  background: var(--tch-surface);
  border: 1.5px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition:
    border-color 0.3s var(--ease-out-expo),
    transform 0.25s var(--ease-out-expo),
    box-shadow 0.3s var(--ease-out-expo);
}
.onboarding-theme:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -16px rgba(30, 42, 90, 0.25);
}
.onboarding-theme input { position: absolute; opacity: 0; pointer-events: none; }
.onboarding-theme.is-selected,
.onboarding-theme:has(input:checked) {
  border-color: var(--tch-accent);
  background: linear-gradient(155deg, var(--tch-surface) 0%, color-mix(in srgb, var(--tch-accent) 6%, var(--tch-surface)) 100%);
}
.onboarding-theme__check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tch-accent);
  color: #fff;
  font-size: 0.68rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s var(--ease-out-expo), transform 0.25s var(--ease-spring);
}
.onboarding-theme.is-selected .onboarding-theme__check,
.onboarding-theme:has(input:checked) .onboarding-theme__check {
  opacity: 1;
  transform: scale(1);
}
.onboarding-theme__preview {
  display: flex;
  gap: 6px;
}
.onboarding-theme__preview-primary,
.onboarding-theme__preview-accent {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85) inset,
    0 1px 3px rgba(0, 0, 0, 0.12);
}
.onboarding-theme__preview-primary { background: var(--ob-theme-primary); }
.onboarding-theme__preview-accent  { background: var(--ob-theme-accent); }
.onboarding-theme__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--tch-primary);
}
.onboarding-theme__pitch {
  font-size: var(--fs-caption);
  color: var(--tch-text-muted);
  line-height: 1.5;
}

/* Rows et fields */
.onboarding-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: 0.85rem;
}
.onboarding-row:last-of-type { margin-bottom: 0; }

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

.onboarding-field { display: flex; flex-direction: column; gap: 0.45rem; }
.onboarding-field--full { grid-column: 1 / -1; }
.onboarding-field label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--tch-primary);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.onboarding-field label small {
  font-weight: 400;
  color: var(--tch-text-muted);
  font-size: var(--fs-caption);
}

.onboarding-input { position: relative; }
.onboarding-input input {
  width: 100%;
  padding: 13px 44px 13px 16px;
  border: 1.5px solid var(--tch-border);
  border-radius: 12px;
  font-size: var(--fs-body);
  font-family: inherit;
  background: var(--tch-surface);
  color: var(--tch-text);
  transition:
    border-color 0.25s var(--ease-out-expo),
    box-shadow 0.25s var(--ease-out-expo),
    background 0.25s var(--ease-out-expo);
}
.onboarding-input input::placeholder { color: color-mix(in srgb, var(--tch-text-muted) 70%, transparent); }
.onboarding-input input:hover { border-color: color-mix(in srgb, var(--tch-accent) 35%, var(--tch-border)); }
.onboarding-input input:focus {
  outline: none;
  border-color: var(--tch-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tch-accent) 12%, transparent);
}
.onboarding-input__upper { text-transform: uppercase; letter-spacing: 0.06em; }

/* Textarea et select natifs dans les sections d'édition */
.onboarding-textarea,
.onboarding-field select,
.onboarding-field input[type="text"],
.onboarding-field input[type="email"],
.onboarding-field input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--tch-border);
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--tch-surface);
  color: var(--tch-text);
  transition: border-color 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo);
}
.onboarding-textarea {
  resize: vertical;
  min-height: 96px;
}
.onboarding-textarea:focus,
.onboarding-field select:focus,
.onboarding-field input:focus {
  outline: none;
  border-color: var(--tch-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tch-accent) 12%, transparent);
}

/* Checkmark de validation (apparaît quand .is-valid sur le wrapper) */
.onboarding-input__check {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) scale(0.5);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tch-secondary);
  color: #fff;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out-expo), transform 0.3s var(--ease-spring);
}
.onboarding-input.is-valid .onboarding-input__check {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.onboarding-input.is-valid input {
  border-color: color-mix(in srgb, var(--tch-secondary) 45%, var(--tch-border));
}

/* Force du mot de passe */
.onboarding-strength {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: center;
  gap: 6px;
  margin-top: 0.55rem;
}
.onboarding-strength__seg {
  height: 4px;
  border-radius: 100px;
  background: var(--tch-border);
  transition: background 0.35s var(--ease-out-expo);
}
.onboarding-strength__label {
  font-size: var(--fs-caption);
  color: var(--tch-text-muted);
  font-weight: 500;
  margin-left: 6px;
  white-space: nowrap;
}
.onboarding-strength[data-strength="1"] .onboarding-strength__seg:nth-child(1) { background: var(--tch-warning); }
.onboarding-strength[data-strength="2"] .onboarding-strength__seg:nth-child(1),
.onboarding-strength[data-strength="2"] .onboarding-strength__seg:nth-child(2) { background: var(--tch-accent); }
.onboarding-strength[data-strength="3"] .onboarding-strength__seg { background: var(--tch-secondary); }

/* Code de parrainage — discret */
.onboarding-referral {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--tch-border);
}
.onboarding-referral__banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--tch-secondary) 8%, var(--tch-surface));
  border-radius: 12px;
}
.onboarding-referral__banner i {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--tch-secondary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.onboarding-referral__banner strong {
  display: block;
  font-size: var(--fs-small);
  color: var(--tch-primary);
  margin-bottom: 2px;
}
.onboarding-referral__banner span {
  font-size: var(--fs-caption);
  color: var(--tch-text-muted);
}

.onboarding-referral__toggle summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--tch-primary);
  padding: 8px 14px 8px 12px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--tch-surface) 60%, transparent);
  transition: background 0.25s var(--ease-out-expo);
  list-style: none;
  user-select: none;
}
.onboarding-referral__toggle summary::-webkit-details-marker { display: none; }
.onboarding-referral__toggle summary:hover { background: var(--tch-surface); }
.onboarding-referral__toggle summary > i:first-child { color: var(--tch-accent); }
.onboarding-referral__chev {
  font-size: 0.7rem;
  color: var(--tch-text-muted);
  transition: transform 0.3s var(--ease-out-expo);
}
.onboarding-referral__toggle[open] .onboarding-referral__chev { transform: rotate(180deg); }
.onboarding-referral__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 1rem;
}
.onboarding-referral__body label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--tch-primary);
}
.onboarding-referral__body small {
  font-size: var(--fs-caption);
  color: var(--tch-text-muted);
}

/* Combo input + bouton Vérifier */
.onboarding-promo {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.onboarding-promo__input { flex: 1; min-width: 0; }
.onboarding-promo__verify {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  background: var(--tch-primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: var(--fs-small);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--ease-out-expo), transform 0.2s var(--ease-out-expo);
}
.onboarding-promo__verify:hover:not(:disabled) {
  background: var(--tch-primary-hover);
  transform: translateY(-1px);
}
.onboarding-promo__verify:disabled {
  background: color-mix(in srgb, var(--tch-primary) 60%, #6b6b7b);
  cursor: progress;
}
.onboarding-promo__verify i { font-size: 0.78rem; transition: transform 0.25s var(--ease-out-expo); }
.onboarding-promo__verify:hover:not(:disabled) i { transform: translateX(3px); }

@media (max-width: 460px) {
  .onboarding-promo { flex-direction: column; }
  .onboarding-promo__verify { padding: 12px 18px; justify-content: center; }
}

/* Feedback du code promo — états valid / invalid / busy */
.onboarding-promo__feedback {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  margin-top: 0.6rem;
  font-size: var(--fs-small);
  line-height: 1.4;
}
.onboarding-promo__feedback i { font-size: 0.95rem; flex-shrink: 0; }
.onboarding-promo__feedback[data-state="valid"] {
  background: color-mix(in srgb, var(--tch-secondary) 10%, var(--tch-surface));
  color: color-mix(in srgb, var(--tch-secondary) 80%, #1a1a2e);
}
.onboarding-promo__feedback[data-state="valid"] i { color: var(--tch-secondary); }
.onboarding-promo__feedback[data-state="invalid"] {
  background: color-mix(in srgb, var(--tch-warning) 9%, var(--tch-surface));
  color: color-mix(in srgb, var(--tch-warning) 80%, #2b1e0c);
}
.onboarding-promo__feedback[data-state="invalid"] i { color: var(--tch-warning); }
.onboarding-promo__feedback[data-state="busy"] {
  background: color-mix(in srgb, var(--tch-primary) 6%, var(--tch-surface));
  color: var(--tch-text-muted);
}

/* Soumission */
.onboarding-submit-wrap {
  text-align: center;
  padding-top: 0.5rem;
}
.onboarding-legal {
  font-size: var(--fs-caption);
  color: var(--tch-text-muted);
  max-width: 38ch;
  margin: 0 auto var(--space-sm);
  line-height: 1.5;
}
/* Total à régler (rappel du montant au point de décision, étape « Votre compte ») */
.onboarding-pay-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  max-width: 380px;
  margin: 0 auto var(--space-sm);
  padding: 0.7rem 1.1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tch-primary) 5%, var(--tch-surface));
  border: 1px solid color-mix(in srgb, var(--tch-primary) 10%, transparent);
  text-align: left;
}
.onboarding-pay-total__label {
  font-size: var(--fs-small);
  color: var(--tch-text-muted);
}
.onboarding-pay-total__value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tch-primary);
  white-space: nowrap;
}
/* Le bouton de paiement reste masqué tant que les champs requis ne sont pas
   tous remplis (classe .is-ready posée par le JS). Une invite prend sa place. */
.onboarding-submit-wrap .onboarding-submit { display: none; }
.onboarding-submit-wrap.is-ready .onboarding-submit { display: inline-flex; }
.onboarding-pay-hint {
  font-size: var(--fs-small);
  color: var(--tch-text-muted);
  line-height: 1.5;
  max-width: 42ch;
  margin: 0.25rem auto 0;
}
.onboarding-submit-wrap.is-ready .onboarding-pay-hint { display: none; }
.onboarding-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 38px;
  background: linear-gradient(135deg, var(--tch-accent) 0%, color-mix(in srgb, var(--tch-accent) 65%, #8b6a36) 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--tch-accent) 55%, transparent);
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo), background 0.25s var(--ease-out-expo);
}
.onboarding-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--tch-accent) 70%, transparent);
}
.onboarding-submit:active { transform: translateY(0); }
.onboarding-submit i { transition: transform 0.3s var(--ease-spring); }
.onboarding-submit:hover i { transform: translateX(4px); }

.onboarding-secure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-sm);
  font-size: var(--fs-caption);
  color: var(--tch-text-muted);
}
.onboarding-secure i { color: var(--tch-secondary); }

@media (prefers-reduced-motion: reduce) {
  .onboarding-package,
  .onboarding-trust li,
  .onboarding-submit,
  .onboarding-submit i,
  .onboarding-progress__bar { transition: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PAYMENT RESULT
   ═════════════════════════════════════════════════════════════════════════════ */
.payment-result { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-lg); background: var(--tch-bg); }
.payment-result__container { text-align: center; max-width: 480px; background: var(--tch-surface); border-radius: 24px; padding: var(--space-xl) var(--space-lg); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.04); }
.payment-result__icon { font-size: 4rem; margin-bottom: var(--space-md); }
.payment-result__icon--success { color: var(--tch-secondary); }
.payment-result__icon--pending { color: var(--tch-accent); }
.payment-result__icon--failed { color: var(--tch-error); }
.payment-result__icon--cancelled { color: var(--tch-text-muted); }
.payment-result__title { font-family: 'Cormorant Garamond', serif; font-size: var(--fs-title); color: var(--tch-primary); margin-bottom: var(--space-sm); }
.payment-result__message { color: var(--tch-text-muted); line-height: 1.7; margin-bottom: var(--space-md); }
.payment-result__details { text-align: left; background: var(--tch-bg); border-radius: 14px; padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); font-size: var(--fs-small); }
.payment-result__details p { margin: 4px 0; color: var(--tch-text); }
.payment-result__cta { display: inline-block; padding: 14px 32px; background: var(--tch-accent); color: #fff; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.25s var(--ease-out-expo); }
.payment-result__cta:hover { background: var(--tch-accent-hover); color: #fff; transform: translateY(-2px); }

/* ═════════════════════════════════════════════════════════════════════════════
   CLIENT DASHBOARD
   ═════════════════════════════════════════════════════════════════════════════ */
/* ── Tableau de bord couple — refonte alignée sur l'identité Tchefon
   (serif Cormorant, accent or, élévation au survol, mobile-first). ── */
.client-dash { min-height: 100vh; padding: clamp(1.5rem, 5vw, 3rem) var(--space-md); background: var(--tch-bg); }
.client-dash__container { max-width: 920px; margin: 0 auto; }
.client-dash__header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-lg); flex-wrap: wrap; gap: var(--space-md); }
.client-dash__eyebrow { display: inline-block; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--tch-accent); margin-bottom: 0.4rem; }
.client-dash__title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.05; color: var(--tch-primary); }
.client-dash__subtitle { color: var(--tch-text-muted); margin-top: 0.25rem; }
/* Bouton or de création (accent dopaminergique, UX.md) */
.client-dash__new-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.6rem; border-radius: 14px; font-weight: 600; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--tch-accent) 0%, color-mix(in srgb, var(--tch-accent) 65%, #8b6a36) 100%); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--tch-accent) 60%, transparent); transition: transform 0.25s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo); }
.client-dash__new-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--tch-accent) 70%, transparent); color: #fff; }
.client-dash__new-btn i { transition: transform 0.3s var(--ease-spring); }
.client-dash__new-btn:hover i { transform: translateX(3px); }
/* Flash succès (remplace l'ancien style inline) */
.client-dash__flash { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.1rem; border-radius: 12px; margin-bottom: var(--space-md); font-size: var(--fs-small); line-height: 1.5; }
.client-dash__flash--success { background: color-mix(in srgb, var(--tch-secondary) 10%, var(--tch-surface)); color: color-mix(in srgb, var(--tch-secondary) 80%, #0e3a28); border: 1px solid color-mix(in srgb, var(--tch-secondary) 22%, transparent); }
.client-dash__flash--success i { color: var(--tch-secondary); }
.client-dash__empty { text-align: center; padding: clamp(2rem, 6vw, 3.5rem) var(--space-lg); background: var(--tch-surface); border-radius: 20px; border: 1px solid color-mix(in srgb, var(--tch-accent) 28%, transparent); box-shadow: 0 16px 40px -28px rgba(30, 42, 90, 0.25); }
.client-dash__empty-icon { font-size: 2.6rem; color: var(--tch-accent); margin-bottom: var(--space-sm); }
.client-dash__empty h2 { font-family: 'Cormorant Garamond', serif; font-size: var(--fs-lead); color: var(--tch-primary); margin-bottom: var(--space-xs); }
.client-dash__empty p { color: var(--tch-text-muted); margin: 0 auto var(--space-md); max-width: 44ch; line-height: 1.6; }
/* Carte mariage — accent or latéral + élévation au survol */
.client-dash__card { position: relative; overflow: hidden; background: var(--tch-surface); border-radius: 18px; padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 6px); border: 1px solid color-mix(in srgb, var(--tch-primary) 9%, transparent); box-shadow: 0 10px 30px -24px rgba(30, 42, 90, 0.4); transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo); margin-bottom: var(--space-sm); }
.client-dash__card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -24px rgba(30, 42, 90, 0.28); }
.client-dash__card-accent { position: absolute; top: 0; left: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--tch-accent), color-mix(in srgb, var(--tch-accent) 55%, #8b6a36)); }
.client-dash__card-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.85rem; }
.client-dash__card-names { font-family: 'Cormorant Garamond', serif; font-size: var(--fs-lead); font-weight: 600; color: var(--tch-primary); line-height: 1.15; }
.client-dash__card-badge { flex-shrink: 0; padding: 4px 12px; border-radius: 100px; font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.client-dash__card-badge--published { background: #dcfce7; color: #16a34a; }
.client-dash__card-badge--draft { background: #f3f4f6; color: #6b7280; }
.client-dash__card-badge--in_review { background: #fef3c7; color: #d97706; }
.client-dash__card-badge--archived { background: #fee2e2; color: #dc2626; }
.client-dash__card-meta { list-style: none; padding: 0; margin: 0 0 var(--space-sm); display: flex; flex-direction: column; gap: 0.4rem; }
.client-dash__card-meta li { font-size: var(--fs-small); color: var(--tch-text-muted); display: flex; align-items: center; gap: 8px; }
.client-dash__card-meta i { color: var(--tch-accent); width: 1rem; text-align: center; }
.client-dash__card-unpaid { color: var(--tch-warning); font-weight: 600; }
.client-dash__card-unpaid i { color: var(--tch-warning); }
.client-dash__card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-sm); }
.client-dash__card-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 10px; font-size: var(--fs-small); font-weight: 500; text-decoration: none; transition: all 0.25s var(--ease-out-expo); background: var(--tch-primary); color: #fff; }
.client-dash__card-btn:hover { background: var(--tch-primary-hover); color: #fff; transform: translateY(-1px); }
.client-dash__card-btn--outline { background: transparent; color: var(--tch-primary); border: 1.5px solid color-mix(in srgb, var(--tch-primary) 18%, transparent); }
.client-dash__card-btn--outline:hover { background: transparent; border-color: var(--tch-primary); }
@media (max-width: 640px) {
  .client-dash__header { align-items: stretch; }
  .client-dash__new-btn { justify-content: center; }
  .client-dash__card-actions { flex-direction: column; }
  .client-dash__card-btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .client-dash__card, .client-dash__new-btn, .client-dash__card-btn { transition: none; }
  .client-dash__card:hover, .client-dash__new-btn:hover, .client-dash__card-btn:hover { transform: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   ESPACE COUPLE — Page détail (pilotage d'une invitation)
   Même niveau de finition que l'admin et la landing : cartes ivoire/blanc,
   filet or, titres Cormorant, tuiles de statistiques, micro-interactions.
   ════════════════════════════════════════════════════════════════════════════ */

/* En-tête : titre + badge alignés, retour à la ligne propre sur mobile. */
.client-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: var(--space-md) 0 var(--space-lg);
}
.client-detail__heading { min-width: 0; }
.client-detail__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; flex-shrink: 0; }

/* Décompte J-XX — anticipation du grand jour (UX.md dopamine, Carnegie P20). */
.client-detail__countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.55rem 1.1rem;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tch-accent) 16%, var(--tch-surface)), var(--tch-surface));
  border: 1px solid color-mix(in srgb, var(--tch-accent) 32%, transparent);
  box-shadow: 0 12px 28px -22px color-mix(in srgb, var(--tch-accent) 80%, transparent);
}
.client-detail__countdown-num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--tch-accent) 82%, #2b2310);
  letter-spacing: 0.01em;
}
.client-detail__countdown-label {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tch-text-muted);
}
.client-detail__countdown--today .client-detail__countdown-num { color: var(--tch-secondary); }

/* Bandeau « paiement en attente » — attention douce (orange), pas d'alarme. */
.client-detail__alert {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--tch-warning) 9%, var(--tch-surface));
  border: 1px solid color-mix(in srgb, var(--tch-warning) 26%, transparent);
  margin-bottom: var(--space-lg);
}
.client-detail__alert > i {
  color: var(--tch-warning);
  font-size: 1.25rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.client-detail__alert strong {
  display: block;
  color: color-mix(in srgb, var(--tch-warning) 78%, #2b1e0c);
  font-size: 1rem;
  margin-bottom: 2px;
}
.client-detail__alert p {
  color: var(--tch-text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
  margin: 0;
}

/* Grille de cartes — 1 colonne mobile, 2 colonnes dès 760px. */
.client-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (min-width: 760px) {
  .client-detail__grid { grid-template-columns: repeat(2, 1fr); }
  /* La carte « Actions rapides » occupe toute la largeur (hub d'accès). */
  .client-detail__grid > .client-detail__card:nth-last-child(2):not(.ambassador-card),
  .client-detail__grid > .client-detail__card:last-child:not(.ambassador-card) { grid-column: 1 / -1; }
}

/* Carte — surface blanche, filet or en tête, élévation au survol. */
.client-detail__card {
  position: relative;
  overflow: hidden;
  background: var(--tch-surface);
  border-radius: 20px;
  padding: clamp(1.15rem, 3vw, 1.7rem);
  border: 1px solid color-mix(in srgb, var(--tch-primary) 9%, transparent);
  box-shadow: 0 14px 36px -28px rgba(30, 42, 90, 0.5);
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}
.client-detail__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tch-accent), color-mix(in srgb, var(--tch-accent) 35%, transparent));
}
.client-detail__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 52px -28px rgba(30, 42, 90, 0.32);
}

/* Titre de carte — serif Cormorant, icône or. */
.client-detail__card-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.3rem, 3.4vw, 1.55rem);
  font-weight: 600;
  color: var(--tch-primary);
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
}
.client-detail__card-title i { color: var(--tch-accent); font-size: 1.05rem; flex-shrink: 0; }
.client-detail__sub-title {
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--tch-text-muted);
  margin: var(--space-sm) 0 0.6rem;
}

/* Lien de partage. */
.client-detail__url {
  display: block;
  font-size: var(--fs-small);
  color: var(--tch-primary);
  background: color-mix(in srgb, var(--tch-primary) 5%, var(--tch-surface));
  border: 1px solid color-mix(in srgb, var(--tch-primary) 11%, transparent);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  word-break: break-all;
  margin-bottom: 0.85rem;
}

/* Boutons (copier / WhatsApp / actions). */
.client-detail__copy-btn,
.client-detail__wa-btn,
.client-detail__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: 12px;
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo), background 0.2s var(--ease-out-expo), color 0.2s;
}
.client-detail__copy-btn { background: var(--tch-primary); color: #fff; }
.client-detail__copy-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -14px rgba(30, 42, 90, 0.55); }
.client-detail__wa-btn { background: #25d366; color: #fff; margin-left: 0.5rem; }
.client-detail__wa-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -14px rgba(37, 211, 102, 0.6); color: #fff; }

/* Tuiles de statistiques — 2 colonnes (mobile) → 4 dès 440px. */
.client-detail__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
@media (min-width: 440px) { .client-detail__stats { grid-template-columns: repeat(4, 1fr); } }
.client-detail__stat {
  text-align: center;
  padding: 0.9rem 0.5rem;
  border-radius: 14px;
  background: var(--tch-bg);
  border: 1px solid color-mix(in srgb, var(--tch-primary) 8%, transparent);
  transition: transform 0.2s var(--ease-out-expo);
}
.client-detail__stat:hover { transform: translateY(-2px); }
.client-detail__stat-value {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tch-primary);
}
.client-detail__stat-label {
  display: block;
  font-size: var(--fs-caption);
  color: var(--tch-text-muted);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.client-detail__stat--yes {
  background: color-mix(in srgb, var(--tch-secondary) 8%, var(--tch-surface));
  border-color: color-mix(in srgb, var(--tch-secondary) 22%, transparent);
}
.client-detail__stat--yes .client-detail__stat-value { color: var(--tch-secondary); }
.client-detail__stat--maybe {
  background: color-mix(in srgb, var(--tch-accent) 9%, var(--tch-surface));
  border-color: color-mix(in srgb, var(--tch-accent) 24%, transparent);
}
.client-detail__stat--maybe .client-detail__stat-value { color: color-mix(in srgb, var(--tch-accent) 86%, #2b2310); }
.client-detail__stat--no {
  background: color-mix(in srgb, var(--tch-error) 7%, var(--tch-surface));
  border-color: color-mix(in srgb, var(--tch-error) 18%, transparent);
}
.client-detail__stat--no .client-detail__stat-value { color: var(--tch-error); }

/* Listes d'informations (formule, sources de trafic). */
.client-detail__info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.client-detail__info-list li {
  font-size: var(--fs-small);
  color: var(--tch-text-muted);
  line-height: 1.5;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--tch-primary) 7%, transparent);
}
.client-detail__info-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.client-detail__info-list strong { color: var(--tch-primary); font-weight: 600; }
.client-detail__referrers { margin-top: var(--space-sm); }

/* Actions rapides — accès immédiats + accordéons (.cw-hub géré plus bas). */
.client-detail__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.client-detail__action-btn {
  background: color-mix(in srgb, var(--tch-primary) 5%, var(--tch-surface));
  color: var(--tch-primary);
  border: 1px solid color-mix(in srgb, var(--tch-primary) 14%, transparent);
}
.client-detail__action-btn i { color: var(--tch-accent); transition: color 0.2s; }
.client-detail__action-btn:hover {
  background: var(--tch-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -16px rgba(30, 42, 90, 0.55);
}
.client-detail__action-btn:hover i { color: var(--tch-accent); }

@media (max-width: 640px) {
  .client-detail__copy-btn,
  .client-detail__wa-btn,
  .client-detail__action-btn { width: 100%; }
  .client-detail__wa-btn { margin-left: 0; margin-top: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .client-detail__card,
  .client-detail__stat,
  .client-detail__copy-btn,
  .client-detail__wa-btn,
  .client-detail__action-btn { transition: none; }
  .client-detail__card:hover,
  .client-detail__stat:hover,
  .client-detail__copy-btn:hover,
  .client-detail__wa-btn:hover,
  .client-detail__action-btn:hover { transform: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   THEME GALLERY — Galerie de thèmes avec previews
   ═════════════════════════════════════════════════════════════════════════════ */

.theme-gallery {
    padding: var(--space-xl) 0;
    background: var(--tch-bg);
}

.theme-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.theme-card {
    display: flex;
    flex-direction: column;
    background: var(--tch-surface);
    border: 1px solid var(--tch-border);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: var(--tch-text);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}

.theme-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 60px rgba(30, 42, 90, 0.12);
}

.theme-card__preview {
    position: relative;
    aspect-ratio: 3 / 4;
    background: linear-gradient(170deg, var(--theme-primary) 0%, color-mix(in srgb, var(--theme-primary) 70%, #000) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.theme-card__preview::before {
    content: '';
    position: absolute;
    top: 15%;
    right: -20%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent) 15%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

.theme-card__mockup {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--space-md);
}

.theme-card__mockup-bar {
    width: 48px;
    height: 2px;
    background: var(--theme-accent);
    margin: 0 auto var(--space-sm);
    opacity: 0.8;
}

.theme-card__mockup-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 500;
    color: var(--theme-accent);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.theme-card__mockup-sub {
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--theme-accent) 70%, transparent);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

.theme-card__mockup-btn {
    display: inline-block;
    padding: 8px 20px;
    background: var(--theme-accent);
    color: var(--theme-primary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 100px;
}

.theme-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.theme-card__badge--essential {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.theme-card__badge--premium {
    background: rgba(198, 161, 91, 0.25);
    color: #F4D9A0;
    border: 1px solid rgba(198, 161, 91, 0.5);
}

.theme-card__badge--signature {
    background: rgba(212, 175, 55, 0.3);
    color: #F8E9B3;
    border: 1px solid rgba(212, 175, 55, 0.6);
}

.theme-card__info {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
}

.theme-card__name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    color: var(--tch-primary);
    font-weight: 500;
}

.theme-card__description {
    font-size: var(--fs-small);
    color: var(--tch-text-muted);
    line-height: 1.5;
}

.theme-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.theme-card__tag {
    font-size: var(--fs-caption);
    padding: 3px 10px;
    background: var(--tch-bg);
    color: var(--tch-text-muted);
    border-radius: 100px;
    letter-spacing: 0.02em;
}

.theme-card__cta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--tch-border);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--tch-accent);
}

.theme-card__cta i {
    font-size: 0.75rem;
    transition: transform 0.25s var(--ease-out-expo);
}

.theme-card:hover .theme-card__cta i {
    transform: translateX(4px);
}

.theme-gallery__note {
    text-align: center;
    margin-top: var(--space-lg);
    font-size: var(--fs-small);
    color: var(--tch-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.theme-gallery__note i {
    color: var(--tch-accent);
}

/* ═════════════════════════════════════════════════════════════════════════════
   THEME SELECTOR — Sélecteur de thème dans edit_config
   ═════════════════════════════════════════════════════════════════════════════ */

.onboarding-help {
    font-size: var(--fs-small);
    color: var(--tch-text-muted);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.theme-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-sm);
}

.theme-option {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-xs);
    border: 2px solid var(--tch-border);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
    background: var(--tch-surface);
    position: relative;
}

.theme-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.theme-option:hover {
    border-color: var(--tch-accent);
    transform: translateY(-2px);
}

.theme-option--selected,
.theme-option:has(input:checked) {
    border-color: var(--tch-accent);
    background: color-mix(in srgb, var(--tch-accent) 5%, var(--tch-surface));
    box-shadow: 0 8px 24px rgba(198, 161, 91, 0.15);
}

.theme-option__preview {
    aspect-ratio: 4 / 3;
    background: linear-gradient(170deg, var(--theme-primary) 0%, color-mix(in srgb, var(--theme-primary) 70%, #000) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.theme-option__initial {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--theme-accent);
    letter-spacing: -0.02em;
}

.theme-option__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px 4px;
}

.theme-option__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tch-primary);
}

.theme-option__description {
    font-size: var(--fs-caption);
    color: var(--tch-text-muted);
    line-height: 1.4;
}

.theme-option__preview-link {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-caption);
    color: var(--tch-accent);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.theme-option__preview-link:hover {
    color: var(--tch-accent-hover);
}

/* Thèmes verrouillés */
.theme-locked-section {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--tch-border);
}

.theme-locked-label {
    font-size: var(--fs-small);
    color: var(--tch-text-muted);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: 6px;
}

.theme-selector--locked {
    opacity: 0.7;
}

.theme-option--locked {
    cursor: default;
    background: var(--tch-bg);
}

.theme-option--locked:hover {
    transform: none;
    border-color: var(--tch-border);
}

.theme-option__lock-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 0.75rem;
    backdrop-filter: blur(8px);
}

.theme-option__min-package {
    font-size: var(--fs-caption);
    color: var(--tch-accent);
    font-weight: 600;
}

/* ═════════════════════════════════════════════════════════════════════════════
   THEME ATELIER — Galerie des trois directions artistiques
   ─────────────────────────────────────────────────────────────────────────────
   Pattern cinétique unifié de la landing : halo or pulsant en fond, sparkles
   flottants, header avec eyebrow Cormorant italic entre 2 tirets dorés, titre
   avec accent gradient or. Chaque card = un atelier visuel à la palette
   factuelle (variables --atelier-primary/--atelier-accent injectées depuis
   ThemeConfig en BD). Scène SVG signature propre à chaque thème.

   Mobile-first : 1 colonne stack vertical, scène plus haute. Desktop ≥ 960px :
   grille 3 colonnes équivalentes, scènes côte à côte.
   ═════════════════════════════════════════════════════════════════════════════ */
.theme-atelier {
    position: relative;
    padding: clamp(48px, 8vw, 120px) 0;
    overflow: hidden;
    isolation: isolate;
}

/* Halo or radial pulsant en arrière-plan */
.theme-atelier__halo {
    position: absolute;
    top: 22%;
    left: 50%;
    width: clamp(420px, 70vw, 980px);
    height: clamp(420px, 70vw, 980px);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 50%,
        rgba(198, 161, 91, 0.22) 0%,
        rgba(198, 161, 91, 0.08) 35%,
        transparent 70%);
    filter: blur(28px);
    pointer-events: none;
    animation: tch-halo-pulse 9s ease-in-out infinite;
    z-index: 0;
}

/* Sparkles flottants — 10 points d'or aléatoires */
.theme-atelier__sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.theme-atelier__sparkles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF8E0 0%, #C6A15B 60%, transparent 100%);
    box-shadow: 0 0 8px rgba(230, 200, 117, 0.7);
    animation: tch-sparkle-float 8s ease-in-out infinite;
    opacity: 0;
}
.theme-atelier__sparkles span:nth-child(1)  { top:  6%; left: 14%; animation-delay: 0s;   }
.theme-atelier__sparkles span:nth-child(2)  { top: 12%; left: 82%; animation-delay: 1.4s; }
.theme-atelier__sparkles span:nth-child(3)  { top: 26%; left:  8%; animation-delay: 2.6s; }
.theme-atelier__sparkles span:nth-child(4)  { top: 22%; left: 50%; animation-delay: 0.9s; width: 3px; height: 3px; }
.theme-atelier__sparkles span:nth-child(5)  { top: 56%; left: 92%; animation-delay: 3.6s; }
.theme-atelier__sparkles span:nth-child(6)  { top: 72%; left: 12%; animation-delay: 1.9s; width: 3px; height: 3px; }
.theme-atelier__sparkles span:nth-child(7)  { top: 78%; left: 60%; animation-delay: 2.3s; }
.theme-atelier__sparkles span:nth-child(8)  { top: 38%; left: 30%; animation-delay: 4.2s; width: 3px; height: 3px; }
.theme-atelier__sparkles span:nth-child(9)  { top: 88%; left: 80%; animation-delay: 1.1s; }
.theme-atelier__sparkles span:nth-child(10) { top: 48%; left: 70%; animation-delay: 3.0s; width: 3px; height: 3px; }

.theme-atelier__container {
    position: relative;
    z-index: 3;
}

/* ── Header ── eyebrow + titre + sous-titre, max 760px ─────────────────────── */
.theme-atelier__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(56px, 7vw, 88px);
}
.theme-atelier__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tch-accent);
    margin: 0 0 18px;
}
.theme-atelier__eyebrow-dash {
    display: inline-block;
    width: clamp(28px, 5vw, 48px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        #C6A15B 50%,
        transparent 100%);
}
.theme-atelier__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--tch-primary);
    margin: 0 0 18px;
}
.theme-atelier__title-accent {
    font-style: italic;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.theme-atelier__subtitle {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.6;
    color: var(--tch-text-muted, #5b6280);
    margin: 0 auto;
    max-width: 600px;
}

/* ── Liste des 3 ateliers — mobile-first stack, grid desktop ──────────────── */
.theme-atelier__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 44px);
    max-width: 1180px;
    margin-inline: auto;
}
@media (min-width: 720px) {
    .theme-atelier__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .theme-atelier__list { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); }
}

.theme-atelier__item {
    display: flex;
}

/* ── Card — vitrine d'atelier ─────────────────────────────────────────────── */
.theme-atelier__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--tch-surface, #FFFFFF);
    border: 1px solid color-mix(in srgb, var(--atelier-primary, #1E2A5A) 12%, transparent);
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    color: var(--tch-text, #1E2A5A);
    box-shadow:
        0 1px 2px rgba(30, 42, 90, 0.04),
        0 16px 36px rgba(30, 42, 90, 0.06);
    transition:
        transform 0.55s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
        box-shadow 0.55s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
        border-color 0.3s ease;
}
.theme-atelier__card::before {
    /* Halo doré au survol — emerge du bas-droit */
    content: "";
    position: absolute;
    bottom: -40%;
    right: -30%;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--atelier-accent, #C6A15B) 22%, transparent) 0%,
        transparent 65%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s var(--ease-out-expo, ease), transform 0.8s var(--ease-out-expo, ease);
    z-index: 0;
}
.theme-atelier__card:hover,
.theme-atelier__card:focus-visible {
    transform: translateY(-10px);
    border-color: color-mix(in srgb, var(--atelier-accent, #C6A15B) 50%, transparent);
    box-shadow:
        0 4px 12px rgba(30, 42, 90, 0.08),
        0 32px 70px rgba(30, 42, 90, 0.16),
        0 0 0 1px color-mix(in srgb, var(--atelier-accent, #C6A15B) 18%, transparent) inset;
    outline: none;
}
.theme-atelier__card:hover::before,
.theme-atelier__card:focus-visible::before {
    opacity: 1;
    transform: scale(1.15);
}

/* ── Scène SVG signature — palette factuelle par thème ───────────────────── */
.theme-atelier__scene {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg,
        var(--atelier-primary, #1E2A5A) 0%,
        color-mix(in srgb, var(--atelier-primary, #1E2A5A) 70%, #000) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--atelier-accent, #C6A15B) 25%, transparent);
}
.theme-atelier__scene-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%,
            color-mix(in srgb, var(--atelier-accent, #C6A15B) 18%, transparent) 0%,
            transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.theme-atelier__svg {
    position: relative;
    z-index: 1;
    width: 70%;
    max-width: 220px;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.25));
    transition: transform 0.8s var(--ease-out-expo, ease);
}
.theme-atelier__card:hover .theme-atelier__svg {
    transform: scale(1.05);
}

/* ── Sablier — animations propres : sable qui s'écoule, grains qui tombent ─ */
@keyframes tch-atelier-sablier-grain {
    0%   { transform: translateY(0)    scale(1); opacity: 0.95; }
    80%  { transform: translateY(14px) scale(1); opacity: 0.95; }
    100% { transform: translateY(14px) scale(0); opacity: 0; }
}
.theme-atelier__sablier-grain {
    animation: tch-atelier-sablier-grain 1.6s var(--ease-out-expo, ease) infinite;
    transform-origin: center;
}
.theme-atelier__sablier-grain:nth-of-type(1) { animation-delay: 0s; }
.theme-atelier__sablier-grain:nth-of-type(2) { animation-delay: 0.5s; }
.theme-atelier__sablier-grain:nth-of-type(3) { animation-delay: 1.0s; }
@keyframes tch-atelier-sablier-top {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 0.45; }
}
@keyframes tch-atelier-sablier-bottom {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
}
.theme-atelier__sablier-sand-top    { animation: tch-atelier-sablier-top    4.8s ease-in-out infinite; }
.theme-atelier__sablier-sand-bottom { animation: tch-atelier-sablier-bottom 4.8s ease-in-out infinite; }

/* ── Royal — arcs concentriques qui pulsent ──────────────────────────────── */
@keyframes tch-atelier-royal-arc {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.04); }
}
.theme-atelier__royal-arc {
    transform-origin: 90px 90px;
    transform-box: fill-box;
}
.theme-atelier__royal-arc--1 { animation: tch-atelier-royal-arc 4.5s ease-in-out infinite;            }
.theme-atelier__royal-arc--2 { animation: tch-atelier-royal-arc 4.5s ease-in-out 0.4s infinite;       }
.theme-atelier__royal-arc--3 { animation: tch-atelier-royal-arc 4.5s ease-in-out 0.8s infinite;       }
@keyframes tch-atelier-royal-crown {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(248, 233, 179, 0.55)); }
    50%      { filter: drop-shadow(0 0 14px rgba(248, 233, 179, 0.95)); }
}
.theme-atelier__royal-crown { animation: tch-atelier-royal-crown 4s ease-in-out infinite; }

/* ── Baobab — soleil qui pulse + oiseaux qui ondulent ────────────────────── */
@keyframes tch-atelier-baobab-sun {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%      { transform: scale(1.1);  opacity: 0.85; }
}
.theme-atelier__baobab-sun {
    transform-origin: 148px 62px;
    transform-box: fill-box;
    animation: tch-atelier-baobab-sun 5s ease-in-out infinite;
}
@keyframes tch-atelier-baobab-bird {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(8px, -4px); }
    100% { transform: translate(0, 0); }
}
.theme-atelier__baobab-bird {
    transform-box: fill-box;
    transform-origin: center;
    animation: tch-atelier-baobab-bird 5s ease-in-out infinite;
}
.theme-atelier__baobab-bird--2 { animation-delay: 2s; animation-duration: 6s; }
@keyframes tch-atelier-baobab-tree {
    0%, 100% { transform: rotate(0);     }
    50%      { transform: rotate(0.4deg); }
}
.theme-atelier__baobab-tree {
    transform-origin: 93px 142px;
    transform-box: fill-box;
    animation: tch-atelier-baobab-tree 7s ease-in-out infinite;
}

/* ── Badge — pack minimum, sur la scène en haut à droite ─────────────────── */
.theme-atelier__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    padding: 6px 14px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.theme-atelier__badge--essential {
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.theme-atelier__badge--premium {
    background: rgba(198, 161, 91, 0.28);
    color: #F4D9A0;
    border: 1px solid rgba(212, 175, 55, 0.55);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.2) inset;
}
.theme-atelier__badge--signature {
    background: rgba(212, 175, 55, 0.35);
    color: #FFF6D0;
    border: 1px solid rgba(248, 233, 179, 0.7);
    box-shadow:
        0 0 0 1px rgba(248, 233, 179, 0.25) inset,
        0 0 14px rgba(212, 175, 55, 0.35);
}

/* ── Identité — nom + description + palette + CTA ─────────────────────────── */
.theme-atelier__identity {
    position: relative;
    z-index: 1;
    padding: clamp(20px, 2.2vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.theme-atelier__name-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.theme-atelier__name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.55rem, 2.4vw, 1.95rem);
    font-weight: 500;
    line-height: 1;
    color: var(--tch-primary, #1E2A5A);
    letter-spacing: -0.01em;
    margin: 0;
}
.theme-atelier__rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--atelier-accent, #C6A15B) 60%, transparent) 0%,
        transparent 100%);
}
.theme-atelier__description {
    font-size: clamp(0.92rem, 1.4vw, 1rem);
    color: var(--tch-text-muted, #5b6280);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

/* Palette factuelle — 2 swatches + hex codes */
.theme-atelier__palette {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px dashed color-mix(in srgb, var(--atelier-primary, #1E2A5A) 12%, transparent);
    border-bottom: 1px dashed color-mix(in srgb, var(--atelier-primary, #1E2A5A) 12%, transparent);
}
.theme-atelier__swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.8) inset,
        0 1px 3px rgba(0, 0, 0, 0.12);
}
.theme-atelier__swatch--primary { background: var(--atelier-primary, #1E2A5A); }
.theme-atelier__swatch--accent  { background: var(--atelier-accent, #C6A15B);  }
.theme-atelier__hex {
    font-family: 'Inter', monospace;
    font-size: 0.72rem;
    color: var(--tch-text-muted, #5b6280);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.theme-atelier__hex-sep {
    color: color-mix(in srgb, var(--tch-text-muted, #5b6280) 50%, transparent);
}

/* CTA — flèche qui glisse au survol */
.theme-atelier__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--atelier-accent, #C6A15B);
    letter-spacing: 0.01em;
}
.theme-atelier__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--atelier-accent, #C6A15B) 14%, transparent);
    transition:
        background 0.3s ease,
        transform 0.4s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.theme-atelier__cta-arrow i {
    font-size: 0.7rem;
    color: var(--atelier-accent, #C6A15B);
    transition: transform 0.4s var(--ease-out-expo, ease);
}
.theme-atelier__card:hover .theme-atelier__cta-arrow,
.theme-atelier__card:focus-visible .theme-atelier__cta-arrow {
    background: color-mix(in srgb, var(--atelier-accent, #C6A15B) 28%, transparent);
    transform: translateX(4px);
}
.theme-atelier__card:hover .theme-atelier__cta-arrow i,
.theme-atelier__card:focus-visible .theme-atelier__cta-arrow i {
    transform: translateX(2px);
}

/* ── Pont conceptuel sous la grille — phrase encadrée de 2 tirets dorés ──── */
.theme-atelier__pont {
    margin: clamp(48px, 6vw, 72px) auto 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2vw, 24px);
    flex-wrap: wrap;
    max-width: 720px;
}
.theme-atelier__pont-dash {
    flex: 0 0 auto;
    width: clamp(36px, 6vw, 64px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        #C6A15B 50%,
        transparent 100%);
}
.theme-atelier__pont-text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    line-height: 1.5;
    color: var(--tch-primary, #1E2A5A);
}
.theme-atelier__pont-text em {
    font-style: normal;
    font-weight: 500;
    color: var(--tch-accent, #C6A15B);
}

/* ── Footer — CTA principal + note thèmes exclusifs ──────────────────────── */
.theme-atelier__footer {
    text-align: center;
    margin-top: clamp(40px, 5vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.theme-atelier__cta-primary i { margin-left: 8px; }
.theme-atelier__footer-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
    color: var(--tch-text-muted, #5b6280);
    margin: 0;
}
.theme-atelier__footer-note i {
    color: var(--tch-accent, #C6A15B);
    font-size: 0.78rem;
}

/* ── prefers-reduced-motion — désactivation des animations, structure préservée ── */
@media (prefers-reduced-motion: reduce) {
    .theme-atelier__halo,
    .theme-atelier__sparkles span,
    .theme-atelier__sablier-grain,
    .theme-atelier__sablier-sand-top,
    .theme-atelier__sablier-sand-bottom,
    .theme-atelier__royal-arc,
    .theme-atelier__royal-crown,
    .theme-atelier__baobab-sun,
    .theme-atelier__baobab-bird,
    .theme-atelier__baobab-tree,
    .theme-atelier__card,
    .theme-atelier__svg,
    .theme-atelier__cta-arrow,
    .theme-atelier__card::before {
        animation: none !important;
        transition: none !important;
    }
    .theme-atelier__sparkles span { opacity: 0.6; }
    .theme-atelier__card:hover { transform: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PAGES D'ERREUR — Empathie, calme, dopamine sans agressivité
   Charte UX.md L163 : pas de rouge agressif, traitement avec empathie
   ═════════════════════════════════════════════════════════════════════════════ */

.tch-error-body {
    background: linear-gradient(170deg, #FFF7EA 0%, #FFFFFF 60%, #FFF7EA 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.tch-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg) var(--space-md);
    position: relative;
    overflow: hidden;
}

/* Orbes lumineux subtils en arrière-plan */
.tch-error__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(40px);
    opacity: 0;
    animation: tch-error-orb-fade 1.4s var(--ease-out-expo) 0.3s forwards;
}
.tch-error__orb--top {
    top: -25%;
    right: -15%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(198, 161, 91, 0.18) 0%, transparent 70%);
}
.tch-error__orb--bottom {
    bottom: -25%;
    left: -10%;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(31, 122, 92, 0.12) 0%, transparent 70%);
}
@keyframes tch-error-orb-fade {
    to { opacity: 1; }
}

.tch-error__container {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 560px;
    width: 100%;
    padding: var(--space-xl) var(--space-md);
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(198, 161, 91, 0.12);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(30, 42, 90, 0.06);
    opacity: 0;
    transform: translateY(20px);
    animation: tch-error-container-rise 0.9s var(--ease-out-expo) 0.2s forwards;
}
@keyframes tch-error-container-rise {
    to { opacity: 1; transform: translateY(0); }
}

/* Logo Tchefon discret en haut du conteneur */
.tch-error__brand {
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tch-accent);
    letter-spacing: 0.18em;
    text-decoration: none;
    margin-bottom: var(--space-md);
    transition: color 0.25s var(--ease-out-expo);
}
.tch-error__brand:hover {
    color: var(--tch-accent-hover);
}

/* Illustration SVG calme et symbolique */
.tch-error__illustration {
    width: 140px;
    height: 140px;
    margin: 0 auto var(--space-lg);
    color: var(--tch-primary);
    opacity: 0;
    transform: scale(0.85);
    animation: tch-error-illustration-bloom 1.2s var(--ease-spring) 0.5s forwards;
}
.tch-error__illustration--lost   { color: var(--tch-primary); }
.tch-error__illustration--locked { color: var(--tch-accent); }
.tch-error__illustration--storm  { color: var(--tch-accent); }
.tch-error__illustration--generic { color: var(--tch-primary); }
.tch-error__illustration svg {
    width: 100%;
    height: 100%;
}
@keyframes tch-error-illustration-bloom {
    to { opacity: 1; transform: scale(1); }
}

/* Code d'erreur stylisé en eyebrow */
.tch-error__code-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 18px;
    background: rgba(198, 161, 91, 0.08);
    border: 1px solid rgba(198, 161, 91, 0.18);
    border-radius: 100px;
    margin-bottom: var(--space-md);
}
.tch-error__code {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tch-accent);
    letter-spacing: 0.05em;
}
.tch-error__code-label {
    font-size: 0.72rem;
    color: var(--tch-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

/* Titre poétique */
.tch-error__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 500;
    color: var(--tch-primary);
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-bottom: var(--space-sm);
}

/* Message empathique */
.tch-error__message {
    font-size: 1.05rem;
    color: var(--tch-text-muted);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

/* Actions principales */
.tch-error__actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}
.tch-error__actions .btn {
    color: #FFFFFF;
}
.tch-error__actions .btn--ghost {
    background: transparent;
    color: var(--tch-primary);
    border: 1.5px solid rgba(30, 42, 90, 0.15);
}
.tch-error__actions .btn--ghost:hover {
    border-color: var(--tch-primary);
    color: var(--tch-primary);
    background: rgba(30, 42, 90, 0.04);
}

/* Indication secondaire (lien support, conseil) */
.tch-error__hint {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(198, 161, 91, 0.15);
    font-size: 0.88rem;
    color: var(--tch-text-muted);
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.tch-error__hint i {
    color: var(--tch-accent);
}
.tch-error__hint a {
    color: var(--tch-secondary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}
.tch-error__hint a:hover {
    color: var(--tch-primary);
    text-decoration: underline;
}

/* Footer discret */
.tch-error__footer {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--space-md);
    font-size: 0.78rem;
    color: var(--tch-text-muted);
    opacity: 0.7;
}

/* Responsive — mobile first */
@media (max-width: 540px) {
    .tch-error__container {
        padding: var(--space-lg) var(--space-md);
    }
    .tch-error__illustration {
        width: 100px;
        height: 100px;
    }
    .tch-error__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Accessibilité : réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
    .tch-error__orb,
    .tch-error__container,
    .tch-error__illustration {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   LANDING — REFONTE V1 (20 mai 2026)
   Sections 1-8 conformes UX.md : dopamine design, micro-interactions, mobile-first.
   Aucun mot premium/luxe/elegant en classes (CLAUDE.md règle #8).
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─── Utilitaires ───────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-eyebrow {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tch-accent);
  margin-bottom: var(--space-xs);
}

/* ═════════════════════════════════════════════════════════════════════════════
   SECTION 1 — LANDING HERO
   ═════════════════════════════════════════════════════════════════════════════ */
.landing-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  background:
    linear-gradient(170deg, var(--tch-primary-deep) 0%, var(--tch-primary) 60%, var(--tch-primary-deep) 100%);
  color: #fff;
  overflow: hidden;
}
.landing-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--tch-accent) 12%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, color-mix(in srgb, var(--tch-secondary) 14%, transparent) 0%, transparent 55%);
  pointer-events: none;
}
.landing-hero__content {
  position: relative;
  max-width: 920px;
  z-index: 1;
}
.landing-hero__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}
.landing-hero__title-accent {
  font-style: italic;
  color: var(--tch-accent);
}
.landing-hero__subtitle {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
  margin: 0 auto;
}

/* Bloc CTA above-the-fold — Foundry CRO 2026, Carnegie P25 (question avant action) */
.landing-hero__cta {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.landing-hero__cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.2rem;
  background: var(--tch-accent, #C6A15B);
  color: var(--tch-primary, #1E2A5A);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  box-shadow: 0 14px 36px rgba(198, 161, 91, 0.35), 0 4px 12px rgba(15, 23, 42, 0.18);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease-out;
}
.landing-hero__cta-button:hover,
.landing-hero__cta-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(198, 161, 91, 0.45), 0 6px 16px rgba(15, 23, 42, 0.22);
  color: var(--tch-primary, #1E2A5A);
}
.landing-hero__cta-button:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}
.landing-hero__cta-button i {
  font-size: 0.95rem;
}
.landing-hero__cta-trust {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: 0.01em;
}
.landing-hero__cta-trust i {
  font-size: 0.78rem;
  color: var(--tch-accent, #C6A15B);
}
@media (max-width: 767.98px) {
  .landing-hero__cta-button {
    padding: 0.9rem 1.7rem;
    font-size: 0.95rem;
  }
  .landing-hero__cta-trust {
    font-size: 0.78rem;
    text-align: center;
    padding: 0 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing-hero__cta-button { transition: none; }
}

.landing-hero__scroll {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  animation: heroScrollPulse 2.4s var(--ease-in-out-circ) infinite;
}
.landing-hero__scroll i {
  font-size: 0.9rem;
}
@keyframes heroScrollPulse {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
  50% { transform: translate(-50%, 8px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-hero__scroll { animation: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   SECTION 2 — PERSONAL ADDRESS (CAPTURE BRIEF)
   ═════════════════════════════════════════════════════════════════════════════ */
.personal-address {
  background: var(--tch-bg);
  padding: var(--space-2xl) var(--space-md);
}
.personal-address__inner {
  max-width: 640px;
  margin: 0 auto;
}
.personal-address__intro {
  text-align: center;
  margin-bottom: var(--space-lg);
}
.personal-address__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-headline);
  font-weight: 500;
  line-height: 1.2;
  color: var(--tch-primary);
  margin: var(--space-xs) 0 var(--space-sm);
}
.personal-address__lead {
  font-size: var(--fs-body);
  color: var(--tch-text-muted);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}
.personal-address__form {
  background: var(--tch-surface);
  padding: var(--space-lg);
  border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(30, 42, 90, 0.15);
}
.personal-address__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.personal-address__field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--tch-text);
  margin-bottom: 6px;
}
.personal-address__field input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px; /* min 16px : pas de zoom forcé sur mobile (UX.md) */
  font-family: inherit;
  color: var(--tch-text);
  background: var(--tch-bg);
  border: 1px solid var(--tch-border);
  border-radius: 12px;
  transition: border-color 0.2s var(--ease-out-expo), box-shadow 0.2s var(--ease-out-expo);
}
.personal-address__field input:focus {
  outline: none;
  border-color: var(--tch-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tch-accent) 18%, transparent);
}
.personal-address__field input::placeholder {
  color: color-mix(in srgb, var(--tch-text-muted) 70%, transparent);
}
.personal-address__submit {
  width: 100%;
  padding: 16px 24px;
  margin-top: var(--space-sm);
  font-size: var(--fs-body);
  font-weight: 600;
  color: #fff;
  background: var(--tch-primary);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.2s var(--ease-out-expo), transform 0.2s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo);
}
.personal-address__submit:hover {
  background: var(--tch-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(30, 42, 90, 0.4);
}
.personal-address__submit:active {
  transform: translateY(0);
}
.personal-address__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-caption);
  color: var(--tch-text-muted);
  margin-top: var(--space-sm);
  text-align: center;
}
.personal-address__trust i {
  color: var(--tch-secondary);
}

/* Mention discrète code parrain — apparait sous le CTA, dorée */
.personal-address__promo-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-caption);
  color: var(--tch-accent);
  margin-top: 12px;
  text-align: center;
  background: rgba(198, 161, 91, 0.08);
  border: 1px dashed rgba(198, 161, 91, 0.35);
  border-radius: 999px;
  padding: 6px 14px;
}
.personal-address__promo-hint i {
  color: var(--tch-accent);
}

/* Mobile : champs empilés */
@media (max-width: 640px) {
  .personal-address__row { grid-template-columns: 1fr; }
  .personal-address__form { padding: var(--space-md); }
}

/* ═════════════════════════════════════════════════════════════════════════════
   SECTION 3 — PORTFOLIO GALLERY
   ═════════════════════════════════════════════════════════════════════════════ */
.portfolio-gallery {
  padding: var(--space-2xl) 0;
  background: var(--tch-surface);
}
.portfolio-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.portfolio-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--ease-out-expo);
}
.portfolio-card:hover {
  transform: translateY(-6px);
}
.portfolio-card__frame {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border-radius: 32px;
  overflow: hidden;
  background: #0a0d18;
  padding: 8px;
  box-shadow:
    0 20px 50px -18px rgba(30, 42, 90, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.portfolio-card__frame::before {
  /* Encoche / dynamic island d'un smartphone moderne */
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 22px;
  background: #0a0d18;
  border-radius: 14px;
  z-index: 2;
}
.portfolio-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}
.portfolio-card__frame--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--tch-bg) 80%, var(--tch-primary)) 0%, var(--tch-bg) 100%);
  border-radius: 24px;
}
.portfolio-card__frame--empty::before {
  /* L'écran intérieur du téléphone — la « notch » du parent reste visible */
  background: color-mix(in srgb, var(--tch-bg) 80%, var(--tch-primary));
}
.portfolio-card__placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: color-mix(in srgb, var(--tch-primary) 60%, transparent);
  text-align: center;
}
.portfolio-card__placeholder-content i {
  font-size: 2.5rem;
}
.portfolio-card__placeholder-content span {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Carte démo de thème — affichée au lancement quand aucun client live encore.
   Pas de prénom inventé, pas de date fabriquée. Le couple comprend qu'il
   regarde une démo du thème, pas un témoignage. */
.portfolio-card__frame--demo {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 28%, color-mix(in srgb, var(--tch-accent) 22%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--tch-primary) 8%, var(--tch-bg)) 0%, var(--tch-bg) 100%);
  border-radius: 24px;
}
.portfolio-card__demo-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1.25rem;
}
.portfolio-card__demo-label {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: color-mix(in srgb, var(--tch-accent) 18%, transparent);
  color: var(--tch-primary);
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.portfolio-card__demo-theme {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--tch-primary);
  letter-spacing: -0.01em;
}
.portfolio-card__demo-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--tch-secondary);
  letter-spacing: 0.02em;
  margin-top: 0.6rem;
}
.portfolio-card--demo:hover .portfolio-card__demo-cta {
  color: var(--tch-primary);
}
.portfolio-card__caption {
  text-align: center;
  margin-top: var(--space-sm);
}
.portfolio-card__couple {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-title);
  font-weight: 500;
  color: var(--tch-primary);
}
.portfolio-card__date {
  font-size: var(--fs-small);
  color: var(--tch-text-muted);
  margin-top: 4px;
}

@media (max-width: 900px) {
  .portfolio-gallery__grid { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   SECTION 4 — PROCESS / « Les 4 actes de votre invitation »
   Refonte cinematographique : halo or pulsant, sparkles flottants, fil d'or SVG
   serpentin reliant 4 cartes a sceaux romains, cartouches dores aux 4 angles.
   StoryBrand (Plan) + 4Us (titres) + Carnegie (P14/P25/P27/P28).
   ═════════════════════════════════════════════════════════════════════════════ */
.process-acts {
    position: relative;
    padding: clamp(48px, 8vw, 120px) 0;
    background: var(--tch-bg);
    overflow: hidden;
    isolation: isolate;
}

/* Halo or radial pulsant en arriere-plan */
.process-acts__halo {
    position: absolute;
    top: 32%;
    left: 50%;
    width: clamp(420px, 70vw, 900px);
    height: clamp(420px, 70vw, 900px);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 50%,
        rgba(198, 161, 91, 0.22) 0%,
        rgba(198, 161, 91, 0.08) 35%,
        transparent 70%);
    filter: blur(24px);
    pointer-events: none;
    animation: tch-halo-pulse 9s ease-in-out infinite;
    z-index: 0;
}

/* Sparkles flottants — 10 points d'or aleatoires */
.process-acts__sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.process-acts__sparkles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF8E0 0%, #C6A15B 60%, transparent 100%);
    box-shadow: 0 0 8px rgba(230, 200, 117, 0.7);
    animation: tch-sparkle-float 8s ease-in-out infinite;
    opacity: 0;
}
.process-acts__sparkles span:nth-child(1)  { top:  8%; left: 12%; animation-delay: 0s;   }
.process-acts__sparkles span:nth-child(2)  { top: 14%; left: 84%; animation-delay: 1.4s; }
.process-acts__sparkles span:nth-child(3)  { top: 22%; left:  6%; animation-delay: 2.6s; }
.process-acts__sparkles span:nth-child(4)  { top: 18%; left: 48%; animation-delay: 0.9s; width: 3px; height: 3px; }
.process-acts__sparkles span:nth-child(5)  { top: 52%; left: 92%; animation-delay: 3.6s; }
.process-acts__sparkles span:nth-child(6)  { top: 68%; left: 14%; animation-delay: 1.9s; width: 3px; height: 3px; }
.process-acts__sparkles span:nth-child(7)  { top: 74%; left: 62%; animation-delay: 2.3s; }
.process-acts__sparkles span:nth-child(8)  { top: 30%; left: 28%; animation-delay: 4.2s; width: 3px; height: 3px; }
.process-acts__sparkles span:nth-child(9)  { top: 88%; left: 78%; animation-delay: 1.1s; }
.process-acts__sparkles span:nth-child(10) { top: 42%; left: 70%; animation-delay: 3.0s; width: 3px; height: 3px; }

/* Header — eyebrow Cormorant italic entre 2 tirets dores */
.process-acts__header {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(56px, 7vw, 88px);
}
.process-acts__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tch-accent);
    margin-bottom: 18px;
}
.process-acts__eyebrow-dash {
    display: inline-block;
    width: clamp(28px, 5vw, 48px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        #C6A15B 50%,
        transparent 100%);
}
.process-acts__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--tch-primary);
    margin: 0 0 18px;
}
.process-acts__title em {
    font-style: italic;
    font-weight: 400;
}
.process-acts__title-accent {
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: italic;
}
.process-acts__subtitle {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.6;
    color: var(--tch-text-muted, #5b6280);
    margin: 0;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* Liste des 5 actes — timeline serpentine avec rail or central */
.process-acts__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 2;
    max-width: 1100px;
}

/* Rail d'or vertical central (desktop) — anime au reveal via stroke-dashoffset */
.process-acts__list::before {
    content: "";
    position: absolute;
    top: 36px;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(198, 161, 91, 0.4) 4%,
        #C6A15B 14%,
        #E6C875 50%,
        #C6A15B 86%,
        rgba(198, 161, 91, 0.4) 96%,
        transparent 100%);
    box-shadow: 0 0 12px rgba(198, 161, 91, 0.4);
}

/* Acte = ligne de la timeline. Grid 3 colonnes : body | sceau | body
   le body se place en col 1 ou 3 selon parite, le sceau toujours en col 2 */
.process-act {
    position: relative;
    display: grid;
    grid-template-columns: 1fr clamp(72px, 8vw, 96px) 1fr;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    margin-bottom: clamp(72px, 9vw, 120px);
}
.process-act:last-child {
    margin-bottom: 0;
}

/* Acte impair (1, 3, 5) → card a GAUCHE */
.process-act:nth-child(odd) .process-act__body {
    grid-column: 1;
    text-align: right;
}
.process-act:nth-child(odd) .process-act__body .process-act__icon,
.process-act:nth-child(odd) .process-act__body .process-act__duration {
    margin-left: auto;
    margin-right: 0;
}

/* Acte pair (2, 4) → card a DROITE */
.process-act:nth-child(even) .process-act__body {
    grid-column: 3;
    text-align: left;
}
.process-act:nth-child(even) .process-act__body .process-act__icon,
.process-act:nth-child(even) .process-act__body .process-act__duration {
    margin-left: 0;
    margin-right: auto;
}

/* Body = la carte parchemin elle-meme */
.process-act__body {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF4 100%);
    border: 1px solid rgba(198, 161, 91, 0.18);
    border-radius: 18px;
    padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 32px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 18px 40px -24px rgba(30, 42, 90, 0.18);
    transition:
        transform 0.4s var(--ease-out-expo),
        box-shadow 0.4s var(--ease-out-expo),
        border-color 0.4s var(--ease-out-expo);
}
.process-act:hover .process-act__body {
    transform: translateY(-6px);
    border-color: rgba(198, 161, 91, 0.45);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 30px 60px -28px rgba(198, 161, 91, 0.35),
        0 18px 40px -24px rgba(30, 42, 90, 0.22);
}

/* Branche horizontale subtile reliant la card au sceau central */
.process-act__body::after {
    content: "";
    position: absolute;
    top: 50%;
    width: clamp(16px, 3vw, 40px);
    height: 1px;
    background: linear-gradient(to right, transparent, #C6A15B);
    transform: translateY(-50%);
    opacity: 0.55;
}
.process-act:nth-child(odd) .process-act__body::after {
    right: 0;
    transform: translate(100%, -50%);
    background: linear-gradient(to right, #C6A15B, transparent);
}
.process-act:nth-child(even) .process-act__body::after {
    left: 0;
    transform: translate(-100%, -50%);
    background: linear-gradient(to right, transparent, #C6A15B);
}

/* Sceau roman = toujours sur le rail central (col 2) */
.process-act__seal {
    grid-column: 2;
    z-index: 3;
    justify-self: center;
}

/* Cartouches dores aux 4 angles du body */
.process-act__corner {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    opacity: 0.7;
}
.process-act__corner::before,
.process-act__corner::after {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    box-shadow: 0 0 6px rgba(198, 161, 91, 0.4);
}
.process-act__corner::before { width: 1.2px; height: 100%; }
.process-act__corner::after  { width: 100%; height: 1.2px; }
.process-act__corner--tl { top: 12px;    left: 12px;    }
.process-act__corner--tl::before { top: 0; left: 0; }
.process-act__corner--tl::after  { top: 0; left: 0; }
.process-act__corner--tr { top: 12px;    right: 12px;   }
.process-act__corner--tr::before { top: 0; right: 0; }
.process-act__corner--tr::after  { top: 0; right: 0; }
.process-act__corner--bl { bottom: 12px; left: 12px;    }
.process-act__corner--bl::before { bottom: 0; left: 0; }
.process-act__corner--bl::after  { bottom: 0; left: 0; }
.process-act__corner--br { bottom: 12px; right: 12px;   }
.process-act__corner--br::before { bottom: 0; right: 0; }
.process-act__corner--br::after  { bottom: 0; right: 0; }

/* Sceau romain — cercle dore filaire avec chiffre Cormorant italic au centre.
   Place sur le rail central de la timeline (col 2 de la grille .process-act),
   plus de margin auto car centrage delegue a la grille. */
.process-act__seal {
    position: relative;
    width: clamp(64px, 7vw, 80px);
    height: clamp(64px, 7vw, 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 248, 224, 0.6) 0%,
        rgba(255, 248, 224, 0.2) 40%,
        transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(198, 161, 91, 0.25);
    transition: transform 0.6s var(--ease-spring);
}
.process-act:hover .process-act__seal {
    transform: rotate(360deg);
}
.process-act__seal svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.process-act__roman {
    position: relative;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.85rem;
    line-height: 1;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: 0.02em;
}

/* Icone illustrative de l'acte. L'alignement horizontal est pilote par
   le text-align du body (gauche/droite selon parite) via margin auto sur
   le cote oppose — cf .process-act:nth-child overrides. */
.process-act__icon {
    width: 56px;
    height: 56px;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%,
        rgba(198, 161, 91, 0.14) 0%,
        rgba(198, 161, 91, 0.05) 60%,
        transparent 100%);
    color: var(--tch-accent);
    font-size: 1.4rem;
    transition: transform 0.4s var(--ease-out-expo), color 0.4s ease;
}
.process-act:hover .process-act__icon {
    transform: scale(1.1);
    color: #7A5B1A;
}

/* Eyebrow « Acte I » — caps or */
.process-act__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tch-accent);
    margin: 0 0 8px;
}

/* Titre de l'acte — Cormorant avec italique sur le verbe cle */
.process-act__heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.5rem, 2.2vw, 1.85rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--tch-primary);
    margin: 0 0 14px;
}
.process-act__heading em {
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Duree — chip subtile en vert emeraude */
.process-act__duration {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 6px 14px;
    background: color-mix(in srgb, var(--tch-secondary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--tch-secondary) 25%, transparent);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tch-secondary);
}
.process-act__duration i {
    font-size: 0.85rem;
}

/* Description courte */
.process-act__text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--tch-text, #2a2f4a);
    margin: 0 0 16px;
}

/* Hint Carnegie (P27/P28) — italique or, separe par un divider subtil.
   La position du divider suit l'alignement de la card (droite/gauche)
   via les overrides nth-child plus bas. */
.process-act__hint {
    position: relative;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--tch-text-muted, #5b6280);
    margin: 0;
    padding-top: 16px;
}
.process-act__hint::before {
    content: "";
    position: absolute;
    top: 0;
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        #C6A15B 50%,
        transparent 100%);
}
.process-act:nth-child(odd) .process-act__hint::before {
    right: 0;
    background: linear-gradient(90deg, transparent 0%, #C6A15B 100%);
}
.process-act:nth-child(even) .process-act__hint::before {
    left: 0;
    background: linear-gradient(90deg, #C6A15B 0%, transparent 100%);
}
@media (max-width: 1023px) {
    /* Mobile : toutes les cards alignees a gauche → divider gauche partout */
    .process-act:nth-child(odd) .process-act__hint::before,
    .process-act:nth-child(even) .process-act__hint::before {
        right: auto;
        left: 0;
        background: linear-gradient(90deg, #C6A15B 0%, transparent 100%);
    }
}

/* Pied de section — SLA + CTA question Carnegie */
.process-acts__footer {
    position: relative;
    z-index: 3;
    text-align: center;
    margin-top: clamp(48px, 6vw, 72px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.process-acts__sla {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.5;
    color: var(--tch-text, #2a2f4a);
    margin: 0;
    padding: 12px 22px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(198, 161, 91, 0.2);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.process-acts__sla i {
    color: var(--tch-accent);
    font-size: 1rem;
}
.process-acts__sla strong {
    color: var(--tch-primary);
    font-weight: 700;
}

/* CTA question — bouton or generos avec halo au hover */
.process-acts__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 36px;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #A8854A 100%);
    color: var(--tch-primary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: 999px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 12px 28px -10px rgba(198, 161, 91, 0.5),
        0 4px 10px -2px rgba(30, 42, 90, 0.15);
    transition:
        transform 0.3s var(--ease-out-expo),
        box-shadow 0.3s var(--ease-out-expo);
}
.process-acts__cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 18px 36px -12px rgba(198, 161, 91, 0.65),
        0 6px 14px -3px rgba(30, 42, 90, 0.2);
}
.process-acts__cta i {
    transition: transform 0.3s var(--ease-out-expo);
}
.process-acts__cta:hover i {
    transform: translateX(4px);
}

/* ─── RESPONSIVE — Mobile : rail or a gauche, cards prennent toute la largeur ─
   Mobile-first : le sceau est volontairement compact (44px) pour ceder un
   maximum de largeur a la card. Le sceau est centre exactement sur la
   position du rail vertical or (alignement geometrique strict). L'eyebrow
   « Acte I/II/... » est PRESERVE car il participe a la hierarchie de lecture
   (le sceau exterieur affiche le chiffre, l'eyebrow porte le mot « Acte »). */
@media (max-width: 1023px) {
    .process-acts__list {
        max-width: 640px;
        padding-left: 0;
    }
    /* Rail aligne EXACTEMENT sur le centre du sceau (col 1 width / 2) */
    .process-acts__list::before {
        left: 22px;
        transform: none;
    }
    .process-act {
        grid-template-columns: 44px 1fr;
        gap: 14px;
        margin-bottom: clamp(40px, 6vw, 64px);
        align-items: flex-start;
    }
    .process-act__seal {
        grid-column: 1;
        justify-self: center;
        width: 44px;
        height: 44px;
        margin-top: 18px;
    }
    .process-act__roman {
        font-size: 1.25rem;
    }
    /* Card prend toute la largeur restante, padding mobile resserre pour
       laisser respirer le texte sans grignoter la largeur utile */
    .process-act__body {
        padding: 20px 18px;
    }
    .process-act:nth-child(odd) .process-act__body,
    .process-act:nth-child(even) .process-act__body {
        grid-column: 2;
        text-align: left;
    }
    .process-act:nth-child(odd) .process-act__body .process-act__icon,
    .process-act:nth-child(odd) .process-act__body .process-act__duration,
    .process-act:nth-child(even) .process-act__body .process-act__icon,
    .process-act:nth-child(even) .process-act__body .process-act__duration {
        margin-left: 0;
        margin-right: auto;
    }
    /* Branche horizontale courte du sceau vers la card */
    .process-act:nth-child(odd) .process-act__body::after,
    .process-act:nth-child(even) .process-act__body::after {
        left: 0;
        right: auto;
        top: 32px !important;
        transform: translate(-100%, -50%);
        background: linear-gradient(to right, transparent, #C6A15B);
        width: 12px;
    }
}

/* Tres petit ecran ≤480px : encore plus serre, mais alignement preserve */
@media (max-width: 480px) {
    .process-acts__list::before { left: 20px; }
    .process-act {
        grid-template-columns: 40px 1fr;
        gap: 12px;
    }
    .process-act__seal {
        width: 40px;
        height: 40px;
        margin-top: 16px;
    }
    .process-act__roman {
        font-size: 1.15rem;
    }
    .process-act__body {
        padding: 18px 16px;
    }
}

/* Reveal stagger — les delays sont deja portes par .reveal-delay-N */

/* Accessibilite — reduit le mouvement pour les utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
    .process-acts__halo,
    .process-acts__sparkles span {
        animation: none !important;
        opacity: 0.6;
    }
    .process-act__body,
    .process-act__seal,
    .process-act__icon,
    .process-acts__cta {
        transition: none !important;
    }
    .process-act:hover .process-act__body {
        transform: none;
    }
    .process-act:hover .process-act__seal {
        transform: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   SECTION 5 — FOUNDER STORY « L'origine »
   Layout diptyque 2 col preserve, enrichi de la couche cinetique commune
   au hero/brief/process (halo, sparkles, cartouches, eyebrow tirets, accent
   gradient or, carte sablier dramatisee, CTA pill or).
   ═════════════════════════════════════════════════════════════════════════════ */
.founder-story {
    position: relative;
    padding: clamp(48px, 8vw, 120px) var(--space-md);
    background: var(--tch-bg);
    overflow: hidden;
    isolation: isolate;
}

/* Halo or radial pulsant en fond */
.founder-story__halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(420px, 70vw, 900px);
    height: clamp(420px, 70vw, 900px);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 50%,
        rgba(198, 161, 91, 0.22) 0%,
        rgba(198, 161, 91, 0.08) 38%,
        transparent 72%);
    filter: blur(24px);
    pointer-events: none;
    animation: tch-halo-pulse 9s ease-in-out infinite;
    z-index: 0;
}

/* Sparkles flottants */
.founder-story__sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.founder-story__sparkles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF8E0 0%, #C6A15B 60%, transparent 100%);
    box-shadow: 0 0 8px rgba(230, 200, 117, 0.7);
    animation: tch-sparkle-float 8s ease-in-out infinite;
    opacity: 0;
}
.founder-story__sparkles span:nth-child(1) { top: 12%; left: 10%; animation-delay: 0s;   }
.founder-story__sparkles span:nth-child(2) { top: 22%; left: 88%; animation-delay: 1.6s; }
.founder-story__sparkles span:nth-child(3) { top: 38%; left:  6%; animation-delay: 2.8s; width: 3px; height: 3px; }
.founder-story__sparkles span:nth-child(4) { top: 18%; left: 52%; animation-delay: 0.9s; }
.founder-story__sparkles span:nth-child(5) { top: 62%; left: 92%; animation-delay: 3.6s; width: 3px; height: 3px; }
.founder-story__sparkles span:nth-child(6) { top: 78%; left: 12%; animation-delay: 1.9s; }
.founder-story__sparkles span:nth-child(7) { top: 84%; left: 70%; animation-delay: 2.3s; width: 3px; height: 3px; }
.founder-story__sparkles span:nth-child(8) { top: 48%; left: 30%; animation-delay: 4.2s; }

/* Container interieur — diptyque 2 col preserve */
.founder-story__inner {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-2xl);
    align-items: center;
    padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 40px);
}

/* Cartouches dores aux 4 angles du container interieur */
.founder-story__corner {
    position: absolute;
    width: 32px;
    height: 32px;
    pointer-events: none;
    opacity: 0.75;
    z-index: 3;
}
.founder-story__corner::before,
.founder-story__corner::after {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    box-shadow: 0 0 8px rgba(198, 161, 91, 0.5);
}
.founder-story__corner::before { width: 1.4px; height: 100%; }
.founder-story__corner::after  { width: 100%; height: 1.4px; }
.founder-story__corner--tl { top: 0;    left: 0;    }
.founder-story__corner--tl::before { top: 0; left: 0; }
.founder-story__corner--tl::after  { top: 0; left: 0; }
.founder-story__corner--tr { top: 0;    right: 0;   }
.founder-story__corner--tr::before { top: 0; right: 0; }
.founder-story__corner--tr::after  { top: 0; right: 0; }
.founder-story__corner--bl { bottom: 0; left: 0;    }
.founder-story__corner--bl::before { bottom: 0; left: 0; }
.founder-story__corner--bl::after  { bottom: 0; left: 0; }
.founder-story__corner--br { bottom: 0; right: 0;   }
.founder-story__corner--br::before { bottom: 0; right: 0; }
.founder-story__corner--br::after  { bottom: 0; right: 0; }

/* Portrait — cadre serti par 4 cartouches d'angle dores */
.founder-story__media {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 14px;
    margin: 0;
}
.founder-story__media-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    opacity: 0.85;
    z-index: 2;
}
.founder-story__media-corner::before,
.founder-story__media-corner::after {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    box-shadow: 0 0 6px rgba(198, 161, 91, 0.6);
}
.founder-story__media-corner::before { width: 1.6px; height: 100%; }
.founder-story__media-corner::after  { width: 100%; height: 1.6px; }
.founder-story__media-corner--tl { top: 0;    left: 0;    }
.founder-story__media-corner--tl::before { top: 0; left: 0; }
.founder-story__media-corner--tl::after  { top: 0; left: 0; }
.founder-story__media-corner--tr { top: 0;    right: 0;   }
.founder-story__media-corner--tr::before { top: 0; right: 0; }
.founder-story__media-corner--tr::after  { top: 0; right: 0; }
.founder-story__media-corner--bl { bottom: 0; left: 0;    }
.founder-story__media-corner--bl::before { bottom: 0; left: 0; }
.founder-story__media-corner--bl::after  { bottom: 0; left: 0; }
.founder-story__media-corner--br { bottom: 0; right: 0;   }
.founder-story__media-corner--br::before { bottom: 0; right: 0; }
.founder-story__media-corner--br::after  { bottom: 0; right: 0; }

.founder-story__portrait {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 20px;
    box-shadow:
        0 0 0 1px rgba(198, 161, 91, 0.28) inset,
        0 24px 60px -20px rgba(30, 42, 90, 0.32),
        0 12px 30px -10px rgba(198, 161, 91, 0.25);
    transition: transform 0.5s var(--ease-out-expo);
}
.founder-story__media:hover .founder-story__portrait {
    transform: scale(1.02);
}

/* Eyebrow Cormorant italic entre 2 tirets dores (pattern commun) */
.founder-story__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tch-accent);
    margin-bottom: 16px;
}
.founder-story__eyebrow-dash {
    display: inline-block;
    width: clamp(28px, 5vw, 48px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%, #C6A15B 50%, transparent 100%);
}

/* Titre — accent or gradient italique au lieu d'un simple aplat */
.founder-story__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--tch-primary);
    margin: 0 0 var(--space-md);
}
.founder-story__title-accent {
    font-style: italic;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Prose */
.founder-story__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    line-height: 1.7;
    color: var(--tch-text);
    margin-bottom: var(--space-md);
}

/* Carte sablier — dramatisation du countdown du frere (Carnegie P20) */
.founder-story__countdown {
    position: relative;
    margin: 0 0 var(--space-md);
    padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px);
    background: linear-gradient(180deg,
        rgba(255, 248, 224, 0.65) 0%,
        rgba(255, 248, 224, 0.35) 100%);
    border: 1px solid rgba(198, 161, 91, 0.35);
    border-radius: 16px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon  figure"
        "quote quote";
    column-gap: 18px;
    row-gap: 14px;
    align-items: center;
}
.founder-story__countdown-icon {
    grid-area: icon;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%,
        rgba(198, 161, 91, 0.22) 0%,
        rgba(198, 161, 91, 0.06) 60%,
        transparent 100%);
    color: var(--tch-accent);
    font-size: 1.3rem;
    animation: tch-hourglass-tilt 3.6s ease-in-out infinite;
}
@keyframes tch-hourglass-tilt {
    0%, 100% { transform: rotate(0deg); }
    45%      { transform: rotate(-12deg); }
    55%      { transform: rotate(12deg); }
}
.founder-story__countdown-figure {
    grid-area: figure;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.founder-story__countdown-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tch-text-muted, #5b6280);
}
.founder-story__countdown-value {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    line-height: 1;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.founder-story__countdown-value--days {
    font-size: clamp(2rem, 4.5vw, 2.8rem);
    font-style: italic;
    letter-spacing: -0.01em;
}
.founder-story__countdown-value--date,
.founder-story__countdown-value--today {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-style: italic;
}
.founder-story__countdown-date {
    margin-top: 4px;
    font-size: 0.88rem;
    color: var(--tch-text, #2a2f4a);
    font-weight: 500;
}
.founder-story__countdown-quote {
    grid-area: quote;
    position: relative;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--tch-primary);
    margin: 0;
    padding-top: 12px;
}
.founder-story__countdown-quote::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, #C6A15B 0%, transparent 100%);
}
.founder-story__countdown-quote-accent {
    font-weight: 500;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* CTA pill or — generos, signature commune aux autres CTAs landing */
.founder-story__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #A8854A 100%);
    color: var(--tch-primary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: none;
    border-radius: 999px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 12px 28px -10px rgba(198, 161, 91, 0.55),
        0 4px 10px -2px rgba(30, 42, 90, 0.15);
    transition:
        transform 0.3s var(--ease-out-expo),
        box-shadow 0.3s var(--ease-out-expo);
}
.founder-story__cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 18px 36px -12px rgba(198, 161, 91, 0.7),
        0 6px 14px -3px rgba(30, 42, 90, 0.2);
}
.founder-story__cta i {
    transition: transform 0.3s var(--ease-out-expo);
}
.founder-story__cta:hover i {
    transform: translateX(4px);
}

/* Responsive — empilage vertical sous 900px */
@media (max-width: 900px) {
    .founder-story__inner {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        text-align: center;
    }
    .founder-story__countdown {
        text-align: left;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .founder-story__halo,
    .founder-story__sparkles span,
    .founder-story__countdown-icon {
        animation: none !important;
        opacity: 0.6;
    }
    .founder-story__portrait,
    .founder-story__cta {
        transition: none !important;
    }
    .founder-story__media:hover .founder-story__portrait {
        transform: none;
    }
    .founder-story__cta:hover {
        transform: none;
    }
    .founder-story__cta:hover i {
        transform: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   SECTION 6 — TROIS PROMESSES (« Le serment en 3 sceaux »)
   Mise en scene cinematique alignee sur hero/brief/founder/launch-trust :
   halo or radial pulsant, 8 sparkles flottants, eyebrow Cormorant italic
   entre 2 tirets dores, titre avec accent gradient or, 3 cards parchemin
   avec 4 cartouches dores aux angles et sceau filaire abritant l'icone.
   ═════════════════════════════════════════════════════════════════════════════ */
.promises {
    position: relative;
    padding: clamp(48px, 8vw, 120px) 0;
    background: var(--tch-bg);
    overflow: hidden;
    isolation: isolate;
}

/* Halo or radial pulsant */
.promises__halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(420px, 70vw, 900px);
    height: clamp(420px, 70vw, 900px);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 50%,
        rgba(198, 161, 91, 0.22) 0%,
        rgba(198, 161, 91, 0.08) 38%,
        transparent 72%);
    filter: blur(24px);
    pointer-events: none;
    animation: tch-halo-pulse 9s ease-in-out infinite;
    z-index: 0;
}

/* Sparkles flottants */
.promises__sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.promises__sparkles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF8E0 0%, #C6A15B 60%, transparent 100%);
    box-shadow: 0 0 8px rgba(230, 200, 117, 0.7);
    animation: tch-sparkle-float 8s ease-in-out infinite;
    opacity: 0;
}
.promises__sparkles span:nth-child(1) { top: 10%; left:  8%; animation-delay: 0s;   }
.promises__sparkles span:nth-child(2) { top: 18%; left: 86%; animation-delay: 1.4s; }
.promises__sparkles span:nth-child(3) { top: 32%; left:  4%; animation-delay: 2.7s; width: 3px; height: 3px; }
.promises__sparkles span:nth-child(4) { top: 22%; left: 48%; animation-delay: 0.9s; }
.promises__sparkles span:nth-child(5) { top: 64%; left: 92%; animation-delay: 3.6s; width: 3px; height: 3px; }
.promises__sparkles span:nth-child(6) { top: 76%; left: 14%; animation-delay: 1.9s; }
.promises__sparkles span:nth-child(7) { top: 86%; left: 68%; animation-delay: 2.3s; width: 3px; height: 3px; }
.promises__sparkles span:nth-child(8) { top: 50%; left: 28%; animation-delay: 4.2s; }

/* Header — eyebrow + titre */
.promises__header {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(48px, 7vw, 72px);
}
.promises__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tch-accent);
    margin-bottom: 16px;
}
.promises__eyebrow-dash {
    display: inline-block;
    width: clamp(28px, 5vw, 48px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%, #C6A15B 50%, transparent 100%);
}
.promises__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--tch-primary);
    margin: 0;
}
.promises__title-accent {
    font-style: italic;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Liste des 3 cards */
.promises__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 2;
    max-width: 1180px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 32px);
}

/* Card — parchemin blanc avec 4 cartouches dores et sceau filaire */
.promise-card {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF4 100%);
    border: 1px solid rgba(198, 161, 91, 0.18);
    border-radius: 20px;
    padding: clamp(36px, 4vw, 52px) clamp(24px, 3vw, 36px);
    text-align: center;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 20px 44px -24px rgba(30, 42, 90, 0.2),
        0 12px 28px -20px rgba(198, 161, 91, 0.18);
    transition:
        transform 0.4s var(--ease-out-expo),
        box-shadow 0.4s var(--ease-out-expo),
        border-color 0.4s var(--ease-out-expo);
}
.promise-card:hover {
    transform: translateY(-12px);
    border-color: rgba(198, 161, 91, 0.45);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 32px 64px -28px rgba(198, 161, 91, 0.4),
        0 18px 40px -24px rgba(30, 42, 90, 0.22);
}

/* Cartouches dores aux 4 angles */
.promise-card__corner {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    opacity: 0.7;
}
.promise-card__corner::before,
.promise-card__corner::after {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    box-shadow: 0 0 6px rgba(198, 161, 91, 0.4);
}
.promise-card__corner::before { width: 1.2px; height: 100%; }
.promise-card__corner::after  { width: 100%; height: 1.2px; }
.promise-card__corner--tl { top: 14px;    left: 14px;    }
.promise-card__corner--tl::before { top: 0; left: 0; }
.promise-card__corner--tl::after  { top: 0; left: 0; }
.promise-card__corner--tr { top: 14px;    right: 14px;   }
.promise-card__corner--tr::before { top: 0; right: 0; }
.promise-card__corner--tr::after  { top: 0; right: 0; }
.promise-card__corner--bl { bottom: 14px; left: 14px;    }
.promise-card__corner--bl::before { bottom: 0; left: 0; }
.promise-card__corner--bl::after  { bottom: 0; left: 0; }
.promise-card__corner--br { bottom: 14px; right: 14px;   }
.promise-card__corner--br::before { bottom: 0; right: 0; }
.promise-card__corner--br::after  { bottom: 0; right: 0; }

/* Sceau filaire dore avec icone au centre */
.promise-card__seal {
    position: relative;
    width: clamp(72px, 8vw, 88px);
    height: clamp(72px, 8vw, 88px);
    margin: 0 auto clamp(20px, 2.5vw, 28px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%,
        rgba(255, 248, 224, 0.6) 0%,
        rgba(255, 248, 224, 0.2) 50%,
        transparent 75%);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(198, 161, 91, 0.25);
    transition: transform 0.6s var(--ease-spring);
}
.promise-card:hover .promise-card__seal {
    transform: rotate(360deg);
}
.promise-card__seal svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.promise-card__seal-icon {
    position: relative;
    z-index: 1;
    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: transform 0.4s var(--ease-out-expo);
}
.promise-card:hover .promise-card__seal-icon {
    /* Compense la rotation du sceau pour garder l'icone droite */
    transform: rotate(-360deg);
}

/* Titre — Cormorant avec mot-cle en italique gradient or */
.promise-card__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: var(--tch-primary);
    margin: 0 0 14px;
}
.promise-card__title em {
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Texte explicatif */
.promise-card__text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--tch-text-muted, #5b6280);
    margin: 0;
}

/* Responsive — 2 col tablette, 1 col mobile */
@media (max-width: 900px) {
    .promises__list {
        grid-template-columns: repeat(2, 1fr);
        max-width: 720px;
    }
}
@media (max-width: 560px) {
    .promises__list {
        grid-template-columns: 1fr;
        max-width: 440px;
    }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .promises__halo,
    .promises__sparkles span {
        animation: none !important;
        opacity: 0.6;
    }
    .promise-card,
    .promise-card__seal,
    .promise-card__seal-icon {
        transition: none !important;
    }
    .promise-card:hover {
        transform: none;
    }
    .promise-card:hover .promise-card__seal,
    .promise-card:hover .promise-card__seal-icon {
        transform: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   SECTION 8 — WHATSAPP CAPTURE
   ═════════════════════════════════════════════════════════════════════════════ */
.whatsapp-capture {
  padding: var(--space-2xl) var(--space-md);
  background: linear-gradient(160deg, var(--tch-primary-deep) 0%, var(--tch-primary) 100%);
  color: #fff;
  text-align: center;
}
.whatsapp-capture__inner {
  max-width: 580px;
  margin: 0 auto;
}
.whatsapp-capture__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-headline);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}
.whatsapp-capture__lead {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-md);
}
.whatsapp-capture__form {
  display: flex;
  gap: var(--space-xs);
  background: rgba(255, 255, 255, 0.08);
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.whatsapp-capture__field {
  flex: 1;
}
.whatsapp-capture__field input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  font-family: inherit;
  color: #fff;
  background: transparent;
  border: none;
  outline: none;
}
.whatsapp-capture__field input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.whatsapp-capture__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--tch-primary);
  background: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--ease-out-expo), transform 0.2s var(--ease-out-expo);
}
.whatsapp-capture__submit:hover {
  background: var(--tch-accent);
  color: #fff;
  transform: translateY(-1px);
}
.whatsapp-capture__submit i {
  color: #25D366;
  font-size: 1.1rem;
}
.whatsapp-capture__submit:hover i {
  color: #fff;
}
.whatsapp-capture__success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-small);
  background: color-mix(in srgb, var(--tch-secondary) 25%, transparent);
  border: 1px solid var(--tch-secondary);
  border-radius: 12px;
}
.whatsapp-capture__success i {
  color: #5dd4a7;
  font-size: 1.2rem;
}
.whatsapp-capture__success[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .whatsapp-capture__form { flex-direction: column; padding: var(--space-xs); }
  .whatsapp-capture__submit { width: 100%; justify-content: center; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   CARTE AMBASSADEUR (DASHBOARD CLIENT — PARRAINAGE)
   Mise en avant du code de parrainage du couple, partage WhatsApp.
   ═════════════════════════════════════════════════════════════════════════════ */
.ambassador-card {
  background: linear-gradient(160deg, color-mix(in srgb, var(--tch-accent) 8%, var(--tch-surface)) 0%, var(--tch-surface) 100%);
  border: 1px solid var(--tch-border-accent, rgba(198, 161, 91, 0.3));
}
.ambassador-card__intro {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--tch-text);
  margin-bottom: var(--space-md);
}
.ambassador-card__intro strong {
  color: var(--tch-primary);
  font-weight: 600;
}
.ambassador-card__code-row {
  display: flex;
  gap: var(--space-xs);
  align-items: stretch;
  margin-bottom: var(--space-md);
}
.ambassador-card__code {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tch-primary);
  background: var(--tch-surface);
  border: 2px dashed var(--tch-accent);
  border-radius: 12px;
}
.ambassador-card__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--tch-primary);
  background: var(--tch-surface);
  border: 1px solid var(--tch-border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s var(--ease-out-expo), border-color 0.2s var(--ease-out-expo);
}
.ambassador-card__copy-btn:hover {
  background: var(--tch-bg);
  border-color: var(--tch-accent);
}
.ambassador-card__progress {
  margin-bottom: var(--space-md);
}
.ambassador-card__progress-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-small);
  color: var(--tch-text-muted);
  margin-bottom: 6px;
}
.ambassador-card__progress-bar {
  height: 8px;
  background: color-mix(in srgb, var(--tch-primary) 8%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.ambassador-card__progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--tch-secondary) 0%, var(--tch-accent) 100%);
  border-radius: 999px;
  transition: width 0.6s var(--ease-out-expo);
}
.ambassador-card__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: #fff;
  background: #25D366;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s var(--ease-out-expo), transform 0.2s var(--ease-out-expo);
}
.ambassador-card__share-btn:hover {
  background: #1da851;
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 560px) {
  .ambassador-card__code-row { flex-direction: column; }
  .ambassador-card__code { font-size: 1.25rem; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PAGE DE REMERCIEMENT POST-RSVP
   - Hero émotionnel personnalisé
   - Confettis subtils CSS-only (pas d'animation > 800ms — UX.md)
   - Bloc parrainage discret, sans pop-up (anti-pattern)
   - prefers-reduced-motion respecté
   ═════════════════════════════════════════════════════════════════════════════ */
.rsvp-thanks {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--tch-secondary) 8%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--tch-accent) 8%, transparent) 0%, transparent 60%),
    var(--tch-bg);
  overflow: hidden;
}

.rsvp-thanks__confetti {
  position: absolute;
  inset: 0 0 50% 0;
  pointer-events: none;
  overflow: hidden;
}

.rsvp-thanks__confetti-piece {
  position: absolute;
  top: -10%;
  width: 8px;
  height: 14px;
  background: var(--tch-accent);
  opacity: 0;
  border-radius: 2px;
  animation: rsvp-thanks-fall 1500ms ease-in forwards;
}
.rsvp-thanks__confetti-piece:nth-child(1) { left: 12%; background: var(--tch-accent); animation-delay: 0ms; }
.rsvp-thanks__confetti-piece:nth-child(2) { left: 24%; background: var(--tch-secondary); animation-delay: 180ms; }
.rsvp-thanks__confetti-piece:nth-child(3) { left: 38%; background: var(--tch-primary); animation-delay: 320ms; }
.rsvp-thanks__confetti-piece:nth-child(4) { left: 52%; background: var(--tch-accent); animation-delay: 460ms; }
.rsvp-thanks__confetti-piece:nth-child(5) { left: 64%; background: var(--tch-secondary); animation-delay: 620ms; }
.rsvp-thanks__confetti-piece:nth-child(6) { left: 76%; background: var(--tch-primary); animation-delay: 780ms; }
.rsvp-thanks__confetti-piece:nth-child(7) { left: 86%; background: var(--tch-accent); animation-delay: 940ms; }
.rsvp-thanks__confetti-piece:nth-child(8) { left: 18%; background: var(--tch-secondary); animation-delay: 1080ms; }

@keyframes rsvp-thanks-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(120vh) rotate(540deg); opacity: 0; }
}

.rsvp-thanks__content {
  position: relative;
  z-index: 1;
  max-width: 540px;
  text-align: center;
}

.rsvp-thanks__check {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-md);
  color: var(--tch-secondary);
}

.rsvp-thanks__check svg {
  width: 100%;
  height: 100%;
}

.rsvp-thanks__check-circle {
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  animation: rsvp-thanks-check-circle 600ms var(--ease-out-expo) 200ms forwards;
}

.rsvp-thanks__check-mark {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: rsvp-thanks-check-mark 400ms var(--ease-out-expo) 700ms forwards;
}

@keyframes rsvp-thanks-check-circle {
  to { stroke-dashoffset: 0; }
}

@keyframes rsvp-thanks-check-mark {
  to { stroke-dashoffset: 0; }
}

.rsvp-thanks__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--tch-primary);
  margin-bottom: var(--space-sm);
  opacity: 0;
  animation: rsvp-thanks-fade-up 700ms var(--ease-out-expo) 900ms forwards;
}

.rsvp-thanks__subtitle {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--tch-text);
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: rsvp-thanks-fade-up 700ms var(--ease-out-expo) 1100ms forwards;
}

.rsvp-thanks__subtitle strong {
  color: var(--tch-primary);
  font-weight: 600;
}

@keyframes rsvp-thanks-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.rsvp-thanks__back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--tch-text-muted);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  transition: background 0.2s var(--ease-out-expo), color 0.2s var(--ease-out-expo);
  opacity: 0;
  animation: rsvp-thanks-fade-up 700ms var(--ease-out-expo) 1300ms forwards;
}

.rsvp-thanks__back-link:hover {
  background: color-mix(in srgb, var(--tch-primary) 6%, transparent);
  color: var(--tch-primary);
}

/* ─── Bloc parrainage post-RSVP — discret, zéro pression ──────────── */
.rsvp-thanks__referral {
  margin-top: var(--space-2xl);
  width: 100%;
  max-width: 580px;
  background: var(--tch-surface);
  border-radius: 20px;
  border: 1px solid var(--tch-border);
  box-shadow: 0 24px 60px -24px rgba(30, 42, 90, 0.12);
  opacity: 0;
  animation: rsvp-thanks-fade-up 800ms var(--ease-out-expo) 1500ms forwards;
}

.rsvp-thanks__referral-inner {
  padding: var(--space-lg);
  text-align: center;
}

.rsvp-thanks__referral-eyebrow {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tch-accent);
  margin-bottom: var(--space-xs);
}

.rsvp-thanks__referral-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.3;
  color: var(--tch-primary);
  margin-bottom: var(--space-sm);
}

.rsvp-thanks__referral-title span {
  font-style: italic;
  color: var(--tch-accent);
}

.rsvp-thanks__referral-text {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--tch-text-muted);
  margin-bottom: var(--space-md);
}

.rsvp-thanks__referral-text strong {
  color: var(--tch-primary);
  font-weight: 600;
}

.rsvp-thanks__referral-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  background: var(--tch-bg);
  border: 1px dashed var(--tch-accent);
  border-radius: 12px;
  margin-bottom: var(--space-md);
}

.rsvp-thanks__referral-code code {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--tch-primary);
}

.rsvp-thanks__referral-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--tch-surface);
  border: 1px solid var(--tch-border);
  border-radius: 8px;
  color: var(--tch-text-muted);
  cursor: pointer;
  transition: all 0.2s var(--ease-out-expo);
}

.rsvp-thanks__referral-copy:hover {
  background: var(--tch-accent);
  color: #fff;
  border-color: var(--tch-accent);
}

.rsvp-thanks__referral-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: #fff;
  background: var(--tch-primary);
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s var(--ease-out-expo), transform 0.2s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo);
}

.rsvp-thanks__referral-cta:hover {
  background: var(--tch-primary-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(30, 42, 90, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .rsvp-thanks__confetti-piece,
  .rsvp-thanks__check-circle,
  .rsvp-thanks__check-mark,
  .rsvp-thanks__title,
  .rsvp-thanks__subtitle,
  .rsvp-thanks__back-link,
  .rsvp-thanks__referral {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
  .rsvp-thanks__confetti-piece { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   TOGGLE D'URGENCE — Bandeau "inscriptions fermées" landing publique
   Affiché en haut de page si SystemSetting landing.accept_new_projects = false.
   Form §2 et CTAs tarifs désactivés visuellement quand le toggle est OFF.
   ═════════════════════════════════════════════════════════════════════════════ */
.landing-closed-banner {
  position: relative;
  z-index: 200;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tch-warning) 14%, var(--tch-surface)) 0%, var(--tch-surface) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--tch-warning) 35%, transparent);
}

.landing-closed-banner__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 14px var(--space-md);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--tch-text);
}

.landing-closed-banner i {
  color: var(--tch-warning);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.landing-closed-banner strong {
  display: block;
  color: var(--tch-primary);
  font-weight: 700;
  margin-bottom: 2px;
}

.landing-closed-banner p {
  margin: 0;
  color: var(--tch-text-muted);
}

/* ═════════════════════════════════════════════════════════════════════════════
   BANDEAU PARRAINAGE — Affiché quand un code de parrainage est en session
   (visiteur arrivé via /r/{code}). Rassure que l'avantage du couple parrain
   est conservé jusqu'au brief. Carnegie P11 (respect), P28 (réputation à
   mériter pour le parrain), §8.2 (aucune pression, aucun timer).

   La nav .tch-nav est position:fixed top:0 z-index:100. Pour cohabiter sans
   se chevaucher, le bandeau est lui aussi fixed top:0 mais avec un z-index
   plus élevé. La nav reçoit un top dynamique égal à la hauteur du bandeau,
   et le body un padding-top compensé — uniquement lorsque body porte la
   classe .has-referral-banner (ajoutée server-side dans base_public.html.twig
   quand activeReferralCode est défini).
   ═════════════════════════════════════════════════════════════════════════════ */
:root {
  --referral-banner-height: 48px;
}

@media (max-width: 640px) {
  :root {
    --referral-banner-height: 68px;
  }
}

.landing-referral-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  min-height: var(--referral-banner-height);
  display: flex;
  align-items: center;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tch-accent) 18%, var(--tch-surface)) 0%,
    color-mix(in srgb, var(--tch-accent) 8%, var(--tch-surface)) 100%
  );
  border-bottom: 1px solid color-mix(in srgb, var(--tch-accent) 45%, transparent);
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--tch-accent) 60%, transparent);
}

/* Décalage de la nav et du contenu uniquement quand le bandeau est présent. */
body.has-referral-banner .tch-nav {
  top: var(--referral-banner-height);
}

body.has-referral-banner {
  padding-top: var(--referral-banner-height);
}

.landing-referral-banner__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 12px var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--tch-text);
}

.landing-referral-banner__icon {
  color: var(--tch-accent);
  font-size: 1rem;
  flex-shrink: 0;
}

.landing-referral-banner__text {
  margin: 0;
  color: color-mix(in srgb, var(--tch-primary) 88%, transparent);
}

.landing-referral-banner__code {
  font-family: var(--font-display, "Cormorant Garamond", "Playfair Display", serif);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tch-primary);
  background: color-mix(in srgb, var(--tch-bg) 80%, transparent);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px dashed color-mix(in srgb, var(--tch-accent) 55%, transparent);
}

/* Form de capture brief désactivé visuellement */
.personal-address__form.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
.personal-address__form.is-disabled input {
  background: color-mix(in srgb, var(--tch-text-muted) 8%, var(--tch-bg));
  cursor: not-allowed;
}
.personal-address__submit:disabled {
  background: color-mix(in srgb, var(--tch-text-muted) 50%, var(--tch-surface));
  cursor: not-allowed;
}
.personal-address__submit:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* =================================================================
   Page paiement Mobile Money manuel - instructions + preuve
   ================================================================= */

/* Mobile-first : padding réduit sur petits écrans, élargi au-delà.
   Conformité UX.md mobile-first obsession (375px → 414px → 1440px). */
.pay-instructions {
  min-height: 80vh;
  background: var(--tch-bg);
  padding: clamp(1rem, 4vw, 2.5rem) clamp(0.75rem, 3vw, 1.5rem);
}

.pay-instructions__container {
  max-width: 720px;
  margin: 0 auto;
  background: var(--tch-surface);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(30, 42, 90, 0.08);
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.pay-instructions__header {
  text-align: center;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.pay-instructions__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--tch-accent);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

/* Variante succès — fond émeraude doux pour signaler l'enregistrement réussi.
   Couleur d'accomplissement (UX.md) : pas de rouge, pas de orange — vert calme. */
.pay-instructions__eyebrow--success {
  padding: 6px 14px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--tch-secondary) 10%, transparent);
  color: var(--tch-secondary);
}
.pay-instructions__eyebrow--success i { font-size: 0.85rem; }

.pay-instructions__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--tch-primary);
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  line-height: 1.2;
  margin: 0 0 var(--space-xs);
}

.pay-instructions__subtitle {
  color: var(--tch-text-muted);
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  line-height: 1.5;
  margin: 0;
}

.pay-instructions__flash {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: var(--space-md);
  font-size: 0.95rem;
}

.pay-instructions__flash--error {
  background: rgba(220, 38, 38, 0.08);
  color: var(--tch-error);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.pay-instructions__flash--success {
  background: rgba(31, 122, 92, 0.08);
  color: var(--tch-success);
  border: 1px solid rgba(31, 122, 92, 0.2);
}

.pay-instructions__amount-card {
  background: linear-gradient(135deg, var(--tch-primary), color-mix(in srgb, var(--tch-primary) 70%, var(--tch-accent)));
  color: #fff;
  padding: clamp(1rem, 3vw, 1.5rem);
  border-radius: 14px;
  text-align: center;
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

.pay-instructions__amount-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  opacity: 0.85;
  margin-bottom: 6px;
}

.pay-instructions__amount-value {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  font-weight: 600;
  line-height: 1.1;
}

.pay-instructions__steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0 0 var(--space-xl);
}

.pay-instructions__steps li {
  counter-increment: step;
  position: relative;
  padding: var(--space-md) 0 var(--space-md) 60px;
  border-bottom: 1px solid color-mix(in srgb, var(--tch-text-muted) 18%, transparent);
}

.pay-instructions__steps li:last-child {
  border-bottom: none;
}

.pay-instructions__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: var(--space-md);
  width: 38px;
  height: 38px;
  background: var(--tch-accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
}

.pay-instructions__operator {
  display: block;
  margin-top: 4px;
  color: var(--tch-text-muted);
  font-size: 0.9rem;
}

.pay-instructions__momo-block {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding: 12px 16px;
  background: var(--tch-bg);
  border-radius: 10px;
  border: 1px dashed var(--tch-accent);
}

.pay-instructions__momo-number {
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--tch-primary);
  letter-spacing: 0.05em;
}

.pay-instructions__copy-btn {
  margin-left: auto;
  background: var(--tch-primary);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s;
}

.pay-instructions__copy-btn:hover {
  background: color-mix(in srgb, var(--tch-primary) 80%, #000);
}

.pay-instructions__copy-btn.is-copied {
  background: var(--tch-success);
}

.pay-instructions__proof {
  background: var(--tch-bg);
  padding: var(--space-lg);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--tch-accent) 25%, transparent);
}

.pay-instructions__proof-title {
  margin: 0 0 var(--space-md);
  color: var(--tch-primary);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
}

.pay-instructions__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid color-mix(in srgb, var(--tch-text-muted) 18%, transparent);
}

.pay-instructions__tab {
  background: transparent;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--tch-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s;
}

.pay-instructions__tab.is-active {
  color: var(--tch-primary);
  border-bottom-color: var(--tch-accent);
  font-weight: 600;
}

.pay-instructions__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pay-instructions__form.is-hidden {
  display: none;
}

.pay-instructions__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pay-instructions__field-label {
  font-size: 0.9rem;
  color: var(--tch-text);
  font-weight: 500;
}

.pay-instructions__field input[type="file"],
.pay-instructions__field input[type="text"] {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--tch-text-muted) 30%, transparent);
  border-radius: 10px;
  font-size: 1rem;
  background: var(--tch-surface);
  color: var(--tch-text);
}

.pay-instructions__field input:focus {
  outline: none;
  border-color: var(--tch-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tch-accent) 15%, transparent);
}

.pay-instructions__submit {
  background: var(--tch-primary);
  color: #fff;
  border: none;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.pay-instructions__submit:hover {
  background: color-mix(in srgb, var(--tch-primary) 80%, #000);
  transform: translateY(-1px);
}

.pay-instructions__status {
  padding: 16px 20px;
  border-radius: 10px;
  text-align: center;
  background: var(--tch-bg);
  color: var(--tch-text);
}

.pay-instructions__help {
  margin-top: var(--space-lg);
  text-align: center;
  font-size: 0.9rem;
  color: var(--tch-text-muted);
}

.pay-instructions__help a {
  color: var(--tch-primary);
  text-decoration: underline;
}

/* ─── Sous-titre du montant ─── */
.pay-instructions__amount-help {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}

/* ─── Réduction code promo : prix initial barré + ligne d'économie ─── */
.pay-instructions__amount-original {
  display: block;
  margin-top: 8px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}
.pay-instructions__amount-original s {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
}
/* Badge code promo — mobile-first.
   L'ancienne version utilisait inline-flex + border-radius: 999px (pill) qui
   forçait le texte long « Code X appliqué — économie de N FCFA » à wrapper
   chaotiquement à l'intérieur d'une ellipse étroite. On bascule en block
   avec un radius modéré et un line-height respirable pour la lecture mobile.
   Le pill compact ne revient qu'en desktop si le texte tient sur une ligne. */
.pay-instructions__amount-discount {
  display: block;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(198, 161, 91, 0.18);
  border: 1px solid rgba(198, 161, 91, 0.45);
  border-radius: 12px;
  color: var(--tch-accent, #C6A15B);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}
.pay-instructions__amount-discount i {
  font-size: 0.92rem;
  margin-right: 6px;
  vertical-align: -1px;
}
.pay-instructions__amount-discount strong {
  font-weight: 700;
  white-space: nowrap;
}

@media (min-width: 600px) {
  .pay-instructions__amount-discount {
    text-align: center;
  }
}

/* ─── Page proof_received : ligne dédiée code promo ─── */
.pay-thanks__row--discount .pay-thanks__value {
  color: var(--tch-secondary, #1F7A5C);
  font-weight: 600;
}
.pay-thanks__row--discount small {
  color: rgba(0, 0, 0, 0.55);
  font-weight: 400;
  margin-left: 6px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   PAY OPTIONS — 2 voies parallèles côté paiement (mobile-first)
   ─────────────────────────────────────────────────────────────────────────────
   Carnegie Levier B (autonomie, P25) : le couple choisit, on ne lui impose
   pas. Voie rapide (Mobile Money direct) à côté de voie accompagnée (appel).
   Mobile : empilées (lisibilité + thumb-zone). Desktop : côte à côte au-delà
   de 720px (espace disponible suffisant pour 2 cartes lisibles).
   ═════════════════════════════════════════════════════════════════════════════ */

/* Colonne unique centrée (parcours de paiement focalisé, mobile-first et
   impeccable sur desktop) : la voie rapide d'abord, la voie accompagnée
   ensuite — pas de seconde colonne vide qui déséquilibre l'écran large. */
.pay-options {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2.5vw, 1.25rem);
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}

.pay-options__card {
  background: var(--tch-surface);
  border: 1px solid color-mix(in srgb, var(--tch-text-muted) 14%, transparent);
  border-radius: 14px;
  padding: clamp(1rem, 3vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.pay-options__card--momo {
  border-color: color-mix(in srgb, var(--tch-accent) 40%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tch-accent) 4%, var(--tch-surface)) 0%,
    var(--tch-surface) 60%);
  box-shadow: 0 12px 32px -22px color-mix(in srgb, var(--tch-accent) 60%, transparent);
}

.pay-options__card--call {
  border-color: color-mix(in srgb, var(--tch-primary) 18%, transparent);
}

.pay-options__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pay-options__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.pay-options__chip--gold {
  background: color-mix(in srgb, var(--tch-accent) 14%, transparent);
  color: color-mix(in srgb, var(--tch-accent) 90%, #6a4f1f);
}

.pay-options__chip--indigo {
  background: color-mix(in srgb, var(--tch-primary) 10%, transparent);
  color: var(--tch-primary);
}

.pay-options__title {
  /* Inter sans-serif pour lisibilité mobile : le y de Cormorant se confond
     avec un v sur petit écran (descender courbe peu différencié). Cormorant
     reste pour les titres ornementaux (H1 « Vous avez choisi… »), pas pour
     les libellés utilitaires des cards d'action. */
  font-family: 'Inter', 'Source Sans Pro', system-ui, sans-serif;
  font-size: clamp(1.05rem, 3.2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--tch-primary);
  margin: 0;
  line-height: 1.3;
}

.pay-options__lede {
  font-size: clamp(0.88rem, 2.4vw, 0.95rem);
  color: var(--tch-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* Bloc numéro + montant — typo monospace pour lisibilité chiffres */
.pay-options__momo {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.85rem;
  background: var(--tch-bg);
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--tch-accent) 50%, transparent);
}

.pay-options__momo-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pay-options__momo-label {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tch-text-muted);
  font-weight: 500;
}

.pay-options__momo-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pay-options__momo-number,
.pay-options__momo-amount {
  font-family: 'Courier New', monospace;
  font-size: clamp(1.05rem, 3.5vw, 1.25rem);
  font-weight: 700;
  color: var(--tch-primary);
  letter-spacing: 0.04em;
  user-select: all;
  flex-grow: 1;
  word-break: break-all;
}

/* Bouton Copier : touch target ≥ 44×44px (Loi Fitts mobile) */
.pay-options__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  background: var(--tch-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  font-family: inherit;
}

.pay-options__copy:hover {
  background: color-mix(in srgb, var(--tch-primary) 85%, #000);
}

.pay-options__copy:active {
  transform: scale(0.97);
}

.pay-options__copy.is-copied {
  background: var(--tch-secondary);
}

.pay-options__copy i { font-size: 0.85rem; }

/* Étapes : liste ordonnée numérotée, compacte mobile */
.pay-options__steps {
  list-style: decimal;
  padding-left: 1.15rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: clamp(0.88rem, 2.4vw, 0.95rem);
  line-height: 1.55;
  color: var(--tch-text);
}

.pay-options__steps li::marker {
  color: var(--tch-accent);
  font-weight: 600;
}

.pay-options__steps strong { color: var(--tch-primary); font-weight: 600; }

/* CTA WhatsApp — preuve de paiement.
   Le numéro Mobile Money est aussi notre WhatsApp : on amène le client
   directement dans une conversation pré-rédigée pour qu'il envoie la capture.
   Vert WhatsApp officiel (#25D366) pour reconnaissance instantanée. */
.pay-options__wa-cta {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.5vw, 14px);
  padding: clamp(14px, 3.5vw, 18px) clamp(16px, 4vw, 20px);
  margin: 0;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #FFFFFF;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.28);
  transition: transform 200ms ease, box-shadow 200ms ease;
  min-height: 56px;
}

.pay-options__wa-cta:hover,
.pay-options__wa-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.36);
  color: #FFFFFF;
  text-decoration: none;
  outline: none;
}

.pay-options__wa-cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.65), 0 10px 24px rgba(37, 211, 102, 0.36);
}

.pay-options__wa-cta > .fa-whatsapp {
  font-size: clamp(1.5rem, 5vw, 1.85rem);
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

.pay-options__wa-cta-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.pay-options__wa-cta-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(0.95rem, 3.6vw, 1.05rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.005em;
}

.pay-options__wa-cta-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(0.74rem, 2.9vw, 0.82rem);
  font-weight: 400;
  line-height: 1.35;
  opacity: 0.92;
}

.pay-options__wa-cta-arrow {
  font-size: 0.95rem;
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform 200ms ease;
}

.pay-options__wa-cta:hover .pay-options__wa-cta-arrow,
.pay-options__wa-cta:focus-visible .pay-options__wa-cta-arrow {
  transform: translateX(3px);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pay-options__wa-cta,
  .pay-options__wa-cta-arrow {
    transition: none;
  }
  .pay-options__wa-cta:hover,
  .pay-options__wa-cta:focus-visible {
    transform: none;
  }
  .pay-options__wa-cta:hover .pay-options__wa-cta-arrow,
  .pay-options__wa-cta:focus-visible .pay-options__wa-cta-arrow {
    transform: none;
  }
}

/* Réassurance — Carnegie §4.2 microcopy de réassurance */
.pay-options__reassure {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0.7rem 0.85rem;
  margin: 0;
  background: color-mix(in srgb, var(--tch-secondary) 6%, var(--tch-bg));
  border-left: 3px solid var(--tch-secondary);
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--tch-text);
}

.pay-options__reassure i {
  color: var(--tch-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   ORDER CONFIRMED — Sans friction, chemin clair en 3 temps
   Le client vient juste d'enregistrer sa commande ; on rassure sans demander.
   ═════════════════════════════════════════════════════════════════════════════ */
.order-confirmed {
  margin: var(--space-lg) 0 var(--space-md);
}

.order-confirmed__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--tch-primary);
  font-size: 1.45rem;
  font-weight: 600;
  margin: 0 0 var(--space-md);
  text-align: center;
}

.order-confirmed__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.order-confirmed__step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 1rem 1.1rem;
  background: var(--tch-bg);
  border-radius: 14px;
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}
.order-confirmed__step:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -14px rgba(30, 42, 90, 0.18);
}

.order-confirmed__step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tch-accent) 0%, color-mix(in srgb, var(--tch-accent) 70%, #8b6a36) 100%);
  color: #fff;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--tch-accent) 55%, transparent);
}

.order-confirmed__step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.5;
}
.order-confirmed__step-body strong {
  color: var(--tch-primary);
  font-size: 0.98rem;
  font-weight: 600;
}
.order-confirmed__step-body span {
  color: var(--tch-text-muted);
  font-size: 0.88rem;
}

/* Encart rassurance — délai d'appel */
.order-confirmed__reassure {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.9rem 1.1rem;
  background: color-mix(in srgb, var(--tch-secondary) 8%, var(--tch-surface));
  border-left: 3px solid var(--tch-secondary);
  border-radius: 10px;
  margin: var(--space-md) 0;
}
.order-confirmed__reassure i {
  font-size: 1.1rem;
  color: var(--tch-secondary);
  flex-shrink: 0;
}
.order-confirmed__reassure p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--tch-text);
  line-height: 1.5;
}
.order-confirmed__reassure strong {
  color: var(--tch-primary);
  font-weight: 600;
}

/* Pledge — Carnegie P19 (mobiles élevés). Citation visuelle qui valorise
   l'engagement mutuel sans tomber dans le pathos. */
.order-confirmed__pledge {
  margin: var(--space-md) 0;
  padding: 1.4rem 1.5rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tch-accent) 6%, var(--tch-bg)) 0%,
    var(--tch-bg) 100%);
  border-radius: 14px;
  position: relative;
}
.order-confirmed__pledge::before {
  content: '“';
  position: absolute;
  top: 0;
  left: 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--tch-accent);
  opacity: 0.35;
}
.order-confirmed__pledge p {
  margin: 0;
  padding-left: 1.5rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--tch-primary);
  font-style: italic;
}
.order-confirmed__pledge strong {
  font-style: normal;
  font-weight: 600;
  color: var(--tch-primary);
}

/* Témoignage micro — Cialdini preuve sociale forte (prénoms + date) */
.order-confirmed__testimonial {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: var(--space-md) 0 0;
  padding: 1.2rem 1.3rem;
  background: var(--tch-surface);
  border-left: 3px solid var(--tch-accent);
  border-radius: 12px;
  box-shadow: 0 8px 24px -18px rgba(30, 42, 90, 0.18);
}
.order-confirmed__testimonial-stars {
  display: flex;
  gap: 3px;
  font-size: 0.78rem;
  color: var(--tch-accent);
}
.order-confirmed__testimonial blockquote {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--tch-primary);
}
.order-confirmed__testimonial figcaption {
  display: flex;
  flex-direction: column;
}
.order-confirmed__testimonial figcaption span {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--tch-primary);
}
.order-confirmed__testimonial figcaption small {
  font-size: 0.78rem;
  color: var(--tch-text-muted);
}

/* Subtitle : le nom du couple en accent (Carnegie P6, rappel nominal) */
.pay-instructions__subtitle strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--tch-primary);
  font-style: normal;
}

/* Bouton retour accueil : voie de sortie sobre, pas un CTA agressif */
.order-confirmed__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-md);
}
.order-confirmed__home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--tch-surface);
  color: var(--tch-primary);
  border: 1.5px solid var(--tch-border);
  border-radius: 100px;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.25s var(--ease-out-expo),
              color 0.25s var(--ease-out-expo),
              transform 0.25s var(--ease-out-expo);
}
.order-confirmed__home:hover {
  border-color: var(--tch-accent);
  color: var(--tch-accent);
  transform: translateX(-2px);
}
.order-confirmed__home i {
  font-size: 0.75rem;
  transition: transform 0.25s var(--ease-out-expo);
}
.order-confirmed__home:hover i { transform: translateX(-3px); }

@media (prefers-reduced-motion: reduce) {
  .order-confirmed__home,
  .order-confirmed__home i { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .order-confirmed__step { transition: none; }
}

/* Page de remerciement après envoi de preuve */
.pay-thanks {
  min-height: 80vh;
  background: var(--tch-bg);
  padding: var(--space-xl) var(--space-md);
}

.pay-thanks__container {
  max-width: 560px;
  margin: 0 auto;
  background: var(--tch-surface);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(30, 42, 90, 0.08);
  padding: var(--space-xl);
  text-align: center;
}

.pay-thanks__icon {
  margin: 0 auto var(--space-lg);
  width: 64px;
  height: 64px;
}

.pay-thanks__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--tch-primary);
  font-size: 2rem;
  margin: 0 0 var(--space-md);
}

.pay-thanks__lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--tch-text-muted);
  margin-bottom: var(--space-lg);
}

.pay-thanks__details {
  background: var(--tch-bg);
  padding: var(--space-md);
  border-radius: 12px;
  margin-bottom: var(--space-lg);
}

.pay-thanks__row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tch-text-muted) 15%, transparent);
}

.pay-thanks__row:last-child {
  border-bottom: none;
}

.pay-thanks__label {
  color: var(--tch-text-muted);
  font-size: 0.9rem;
}

.pay-thanks__value {
  color: var(--tch-primary);
  font-weight: 600;
}

.pay-thanks__help {
  font-size: 0.9rem;
  color: var(--tch-text-muted);
  margin: 0;
}

/* =================================================================
   Ancrage de valeur — leviers landing pricing
   1) Bandeau « 1-3 % du budget mariage »
   2) Bloc « Ce qu'il y a vraiment dedans » dans les pricing-card
   3) Tableau comparatif Tchefon vs carton imprimé
   ================================================================= */

/* ─────────────────────────────────────────────────────────────────────────
   BUDGET ANCHOR — Ancrage budgétaire éditorial avec sceau or
   ───────────────────────────────────────────────────────────────────────── */

.budget-anchor {
  max-width: 780px;
  margin: 0 auto 3rem;
  padding: 1.5rem 2rem;
  background:
    linear-gradient(135deg, #FFFFFF 0%, color-mix(in srgb, var(--tch-bg) 75%, #FFFFFF) 100%);
  border: 1px solid color-mix(in srgb, var(--tch-accent) 22%, transparent);
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 16px 36px -24px rgba(30, 42, 90, 0.18);
  position: relative;
}
.budget-anchor::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--tch-accent) 8%, transparent);
  pointer-events: none;
}
.budget-anchor__mark {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--tch-accent) 55%, #FFFFFF) 0%, var(--tch-accent) 70%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 10px 22px -10px rgba(198, 161, 91, 0.55);
}
.budget-anchor__mark i {
  font-size: 1.45rem;
}
.budget-anchor__copy {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tch-text);
  flex: 1;
}
.budget-anchor__copy strong {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  font-style: italic;
  color: var(--tch-primary);
  letter-spacing: -0.005em;
  margin-bottom: 0.3rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   BREAKDOWN « Ce qu'il y a vraiment dedans » — Carte interne raffinée
   ───────────────────────────────────────────────────────────────────────── */

.pricing-card__breakdown {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1.2rem 1.1rem;
  background: color-mix(in srgb, var(--tch-bg) 45%, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--tch-accent) 16%, transparent);
  border-radius: 14px;
  text-align: left;
  position: relative;
}

.pricing-card__breakdown-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--tch-accent);
  margin-bottom: 0.9rem;
  text-align: center;
}
.pricing-card__breakdown-ornament {
  display: inline-block;
  width: 14px;
  height: 1px;
  background: color-mix(in srgb, var(--tch-accent) 60%, transparent);
}

.pricing-card__breakdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pricing-card__breakdown li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.86rem;
  color: var(--tch-text);
  line-height: 1.5;
}

.pricing-card__breakdown li i {
  color: var(--tch-accent);
  width: 14px;
  text-align: center;
  margin-top: 0.2rem;
  flex-shrink: 0;
  font-size: 0.78rem;
}

.pricing-card--featured .pricing-card__breakdown {
  background: color-mix(in srgb, var(--tch-accent) 6%, #FFFFFF);
  border-color: color-mix(in srgb, var(--tch-accent) 28%, transparent);
}
.pricing-card--featured .pricing-card__breakdown-title {
  color: var(--tch-primary);
}
.pricing-card--featured .pricing-card__breakdown-ornament {
  background: color-mix(in srgb, var(--tch-primary) 50%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────────
   TABLEAU COMPARATIF — Refonte design éditorial.
   Header avec colonne Tchefon mise en lumière (gradient or doux),
   typographie Cormorant Garamond pour les noms de colonnes, lignes
   alternées discrètes, icônes cerclées subtiles, hover de ligne fluide.
   ───────────────────────────────────────────────────────────────────────── */

.value-area__title em {
  font-style: italic;
  color: var(--tch-accent);
  font-weight: 500;
}

.value-table {
  max-width: 1040px;
  margin: 0 auto 0;
  background: #FFFFFF;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 26px 60px -30px rgba(30, 42, 90, 0.25),
    0 8px 24px -16px rgba(30, 42, 90, 0.12);
  border: 1px solid color-mix(in srgb, var(--tch-primary) 6%, transparent);
}

.value-table__header {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.05fr;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tch-primary) 96%, #000) 0%, var(--tch-primary) 100%);
  position: relative;
}

.value-table__header::after {
  /* Filet or sous le header — détail luxueux */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--tch-accent) 30%, transparent) 30%,
    var(--tch-accent) 65%,
    color-mix(in srgb, var(--tch-accent) 80%, transparent) 100%);
}

.value-table__header .value-table__cell {
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #FFFFFF;
  gap: 0.25rem;
}

.value-table__header .value-table__cell--feature {
  background: rgba(0, 0, 0, 0.08);
}

.value-table__header .value-table__cell--paper {
  opacity: 0.78;
}

.value-table__header .value-table__cell--digital {
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--tch-accent) 35%, transparent) 0%, transparent 70%);
  position: relative;
}

.value-table__col-eyebrow {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.45rem;
}

.value-table__header .value-table__cell--digital .value-table__col-eyebrow {
  color: var(--tch-accent);
}

.value-table__col-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.65rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: #FFFFFF;
  font-style: italic;
}

.value-table__col-price {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 0.25rem;
}

.value-table__header .value-table__cell--digital .value-table__col-price {
  color: rgba(255, 255, 255, 0.95);
}

.value-table__row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.05fr;
  border-top: 1px solid color-mix(in srgb, var(--tch-primary) 6%, transparent);
  position: relative;
  transition: background 220ms ease-out;
}

.value-table__row:nth-child(even) {
  background: color-mix(in srgb, var(--tch-bg) 35%, #FFFFFF);
}

/* Colonne Tchefon mise en relief sur toute la hauteur */
.value-table__row .value-table__cell--digital {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tch-accent) 5%, transparent) 0%, color-mix(in srgb, var(--tch-accent) 7%, transparent) 100%);
  position: relative;
}
.value-table__row:nth-child(even) .value-table__cell--digital {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tch-accent) 9%, transparent) 0%, color-mix(in srgb, var(--tch-accent) 11%, transparent) 100%);
}

.value-table__row:hover {
  background: color-mix(in srgb, var(--tch-bg) 55%, #FFFFFF);
}
.value-table__row:hover .value-table__cell--digital {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tch-accent) 14%, transparent) 0%, color-mix(in srgb, var(--tch-accent) 18%, transparent) 100%);
}

.value-table__row .value-table__cell {
  padding: 1.15rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--tch-text);
}

.value-table__row .value-table__cell--feature {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--tch-primary);
  background: color-mix(in srgb, var(--tch-bg) 30%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--tch-primary) 6%, transparent);
}

.value-table__row .value-table__cell--paper {
  color: color-mix(in srgb, var(--tch-text) 85%, #6b7280);
}

.value-table__cell span {
  flex: 1;
  color: inherit;
}

/* Icônes cerclées — plus de présence visuelle, moins d'agressivité */
.value-table__yes,
.value-table__no {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.78rem;
}

.value-table__yes {
  color: var(--tch-secondary);
  background: color-mix(in srgb, var(--tch-secondary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tch-secondary) 28%, transparent);
}

.value-table__no {
  color: color-mix(in srgb, var(--tch-primary) 30%, #9CA3AF);
  background: color-mix(in srgb, var(--tch-primary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--tch-primary) 8%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────────
   CONCLUSION — Citation éditoriale entre deux filets or
   ───────────────────────────────────────────────────────────────────────── */

.value-conclusion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  margin: 3.5rem auto 0;
  max-width: 720px;
  padding: 0 1.5rem;
  text-align: center;
}

.value-conclusion__rule {
  display: block;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--tch-accent) 50%, transparent 100%);
  position: relative;
}
.value-conclusion__rule::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tch-accent);
  transform: translate(-50%, -50%);
}

.value-conclusion__quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: color-mix(in srgb, var(--tch-text) 70%, #6b7280);
  margin: 0;
  letter-spacing: -0.005em;
}

.value-conclusion__quote strong {
  display: inline-block;
  font-weight: 600;
  font-style: italic;
  color: var(--tch-primary);
  margin-top: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
  .value-table__row { transition: none; }
}

@media (max-width: 767.98px) {
  .value-table__header {
    grid-template-columns: 1fr 1fr;
  }
  .value-table__header .value-table__cell--feature {
    display: none;
  }
  .value-table__header .value-table__cell {
    padding: 1.25rem 1rem;
  }
  .value-table__col-title { font-size: 1.35rem; }

  .value-table__row {
    grid-template-columns: 1fr;
    padding: 0.5rem 0;
    border-top: 1px solid color-mix(in srgb, var(--tch-primary) 8%, transparent);
  }
  .value-table__row .value-table__cell {
    padding: 0.7rem 1.1rem;
    font-size: 0.9rem;
  }
  .value-table__row .value-table__cell--feature {
    background:
      linear-gradient(180deg, var(--tch-primary), color-mix(in srgb, var(--tch-primary) 88%, #000));
    color: #FFFFFF;
    font-size: 1rem;
    padding: 0.85rem 1.1rem;
    border-right: none;
  }
  .value-table__row .value-table__cell--paper::before {
    content: 'Carton imprimé';
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tch-text-muted);
    margin-right: 0.5rem;
  }
  .value-table__row .value-table__cell--digital::before {
    content: 'Tchefon';
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tch-accent);
    margin-right: 0.5rem;
  }
  .value-conclusion__quote {
    font-size: 1.45rem;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PRICING — RÉASSURANCE PAR CARTE (microcopy sous CTA).
   ═════════════════════════════════════════════════════════════════════════════ */

.pricing-card__reassurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--tch-text-muted);
  text-align: center;
}

.pricing-card__reassurance i {
  font-size: 0.7rem;
  color: var(--tch-secondary);
}

/* ═════════════════════════════════════════════════════════════════════════════
   PRICING — RÉASSURANCE (garantie chiffrée + badges paiement local).
   Foundry CRO 2026 : badges sécurité près du CTA = -32% abandon.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   PILIERS DE RÉASSURANCE — Trois cartes éditoriales avec icône cerclée
   ───────────────────────────────────────────────────────────────────────── */

.pricing-reassurance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2.5rem auto 0;
  max-width: 1020px;
}

.pricing-reassurance__pillar {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 1.4rem;
  background: #FFFFFF;
  border: 1px solid color-mix(in srgb, var(--tch-primary) 8%, transparent);
  border-radius: 16px;
  box-shadow: 0 18px 36px -28px rgba(30, 42, 90, 0.22);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease-out;
  position: relative;
}

.pricing-reassurance__pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.4rem;
  right: 1.4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--tch-accent) 50%, transparent) 50%, transparent 100%);
}

.pricing-reassurance__pillar:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -28px rgba(30, 42, 90, 0.3);
}

.pricing-reassurance__icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tch-secondary);
  background: color-mix(in srgb, var(--tch-secondary) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--tch-secondary) 18%, transparent);
}

.pricing-reassurance__icon i { font-size: 1.05rem; }

.pricing-reassurance__copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pricing-reassurance__copy strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  font-style: italic;
  color: var(--tch-primary);
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.pricing-reassurance__copy span {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--tch-text);
}

@media (prefers-reduced-motion: reduce) {
  .pricing-reassurance__pillar { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   BADGES DE PAIEMENT — Chips raffinés, séparateurs filets or
   ───────────────────────────────────────────────────────────────────────── */

.pricing-payment-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem auto 0;
  max-width: 820px;
  padding: 0 1rem;
}

.pricing-payment-badges__rule {
  display: block;
  width: 80%;
  max-width: 460px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--tch-accent) 45%, transparent) 50%, transparent 100%);
}

.pricing-payment-badges__title {
  font-size: 0.72rem;
  color: var(--tch-text-muted);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.pricing-payment-badges__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.pricing-payment-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #FFFFFF;
  color: var(--tch-primary);
  border: 1px solid color-mix(in srgb, var(--tch-primary) 12%, transparent);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 14px -10px rgba(30, 42, 90, 0.2);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease-out;
}
.pricing-payment-badge:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tch-accent) 35%, transparent);
}

@media (max-width: 767.98px) {
  .pricing-reassurance {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .pricing-payment-badges__list {
    gap: 0.45rem;
  }
  .pricing-payment-badge {
    font-size: 0.78rem;
    padding: 0.4rem 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-payment-badge { transition: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   SECTION 6-bis — TRANSFORMATION (BAB framework).
   frameworks-copywriting-tchefon.md §3.3.
   ═════════════════════════════════════════════════════════════════════════════ */

/* « Le passage » — BAB cinematique avec dramatisation Avant/Apres.
   Avant volontairement plus terne (gris ardoise, sans cartouches).
   Apres lumineux (parchemin or, 4 cartouches, halo interieur). */
.transformation {
    position: relative;
    padding: clamp(48px, 8vw, 120px) 0;
    background: var(--tch-bg);
    overflow: hidden;
    isolation: isolate;
}

/* Halo or radial pulsant (cote droit, vers l'Apres) */
.transformation__halo {
    position: absolute;
    top: 50%;
    right: -10%;
    width: clamp(420px, 60vw, 800px);
    height: clamp(420px, 60vw, 800px);
    transform: translateY(-50%);
    background: radial-gradient(circle at 50% 50%,
        rgba(198, 161, 91, 0.22) 0%,
        rgba(198, 161, 91, 0.08) 38%,
        transparent 72%);
    filter: blur(24px);
    pointer-events: none;
    animation: tch-halo-pulse 9s ease-in-out infinite;
    z-index: 0;
}

/* Sparkles flottants */
.transformation__sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.transformation__sparkles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF8E0 0%, #C6A15B 60%, transparent 100%);
    box-shadow: 0 0 8px rgba(230, 200, 117, 0.7);
    animation: tch-sparkle-float 8s ease-in-out infinite;
    opacity: 0;
}
.transformation__sparkles span:nth-child(1) { top: 12%; left: 56%; animation-delay: 0s;   }
.transformation__sparkles span:nth-child(2) { top: 22%; left: 88%; animation-delay: 1.6s; }
.transformation__sparkles span:nth-child(3) { top: 38%; left: 64%; animation-delay: 2.8s; width: 3px; height: 3px; }
.transformation__sparkles span:nth-child(4) { top: 18%; left: 78%; animation-delay: 0.9s; }
.transformation__sparkles span:nth-child(5) { top: 62%; left: 92%; animation-delay: 3.6s; width: 3px; height: 3px; }
.transformation__sparkles span:nth-child(6) { top: 78%; left: 70%; animation-delay: 1.9s; }
.transformation__sparkles span:nth-child(7) { top: 86%; left: 84%; animation-delay: 2.3s; width: 3px; height: 3px; }
.transformation__sparkles span:nth-child(8) { top: 50%; left: 58%; animation-delay: 4.2s; }

/* Header — eyebrow Cormorant italic entre 2 tirets dores */
.transformation__header {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(48px, 7vw, 72px);
}
.transformation__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tch-accent);
    margin-bottom: 16px;
}
.transformation__eyebrow-dash {
    display: inline-block;
    width: clamp(28px, 5vw, 48px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%, #C6A15B 50%, transparent 100%);
}
.transformation__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.9rem, 4.5vw, 2.9rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--tch-primary);
    margin: 0 0 18px;
}
.transformation__title-accent {
    font-style: italic;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.transformation__subtitle {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    line-height: 1.65;
    color: var(--tch-text-muted, #5b6280);
    margin: 0;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* Grille du diptyque : Avant | Pont | Apres */
.transformation__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
}

/* Card base */
.transformation__card {
    position: relative;
    border-radius: 20px;
    padding: clamp(28px, 4vw, 40px) clamp(24px, 3vw, 32px);
}

/* ──── AVANT — sobre, gris ardoise, sans cartouches, sans halo ──── */
.transformation__card--before {
    background: linear-gradient(180deg,
        rgba(95, 110, 140, 0.06) 0%,
        rgba(95, 110, 140, 0.02) 100%);
    border: 1px solid rgba(30, 42, 90, 0.10);
    box-shadow: 0 12px 28px -22px rgba(30, 42, 90, 0.20);
}

/* ──── APRES — parchemin lumineux, 4 cartouches dores, halo or interieur ──── */
.transformation__card--after {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF4 100%);
    border: 1px solid rgba(198, 161, 91, 0.35);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 0 60px -10px rgba(198, 161, 91, 0.18) inset,
        0 24px 56px -28px rgba(198, 161, 91, 0.35),
        0 16px 36px -24px rgba(30, 42, 90, 0.18);
}

/* Cartouches dores aux 4 angles de la card Apres */
.transformation__corner {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    opacity: 0.75;
}
.transformation__corner::before,
.transformation__corner::after {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    box-shadow: 0 0 6px rgba(198, 161, 91, 0.4);
}
.transformation__corner::before { width: 1.2px; height: 100%; }
.transformation__corner::after  { width: 100%; height: 1.2px; }
.transformation__corner--tl { top: 14px;    left: 14px;    }
.transformation__corner--tl::before { top: 0; left: 0; }
.transformation__corner--tl::after  { top: 0; left: 0; }
.transformation__corner--tr { top: 14px;    right: 14px;   }
.transformation__corner--tr::before { top: 0; right: 0; }
.transformation__corner--tr::after  { top: 0; right: 0; }
.transformation__corner--bl { bottom: 14px; left: 14px;    }
.transformation__corner--bl::before { bottom: 0; left: 0; }
.transformation__corner--bl::after  { bottom: 0; left: 0; }
.transformation__corner--br { bottom: 14px; right: 14px;   }
.transformation__corner--br::before { bottom: 0; right: 0; }
.transformation__corner--br::after  { bottom: 0; right: 0; }

/* Label "Avant" / "Apres" — pill */
.transformation__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 999px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin-bottom: 24px;
}
.transformation__label--before {
    background: rgba(30, 42, 90, 0.08);
    color: rgba(30, 42, 90, 0.65);
    border: 1px solid rgba(30, 42, 90, 0.12);
}
.transformation__label--before i {
    color: rgba(95, 110, 140, 0.7);
    font-size: 0.95rem;
}
.transformation__label--after {
    background: linear-gradient(180deg,
        rgba(255, 248, 224, 0.7) 0%,
        rgba(255, 248, 224, 0.3) 100%);
    border: 1px solid rgba(198, 161, 91, 0.45);
    color: transparent;
    background-clip: padding-box;
}
.transformation__label--after span {
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 600;
}
.transformation__label--after i {
    color: var(--tch-accent);
    font-size: 0.95rem;
    animation: tch-sun-pulse 3.6s ease-in-out infinite;
}
@keyframes tch-sun-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50%      { transform: scale(1.15) rotate(20deg); opacity: 0.85; }
}

/* Liste des points */
.transformation__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.transformation__list li {
    position: relative;
    padding-left: 28px;
    font-size: clamp(0.94rem, 1.4vw, 1rem);
    line-height: 1.55;
}
.transformation__list--before li {
    color: rgba(30, 42, 90, 0.62);
}
.transformation__list--before li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 12px;
    height: 1.5px;
    background: rgba(30, 42, 90, 0.35);
    border-radius: 1px;
}
.transformation__list--after li {
    color: var(--tch-text);
    font-weight: 500;
}
.transformation__list--after li::before {
    content: "\f00c";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 0.95rem;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Pont — chemin SVG ondulant + fleche or au bout */
.transformation__bridge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(80px, 10vw, 140px);
    color: var(--tch-accent);
}
.transformation__bridge-svg {
    width: 100%;
    height: 32px;
    stroke-dashoffset: 200;
    animation: tch-bridge-draw 2.2s var(--ease-out-expo) 0.3s forwards;
}
@keyframes tch-bridge-draw {
    to { stroke-dashoffset: 0; }
}
.transformation__bridge-tip {
    width: 36px;
    height: 36px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%,
        rgba(255, 248, 224, 0.6) 0%,
        rgba(255, 248, 224, 0.2) 50%,
        transparent 80%);
    color: transparent;
    font-size: 1.1rem;
    box-shadow: 0 0 20px rgba(198, 161, 91, 0.4);
}
.transformation__bridge-tip i {
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tch-arrow-slide 2.4s ease-in-out infinite;
}
@keyframes tch-arrow-slide {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}

/* Phrase pont en bas — entre 2 tirets dores */
.transformation__pont {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2vw, 24px);
    max-width: 820px;
    margin: clamp(40px, 5vw, 56px) auto 0;
    text-align: center;
}
.transformation__pont-dash {
    flex-shrink: 0;
    width: clamp(28px, 6vw, 64px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%, #C6A15B 50%, transparent 100%);
}
.transformation__pont-text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    line-height: 1.45;
    color: var(--tch-primary);
    font-weight: 500;
}
.transformation__pont-text em {
    font-style: italic;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Responsive — empilage vertical sous 900px, pont tourne en vertical */
@media (max-width: 900px) {
    .transformation__grid {
        grid-template-columns: 1fr;
        gap: clamp(16px, 3vw, 24px);
        max-width: 540px;
    }
    .transformation__bridge {
        width: 100%;
        height: clamp(60px, 10vw, 80px);
        transform: rotate(90deg);
    }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .transformation__halo,
    .transformation__sparkles span,
    .transformation__label--after i,
    .transformation__bridge-svg,
    .transformation__bridge-tip i {
        animation: none !important;
        opacity: 0.85;
    }
    .transformation__bridge-svg {
        stroke-dashoffset: 0;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   SECTION 7-ter — FAQ D'OBJECTIONS — Specflux 2026 + Carnegie P11/P23/P29.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   FAQ — Refonte design éditorial : numérotation or italique, questions
   en Cormorant Garamond, toggle ± animé en deux barres, filets fins
   en lieu et place de bordures lourdes.
   ───────────────────────────────────────────────────────────────────────── */

.faq-area {
  padding: var(--space-2xl) 0;
  background: linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--tch-bg) 30%, #FFFFFF) 100%);
}

.faq-area__title em {
  font-style: italic;
  color: var(--tch-accent);
  font-weight: 500;
}

.faq-list {
  max-width: 880px;
  margin: 2.5rem auto 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid color-mix(in srgb, var(--tch-primary) 10%, transparent);
}

.faq-item {
  position: relative;
  border-bottom: 1px solid color-mix(in srgb, var(--tch-primary) 10%, transparent);
  transition: background 240ms ease-out;
}

/* Filet or vertical à gauche au survol et à l'ouverture */
.faq-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, transparent 0%, var(--tch-accent) 50%, transparent 100%);
  transform: translateY(-50%);
  transition: height 320ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.faq-item:hover::before,
.faq-item[open]::before,
.faq-item.is-open::before {
  height: 60%;
}

.faq-item:hover {
  background: color-mix(in srgb, var(--tch-bg) 28%, #FFFFFF);
}

.faq-item[open],
.faq-item.is-open {
  background: color-mix(in srgb, var(--tch-bg) 18%, #FFFFFF);
}

.faq-item__trigger {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.6rem 1.5rem 1.6rem 1.75rem;
  width: 100%;
}

.faq-item__trigger::-webkit-details-marker { display: none; }
.faq-item__trigger:focus-visible {
  outline: 2px solid var(--tch-accent);
  outline-offset: -3px;
  border-radius: 8px;
}

.faq-item__number {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 600;
  color: var(--tch-accent);
  letter-spacing: 0.04em;
  min-width: 28px;
  text-align: left;
  line-height: 1;
  transition: color 220ms ease-out, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item:hover .faq-item__number,
.faq-item[open] .faq-item__number,
.faq-item.is-open .faq-item__number {
  color: var(--tch-primary);
  transform: translateX(2px);
}

.faq-item__question {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 500;
  color: var(--tch-primary);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* Toggle ± animé en deux barres qui forment une croix puis un trait */
.faq-item__toggle {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--tch-primary) 18%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  transition:
    background 240ms ease-out,
    border-color 240ms ease-out,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item__toggle-bar {
  position: absolute;
  background: var(--tch-primary);
  border-radius: 999px;
  transition:
    background 240ms ease-out,
    opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item__toggle-bar:nth-child(1) {
  /* Barre horizontale (le trait du moins) */
  width: 12px;
  height: 2px;
}
.faq-item__toggle-bar:nth-child(2) {
  /* Barre verticale (deuxième moitié du plus) */
  width: 2px;
  height: 12px;
}

.faq-item:hover .faq-item__toggle {
  border-color: color-mix(in srgb, var(--tch-accent) 55%, transparent);
  background: color-mix(in srgb, var(--tch-accent) 8%, #FFFFFF);
}
.faq-item:hover .faq-item__toggle-bar {
  background: var(--tch-accent);
}

.faq-item[open] .faq-item__toggle,
.faq-item.is-open .faq-item__toggle {
  background: var(--tch-accent);
  border-color: var(--tch-accent);
  transform: rotate(180deg);
}
.faq-item[open] .faq-item__toggle-bar,
.faq-item.is-open .faq-item__toggle-bar {
  background: #FFFFFF;
}
.faq-item[open] .faq-item__toggle-bar:nth-child(2),
.faq-item.is-open .faq-item__toggle-bar:nth-child(2) {
  /* La barre verticale disparait pour ne laisser que le moins */
  opacity: 0;
  transform: scaleY(0);
}

/* Corps de la réponse — retrait aligné sur la question, ornement filet à gauche */
.faq-item__body {
  position: relative;
  padding: 0 1.5rem 1.6rem calc(1.75rem + 28px + 1.4rem);
  color: var(--tch-text);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 760px;
}

.faq-item__body::before {
  content: '';
  position: absolute;
  left: calc(1.75rem + 12px);
  top: 0;
  bottom: 1.2rem;
  width: 1px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tch-accent) 60%, transparent) 0%,
    transparent 100%);
}

.faq-item__body p { margin: 0; }
.faq-item__body strong {
  color: var(--tch-primary);
  font-weight: 600;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .faq-item__trigger {
    grid-template-columns: auto 1fr auto;
    gap: 0.9rem;
    padding: 1.3rem 1rem 1.3rem 1.1rem;
  }
  .faq-item__number { font-size: 0.9rem; min-width: 22px; }
  .faq-item__question { font-size: 1.05rem; }
  .faq-item__toggle { width: 28px; height: 28px; }
  .faq-item__body {
    padding: 0 1rem 1.2rem calc(1.1rem + 22px + 0.9rem);
    font-size: 0.95rem;
  }
  .faq-item__body::before {
    left: calc(1.1rem + 9px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item::before,
  .faq-item__number,
  .faq-item__toggle,
  .faq-item__toggle-bar {
    transition: none;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   SECTION 5-bis — « Premiers couples » / Sceau de transparence
   Parchemin centre cinematique avec halo or pulsant, sparkles, 4 cartouches
   et 4 stats sourcees BD. Continuite avec hero/brief/process/founder.
   Carnegie §8.1 : aucun chiffre invente.
   ═════════════════════════════════════════════════════════════════════════════ */
.launch-trust {
    position: relative;
    padding: clamp(48px, 8vw, 120px) var(--space-md);
    background: var(--tch-bg);
    overflow: hidden;
    isolation: isolate;
}

/* Halo or radial pulsant */
.launch-trust__halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(420px, 70vw, 900px);
    height: clamp(420px, 70vw, 900px);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 50%,
        rgba(198, 161, 91, 0.22) 0%,
        rgba(198, 161, 91, 0.08) 38%,
        transparent 72%);
    filter: blur(24px);
    pointer-events: none;
    animation: tch-halo-pulse 9s ease-in-out infinite;
    z-index: 0;
}

/* Sparkles flottants */
.launch-trust__sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.launch-trust__sparkles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF8E0 0%, #C6A15B 60%, transparent 100%);
    box-shadow: 0 0 8px rgba(230, 200, 117, 0.7);
    animation: tch-sparkle-float 8s ease-in-out infinite;
    opacity: 0;
}
.launch-trust__sparkles span:nth-child(1) { top: 12%; left: 10%; animation-delay: 0s;   }
.launch-trust__sparkles span:nth-child(2) { top: 22%; left: 88%; animation-delay: 1.6s; }
.launch-trust__sparkles span:nth-child(3) { top: 38%; left:  6%; animation-delay: 2.8s; width: 3px; height: 3px; }
.launch-trust__sparkles span:nth-child(4) { top: 18%; left: 52%; animation-delay: 0.9s; }
.launch-trust__sparkles span:nth-child(5) { top: 62%; left: 92%; animation-delay: 3.6s; width: 3px; height: 3px; }
.launch-trust__sparkles span:nth-child(6) { top: 78%; left: 12%; animation-delay: 1.9s; }
.launch-trust__sparkles span:nth-child(7) { top: 84%; left: 70%; animation-delay: 2.3s; width: 3px; height: 3px; }
.launch-trust__sparkles span:nth-child(8) { top: 48%; left: 30%; animation-delay: 4.2s; }

/* Parchemin centre */
.launch-trust__inner {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin: 0 auto;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF4 100%);
    border: 1px solid rgba(198, 161, 91, 0.18);
    border-radius: 24px;
    padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
    text-align: center;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 30px 60px -28px rgba(30, 42, 90, 0.22),
        0 18px 40px -24px rgba(198, 161, 91, 0.18);
}

/* Cartouches dores aux 4 angles */
.launch-trust__corner {
    position: absolute;
    width: 28px;
    height: 28px;
    pointer-events: none;
    opacity: 0.75;
}
.launch-trust__corner::before,
.launch-trust__corner::after {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    box-shadow: 0 0 8px rgba(198, 161, 91, 0.5);
}
.launch-trust__corner::before { width: 1.4px; height: 100%; }
.launch-trust__corner::after  { width: 100%; height: 1.4px; }
.launch-trust__corner--tl { top: 16px;    left: 16px;    }
.launch-trust__corner--tl::before { top: 0; left: 0; }
.launch-trust__corner--tl::after  { top: 0; left: 0; }
.launch-trust__corner--tr { top: 16px;    right: 16px;   }
.launch-trust__corner--tr::before { top: 0; right: 0; }
.launch-trust__corner--tr::after  { top: 0; right: 0; }
.launch-trust__corner--bl { bottom: 16px; left: 16px;    }
.launch-trust__corner--bl::before { bottom: 0; left: 0; }
.launch-trust__corner--bl::after  { bottom: 0; left: 0; }
.launch-trust__corner--br { bottom: 16px; right: 16px;   }
.launch-trust__corner--br::before { bottom: 0; right: 0; }
.launch-trust__corner--br::after  { bottom: 0; right: 0; }

/* Header — eyebrow + titre + lead */
.launch-trust__header {
    max-width: 640px;
    margin: 0 auto clamp(36px, 5vw, 52px);
}
.launch-trust__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tch-accent);
    margin-bottom: 16px;
}
.launch-trust__eyebrow-dash {
    display: inline-block;
    width: clamp(28px, 5vw, 48px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%, #C6A15B 50%, transparent 100%);
}
.launch-trust__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--tch-primary);
    margin: 0 0 18px;
}
.launch-trust__title-accent {
    font-style: italic;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 4 stats — grille auto-adaptative */
.launch-trust__stats {
    list-style: none;
    margin: 0 0 clamp(28px, 4vw, 40px);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: clamp(16px, 2vw, 22px);
}
.launch-trust__stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: clamp(24px, 3vw, 32px) clamp(18px, 2vw, 24px);
    background: linear-gradient(180deg,
        rgba(255, 248, 224, 0.55) 0%,
        rgba(255, 248, 224, 0.25) 100%);
    border: 1px solid rgba(198, 161, 91, 0.28);
    border-radius: 16px;
    text-align: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition:
        transform 0.4s var(--ease-out-expo),
        border-color 0.4s var(--ease-out-expo),
        box-shadow 0.4s var(--ease-out-expo);
}
.launch-trust__stat:hover {
    transform: translateY(-6px);
    border-color: rgba(198, 161, 91, 0.55);
    box-shadow:
        0 18px 36px -16px rgba(198, 161, 91, 0.35),
        0 8px 20px -10px rgba(30, 42, 90, 0.18);
}
.launch-trust__stat-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%,
        rgba(198, 161, 91, 0.22) 0%,
        rgba(198, 161, 91, 0.06) 60%,
        transparent 100%);
    color: var(--tch-accent);
    font-size: 1.3rem;
    transition: transform 0.4s var(--ease-out-expo);
}
.launch-trust__stat:hover .launch-trust__stat-icon {
    transform: scale(1.1);
}
.launch-trust__stat-icon--hourglass {
    animation: tch-hourglass-tilt 3.6s ease-in-out infinite;
}
.launch-trust__stat-value {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-style: italic;
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.launch-trust__stat-value--text {
    font-size: clamp(1.4rem, 2.8vw, 1.8rem);
}
.launch-trust__stat-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tch-text-muted, #5b6280);
    line-height: 1.4;
    margin-top: 4px;
}
.launch-trust__stat-label small {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--tch-text);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
}

/* Engagement de sincerite — pill verte transparente */
.launch-trust__honest {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 620px;
    margin: 0 auto;
    padding: 14px 20px;
    background: color-mix(in srgb, var(--tch-secondary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--tch-secondary) 25%, transparent);
    border-radius: 14px;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--tch-text);
    text-align: left;
}
.launch-trust__honest i {
    flex-shrink: 0;
    color: var(--tch-secondary);
    font-size: 1.1rem;
    margin-top: 2px;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .launch-trust__halo,
    .launch-trust__sparkles span,
    .launch-trust__stat-icon--hourglass {
        animation: none !important;
        opacity: 0.6;
    }
    .launch-trust__stat,
    .launch-trust__stat-icon {
        transition: none !important;
    }
    .launch-trust__stat:hover {
        transform: none;
    }
    .launch-trust__stat:hover .launch-trust__stat-icon {
        transform: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   BOUTON WHATSAPP FLOTTANT — Voie de sortie permanente (Carnegie P26).
   Pour Tchefon, WhatsApp est le canal de réassurance principal en Côte d'Ivoire.
   ═════════════════════════════════════════════════════════════════════════════ */

.floating-whatsapp {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
  right: 1.25rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  background: #25D366;
  color: #FFFFFF;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.35), 0 4px 12px rgba(15, 23, 42, 0.12);
  text-decoration: none;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease-out;
}

.floating-whatsapp:hover,
.floating-whatsapp:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(37, 211, 102, 0.45), 0 6px 14px rgba(15, 23, 42, 0.15);
  color: #FFFFFF;
}

.floating-whatsapp:focus-visible {
  outline: 2px solid var(--tch-accent, #C6A15B);
  outline-offset: 3px;
}

.floating-whatsapp i {
  font-size: 1.35rem;
}

.floating-whatsapp__label {
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .floating-whatsapp {
    right: 0.9rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5.25rem);
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
  }

  .floating-whatsapp__label {
    display: none;
  }

  .floating-whatsapp i {
    font-size: 1.5rem;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   STICKY CTA MOBILE — Foundry CRO 2026 : +11 à +20% conversion mobile.
   Apparaît uniquement en mobile, après dépassement du hero (JS toggle).
   ═════════════════════════════════════════════════════════════════════════════ */

.sticky-cta {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
  left: 0;
  right: 0;
  z-index: 99;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 18%, #FFFFFF 100%);
  text-decoration: none;
  color: var(--tch-primary, #1E2A5A);
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: 1rem;
  border-top: 1px solid rgba(30, 42, 90, 0.08);
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1), transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

.sticky-cta__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  background: var(--tch-primary, #1E2A5A);
  color: #FFFFFF;
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow: 0 8px 24px rgba(30, 42, 90, 0.28);
}

.sticky-cta i {
  position: absolute;
  right: 2.25rem;
  color: #FFFFFF;
  font-size: 0.9rem;
}

.sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 767.98px) {
  .sticky-cta {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta,
  .floating-whatsapp {
    transition: none;
  }
}

/* =============================================================================
   REFONTE NAV + HERO LANDING (2026-05-23) — depasse les regles cascade plus
   anciennes via specificite + ordre. Toutes les couleurs derivent des variables
   --tch-* (charte Tchefon). Mobile-first, prefers-reduced-motion respecte.
   ============================================================================= */

/* ───────────────────────────────────────────────────────────────────────────
   NAVIGATION REFAITE — Verre depoli au scroll, brand orne, burger mobile
   ─────────────────────────────────────────────────────────────────────────── */
.tch-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 14px 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0) 100%);
    transition:
        background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        backdrop-filter 0.4s ease,
        box-shadow 0.4s ease,
        padding 0.3s ease;
}
.tch-nav--scrolled {
    background: rgba(15, 26, 61, 0.78);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        0 1px 0 rgba(198, 161, 91, 0.25),
        0 8px 32px rgba(0, 0, 0, 0.35);
    padding: 10px 0;
}

.tch-nav__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    gap: 24px;
}

/* Brand — losange or + lettrage Cormorant */
.tch-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    position: relative;
    z-index: 2;
}
.tch-nav__brand-mark {
    width: 22px;
    height: 22px;
    display: inline-flex;
    filter: drop-shadow(0 2px 8px rgba(198, 161, 91, 0.5));
    animation: tch-mark-spin 18s linear infinite;
}
.tch-nav__brand-mark svg { width: 100%; height: 100%; display: block; }
@keyframes tch-mark-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.tch-nav__brand-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    color: #fff;
    background: linear-gradient(135deg, #FFF8E0 0%, #E6C875 50%, #C6A15B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Panel — liens + CTA (vue desktop par defaut) */
.tch-nav__panel {
    display: flex;
    align-items: center;
    gap: 32px;
}
.tch-nav__links {
    display: flex;
    align-items: center;
    gap: 28px;
}
.tch-nav__link {
    position: relative;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 6px 0;
    transition: color 0.2s ease;
}
.tch-nav__link:hover,
.tch-nav__link:focus-visible { color: #fff; outline: none; }
.tch-nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, #C6A15B 50%, transparent 100%);
    transform: translateX(-50%);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.tch-nav__link:hover::after,
.tch-nav__link:focus-visible::after { width: 100%; }

/* CTA Démarrer mon brief — gradient or + shimmer infini + sou-relevement */
.tch-nav__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #B8962E 100%);
    color: #1E2A5A;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: 999px;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 6px 18px rgba(198, 161, 91, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease-out;
}
.tch-nav__cta:hover,
.tch-nav__cta:focus-visible {
    color: #1E2A5A;
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 12px 28px rgba(198, 161, 91, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.22);
    outline: none;
}
.tch-nav__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tch-nav__cta-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    animation: tch-cta-shimmer 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes tch-cta-shimmer {
    0%, 35% { left: -100%; }
    65%, 100% { left: 130%; }
}
.tch-nav__cta i { font-size: 0.82rem; }

/* Burger mobile — cache desktop. Anneau or subtil, 2 barres asymétriques,
   animation X élégante au open. */
.tch-nav__burger {
    display: none;
    position: relative;
    background: transparent;
    border: 0;
    padding: 0;
    width: 46px;
    height: 46px;
    cursor: pointer;
    z-index: 110;
    -webkit-tap-highlight-color: transparent;
}
.tch-nav__burger-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(198, 161, 91, 0.4);
    background: linear-gradient(135deg,
        rgba(198, 161, 91, 0.08) 0%,
        rgba(198, 161, 91, 0.02) 100%);
    transition:
        border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.35s ease;
}
.tch-nav__burger:hover .tch-nav__burger-ring,
.tch-nav__burger:focus-visible .tch-nav__burger-ring {
    border-color: rgba(230, 200, 117, 0.85);
    background: linear-gradient(135deg,
        rgba(198, 161, 91, 0.18) 0%,
        rgba(198, 161, 91, 0.06) 100%);
    box-shadow:
        0 0 0 4px rgba(198, 161, 91, 0.1),
        0 0 18px rgba(198, 161, 91, 0.35);
}
.tch-nav__burger:focus-visible { outline: none; }
.tch-nav__burger-bar {
    position: absolute;
    left: 50%;
    height: 1.5px;
    background: linear-gradient(90deg, #E6C875 0%, #C6A15B 100%);
    border-radius: 2px;
    transform-origin: center;
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        top 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.tch-nav__burger-bar--1 {
    top: 17px;
    width: 22px;
    margin-left: -11px;
}
.tch-nav__burger-bar--2 {
    top: 25px;
    width: 14px;
    margin-left: -7px;
}
.tch-nav__burger:hover .tch-nav__burger-bar--2,
.tch-nav__burger:focus-visible .tch-nav__burger-bar--2 {
    width: 22px;
    margin-left: -11px;
}
.tch-nav__burger[aria-expanded="true"] .tch-nav__burger-bar--1 {
    top: 21px;
    width: 22px;
    margin-left: -11px;
    transform: rotate(45deg);
}
.tch-nav__burger[aria-expanded="true"] .tch-nav__burger-bar--2 {
    top: 21px;
    width: 22px;
    margin-left: -11px;
    transform: rotate(-45deg);
}
.tch-nav__burger[aria-expanded="true"] .tch-nav__burger-ring {
    border-color: rgba(230, 200, 117, 1);
    background: linear-gradient(135deg,
        rgba(198, 161, 91, 0.22) 0%,
        rgba(198, 161, 91, 0.08) 100%);
    box-shadow: 0 0 18px rgba(198, 161, 91, 0.5);
}

/* Backdrop d'arriere-plan du drawer — masque + flou + tint indigo
   IMPORTANT : z-index DOIT etre inferieur a celui du panel pour eviter que
   le backdrop-filter du backdrop ne floute le contenu du drawer rendu en
   dessous. Hierarchie : burger (110) > panel (102) > backdrop (98). */
.tch-nav__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(30, 42, 90, 0.55) 0%, rgba(8, 14, 36, 0.82) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    z-index: 98;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    cursor: pointer;
}

/* Header drawer (visible uniquement mobile, cf. media query) — caches desktop par defaut */
.tch-nav__panel-header,
.tch-nav__panel-footer { display: none; }
.tch-nav__link-dot { display: none; }

/* MOBILE NAV ≤ 1024px — panel slide depuis la droite, drawer ateliere */
@media (max-width: 1024px) {
    .tch-nav__burger { display: block; }

    .tch-nav__panel {
        position: fixed;
        top: 0;
        right: 0;
        width: min(86vw, 380px);
        height: 100dvh;
        z-index: 102;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 0;
        /* Fond opaque (sans backdrop-filter pour ne pas combiner deux
           backdrop-filter et alourdir le rendu) — la profondeur vient des
           gradients radiaux dores et bordeaux superposes. */
        background:
            radial-gradient(ellipse 60% 30% at 50% 0%, rgba(198, 161, 91, 0.18) 0%, transparent 60%),
            radial-gradient(ellipse 50% 40% at 50% 100%, rgba(90, 14, 26, 0.32) 0%, transparent 70%),
            linear-gradient(170deg, #0B1535 0%, #1E2A5A 55%, #050D22 100%);
        border-left: 1px solid rgba(198, 161, 91, 0.3);
        box-shadow:
            -24px 0 64px rgba(0, 0, 0, 0.55),
            inset 1px 0 0 rgba(255, 255, 255, 0.04);
        transform: translateX(102%);
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .tch-nav__panel.tch-nav__panel--open { transform: translateX(0); }

    /* Backdrop visible et cliquable uniquement quand le drawer est ouvert */
    .tch-nav__backdrop { display: block; }
    .tch-nav__panel--open ~ .tch-nav__backdrop,
    body.tch-nav-locked .tch-nav__backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Header du drawer — eyebrow Cormorant entre 2 tirets dores + tagline */
    .tch-nav__panel-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 88px 28px 32px;
        text-align: center;
        position: relative;
    }
    .tch-nav__panel-header::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 24px;
        right: 24px;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(198, 161, 91, 0.4) 50%, transparent 100%);
    }
    .tch-nav__panel-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-style: italic;
        font-size: 1.05rem;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #E6C875;
    }
    .tch-nav__panel-eyebrow-dash {
        display: inline-block;
        width: 28px;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, #C6A15B 50%, transparent 100%);
    }
    .tch-nav__panel-tagline {
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-style: italic;
        font-size: 0.95rem;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.65);
        margin: 4px 0 0;
    }

    /* Liens drawer — verticaux, séparés par un filet d'or */
    .tch-nav__links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding: 16px 0;
    }
    .tch-nav__link {
        display: flex;
        align-items: center;
        gap: 14px;
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: 1.4rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.92);
        padding: 16px 28px;
        opacity: 0;
        transform: translateX(24px);
        transition:
            opacity 0.45s ease,
            transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
            color 0.25s ease,
            background 0.25s ease;
        position: relative;
    }
    .tch-nav__link::after { display: none; }
    .tch-nav__link::before {
        content: "";
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
    }
    .tch-nav__links a:last-child.tch-nav__link::before { display: none; }
    .tch-nav__link-dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: radial-gradient(circle, #FFE9B8 0%, #C6A15B 70%, transparent 100%);
        box-shadow: 0 0 8px rgba(198, 161, 91, 0.6);
        flex-shrink: 0;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .tch-nav__link:hover,
    .tch-nav__link:focus-visible {
        color: #FFE9B8;
        background: linear-gradient(90deg, rgba(198, 161, 91, 0.1) 0%, transparent 100%);
    }
    .tch-nav__link:hover .tch-nav__link-dot,
    .tch-nav__link:focus-visible .tch-nav__link-dot {
        transform: scale(1.5);
    }
    .tch-nav__panel--open .tch-nav__link { opacity: 1; transform: translateX(0); }
    .tch-nav__panel--open .tch-nav__link:nth-child(1) { transition-delay: 0.18s; }
    .tch-nav__panel--open .tch-nav__link:nth-child(2) { transition-delay: 0.26s; }
    .tch-nav__panel--open .tch-nav__link:nth-child(3) { transition-delay: 0.34s; }
    .tch-nav__panel--open .tch-nav__link:nth-child(4) { transition-delay: 0.42s; }

    /* CTA dans le drawer — pleine largeur, centré, avec marge généreuse */
    .tch-nav__panel > .tch-nav__cta {
        opacity: 0;
        transform: translateX(24px);
        margin: 20px 28px 12px;
        padding: 16px 24px;
        font-size: 1rem;
        justify-content: center;
        transition:
            opacity 0.45s ease 0.5s,
            transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.5s,
            box-shadow 0.35s ease-out;
    }
    .tch-nav__panel--open > .tch-nav__cta {
        opacity: 1;
        transform: translateX(0);
    }

    /* Footer drawer — microcopy rassurance Carnegie P26 */
    .tch-nav__panel-footer {
        display: block;
        margin-top: auto;
        padding: 24px 28px 32px;
        position: relative;
    }
    .tch-nav__panel-footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 24px;
        right: 24px;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(198, 161, 91, 0.4) 50%, transparent 100%);
    }
    .tch-nav__panel-trust {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 0;
        font-family: 'Inter', sans-serif;
        font-size: 0.82rem;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.55);
        text-align: center;
    }
    .tch-nav__panel-trust i {
        color: var(--tch-accent, #C6A15B);
        font-size: 0.78rem;
    }

    body.tch-nav-locked { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .tch-nav__burger-ring,
    .tch-nav__burger-bar,
    .tch-nav__backdrop,
    .tch-nav__panel,
    .tch-nav__link,
    .tch-nav__panel > .tch-nav__cta,
    .tch-nav__link-dot {
        transition: none !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   LANDING HERO REFAIT — Composition cinematique stratifiee
   ─────────────────────────────────────────────────────────────────────────── */
.landing-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(72px, 10vh, 110px) 20px clamp(48px, 7vh, 88px);
    text-align: center;
    color: #fff;
    overflow: hidden;
    background:
        /* Spotlight or central */
        radial-gradient(ellipse 55% 45% at 50% 38%, rgba(198, 161, 91, 0.16) 0%, transparent 60%),
        /* Halo bordeaux bas */
        radial-gradient(ellipse 70% 50% at 50% 100%, rgba(90, 14, 26, 0.4) 0%, transparent 70%),
        /* Velours indigo */
        linear-gradient(180deg, #050D22 0%, #1E2A5A 50%, #0a1428 100%);
}

/* Texture noise SVG inline pour rendre le velours vivant */
.landing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.83 0 0 0 0 0.69 0 0 0 0 0.22 0 0 0 0.15 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.4;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Halo dore pulsant derriere le titre */
.landing-hero__halo {
    position: absolute;
    top: 38%;
    left: 50%;
    width: clamp(360px, 60vw, 720px);
    height: clamp(360px, 60vw, 720px);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 50%, rgba(198, 161, 91, 0.22) 0%, transparent 65%);
    filter: blur(20px);
    pointer-events: none;
    animation: tch-halo-pulse 8s ease-in-out infinite;
    z-index: 0;
}
@keyframes tch-halo-pulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.95); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}

/* Cartouches dores aux 4 angles */
.landing-hero__corner {
    position: absolute;
    width: clamp(48px, 8vw, 80px);
    height: clamp(48px, 8vw, 80px);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    animation: tch-corner-fade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}
@keyframes tch-corner-fade { to { opacity: 0.7; } }
.landing-hero__corner::before,
.landing-hero__corner::after {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    box-shadow: 0 0 10px rgba(198, 161, 91, 0.5);
}
.landing-hero__corner::before { width: 1.5px; height: 60%; }
.landing-hero__corner::after  { width: 60%; height: 1.5px; }
.landing-hero__corner--tl { top: 22px;    left: 22px;    }
.landing-hero__corner--tl::before { top: 0; left: 0; }
.landing-hero__corner--tl::after  { top: 0; left: 0; }
.landing-hero__corner--tr { top: 22px;    right: 22px;   }
.landing-hero__corner--tr::before { top: 0; right: 0; }
.landing-hero__corner--tr::after  { top: 0; right: 0; }
.landing-hero__corner--bl { bottom: 22px; left: 22px;    }
.landing-hero__corner--bl::before { bottom: 0; left: 0; }
.landing-hero__corner--bl::after  { bottom: 0; left: 0; }
.landing-hero__corner--br { bottom: 22px; right: 22px;   }
.landing-hero__corner--br::before { bottom: 0; right: 0; }
.landing-hero__corner--br::after  { bottom: 0; right: 0; }

/* Sparkles — points d'or qui flottent en arriere-plan */
.landing-hero__sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.landing-hero__sparkles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF8E0 0%, #C6A15B 60%, transparent 100%);
    box-shadow: 0 0 8px rgba(230, 200, 117, 0.7);
    animation: tch-sparkle-float 7s ease-in-out infinite;
    opacity: 0;
}
.landing-hero__sparkles span:nth-child(1) { top: 18%; left: 14%; animation-delay: 0s;   }
.landing-hero__sparkles span:nth-child(2) { top: 28%; left: 78%; animation-delay: 1.2s; }
.landing-hero__sparkles span:nth-child(3) { top: 42%; left: 8%;  animation-delay: 2.5s; }
.landing-hero__sparkles span:nth-child(4) { top: 12%; left: 52%; animation-delay: 0.8s; width: 3px; height: 3px; }
.landing-hero__sparkles span:nth-child(5) { top: 60%; left: 88%; animation-delay: 3.4s; }
.landing-hero__sparkles span:nth-child(6) { top: 72%; left: 16%; animation-delay: 1.8s; width: 3px; height: 3px; }
.landing-hero__sparkles span:nth-child(7) { top: 78%; left: 62%; animation-delay: 2.2s; }
.landing-hero__sparkles span:nth-child(8) { top: 30%; left: 32%; animation-delay: 4.0s; width: 3px; height: 3px; }
@keyframes tch-sparkle-float {
    0%, 100% { opacity: 0;   transform: translateY(0)    scale(0.8); }
    20%      { opacity: 1;   transform: translateY(-8px) scale(1);   }
    80%      { opacity: 0.6; transform: translateY(8px)  scale(1);   }
}

.landing-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(198, 161, 91, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(90, 14, 26, 0.12) 0%, transparent 55%);
    pointer-events: none;
    z-index: 1;
}

.landing-hero__content {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
    z-index: 3;
}

/* Layout — texte centre par defaut (mobile), 2 colonnes desktop ≥1024px */
.landing-hero__layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
}
@media (min-width: 1024px) {
    .landing-hero__layout {
        flex-direction: row;
        gap: 80px;
        text-align: left;
    }
    .landing-hero__text {
        flex: 1 1 60%;
        max-width: 720px;
    }
    .landing-hero__visual {
        flex: 0 1 40%;
        max-width: 420px;
    }
}
.landing-hero__text { width: 100%; max-width: 760px; }

/* Eyebrow — cartouche serif + dashes dores */
.landing-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(0.85rem, 1.6vw, 1rem);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #C6A15B;
    text-shadow: 0 0 14px rgba(198, 161, 91, 0.4);
}
.landing-hero__eyebrow-dash {
    width: clamp(28px, 5vw, 48px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #C6A15B 50%, transparent 100%);
}

/* Titre — Cormorant italic + accent gold + flourish manuscrit sous « oui » */
.landing-hero__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.2rem, 6vw, 4.4rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.landing-hero__highlight {
    position: relative;
    display: inline-block;
    color: #E6C875;
    font-style: italic;
    padding: 0 0.05em;
}
.landing-hero__highlight-word {
    background: linear-gradient(135deg, #FFF8E0 0%, #E6C875 50%, #C6A15B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px rgba(230, 200, 117, 0.4));
}
.landing-hero__highlight-flourish {
    position: absolute;
    left: -8%;
    bottom: -0.4em;
    width: 116%;
    height: 0.5em;
    color: #C6A15B;
    pointer-events: none;
}
.landing-hero__highlight-flourish path {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: tch-flourish-draw 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.8s forwards;
    filter: drop-shadow(0 0 8px rgba(198, 161, 91, 0.6));
}
@keyframes tch-flourish-draw { to { stroke-dashoffset: 0; } }
.landing-hero__title-accent {
    font-style: italic;
    color: #C6A15B;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Sous-titre — Inter clair, max-width pour lisibilite */
.landing-hero__subtitle {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    font-weight: 300;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    max-width: 560px;
    margin: 0 0 36px;
}
@media (min-width: 1024px) {
    .landing-hero__subtitle { margin-left: 0; margin-right: 0; }
}
@media (max-width: 1023px) {
    .landing-hero__subtitle { margin-left: auto; margin-right: auto; }
}

/* CTA — gradient or + shimmer + soulvement au hover */
.landing-hero__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
@media (min-width: 1024px) {
    .landing-hero__cta { align-items: flex-start; }
}
.landing-hero__cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #B8962E 100%);
    color: #1E2A5A;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: 999px;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 14px 36px rgba(198, 161, 91, 0.4),
        0 4px 12px rgba(15, 23, 42, 0.2);
    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s ease-out;
}
.landing-hero__cta-button:hover,
.landing-hero__cta-button:focus-visible {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 20px 48px rgba(198, 161, 91, 0.55),
        0 6px 16px rgba(15, 23, 42, 0.26);
    color: #1E2A5A;
    outline: none;
}
.landing-hero__cta-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.landing-hero__cta-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    animation: tch-cta-shimmer 3.6s ease-in-out infinite;
    pointer-events: none;
}
.landing-hero__cta-button i { font-size: 0.95rem; }
.landing-hero__cta-trust {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.78);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.01em;
}
.landing-hero__cta-trust i {
    font-size: 0.78rem;
    color: #C6A15B;
}

/* Visuel droite — enveloppe stylisee avec sceau de cire (desktop only) */
.landing-hero__visual {
    display: none;
}
@media (min-width: 1024px) {
    .landing-hero__visual {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
}
.landing-hero__envelope {
    position: relative;
    width: clamp(280px, 32vw, 380px);
    aspect-ratio: 4 / 3;
    background: linear-gradient(160deg, #FFFCF5 0%, #F5EFE2 50%, #E8DEC8 100%);
    border-radius: 6px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45),
        0 12px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: perspective(900px) rotateY(-8deg) rotateX(4deg);
    animation: tch-envelope-float 6s ease-in-out infinite;
}
@keyframes tch-envelope-float {
    0%, 100% { transform: perspective(900px) rotateY(-8deg) rotateX(4deg) translateY(0); }
    50%      { transform: perspective(900px) rotateY(-6deg) rotateX(3deg) translateY(-10px); }
}
.landing-hero__envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(180deg, #F5EFE2 0%, #E8DEC8 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.06);
}
.landing-hero__envelope-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -42%);
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    z-index: 2;
}
.landing-hero__envelope-line {
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: linear-gradient(90deg, transparent 0%, rgba(30, 42, 90, 0.18) 20%, rgba(30, 42, 90, 0.28) 80%, transparent 100%);
}
.landing-hero__envelope-line--short   { width: 75%; }
.landing-hero__envelope-line--shortest { width: 55%; }
.landing-hero__envelope-seal {
    position: absolute;
    bottom: -14px;
    right: -14px;
    width: 68px;
    height: 68px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 12px rgba(198, 161, 91, 0.5));
    animation: tch-seal-pulse 4.2s ease-in-out infinite;
}
.landing-hero__envelope-seal svg { width: 100%; height: 100%; display: block; }
@keyframes tch-seal-pulse {
    0%, 100% { transform: scale(1)    rotate(-4deg); }
    50%      { transform: scale(1.06) rotate(-1deg); }
}

/* Indicateur de scroll */
.landing-hero__scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    z-index: 3;
    transition: color 0.3s ease;
}
.landing-hero__scroll:hover { color: #E6C875; }
.landing-hero__scroll-indicator {
    width: 22px;
    height: 36px;
    border: 1.5px solid rgba(198, 161, 91, 0.7);
    border-radius: 12px;
    position: relative;
}
.landing-hero__scroll-dot {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 3px;
    height: 8px;
    background: #C6A15B;
    border-radius: 2px;
    transform: translateX(-50%);
    animation: tch-scroll-dot 1.8s ease-in-out infinite;
}
@keyframes tch-scroll-dot {
    0%, 100% { opacity: 1;   transform: translate(-50%, 0); }
    50%      { opacity: 0.3; transform: translate(-50%, 14px); }
}

/* PREFERS REDUCED MOTION — desactive toutes animations decoratives */
@media (prefers-reduced-motion: reduce) {
    .tch-nav__brand-mark,
    .tch-nav__cta-shimmer,
    .landing-hero__halo,
    .landing-hero__sparkles span,
    .landing-hero__highlight-flourish path,
    .landing-hero__cta-shimmer,
    .landing-hero__envelope,
    .landing-hero__envelope-seal,
    .landing-hero__scroll-dot { animation: none; }
    .landing-hero__corner { opacity: 0.7; }
    .landing-hero__highlight-flourish path { stroke-dashoffset: 0; }
    .landing-hero__envelope {
        transform: perspective(900px) rotateY(-8deg) rotateX(4deg);
    }
}

/* RESPONSIVE — mobile (≤768px) : compact, pas de min-height: 100vh forcée
   pour éviter le surcroît d'espace vertical vide. Le contenu se déploie
   naturellement et le hero reste lisible sans scroll forcé. Le scroll
   indicator est masqué (le hero étant désormais court, la suite est
   évidemment juste sous le pli — l'indicator chevauchait la microcopy). */
@media (max-width: 768px) {
    .landing-hero {
        min-height: auto;
        padding: 88px 18px 48px;
    }
    .landing-hero__scroll { display: none; }
}

/* RESPONSIVE — petit mobile (≤480px) — encore plus compact */
@media (max-width: 480px) {
    .landing-hero {
        padding: 80px 16px 40px;
    }
    .landing-hero__corner { width: 40px; height: 40px; }
    .landing-hero__corner--tl, .landing-hero__corner--tr { top: 16px; }
    .landing-hero__corner--bl, .landing-hero__corner--br { bottom: 16px; }
    .landing-hero__corner--tl, .landing-hero__corner--bl { left: 16px; }
    .landing-hero__corner--tr, .landing-hero__corner--br { right: 16px; }
    .landing-hero__cta-button { padding: 14px 26px; font-size: 1rem; width: 100%; justify-content: center; max-width: 320px; }
    .landing-hero__cta-trust { padding: 0 16px; font-size: 0.82rem; text-align: center; }
}

/* =============================================================================
   REFONTE LANDING — SECTION « Parlez-nous brievement de votre mariage »
   (2026-05-23) — Concept « Le Brief Royal » : parchemin ivoire encadre de
   cartouches dores, halo or pulsant derriere le titre, sparkles flottants,
   champs avec icones dorees, CTA gradient or + shimmer infini.
   Mobile-first, prefers-reduced-motion respecte. Carnegie P26 (voie de sortie
   sans honte) preservee dans le trust microcopy.
   ============================================================================= */
.personal-address {
    position: relative;
    padding: clamp(48px, 8vw, 120px) 20px;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(198, 161, 91, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #FFF7EA 0%, #FFFCF5 50%, #F5EFE2 100%);
    overflow: hidden;
}

.personal-address__inner {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    z-index: 2;
}

/* Halo or doux derriere le titre — capte le regard */
.personal-address__halo {
    position: absolute;
    top: 22%;
    left: 50%;
    width: clamp(320px, 50vw, 580px);
    height: clamp(320px, 50vw, 580px);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 50%, rgba(198, 161, 91, 0.18) 0%, transparent 65%);
    filter: blur(28px);
    pointer-events: none;
    animation: pa-halo-pulse 9s ease-in-out infinite;
    z-index: 1;
}
@keyframes pa-halo-pulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.95); }
    50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.06); }
}

/* Sparkles flottants dores */
.personal-address__sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.personal-address__sparkles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF8E0 0%, #C6A15B 60%, transparent 100%);
    box-shadow: 0 0 8px rgba(230, 200, 117, 0.65);
    opacity: 0;
    animation: pa-sparkle-float 8s ease-in-out infinite;
}
.personal-address__sparkles span:nth-child(1) { top: 14%; left: 12%; animation-delay: 0s;   }
.personal-address__sparkles span:nth-child(2) { top: 22%; left: 84%; animation-delay: 1.4s; }
.personal-address__sparkles span:nth-child(3) { top: 56%; left: 6%;  animation-delay: 2.8s; width: 3px; height: 3px; }
.personal-address__sparkles span:nth-child(4) { top: 68%; left: 88%; animation-delay: 4.2s; }
.personal-address__sparkles span:nth-child(5) { top: 38%; left: 32%; animation-delay: 3.0s; width: 3px; height: 3px; }
.personal-address__sparkles span:nth-child(6) { top: 80%; left: 60%; animation-delay: 1.8s; }
@keyframes pa-sparkle-float {
    0%, 100% { opacity: 0;   transform: translateY(0)    scale(0.8); }
    20%      { opacity: 0.9; transform: translateY(-10px) scale(1);  }
    80%      { opacity: 0.5; transform: translateY(8px)   scale(1);  }
}

/* Intro — eyebrow + titre + lede (meme pattern que .ir-programme__header) */
.personal-address__intro {
    text-align: center;
    margin-bottom: clamp(40px, 6vw, 64px);
    position: relative;
    z-index: 2;
}
.personal-address__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(0.82rem, 1.5vw, 0.96rem);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #C6A15B;
    text-shadow: 0 0 12px rgba(198, 161, 91, 0.25);
}
.personal-address__eyebrow-dash {
    width: clamp(28px, 5vw, 52px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #C6A15B 50%, transparent 100%);
}
.personal-address__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.9rem, 5vw, 3.4rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: #1E2A5A;
    margin: 0 0 22px;
}
.personal-address__title-accent {
    font-style: italic;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #B8962E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    padding: 0 0.05em;
}
.personal-address__lead {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1rem, 2.2vw, 1.18rem);
    font-weight: 300;
    line-height: 1.6;
    color: rgba(30, 42, 90, 0.75);
    max-width: 560px;
    margin: 0 auto;
}

/* Formulaire — parchemin ivoire avec bordure or + 4 cartouches d'angle */
.personal-address__form {
    position: relative;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(198, 161, 91, 0.06) 0%, transparent 50%),
        linear-gradient(160deg, #FFFCF5 0%, #FFF7EA 60%, #F5EFE2 100%);
    border: 1px solid rgba(198, 161, 91, 0.3);
    border-radius: 18px;
    padding: clamp(36px, 5vw, 52px) clamp(24px, 4vw, 44px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.7),
        0 24px 56px rgba(30, 42, 90, 0.15),
        0 8px 24px rgba(30, 42, 90, 0.08);
    overflow: hidden;
}

/* 4 cartouches d'angle dores (signature Tchefon) */
.personal-address__corner {
    position: absolute;
    width: 32px;
    height: 32px;
    pointer-events: none;
    opacity: 0.85;
}
.personal-address__corner::before,
.personal-address__corner::after {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    box-shadow: 0 0 6px rgba(198, 161, 91, 0.35);
}
.personal-address__corner::before { width: 1.4px; height: 18px; }
.personal-address__corner::after  { width: 18px; height: 1.4px; }
.personal-address__corner--tl { top: 14px;    left: 14px;    }
.personal-address__corner--tl::before { top: 0; left: 0; }
.personal-address__corner--tl::after  { top: 0; left: 0; }
.personal-address__corner--tr { top: 14px;    right: 14px;   }
.personal-address__corner--tr::before { top: 0; right: 0; }
.personal-address__corner--tr::after  { top: 0; right: 0; }
.personal-address__corner--bl { bottom: 14px; left: 14px;    }
.personal-address__corner--bl::before { bottom: 0; left: 0; }
.personal-address__corner--bl::after  { bottom: 0; left: 0; }
.personal-address__corner--br { bottom: 14px; right: 14px;   }
.personal-address__corner--br::before { bottom: 0; right: 0; }
.personal-address__corner--br::after  { bottom: 0; right: 0; }

/* Row — 1 col mobile, 2 col desktop ≥640px */
.personal-address__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
@media (min-width: 640px) {
    .personal-address__row {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

/* Champ — label avec icone or + input */
.personal-address__field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.personal-address__field label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #1E2A5A;
}
.personal-address__field-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(230, 200, 117, 0.2) 0%, rgba(198, 161, 91, 0.15) 100%);
    border: 1px solid rgba(198, 161, 91, 0.3);
    color: #C6A15B;
    font-size: 0.7rem;
}
.personal-address__field input {
    width: 100%;
    padding: 14px 18px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    color: #1E2A5A;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(198, 161, 91, 0.35);
    border-radius: 12px;
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.personal-address__field input::placeholder {
    color: rgba(30, 42, 90, 0.42);
}
.personal-address__field input:hover {
    border-color: rgba(198, 161, 91, 0.6);
    background: rgba(255, 255, 255, 0.9);
}
.personal-address__field input:focus,
.personal-address__field input:focus-visible {
    outline: none;
    border-color: #C6A15B;
    background: #fff;
    box-shadow:
        0 0 0 3px rgba(198, 161, 91, 0.18),
        0 6px 16px rgba(198, 161, 91, 0.15);
    transform: translateY(-1px);
}

/* CTA — gradient or massif + shimmer infini + soulèvement */
.personal-address__submit {
    position: relative;
    width: 100%;
    margin-top: 28px;
    padding: 18px 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #1E2A5A 0%, #2a3a7a 50%, #1E2A5A 100%);
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 14px 36px rgba(30, 42, 90, 0.3),
        0 4px 12px rgba(30, 42, 90, 0.15);
    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s ease-out;
}
.personal-address__submit::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    padding: 1.5px;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #7A5B1A 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.personal-address__submit:hover,
.personal-address__submit:focus-visible {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 20px 48px rgba(30, 42, 90, 0.4),
        0 6px 16px rgba(198, 161, 91, 0.25);
    outline: none;
}
.personal-address__submit:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 0 3px rgba(198, 161, 91, 0.4),
        0 20px 48px rgba(30, 42, 90, 0.4);
}
.personal-address__submit:active {
    transform: translateY(-1px) scale(0.99);
    transition: transform 0.12s ease-out;
}
.personal-address__submit:disabled {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.65;
}
.personal-address__submit-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(230, 200, 117, 0.4) 50%, transparent 100%);
    animation: pa-cta-shimmer 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pa-cta-shimmer {
    0%, 35% { left: -100%; }
    65%, 100% { left: 130%; }
}
.personal-address__submit-label { position: relative; z-index: 1; }
.personal-address__submit i {
    position: relative;
    z-index: 1;
    font-size: 0.95rem;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.personal-address__submit:hover i {
    transform: translateX(4px);
}

/* Trust microcopy — Carnegie P26 (voie de sortie sans honte) */
.personal-address__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 22px 0 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.88rem;
    color: rgba(30, 42, 90, 0.65);
    letter-spacing: 0.01em;
    text-align: center;
}
.personal-address__trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(198, 161, 91, 0.15);
    color: #C6A15B;
    font-size: 0.7rem;
}

/* Form desactive (inscriptions fermees) */
.personal-address__form.is-disabled {
    opacity: 0.7;
    pointer-events: none;
}
.personal-address__form.is-disabled .personal-address__submit { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); }

/* PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .personal-address__halo,
    .personal-address__sparkles span,
    .personal-address__submit-shimmer { animation: none; }
    .personal-address__field input:focus { transform: none; }
    .personal-address__submit:hover { transform: none; }
    .personal-address__submit:hover i { transform: none; }
}

/* RESPONSIVE — petit mobile (≤480px) */
@media (max-width: 480px) {
    .personal-address { padding: 80px 16px; }
    .personal-address__form { padding: 32px 20px; border-radius: 14px; }
    .personal-address__corner { width: 26px; height: 26px; }
    .personal-address__corner::before { height: 14px; }
    .personal-address__corner::after  { width: 14px; }
    .personal-address__submit { padding: 16px 24px; font-size: 1rem; }
    .personal-address__field input { padding: 12px 16px; font-size: 16px; /* anti-zoom iOS */ }
}

/* =============================================================================
   REFONTE LANDING — SECTION « Premieres realisations » (2026-05-23)
   Concept : polaroids legerement inclines, format image rectangle landscape,
   badge temporel passe/today/imminent/soon/future (Carnegie P28).
   Coherence visuelle avec hero + brief : eyebrow dashes or, halo pulsant,
   sparkles flottants, cartouches doreS, accent or sur un mot cle.
   Mobile-first : 1 col mobile, 2 cols ≥640px, 3 cols ≥1024px.
   ============================================================================= */
.portfolio-gallery {
    position: relative;
    padding: clamp(48px, 8vw, 120px) 20px;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(198, 161, 91, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #FFFCF5 0%, #FFF7EA 50%, #F5EFE2 100%);
    overflow: hidden;
}

/* Halo or doux derriere le titre */
.portfolio-gallery__halo {
    position: absolute;
    top: 18%;
    left: 50%;
    width: clamp(360px, 55vw, 640px);
    height: clamp(360px, 55vw, 640px);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 50%, rgba(198, 161, 91, 0.16) 0%, transparent 65%);
    filter: blur(32px);
    pointer-events: none;
    animation: pg-halo-pulse 10s ease-in-out infinite;
    z-index: 1;
}
@keyframes pg-halo-pulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.96); }
    50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.04); }
}

/* Sparkles dores flottants */
.portfolio-gallery__sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.portfolio-gallery__sparkles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF8E0 0%, #C6A15B 60%, transparent 100%);
    box-shadow: 0 0 8px rgba(230, 200, 117, 0.6);
    opacity: 0;
    animation: pg-sparkle-float 8s ease-in-out infinite;
}
.portfolio-gallery__sparkles span:nth-child(1) { top: 12%; left: 10%; animation-delay: 0s;   }
.portfolio-gallery__sparkles span:nth-child(2) { top: 24%; left: 86%; animation-delay: 1.6s; }
.portfolio-gallery__sparkles span:nth-child(3) { top: 48%; left: 4%;  animation-delay: 3.0s; width: 3px; height: 3px; }
.portfolio-gallery__sparkles span:nth-child(4) { top: 62%; left: 92%; animation-delay: 4.4s; }
.portfolio-gallery__sparkles span:nth-child(5) { top: 32%; left: 50%; animation-delay: 2.2s; width: 3px; height: 3px; }
.portfolio-gallery__sparkles span:nth-child(6) { top: 86%; left: 28%; animation-delay: 1.0s; }
@keyframes pg-sparkle-float {
    0%, 100% { opacity: 0;   transform: translateY(0)    scale(0.8); }
    20%      { opacity: 0.85; transform: translateY(-10px) scale(1);  }
    80%      { opacity: 0.5;  transform: translateY(8px)   scale(1);  }
}

/* Header — eyebrow dashes + titre Cormorant + accent or */
.portfolio-gallery__header {
    position: relative;
    text-align: center;
    margin-bottom: clamp(48px, 7vw, 72px);
    z-index: 2;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.portfolio-gallery__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(0.82rem, 1.5vw, 0.96rem);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #C6A15B;
    text-shadow: 0 0 12px rgba(198, 161, 91, 0.25);
}
.portfolio-gallery__eyebrow-dash {
    width: clamp(28px, 5vw, 52px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #C6A15B 50%, transparent 100%);
}
.portfolio-gallery__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.9rem, 5vw, 3.4rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: #1E2A5A;
    margin: 0 0 18px;
}
.portfolio-gallery__title-accent {
    font-style: italic;
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 50%, #B8962E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.portfolio-gallery__lead {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1rem, 2.2vw, 1.18rem);
    font-weight: 300;
    line-height: 1.6;
    color: rgba(30, 42, 90, 0.75);
    max-width: 540px;
    margin: 0 auto;
}

/* Grille adaptative au nombre de cards (1, 2 ou 3 mariages featured) :
   - auto-fit + minmax(min(100%, 280px), 380px) → chaque card 280→380px
   - justify-content: center → grille centree si moins de colonnes
   Resultat :
     1 card  → centree solo (~380px de large, pas etiree pleine largeur)
     2 cards → 2 cols cote a cote, centrees
     3 cards → 3 cols sur desktop large, naturellement reflowees en 2 puis 1
              sur tablette et mobile.
   La limite logique du portfolio est fixee a 3 (PORTFOLIO_LIMIT cote backend). */
.portfolio-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 380px));
    justify-content: center;
    gap: clamp(40px, 6vw, 64px);
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
@media (min-width: 1024px) {
    .portfolio-gallery__grid { gap: 56px; }
}

/* CARD — polaroid blanc avec tilt --card-tilt par card (inline style) */
.portfolio-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transform: rotate(var(--card-tilt, 0deg));
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.portfolio-card:hover,
.portfolio-card:focus-visible {
    transform: rotate(0deg) translateY(-6px) scale(1.02);
    outline: none;
    z-index: 5;
}

.portfolio-card__polaroid {
    position: relative;
    padding: 18px 18px 22px;
    background: linear-gradient(170deg, #FFFFFF 0%, #FFFCF5 100%);
    border-radius: 6px;
    box-shadow:
        0 2px 4px rgba(30, 42, 90, 0.08),
        0 16px 40px rgba(30, 42, 90, 0.18),
        0 4px 12px rgba(30, 42, 90, 0.1);
    transition: box-shadow 0.4s ease-out;
}
.portfolio-card:hover .portfolio-card__polaroid {
    box-shadow:
        0 2px 4px rgba(30, 42, 90, 0.1),
        0 28px 64px rgba(198, 161, 91, 0.25),
        0 8px 20px rgba(30, 42, 90, 0.14);
}

/* Ruban adhesif dore en haut (effet polaroid pose) */
.portfolio-card__tape {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 64px;
    height: 18px;
    background: linear-gradient(135deg,
        rgba(230, 200, 117, 0.55) 0%,
        rgba(198, 161, 91, 0.65) 50%,
        rgba(230, 200, 117, 0.55) 100%);
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    z-index: 3;
}

/* Frame — IMAGE RECTANGLE LANDSCAPE 4:3 */
.portfolio-card__frame {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: linear-gradient(135deg, #F5EFE2 0%, #E8DEC8 100%);
}
.portfolio-card__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.portfolio-card:hover .portfolio-card__frame img {
    transform: scale(1.05);
}

/* Veil — voile glow doux qui apparait au hover */
.portfolio-card__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 60%,
        rgba(30, 42, 90, 0.4) 100%);
    opacity: 0;
    transition: opacity 0.4s ease-out;
    pointer-events: none;
}
.portfolio-card:hover .portfolio-card__veil { opacity: 1; }

/* Badge temporel — bottom-left de l'image, variants par timeStatus */
.portfolio-card__badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 2;
}
.portfolio-card__badge i { font-size: 0.72rem; }

/* Variant PAST — emeraude (Carnegie : celebration accomplie) */
.portfolio-card__badge--past {
    background: rgba(31, 122, 92, 0.92);
    color: #FFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Variant TODAY — or pulsant (urgence positive) */
.portfolio-card__badge--today {
    background: linear-gradient(135deg, #E6C875 0%, #C6A15B 100%);
    color: #1E2A5A;
    border: 1px solid rgba(255, 255, 255, 0.45);
    animation: pg-badge-pulse 2s ease-in-out infinite;
}
@keyframes pg-badge-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(198, 161, 91, 0.4); transform: scale(1); }
    50%      { box-shadow: 0 6px 20px rgba(198, 161, 91, 0.7); transform: scale(1.03); }
}
/* Variant IMMINENT — or vif (≤7 jours) */
.portfolio-card__badge--imminent {
    background: linear-gradient(135deg, #C6A15B 0%, #B8962E 100%);
    color: #FFF;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
/* Variant SOON — or doux (≤30 jours) */
.portfolio-card__badge--soon {
    background: rgba(198, 161, 91, 0.92);
    color: #FFF;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
/* Variant FUTURE — indigo (>30 jours, sobre) */
.portfolio-card__badge--future {
    background: rgba(30, 42, 90, 0.88);
    color: #FFF;
    border: 1px solid rgba(198, 161, 91, 0.4);
}
/* Variant DEMO — ivoire bordure or */
.portfolio-card__badge--demo {
    background: rgba(255, 252, 245, 0.95);
    color: #C6A15B;
    border: 1px solid rgba(198, 161, 91, 0.6);
}

/* Caption — nom couple + CTA discret */
.portfolio-card__caption {
    margin-top: 18px;
    padding: 0 4px;
    text-align: center;
}
.portfolio-card__couple {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.2rem, 2.6vw, 1.5rem);
    font-weight: 500;
    font-style: italic;
    color: #1E2A5A;
    line-height: 1.2;
    margin-bottom: 8px;
}
.portfolio-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(198, 161, 91, 0.95);
    transition: gap 0.3s ease-out, color 0.2s ease;
}
.portfolio-card__cta i {
    font-size: 0.7rem;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.portfolio-card:hover .portfolio-card__cta {
    gap: 10px;
    color: #C6A15B;
}
.portfolio-card:hover .portfolio-card__cta i { transform: translateX(3px); }

/* FOCUS visible (accessibilite WCAG) */
.portfolio-card:focus-visible .portfolio-card__polaroid {
    outline: 3px solid #C6A15B;
    outline-offset: 6px;
}

/* DEMO mode (pas de portfolioInvitations) — fond illustre */
.portfolio-card__frame--demo {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(198, 161, 91, 0.18) 0%, transparent 60%),
        linear-gradient(160deg, #1E2A5A 0%, #2a3a7a 50%, #1E2A5A 100%);
    color: #fff;
}
.portfolio-card__demo-content {
    text-align: center;
    padding: 24px;
}
.portfolio-card__demo-eyebrow {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(230, 200, 117, 0.9);
    margin-bottom: 10px;
}
.portfolio-card__demo-theme {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    margin-bottom: 14px;
}
.portfolio-card__demo-decor {
    display: inline-block;
    font-size: 1.4rem;
    color: #C6A15B;
    opacity: 0.7;
}

/* PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .portfolio-gallery__halo,
    .portfolio-gallery__sparkles span,
    .portfolio-card__badge--today {
        animation: none;
    }
    .portfolio-card,
    .portfolio-card:hover,
    .portfolio-card:hover .portfolio-card__frame img,
    .portfolio-card:hover .portfolio-card__cta i {
        transform: none;
        transition: none;
    }
}

/* RESPONSIVE — petit mobile (≤480px) : tilt reduit, padding compact */
@media (max-width: 480px) {
    .portfolio-gallery { padding: 80px 16px; }
    .portfolio-card { transform: rotate(calc(var(--card-tilt, 0deg) * 0.3)); }
    .portfolio-card__polaroid { padding: 14px 14px 18px; }
    .portfolio-card__tape { width: 52px; height: 16px; }
    .portfolio-card__badge { font-size: 0.72rem; padding: 6px 12px; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PAGES SEO LONG-TAIL (/invitation-mariage-*)
   Layout sobre, mobile-first, optimisé lecture longue + conversion.
   ═════════════════════════════════════════════════════════════════════════════ */
.seo-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1a1a2e;
    line-height: 1.65;
}

/* Breadcrumb */
.seo-breadcrumb {
    background: rgba(30, 42, 90, 0.04);
    padding: 12px 0;
    font-size: 0.875rem;
}
.seo-breadcrumb__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b6b7b;
}
.seo-breadcrumb a {
    color: #1E2A5A;
    text-decoration: none;
    font-weight: 500;
}
.seo-breadcrumb a:hover { text-decoration: underline; }
.seo-breadcrumb [aria-current="page"] { color: #6b6b7b; }

/* Hero */
.seo-hero {
    background: linear-gradient(135deg, #1E2A5A 0%, #16204A 100%);
    color: #FFF7EA;
    padding: 80px 24px 96px;
    text-align: center;
}
.seo-hero__inner {
    max-width: 820px;
    margin: 0 auto;
}
.seo-hero__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.15;
    margin: 0 0 24px;
    font-weight: 600;
    color: #FFF7EA;
}
.seo-hero__intro {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: rgba(255, 247, 234, 0.85);
    margin: 0 auto 40px;
    max-width: 680px;
}
.seo-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* Boutons SEO */
.seo-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    min-height: 48px;
    box-sizing: border-box;
}
.seo-btn--gold {
    background: #C6A15B;
    color: #1E2A5A;
    box-shadow: 0 4px 12px rgba(198, 161, 91, 0.3);
}
.seo-btn--gold:hover {
    background: #d4b370;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(198, 161, 91, 0.45);
}
.seo-btn--ghost {
    background: transparent;
    color: #FFF7EA;
    border: 1.5px solid rgba(255, 247, 234, 0.4);
}
.seo-btn--ghost:hover {
    background: rgba(255, 247, 234, 0.12);
    border-color: rgba(255, 247, 234, 0.7);
}

/* Sections */
.seo-proof,
.seo-values,
.seo-content,
.seo-faq,
.seo-cta-final {
    padding: 56px 24px;
}
.seo-proof__inner,
.seo-content__inner,
.seo-faq__inner {
    max-width: 760px;
    margin: 0 auto;
}
.seo-proof {
    background: #FFF7EA;
    text-align: center;
}
.seo-proof p {
    font-size: 1.1rem;
    color: #1a1a2e;
    margin: 0;
}

/* Value cards */
.seo-values__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.seo-value-card {
    background: #FFFFFF;
    border: 1px solid rgba(30, 42, 90, 0.08);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.seo-value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(30, 42, 90, 0.08);
}
.seo-value-card i {
    font-size: 2rem;
    color: #C6A15B;
    margin-bottom: 16px;
}
.seo-value-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    color: #1E2A5A;
    margin: 0 0 12px;
    font-weight: 600;
}
.seo-value-card p {
    color: #4a4a5e;
    margin: 0;
}

/* Contenu long */
.seo-content {
    background: #FFFFFF;
}
.seo-content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    color: #1E2A5A;
    margin: 40px 0 16px;
    font-weight: 600;
    line-height: 1.25;
}
.seo-content h2:first-child { margin-top: 0; }
.seo-content p,
.seo-content ul,
.seo-content ol {
    font-size: 1.05rem;
    color: #2a2a3e;
    margin: 0 0 18px;
}
.seo-content ul,
.seo-content ol {
    padding-left: 24px;
}
.seo-content li { margin-bottom: 8px; }
.seo-content strong { color: #1E2A5A; }
.seo-content a {
    color: #1E2A5A;
    text-decoration: underline;
    text-decoration-color: #C6A15B;
    text-underline-offset: 3px;
}

/* FAQ */
.seo-faq {
    background: #FFF7EA;
}
.seo-faq h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    color: #1E2A5A;
    text-align: center;
    margin: 0 0 32px;
    font-weight: 600;
}
.seo-faq__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.seo-faq-item {
    background: #FFFFFF;
    border: 1px solid rgba(30, 42, 90, 0.08);
    border-radius: 10px;
    padding: 18px 22px;
    transition: box-shadow 0.2s ease;
}
.seo-faq-item:hover {
    box-shadow: 0 4px 12px rgba(30, 42, 90, 0.06);
}
.seo-faq-item summary {
    font-weight: 600;
    color: #1E2A5A;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 28px;
    font-size: 1rem;
}
.seo-faq-item summary::-webkit-details-marker { display: none; }
.seo-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #C6A15B;
    font-size: 1.4rem;
    font-weight: 400;
    transition: transform 0.2s ease;
}
.seo-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.seo-faq-item p {
    margin: 14px 0 0;
    color: #4a4a5e;
    line-height: 1.6;
}
.seo-faq-item a {
    color: #1E2A5A;
    text-decoration: underline;
    text-decoration-color: #C6A15B;
}

/* CTA final */
.seo-cta-final {
    background: linear-gradient(135deg, #1E2A5A 0%, #16204A 100%);
    color: #FFF7EA;
    text-align: center;
}
.seo-cta-final__inner {
    max-width: 680px;
    margin: 0 auto;
}
.seo-cta-final h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: #FFF7EA;
    margin: 0 0 16px;
    font-weight: 600;
}
.seo-cta-final p {
    color: rgba(255, 247, 234, 0.85);
    margin: 0 0 32px;
    font-size: 1.05rem;
}
.seo-cta-final__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .seo-value-card,
    .seo-value-card:hover,
    .seo-btn,
    .seo-btn:hover {
        transform: none;
        transition: none;
    }
}

/* Mobile compact */
@media (max-width: 640px) {
    .seo-hero { padding: 56px 20px 64px; }
    .seo-proof, .seo-values, .seo-content, .seo-faq, .seo-cta-final { padding: 44px 20px; }
    .seo-content h2 { margin: 28px 0 12px; }
    .seo-btn { padding: 12px 22px; font-size: 0.9rem; width: 100%; justify-content: center; }
}

/* ───────────────────────────────────────────────────────────────────────────
   intl-tel-input v25 — overrides pour le frontend Tchefon.
   Les formulaires landing (capture WhatsApp, personnaliser) et onboarding
   utilisent des inputs custom — on garde le wrapper .iti à 100% largeur
   et on harmonise la padding gauche avec le dial-code séparé.
   ─────────────────────────────────────────────────────────────────────────── */
.iti { width: 100%; display: block; }
.iti--separate-dial-code .iti__country-container { width: 84px; }
.iti__country-list { z-index: 9999; }
.iti input[type="tel"][data-intl-tel-ready] { padding-left: 92px !important; }

/* form-floating + intl-tel-input — cf. admin.css pour le pourquoi.
   Layout label-au-dessus quand la lib a inséré son wrapper. */
.form-floating:has(.iti) { padding-top: 1.6rem; height: auto !important; }
.form-floating:has(.iti) > label {
    position: static !important;
    transform: none !important;
    padding: 0 0 0.35rem !important;
    height: auto !important;
    width: auto !important;
    font-size: 0.84rem;
    font-weight: 600;
    pointer-events: auto;
    opacity: 1 !important;
    background: transparent !important;
    line-height: 1.2;
}
.form-floating:has(.iti) > .iti > input.form-control {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    height: 48px;
    padding-left: 92px !important;
}

/* ═════════════════════════════════════════════════════════════════════════════
   SECTION PARTENAIRES — « Ils nous accompagnent »
   Photographes, influenceurs, lieux mis en avant sur la landing.
   Cards mobile-first, grid responsive, accent or sur hover.
   ═════════════════════════════════════════════════════════════════════════════ */
.partners {
    padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 24px);
    background: linear-gradient(180deg, var(--tch-bg) 0%, #FFFFFF 100%);
}
.partners__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.partners__intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(28px, 4vw, 48px);
}
.partners__eyebrow {
    display: inline-block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    color: var(--tch-accent);
    font-size: clamp(0.92rem, 2.4vw, 1.05rem);
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.partners__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    line-height: 1.2;
    color: var(--tch-primary);
    margin: 0 0 14px;
}
.partners__lede {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--tch-text);
    font-size: clamp(0.94rem, 2.6vw, 1.05rem);
    line-height: 1.55;
    margin: 0;
}

.partners__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(16px, 3vw, 24px);
}

.partner-card {
    background: var(--tch-surface);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(30, 42, 90, 0.06);
    transition: transform 250ms ease, box-shadow 250ms ease;
    display: flex;
    flex-direction: column;
}
.partner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(30, 42, 90, 0.12);
}
.partner-card__cover {
    aspect-ratio: 16 / 9;
    background: #f3f4f6;
    overflow: hidden;
}
.partner-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.partner-card__body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.partner-card__head {
    display: flex;
    gap: 12px;
    align-items: center;
}
.partner-card__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--tch-surface);
    box-shadow: 0 0 0 1px rgba(30, 42, 90, 0.08);
}
.partner-card__avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tch-bg);
    color: var(--tch-accent);
    font-size: 1.4rem;
}
.partner-card__name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tch-primary);
    margin: 0;
    line-height: 1.2;
}
.partner-card__type {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.82rem;
    color: #6b7280;
    margin: 2px 0 0;
}
.partner-card__type i { color: var(--tch-accent); margin-right: 4px; }
.partner-card__bio {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--tch-text);
    margin: 0;
}
.partner-card__links {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}
.partner-card__links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tch-bg);
    color: var(--tch-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.partner-card__links a:hover,
.partner-card__links a:focus-visible {
    background: var(--tch-accent);
    color: #fff;
    transform: translateY(-2px);
    outline: none;
}

/* ═════════════════════════════════════════════════════════════════════════════
   PAGE HERO PARTAGÉ — pages secondaires de la landing
   Utilisé par /pages/{slug}, /parrains, /my/wallet/{id} via le bloc
   page_hero du _layout_with_chrome.html.twig. Indigo + ivoire + or.
   ═════════════════════════════════════════════════════════════════════════════ */
.public-page-hero {
    background: linear-gradient(180deg, var(--tch-primary, #1E2A5A) 0%, #2A3873 100%);
    color: #FFFFFF;
    padding: clamp(60px, 12vw, 120px) clamp(16px, 4vw, 32px) clamp(40px, 8vw, 80px);
    position: relative;
    overflow: hidden;
}
.public-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(198, 161, 91, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 247, 234, 0.08) 0%, transparent 50%);
    pointer-events: none;
}
.public-page-hero__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
.public-page-hero__eyebrow {
    display: inline-block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(0.95rem, 2.6vw, 1.15rem);
    color: var(--tch-accent, #C6A15B);
    letter-spacing: 0.08em;
    margin-bottom: clamp(14px, 2.4vw, 20px);
}
.public-page-hero__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.9rem, 6vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    margin: 0;
}
.public-page-hero__lede {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1rem, 2.6vw, 1.18rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: clamp(16px, 3vw, 24px) auto 0;
    max-width: 620px;
}

@media (max-width: 600px) {
    .public-page-hero { padding-block: 60px 40px; }
    .public-page-hero__title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
}

/* Décale le contenu sous le hero pour conserver le padding de section. */
.public-page-hero + .public-shell { padding-top: clamp(32px, 5vw, 56px); }

/* Honeypot anti-bot (couche 0) - champ piege masque visuellement, present dans le DOM. */
.tch-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ════════════════════════════════════════════════════════════════════
   Onboarding — Wizard multi-étapes (stepper, panneaux, navigation)
   ════════════════════════════════════════════════════════════════════ */
.onboarding-stepper {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    padding: 0;
    margin: 0 0 1.5rem;
}
.onboarding-stepper__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    color: rgba(30, 42, 90, 0.45);
    font-size: 0.72rem;
}
.onboarding-stepper__num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(30, 42, 90, 0.08);
    color: rgba(30, 42, 90, 0.55);
    font-weight: 700;
    font-size: 0.85rem;
    transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s, box-shadow 0.3s;
}
.onboarding-stepper__label {
    font-weight: 600;
    letter-spacing: 0.02em;
}
.onboarding-stepper__item.is-active {
    color: var(--tch-primary, #1E2A5A);
}
.onboarding-stepper__item.is-active .onboarding-stepper__num {
    background: var(--tch-accent, #C6A15B);
    color: #fff;
    box-shadow: 0 4px 14px -4px rgba(198, 161, 91, 0.6);
}
.onboarding-stepper__item.is-done {
    color: var(--tch-secondary, #1F7A5C);
    cursor: pointer;
}
.onboarding-stepper__item.is-done .onboarding-stepper__num {
    background: var(--tch-secondary, #1F7A5C);
    color: #fff;
}
@media (max-width: 560px) {
    .onboarding-stepper__label { display: none; }
}

.onboarding-step { display: none; }
.onboarding-step.is-active {
    display: block;
    animation: ob-step-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ob-step-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .onboarding-step.is-active { animation: none; }
}

.onboarding-field__hint {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: rgba(30, 42, 90, 0.55);
}

.onboarding-input.is-invalid input,
.onboarding-input.is-invalid select {
    border-color: var(--tch-error, #DC2626) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.onboarding-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}
.onboarding-nav__prev,
.onboarding-nav__next {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.onboarding-nav__prev {
    background: transparent;
    color: var(--tch-primary, #1E2A5A);
    border: 1px solid rgba(30, 42, 90, 0.2);
}
.onboarding-nav__prev:hover {
    background: rgba(30, 42, 90, 0.05);
}
.onboarding-nav__next {
    margin-left: auto;
    background: var(--tch-primary, #1E2A5A);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(30, 42, 90, 0.6);
}
.onboarding-nav__next:hover {
    transform: translateY(-2px);
}
/* L'attribut [hidden] posé par le JS doit l'emporter sur le display:inline-flex
   ci-dessus (sinon « Précédent » à l'étape 1 et « Continuer » à la dernière
   étape restent visibles à côté du bouton de soumission). */
.onboarding-nav__prev[hidden],
.onboarding-nav__next[hidden] { display: none; }

/* La zone de soumission n'apparaît qu'à la dernière étape (pilotée par le JS). */
.onboarding-submit-wrap { display: none; }
.onboarding-submit-wrap.is-visible { display: block; }

/* ═════════════════════════════════════════════════════════════════════════════
   ESPACE MARIÉ — Programme (événements) en libre-service. Mobile-first.
   ═════════════════════════════════════════════════════════════════════════════ */
.cw-prog__flash--ok { background: #f0fdf4; color: var(--tch-success, #16a34a); }

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

.cw-prog__item {
  background: var(--tch-surface, #fff);
  border: 1px solid var(--tch-border, #e5e7eb);
  border-radius: 14px;
  padding: clamp(0.9rem, 3.5vw, 1.25rem);
  box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.25);
}

.cw-prog__head { display: flex; flex-direction: column; gap: 10px; }
.cw-prog__time {
  display: inline-flex; align-items: baseline; gap: 8px; align-self: flex-start;
  padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--tch-primary, #1E2A5A) 8%, transparent);
  color: var(--tch-primary, #1E2A5A);
}
.cw-prog__time strong { font-size: 1.05rem; letter-spacing: 0.02em; }
.cw-prog__time span { font-size: 0.78rem; color: var(--tch-text-muted, #6b7280); }
.cw-prog__name { margin: 0; font-size: clamp(1.05rem, 4vw, 1.25rem); color: var(--tch-text, #111827); }
.cw-prog__loc { margin: 4px 0 0; font-size: 0.9rem; color: var(--tch-primary, #1E2A5A); }
.cw-prog__loc i { color: var(--tch-accent, #C6A15B); margin-right: 4px; }
.cw-prog__addr,
.cw-prog__desc { margin: 4px 0 0; font-size: 0.85rem; color: var(--tch-text-muted, #6b7280); line-height: 1.5; }

.cw-prog__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--tch-border, #e5e7eb); }

.cw-prog__fold { flex: 1 1 auto; }
.cw-prog__fold-btn {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--tch-border, #e5e7eb); background: var(--tch-bg, #FFF7EA);
  font-size: 0.85rem; font-weight: 600; color: var(--tch-primary, #1E2A5A);
}
.cw-prog__fold-btn::-webkit-details-marker { display: none; }
.cw-prog__fold-btn--danger { color: var(--tch-error, #DC2626); background: color-mix(in srgb, var(--tch-error, #DC2626) 6%, transparent); border-color: color-mix(in srgb, var(--tch-error, #DC2626) 25%, transparent); }
.cw-prog__fold[open] > .cw-prog__fold-btn { margin-bottom: 12px; }

.cw-prog__form { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cw-prog__form .onboarding-field { margin: 0; }
.cw-prog__confirm { margin: 0; font-size: 0.9rem; color: var(--tch-text, #111827); }
.cw-prog__submit { width: 100%; }
.cw-prog__del-btn { width: 100%; background: var(--tch-error, #DC2626); color: #fff; border-color: var(--tch-error, #DC2626); }

.cw-prog__empty {
  margin-top: var(--space-lg); padding: clamp(1.5rem, 6vw, 2.5rem) 1rem; text-align: center;
  border: 1px dashed var(--tch-border, #e5e7eb); border-radius: 14px; color: var(--tch-text-muted, #6b7280);
}
.cw-prog__empty i { font-size: 1.8rem; color: var(--tch-accent, #C6A15B); display: block; margin-bottom: 10px; }
.cw-prog__empty p { margin: 0; line-height: 1.5; }

.cw-prog__add { margin-top: var(--space-lg); }
.cw-prog__add-btn {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; padding: 0 16px; border-radius: 12px;
  background: linear-gradient(135deg, var(--tch-accent, #C6A15B), color-mix(in srgb, var(--tch-accent, #C6A15B), #000 14%));
  color: #fff; font-weight: 700; letter-spacing: 0.02em;
}
.cw-prog__add-btn::-webkit-details-marker { display: none; }
.cw-prog__form--add { margin-top: 14px; }

@media (min-width: 600px) {
  .cw-prog__head { flex-direction: row; align-items: flex-start; gap: 16px; }
  .cw-prog__time { flex-direction: column; align-items: center; min-width: 88px; padding: 10px 12px; }
  .cw-prog__form { grid-template-columns: 1fr 1fr; }
  .cw-prog__form .onboarding-field--full { grid-column: 1 / -1; }
  .cw-prog__submit,
  .cw-prog__del-btn { width: auto; justify-self: start; grid-column: 1 / -1; }
  .cw-prog__actions { flex-wrap: nowrap; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   ESPACE MARIÉ — Invités & suivi RSVP. Mobile-first. Réutilise .cw-prog__*.
   ═════════════════════════════════════════════════════════════════════════════ */
.cw-guest__summary { display: flex; gap: 10px; margin: var(--space-lg) 0 0; }
.cw-guest__stat {
  flex: 1 1 0; text-align: center; padding: 14px 8px; border-radius: 12px;
  background: var(--tch-surface, #fff); border: 1px solid var(--tch-border, #e5e7eb);
}
.cw-guest__stat strong { display: block; font-size: 1.5rem; color: var(--tch-primary, #1E2A5A); line-height: 1; }
.cw-guest__stat span { font-size: 0.72rem; color: var(--tch-text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.04em; }
.cw-guest__stat--ok strong { color: var(--tch-success, #16a34a); }

.cw-guest__list { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.cw-guest__item {
  background: var(--tch-surface, #fff); border: 1px solid var(--tch-border, #e5e7eb);
  border-radius: 14px; padding: clamp(0.9rem, 3.5vw, 1.25rem);
  box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.25);
}
.cw-guest__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cw-guest__name { margin: 0; font-size: clamp(1.05rem, 4vw, 1.25rem); color: var(--tch-text, #111827); }
.cw-guest__tier { font-size: 0.78rem; color: var(--tch-accent, #C6A15B); font-weight: 600; }
.cw-guest__badge {
  flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--tch-text-muted, #6b7280) 12%, transparent); color: var(--tch-text-muted, #6b7280);
  white-space: nowrap;
}
.cw-guest__badge--ok { background: color-mix(in srgb, var(--tch-success, #16a34a) 14%, transparent); color: var(--tch-success, #16a34a); }

.cw-guest__contact { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.85rem; color: var(--tch-text-muted, #6b7280); }
.cw-guest__contact i { color: var(--tch-accent, #C6A15B); margin-right: 4px; }

.cw-guest__chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.cw-guest__chip {
  font-size: 0.72rem; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--tch-text-muted, #6b7280) 12%, transparent); color: var(--tch-text, #111827);
}
.cw-guest__chip--success { background: color-mix(in srgb, var(--tch-success, #16a34a) 14%, transparent); color: var(--tch-success, #16a34a); }
.cw-guest__chip--danger { background: color-mix(in srgb, var(--tch-error, #DC2626) 12%, transparent); color: var(--tch-error, #DC2626); }
.cw-guest__chip--warning { background: color-mix(in srgb, var(--tch-warning, #D97706) 14%, transparent); color: var(--tch-warning, #D97706); }

.cw-guest__share { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--tch-border, #e5e7eb); }
.cw-guest__wa { background: #25D366; color: #fff; border-color: #25D366; width: 100%; }
.cw-guest__wa:hover { background: #1da851; border-color: #1da851; color: #fff; }
.cw-guest__link { display: flex; flex-direction: column; gap: 4px; }
.cw-guest__link-label { font-size: 0.72rem; color: var(--tch-text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.04em; }
.cw-guest__link .onboarding-input { font-size: 0.8rem; }

.cw-guest__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cw-guest__actions .cw-prog__fold { flex: 1 1 auto; }

.cw-guest__check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--tch-text, #111827); line-height: 1.4; }
.cw-guest__check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }

@media (min-width: 600px) {
  .cw-guest__share { flex-direction: row; align-items: flex-end; }
  .cw-guest__wa { width: auto; flex: 0 0 auto; }
  .cw-guest__link { flex: 1 1 auto; }
  .cw-guest__actions { flex-wrap: nowrap; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   ESPACE MARIÉ — Photos du couple. Mobile-first.
   ═════════════════════════════════════════════════════════════════════════════ */
.cw-photo__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }

.cw-photo__slot {
  background: var(--tch-surface, #fff); border: 1px solid var(--tch-border, #e5e7eb);
  border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.25);
}
.cw-photo__preview {
  position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--tch-bg, #FFF7EA);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cw-photo__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-photo__preview--empty i { font-size: 2.4rem; color: color-mix(in srgb, var(--tch-accent, #C6A15B) 55%, transparent); }

.cw-photo__body { padding: clamp(0.9rem, 3.5vw, 1.25rem); display: flex; flex-direction: column; gap: 8px; }
.cw-photo__label { margin: 0; font-size: 1.1rem; color: var(--tch-text, #111827); }
.cw-photo__hint { margin: 0; font-size: 0.82rem; color: var(--tch-text-muted, #6b7280); }

.cw-photo__form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.cw-photo__file {
  width: 100%; font-size: 0.85rem; color: var(--tch-text-muted, #6b7280);
  padding: 10px; border: 1px dashed var(--tch-border, #e5e7eb); border-radius: 10px; background: var(--tch-bg, #FFF7EA);
}
.cw-photo__file::file-selector-button {
  margin-right: 10px; min-height: 40px; padding: 0 14px; border: none; border-radius: 8px;
  background: var(--tch-primary, #1E2A5A); color: #fff; font-weight: 600; cursor: pointer;
}
.cw-photo__submit { width: 100%; }
.cw-photo__remove { margin-top: 2px; }

@media (min-width: 720px) {
  .cw-photo__grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   ESPACE MARIÉ — Import Excel des invités. Réutilise le pli .cw-prog__add.
   ═════════════════════════════════════════════════════════════════════════════ */
.cw-guest__import { margin-top: var(--space-sm, 0.75rem); }
.cw-guest__import-help { margin: 0 0 4px; }
.cw-guest__tpl { align-self: flex-start; margin-bottom: 6px; }

/* ═════════════════════════════════════════════════════════════════════════════
   ESPACE MARIÉ — Galerie photos (modale média partagée + aperçu serveur).
   ═════════════════════════════════════════════════════════════════════════════ */
.cw-gallery__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: var(--space-md, 1rem) 0;
}
.cw-gallery__count { font-size: 0.88rem; color: var(--tch-text-muted, #6b7280); }
.cw-gallery__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.cw-gallery__cell {
  position: relative; margin: 0; aspect-ratio: 1 / 1;
  border-radius: 12px; overflow: hidden; background: var(--tch-bg, #FFF7EA);
}
.cw-gallery__cell img,
.cw-gallery__cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-gallery__tag {
  position: absolute; bottom: 6px; right: 6px; padding: 2px 8px;
  border-radius: 6px; background: rgba(17, 24, 39, 0.7); color: #fff; font-size: 0.7rem;
}
@media (min-width: 640px) {
  .cw-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .cw-gallery__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═════════════════════════════════════════════════════════════════════════════
   ESPACE MARIÉ — Notre histoire (moments + médias). Réutilise .cw-prog__*, .cw-photo__*.
   ═════════════════════════════════════════════════════════════════════════════ */
.cw-story__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cw-story__item {
  position: relative;
  padding: clamp(0.9rem, 3.5vw, 1.25rem);
  border: 1px solid var(--tch-border, #e8e4df);
  border-left: 3px solid var(--tch-accent, #C6A15B);
  border-radius: 14px;
  background: var(--tch-surface, #fff);
}
.cw-story__top { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.cw-story__date { font-size: 0.8rem; color: var(--tch-accent, #C6A15B); font-weight: 600; }
.cw-story__name { margin: 0; font-size: 1.15rem; color: var(--tch-text, #111827); }
.cw-story__desc { margin: 0 0 10px; color: var(--tch-text-muted, #6b7280); line-height: 1.5; }

.cw-story__media { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 10px; }
.cw-story__thumb { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--tch-bg, #FFF7EA); }
.cw-story__thumb img, .cw-story__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-story__thumb-form { position: absolute; top: 4px; right: 4px; margin: 0; }
.cw-story__thumb-remove {
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(17, 24, 39, 0.7); color: #fff; cursor: pointer; font-size: 0.85rem; line-height: 1;
}
.cw-story__add-media { margin-bottom: 8px; }
.cw-story__actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (min-width: 640px) {
  .cw-story__media { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* ═════════════════════════════════════════════════════════════════════════════
   ESPACE MARIÉ — Lignée & hommages. Réutilise .cw-story__*, .cw-prog__*, .cw-photo__*.
   ═════════════════════════════════════════════════════════════════════════════ */
.cw-family__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.cw-family__photo {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  overflow: hidden; background: var(--tch-bg, #FFF7EA);
  display: flex; align-items: center; justify-content: center;
}
.cw-family__photo img { width: 100%; height: 100%; object-fit: cover; }
.cw-family__photo--empty { color: var(--tch-text-muted, #6b7280); font-size: 1.3rem; }
.cw-family__id { display: flex; flex-direction: column; gap: 2px; }
.cw-family__role { font-size: 0.85rem; color: var(--tch-text-muted, #6b7280); }
.cw-family__memoriam {
  align-self: flex-start; margin-top: 2px; padding: 1px 8px; border-radius: 999px;
  background: var(--tch-bg, #FFF7EA); color: var(--tch-accent, #C6A15B);
  font-size: 0.72rem; font-weight: 600;
}
.cw-family__tribute { font-style: italic; }
.cw-family__item--memoriam { border-left-color: var(--tch-accent, #C6A15B); }

/* ═════════════════════════════════════════════════════════════════════════════
   ESPACE MARIÉ — Hub « Mon mariage » : accès rapides en accordéon (sans JS).
   ═════════════════════════════════════════════════════════════════════════════ */
.cw-hub__primary { margin-bottom: 10px; }
.cw-hub__group { margin-top: 8px; border: 1px solid var(--tch-border, #e8e4df); border-radius: 12px; overflow: hidden; }
.cw-hub__group[open] { box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05); }
.cw-hub__group-btn {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 12px 14px; font-weight: 600; color: var(--tch-primary, #1E2A5A); background: var(--tch-bg, #FFF7EA);
}
.cw-hub__group-btn::-webkit-details-marker { display: none; }
.cw-hub__group-btn::after {
  content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  margin-left: auto; font-size: 0.75rem; color: var(--tch-text-muted, #6b7280); transition: transform 0.2s ease;
}
.cw-hub__group[open] .cw-hub__group-btn::after { transform: rotate(180deg); }
.cw-hub__group .client-detail__actions { padding: 12px 14px; }

/* ═════════════════════════════════════════════════════════════════════════════
   ESPACE MARIÉ — Ambiance (palette + polices + musique).
   ═════════════════════════════════════════════════════════════════════════════ */
.cw-amb__colors { gap: 10px; }
.cw-amb__color-row { display: flex; align-items: center; gap: 8px; }
.cw-amb__color-label { flex: 1 1 auto; }
.cw-amb__color-swatch {
  flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 1px solid var(--tch-border, #e8e4df);
  border-radius: 10px; background: none; cursor: pointer;
}
.cw-amb__color-role { flex: 0 0 38%; max-width: 160px; }
.cw-amb__submit { margin-top: 4px; }

.cw-amb__music {
  margin-bottom: 14px; padding: clamp(0.9rem, 3.5vw, 1.25rem);
  border: 1px solid var(--tch-border, #e8e4df); border-radius: 14px; background: var(--tch-surface, #fff);
}
.cw-amb__music-head { margin-bottom: 8px; }
.cw-amb__music-title { margin: 0; font-size: 1.05rem; color: var(--tch-text, #111827); }
/* Lecteur : onde décorative + métadonnées + audio natif (calque admin). */
.cw-amb__player { border: 1px solid var(--tch-border); border-radius: var(--tf-radius); overflow: hidden; margin-bottom: 14px; background: var(--tch-surface); }
.cw-amb__wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 54px; padding: 0 14px; background: var(--tch-primary); }
.cw-amb__wave span { width: 3px; border-radius: 999px; background: var(--tch-accent); transform-origin: center; animation: cw-amb-wave 1.1s ease-in-out infinite; }
.cw-amb__wave span:nth-child(odd) { height: 40%; }
.cw-amb__wave span:nth-child(even) { height: 70%; }
.cw-amb__wave span:nth-child(3n) { height: 95%; }
@keyframes cw-amb-wave { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .cw-amb__wave span { animation: none; } }
.cw-amb__player-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.cw-amb__track-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cw-amb__track-name { font-size: 0.9rem; font-weight: 600; color: var(--tch-primary); }
.cw-amb__track-type { font-size: 0.72rem; color: var(--tch-text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.04em; }
.cw-amb__player-body audio { width: 100%; height: 38px; }
.cw-amb__track-del { margin: 0; }

/* Onglets source audio (URL / Fichier) — segmented control. */
.cw-amb__tabs { display: inline-flex; border: 1px solid var(--tch-border); border-radius: var(--tf-radius-sm); overflow: hidden; margin: 4px 0 8px; }
.cw-amb__tab { padding: 9px 16px; border: 0; background: var(--tch-surface); color: var(--tch-text-muted); font-weight: 600; font-size: 0.85rem; cursor: pointer; }
.cw-amb__tab + .cw-amb__tab { border-left: 1px solid var(--tch-border); }
.cw-amb__tab.is-active { background: var(--tch-primary); color: #fff; }
.cw-amb__panel { margin-top: 2px; }

/* Zone fichier audio (clic) façon dropzone. */
.cw-amb__audio-dz { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 104px; padding: 16px; cursor: pointer; text-align: center; border: 2px dashed var(--tch-border); border-radius: var(--tf-radius); background: var(--tch-bg); color: var(--tch-text-muted); transition: border-color 0.2s ease, background 0.2s ease; }
.cw-amb__audio-dz:hover { border-color: var(--tch-accent); background: color-mix(in srgb, var(--tch-accent) 8%, var(--tch-bg)); }
.cw-amb__audio-dz input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cw-amb__audio-dz .tf-dropzone__cue i { font-size: 1.4rem; color: var(--tch-accent); }

/* Repères de volume. */
.cw-amb__vol-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--tch-text-muted, #6b7280); margin-top: 2px; }
.cw-amb__volume { width: 100%; accent-color: var(--tch-accent, #C6A15B); }

/* Poignée de glisser-déposer (réordonnancement lignée / histoire). */
.cw-drag { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border: 0; background: transparent; color: var(--tch-text-muted); cursor: grab; border-radius: 8px; touch-action: none; }
.cw-drag:hover { color: var(--tch-primary); background: var(--tch-bg); }
.cw-drag:active { cursor: grabbing; }
.cw-story__item.sortable-chosen { box-shadow: 0 12px 32px -14px rgba(30, 42, 90, 0.35); }
.cw-story__item.sortable-ghost { opacity: 0.4; }

/* ═════════════════════════════════════════════════════════════════════════════
   ESPACE MARIÉ — Dress code. Réutilise .cw-prog__form, .cw-info__form, .cw-photo__*.
   ═════════════════════════════════════════════════════════════════════════════ */
.cw-dress__textarea { resize: vertical; min-height: 84px; padding-top: 10px; line-height: 1.5; }
.cw-dress__heading {
  margin: var(--space-lg, 1.5rem) 0 6px;
  font-size: 1.15rem;
  color: var(--tch-text, #111827);
}

/* ═════════════════════════════════════════════════════════════════════════════
   ESPACE MARIÉ — Informations du mariage. Réutilise la grille .cw-prog__form.
   ═════════════════════════════════════════════════════════════════════════════ */
.cw-info__form { margin-top: var(--space-lg); }

/* ═════════════════════════════════════════════════════════════════════════════
   ESPACE COUPLE — App shell (sidebar marque + top bar + off-canvas mobile).
   Coquille de navigation persistante au niveau de finition de l'admin.
   ═════════════════════════════════════════════════════════════════════════════ */
.cs { min-height: 100vh; background: var(--tch-bg); }

/* ── Sidebar (indigo signature) ──────────────────────────────────────────── */
.cs-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1050;
  width: 270px;
  max-width: 84vw;
  display: flex;
  flex-direction: column;
  background: linear-gradient(188deg, var(--tch-primary) 0%, #161f47 100%);
  color: rgba(255, 255, 255, 0.85);
  padding: 1.25rem 0.9rem 1rem;
  transform: translateX(-100%);
  transition: transform 0.32s var(--ease-out-expo);
  overflow-y: auto;
}
.cs.is-open .cs-sidebar { transform: none; }
.cs-sidebar__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}

.cs-brand { display: block; text-decoration: none; padding: 0.35rem 0.7rem 1.15rem; }
.cs-brand__mark {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--tch-accent);
}
.cs-brand__sub {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 5px;
}

.cs-nav { flex: 1; display: flex; flex-direction: column; gap: 1.1rem; }
.cs-nav__group { display: flex; flex-direction: column; gap: 2px; }
.cs-nav__label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: rgba(255, 255, 255, 0.42);
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.62rem 0.7rem;
  border-radius: 11px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.2s var(--ease-out-expo), color 0.2s;
}
.cs-nav__link i {
  width: 1.15rem;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s;
}
.cs-nav__link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.cs-nav__link:hover i { color: var(--tch-accent); }
.cs-nav__link.is-active { background: color-mix(in srgb, var(--tch-accent) 26%, transparent); color: #fff; font-weight: 600; }
.cs-nav__link.is-active i { color: var(--tch-accent); }
.cs-nav__link.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tch-accent);
}
/* Verrou édition (paiement non validé) — sections grisées + cadenas,
   « Vue d'ensemble » (1er lien) reste accessible. */
.cs-nav__group--locked .cs-nav__link { opacity: 0.4; pointer-events: none; }
.cs-nav__group--locked .cs-nav__link:first-of-type { opacity: 1; pointer-events: auto; }
.cs-nav__group--locked .cs-nav__link:not(:first-of-type)::after {
  content: "\f023";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: auto;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}
.cs-nav__lock-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.3rem 0.2rem 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 9px;
  background: color-mix(in srgb, var(--tch-accent) 18%, transparent);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
  line-height: 1.35;
}
.cs-nav__lock-note i { color: var(--tch-accent); margin-top: 2px; flex-shrink: 0; }

.cs-sidebar__footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cs-nav__link--logout:hover { background: color-mix(in srgb, var(--tch-error) 32%, transparent); color: #fff; }
.cs-nav__link--logout:hover i { color: #fff; }

/* ── Overlay (mobile) ────────────────────────────────────────────────────── */
.cs-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(15, 20, 45, 0.5);
  backdrop-filter: blur(2px);
}
.cs-overlay[hidden] { display: none; }

/* ── Colonne principale ──────────────────────────────────────────────────── */
.cs-main { min-height: 100vh; display: flex; flex-direction: column; }
/* Top bar « éditorial 2 niveaux » : rangée nav + actions + menu avatar,
   puis rangée contexte couple (noms serif · date · décompte · statut). */
.cs-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--tch-surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--tch-primary) 9%, transparent);
}
.cs-topbar__row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem clamp(0.9rem, 3vw, 1.5rem);
}
.cs-topbar__row--context {
  padding-top: 0.5rem;
  padding-bottom: 0.62rem;
  border-top: 1px solid color-mix(in srgb, var(--tch-primary) 7%, transparent);
  justify-content: space-between;
}
.cs-topbar__toggle {
  border: 0;
  background: transparent;
  color: var(--tch-primary);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
}
/* Fil d'Ariane — rangée du haut. */
.cs-breadcrumb {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.cs-breadcrumb__link {
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tch-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.cs-breadcrumb__link:hover { color: var(--tch-primary); }
.cs-breadcrumb__sep { font-size: 0.65rem; color: color-mix(in srgb, var(--tch-primary) 32%, transparent); flex-shrink: 0; }
.cs-breadcrumb__current {
  min-width: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.3rem, 3.6vw, 1.6rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--tch-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-topbar__actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.cs-topbar__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 11px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--tch-primary);
  background: color-mix(in srgb, var(--tch-accent) 13%, var(--tch-surface));
  border: 1px solid color-mix(in srgb, var(--tch-accent) 30%, transparent);
  transition: transform 0.2s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo), background 0.2s;
}
.cs-topbar__action i { color: var(--tch-accent); }
.cs-topbar__action:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--tch-accent) 22%, var(--tch-surface));
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--tch-accent) 70%, transparent);
}
/* Variante « Partager » (vert WhatsApp). */
.cs-topbar__action--share {
  background: color-mix(in srgb, #25d366 12%, var(--tch-surface));
  border-color: color-mix(in srgb, #25d366 32%, transparent);
}
.cs-topbar__action--share i { color: #1ebe5d; }
.cs-topbar__action--share:hover {
  background: color-mix(in srgb, #25d366 20%, var(--tch-surface));
  box-shadow: 0 10px 22px -14px rgba(37, 211, 102, 0.6);
}

/* Activation des alertes push — accent or par défaut, émeraude une fois activé. */
.cs-topbar__action--push {
  background: color-mix(in srgb, var(--tch-accent) 12%, var(--tch-surface));
  border-color: color-mix(in srgb, var(--tch-accent) 32%, transparent);
}
.cs-topbar__action--push.is-on {
  background: color-mix(in srgb, var(--tch-secondary) 12%, var(--tch-surface));
  border-color: color-mix(in srgb, var(--tch-secondary) 32%, transparent);
  cursor: default;
}
.cs-topbar__action--push.is-on i { color: var(--tch-secondary); }

/* Menu utilisateur — avatar déroulant. */
.cs-user { position: relative; flex-shrink: 0; }
.cs-user__btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.55rem 0.3rem 0.3rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.cs-user__btn:hover {
  background: color-mix(in srgb, var(--tch-primary) 5%, transparent);
  border-color: color-mix(in srgb, var(--tch-primary) 12%, transparent);
}
.cs-user__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tch-accent), color-mix(in srgb, var(--tch-accent) 60%, #8b6a36));
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.cs-user__name { font-size: 0.9rem; font-weight: 600; color: var(--tch-primary); }
.cs-user__chevron { font-size: 0.7rem; color: var(--tch-text-muted); transition: transform 0.25s var(--ease-out-expo); }
.cs-user__btn[aria-expanded="true"] .cs-user__chevron { transform: rotate(180deg); }
.cs-user__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 214px;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--tch-surface);
  border: 1px solid color-mix(in srgb, var(--tch-primary) 10%, transparent);
  border-radius: 14px;
  box-shadow: 0 22px 48px -24px rgba(30, 42, 90, 0.42);
  z-index: 1060;
  animation: cs-menu-in 0.18s var(--ease-out-expo);
}
.cs-user__menu[hidden] { display: none; }
@keyframes cs-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.cs-user__menu-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tch-primary);
  text-decoration: none;
  transition: background 0.18s;
}
.cs-user__menu-item i { width: 1.1rem; text-align: center; color: var(--tch-accent); }
.cs-user__menu-item:hover { background: color-mix(in srgb, var(--tch-primary) 6%, transparent); }
.cs-user__menu-item--logout { color: var(--tch-error); }
.cs-user__menu-item--logout i { color: var(--tch-error); }
.cs-user__menu-item--logout:hover { background: color-mix(in srgb, var(--tch-error) 8%, transparent); }
.cs-user__divider { height: 1px; margin: 0.25rem 0.3rem; background: color-mix(in srgb, var(--tch-primary) 8%, transparent); }

/* Rangée contexte couple — noms serif · date · décompte · statut. */
.cs-context { display: flex; align-items: center; gap: 0.55rem; min-width: 0; flex-wrap: wrap; }
.cs-context__names {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--tch-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 44vw;
}
.cs-context__dot { color: color-mix(in srgb, var(--tch-primary) 28%, transparent); }
.cs-context__date { font-size: 0.85rem; color: var(--tch-text-muted); white-space: nowrap; }
.cs-context__countdown {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  color: color-mix(in srgb, var(--tch-accent) 84%, #2b2310);
  background: color-mix(in srgb, var(--tch-accent) 14%, var(--tch-surface));
  border: 1px solid color-mix(in srgb, var(--tch-accent) 30%, transparent);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.cs-context__countdown--today {
  color: var(--tch-secondary);
  background: color-mix(in srgb, var(--tch-secondary) 12%, var(--tch-surface));
  border-color: color-mix(in srgb, var(--tch-secondary) 28%, transparent);
}
.cs-context__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.cs-context__status i { font-size: 0.5rem; }
.cs-context__status--draft { background: #f3f4f6; color: #6b7280; }
.cs-context__status--published { background: color-mix(in srgb, var(--tch-secondary) 12%, var(--tch-surface)); color: var(--tch-secondary); }
.cs-context__status--in_review { background: #fef3c7; color: #b45309; }
.cs-context__status--archived { background: #fee2e2; color: #b91c1c; }

/* Gouttière horizontale alignée sur celle de la top bar (même clamp) pour que
   le contenu démarre au même endroit que le fil d'Ariane et reste pleine
   largeur — pas de bande vide à gauche/droite sur desktop. */
.cs-content { flex: 1; padding: clamp(1.1rem, 3.5vw, 1.75rem) clamp(0.9rem, 3vw, 1.5rem); }
/* Les pages couple posent leur contenu dans .client-dash : neutraliser son
   plein-écran/padding/fond, la coquille s'en charge. */
.cs-content .client-dash { min-height: 0; padding: 0; background: transparent; }
/* Pas de re-centrage à 1040px dans la coquille : la largeur est déjà bornée
   par la sidebar + la gouttière .cs-content (cf. admin, contenu pleine largeur). */
.cs-content .client-dash__container { max-width: none; }

.cs-flash {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  margin-bottom: var(--space-md);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.cs-flash--success {
  background: color-mix(in srgb, var(--tch-secondary) 10%, var(--tch-surface));
  color: color-mix(in srgb, var(--tch-secondary) 80%, #0e3a28);
  border: 1px solid color-mix(in srgb, var(--tch-secondary) 22%, transparent);
}
.cs-flash--success i { color: var(--tch-secondary); }
.cs-flash--error {
  background: color-mix(in srgb, var(--tch-error) 9%, var(--tch-surface));
  color: color-mix(in srgb, var(--tch-error) 80%, #3a0e0e);
  border: 1px solid color-mix(in srgb, var(--tch-error) 20%, transparent);
}
.cs-flash--error i { color: var(--tch-error); }

/* ── Desktop : sidebar fixe, plus d'off-canvas ───────────────────────────── */
@media (min-width: 1024px) {
  .cs-sidebar { transform: none; }
  .cs-sidebar__close { display: none; }
  .cs-main { margin-left: 270px; }
  .cs-topbar__toggle { display: none; }
  .cs-overlay { display: none !important; }
}
@media (max-width: 640px) {
  /* Sur mobile, le fil d'Ariane se réduit au nom de la page courante ;
     les actions gardent leur icône seule ; la date du contexte s'efface
     au profit des noms + décompte + statut. */
  .cs-breadcrumb__link, .cs-breadcrumb__sep { display: none; }
  .cs-topbar__action span { display: none; }
  .cs-topbar__action { padding: 0.5rem 0.65rem; }
  .cs-context__date, .cs-context__dot { display: none; }
  .cs-context__names { max-width: 52vw; }
}
@media (max-width: 480px) {
  .cs-user__name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-sidebar { transition: none; }
  .cs-user__menu { animation: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   Espace couple — habillage éditorial du socle partagé tf-form-* (public).
   Le socle vit dans app.css (tokens --tch-*/--tf-*) ; ici on ajoute la touche
   couple : titre de page en Cormorant + échelle typographique public.css.
   ════════════════════════════════════════════════════════════════════════════ */
.tf-page__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 6vw, 3rem);
  letter-spacing: 0.01em;
}
.tf-page__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tch-accent);
  margin-bottom: 0.4rem;
}
.tf-form-section__title { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.45rem; }
.tf-upload__label { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.15rem; }