/* Maison Mère — design tokens
 * Source : charte officielle MME (PDF AïeAïeAïe)
 */

:root {
  /* charte officielle */
  --color-bg:        #ffffff;
  --color-fg:        #000000;
  --color-accent:    #6e2dbd;       /* Purple base charte */
  --color-accent-2:  #b7f6af;       /* Neon-green */
  --color-accent-3:  #af81e4;       /* Neon-purple */
  --color-cta-fg:    #ffffff;
  --color-bg-alt:    #f5f5f5;

  /* gradients signatures charte */
  --gradient-purple:        linear-gradient(135deg, #6e2dbd 0%, #af81e4 100%);
  --gradient-purple-hover:  linear-gradient(135deg, #562394 0%, #6e2dbd 100%);

  /* typo charte officielle */
  --font-heading: 'Bebas Neue', system-ui, sans-serif;
  --font-body:    'SF Compact Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --font-size-base: 18px;
  --line-height: 1.6;

  /* layout */
  --max-width-main:    90rem;
  --max-width-normal:  50rem;
  --max-width-small:   41.5rem;
  --radius-large:      10px;
}

* { box-sizing: border-box; margin: 0; padding: 0;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
}

body { display: flex; flex-direction: column; min-height: 100vh; }

a { color: inherit; }

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

/* ============================================================
   Highlight marker SVG — surligneur "main levée"
   1 SVG forme + n couleurs via mask CSS. Texte TOUJOURS noir.
   Usage : <span class="hl-marker hl-marker--green">générer plus de CA</span>
   ============================================================ */
.hl-marker {
  position: relative;
  display: inline-block;
  color: #000;
  padding: 0 0.25em;
  isolation: isolate;     /* contient le z-index du ::before */
  white-space: nowrap;
}
.hl-marker::before {
  content: "";
  position: absolute;
  inset: -0.05em -0.05em -0.1em -0.05em;
  z-index: -1;
  background-color: var(--hl-color, #b7f6af);   /* Neon-green charte par défaut */
  -webkit-mask: url('./highlight-marker.svg') no-repeat center / 100% 100%;
          mask: url('./highlight-marker.svg') no-repeat center / 100% 100%;
}
.hl-marker--green  { --hl-color: #b7f6af; } /* Neon-green charte */
.hl-marker--peach  { --hl-color: #f9c1a0; } /* Neon-orange charte */
.hl-marker--pink   { --hl-color: #e784ba; } /* Neon-pink charte */
.hl-marker--blue   { --hl-color: #80e8dd; } /* Neon-blue charte */
.hl-marker--purple-soft { --hl-color: #af81e4; } /* Neon-purple charte */

/* ============================================================
   Wordmark (header)
   ============================================================ */
.wordmark {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 1.5rem 1rem;
  background: #fff;
  color: #000;
}

/* ============================================================
   Section palettes — wrappers qui définissent bg + variables
   ============================================================ */

.sec { /* base */
  --color-bg: #fff;
  --color-fg: #000;
  --color-accent: #6e2dbd;
  background: var(--color-bg);
  color: var(--color-fg);
}

/* Palette 1 — Blanc / text noir / highlight #6e2dbd violet MM */
.sec--p1 {
  --color-bg: #ffffff;
  --color-fg: #000000;
  --color-accent: #6e2dbd;
}

/* Palette 2 — Mesh 1 turquoise officiel */
.sec--p2 {
  --color-fg: #000000;
  --color-accent: #2e134e;
  background:
    radial-gradient(at 20% 30%, #80E8DD 0%, transparent 55%),
    radial-gradient(at 80% 20%, #7CC2F6 0%, transparent 55%),
    radial-gradient(at 75% 80%, #AF81E4 0%, transparent 55%),
    radial-gradient(at 20% 85%, #E784BA 0%, transparent 55%),
    #cdd9ea;
  color: var(--color-fg);
}

/* Palette 3 — Mesh 2 violet rose officiel — text blanc */
.sec--p3 {
  --color-fg: #ffffff;
  --color-accent: #2e134e;
  background:
    radial-gradient(at 25% 25%, #6E2DBD 0%, transparent 55%),
    radial-gradient(at 78% 28%, #E784BA 0%, transparent 55%),
    radial-gradient(at 75% 75%, #B7F6AF 0%, transparent 55%),
    radial-gradient(at 20% 80%, #F9C1A0 0%, transparent 55%),
    #d6a8c8;
  color: var(--color-fg);
}
/* texte sur mesh 2 violet rose : juste text-shadow blanc, pas de bandeau noir */
.sec--p3 .has-overlay { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }

/* Palette 4 — Peach plat */
.sec--p4 {
  --color-fg: #000000;
  --color-accent: #562394;
  background: #f9c1a0;
  color: var(--color-fg);
}

/* Palette 5 — Image hero + overlay blanc 55% */
.sec--p5 {
  --color-fg: #000000;
  --color-accent: #562394;
  background-image: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)), url('./bg-hero.jpg');
  background-size: cover;
  background-position: center;
  color: var(--color-fg);
}

/* Palette 7 — Image vieux rose + overlay blanc 55% */
.sec--p7 {
  --color-fg: #000000;
  --color-accent: #411a6f;
  background-image: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)), url('./bg-emilie.jpg');
  background-size: cover;
  background-position: center;
  color: var(--color-fg);
}

/* Palette 8 — Purple base charte plein / text blanc / highlight Neon-green pastel
   bg #6e2dbd · text #fff (13:1 ✓) · highlight #b7f6af (~6:1 sur purple ✓)
   CTA = Neon-pink charte #e784ba text noir pour contraster (fond rose sur purple) */
.sec--p8 {
  --color-fg: #ffffff;
  --color-accent: #b7f6af;   /* Neon-green pastel charte pour highlights texte */
  background: #6e2dbd;
  color: var(--color-fg);
}

/* ============================================================
   Section : hero.html (S1) — version purple solid + logo MM
   ============================================================ */
.hero {
  max-width: 64rem;
  margin: 0 auto;
  text-align: left;
  padding: 3rem 2rem 4rem;
}
.hero__top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.hero__logo {
  display: block;
  width: 56px;
  height: auto;
}
.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin-bottom: 1.75rem;
  color: var(--color-fg);
  max-width: 22em;
}
.hero__title .hl { color: var(--color-accent); }
.hero__meta {
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  color: var(--color-fg);
  font-weight: 600;
}
.hero__lead {
  font-size: 1.15rem;
  line-height: 1.55;
  margin-bottom: 2.25rem;
  color: var(--color-fg);
  max-width: 44rem;
  opacity: 0.95;
}
.hero__lead strong { color: var(--color-fg); font-weight: 700; }
.hero__cta {
  display: inline-block;
  background: var(--gradient-purple);
  color: #fff !important;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  padding: 1.1rem 2rem;
  border-radius: 12px;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: filter 0.2s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(110,45,189,0.25);
}
.hero__cta:hover { background: var(--gradient-purple-hover); transform: translateY(-1px); }

/* Crédit partenaire (affiché si ?ref= dans l'URL) — à côté du logo, sans fond */
.hero__partner-credit {
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  color: var(--color-fg);
  font-family: var(--font-body);
}
.hero__partner-credit strong { color: var(--color-accent); font-weight: 700; }

/* Hero form inline : input email + bouton submit horizontal */
.hero__form {
  display: flex;
  gap: 0.75rem;
  max-width: 32rem;
  flex-wrap: wrap;
  align-items: stretch;
}
.hero__form input[type="email"] {
  flex: 1 1 14rem;
  padding: 1rem 1.25rem;
  font-family: var(--font-body);
  font-size: 1rem;
  border: 2px solid #000;
  border-radius: 12px;
  background: rgba(255,255,255,0.95);
  color: #000;
  min-width: 12rem;
}
.hero__form input[type="email"]::placeholder { color: rgba(0,0,0,0.5); }
.hero__form button {
  flex: 0 0 auto;
  background: var(--gradient-purple);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  padding: 0 1.75rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  box-shadow: 0 4px 16px rgba(110,45,189,0.25);
  transition: filter 0.2s, transform 0.15s;
}
.hero__form button:hover { background: var(--gradient-purple-hover); transform: translateY(-1px); }
.hero__form-note {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 0.75rem;
  color: var(--color-fg);
}
@media (max-width: 600px) {
  .hero { padding: 2.5rem 1.25rem 3rem; }
}

/* ============================================================
   Section : long-form-story (S2)
   ============================================================ */
.lfs__inner { max-width: var(--max-width-normal); margin: 0 auto; padding: 5rem 1.5rem; }
.lfs__header { margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.lfs__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent); }
.lfs__h2 { font-family: var(--font-heading); font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.1; margin: 0; }
.lfs__h2 .hl { color: var(--color-accent); }
.lfs__body { font-size: 1.125rem; line-height: 1.65; }
.lfs__body p { margin: 0 0 1.25rem; }
.lfs__body strong { color: var(--color-accent); font-weight: 700; }
.lfs__list { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.lfs__list li { padding-left: 1.25rem; margin-bottom: 0.5rem; position: relative; }
.lfs__list li::before { content: "→"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }
.lfs__pullquote ul { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.lfs__pullquote ul li { padding-left: 1.25rem; margin-bottom: 0.5rem; position: relative; font-style: normal; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.5; }
.lfs__pullquote ul li::before { content: "•"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; font-size: 1.25rem; line-height: 1; }
.lfs__pullquote p { margin-bottom: 0; }
.lfs__pullquote {
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem;
  border-left: 4px solid var(--color-accent);
  background: #fef4ee;   /* Neon-orange step 1 charte (peach pâle) */
  border-radius: 0 10px 10px 0;
}
.lfs__pullquote p { font-family: var(--font-heading); font-style: italic; font-size: 1.25rem; line-height: 1.45; margin: 0; }
.lfs__cta {
  display: inline-block;
  margin-top: 1.5rem;
  background: var(--gradient-purple);
  color: #fff !important;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  padding: 1rem 1.75rem;
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: filter 0.2s, transform 0.15s;
}
.lfs__cta:hover { background: var(--gradient-purple-hover); transform: translateY(-1px); }

/* ============================================================
   Section : impact-numbers (S3) — 4 stats
   ============================================================ */
.impn__inner { max-width: 80rem; margin: 0 auto; padding: 4rem 1.5rem; }
.impn__header { text-align: center; margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.impn__portrait { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.impn__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent); }
.impn__h2 { font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0; line-height: 1.1; }
.impn__lead { font-size: 1.05rem; line-height: 1.55; margin: 0; opacity: 0.85; max-width: 36rem; }
.impn__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.impn__item { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.5rem 1rem; background: rgba(255,255,255,0.55); border-radius: 12px; }
.impn__val { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--color-accent); letter-spacing: -0.02em; }
.impn__lab { font-size: 0.95rem; opacity: 0.85; }
.impn__cta-wrap { text-align: center; margin-top: 2.5rem; }
.impn__cta {
  display: inline-block;
  background: var(--gradient-purple);
  color: #fff !important;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  padding: 1rem 2rem;
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
@media (max-width: 768px) { .impn__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .impn__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Section : principes-5 (S4) — 5 piliers MM
   ============================================================ */
.p5__inner { max-width: 64rem; margin: 0 auto; padding: 5rem 1.5rem; }
.p5__header { text-align: center; margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.p5__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent); }
.p5__h2 { font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0; line-height: 1.1; }
.p5__h2 .hl { color: var(--color-accent); }
.p5__lead { font-size: 1.05rem; line-height: 1.55; margin: 0; max-width: 36rem; }
.p5__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.p5__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.p5__item:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.p5__num { font-family: var(--font-heading); font-size: clamp(2rem, 3.5vw, 2.75rem); color: var(--color-accent); line-height: 1; min-width: 3.5rem; }
.p5__statement { font-family: var(--font-heading); font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.2; margin: 0; }

/* ============================================================
   Section : about-coach (S5) — bio Emilie + photo
   ============================================================ */
.abc__inner { max-width: 80rem; margin: 0 auto; padding: 5rem 1.5rem; display: grid; grid-template-columns: 0.45fr 0.55fr; gap: 3rem; align-items: start; }
.abc__media img { width: 100%; height: auto; object-fit: contain; display: block; }
.abc__copy { display: flex; flex-direction: column; gap: 1rem; }
.abc__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent); }
.abc__h2 { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 0; }
.abc__bio { font-size: 1.05rem; line-height: 1.6; }
.abc__bio p { margin: 0 0 1rem; }
.abc__block-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 1rem 0 0.5rem;
  color: var(--color-accent);
}
.abc__stats { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; grid-template-columns: repeat(3, auto); gap: 2rem; }
.abc__stats li { display: flex; flex-direction: column; gap: 0.25rem; }
.abc__val { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-accent); }
.abc__lab { font-size: 0.85rem; opacity: 0.8; }
@media (max-width: 900px) {
  .abc__inner { grid-template-columns: 1fr; gap: 2rem; padding: 3.5rem 1.25rem; }
  .abc__stats { gap: 1.25rem; }
}

/* ============================================================
   Section : meet-coach (S5) — bio Emilie style Karim Naoum / Kristen
   Photo dominante portrait à gauche, texte dense à droite
   ============================================================ */
.meet__inner { max-width: 60rem; margin: 0 auto; padding: 5rem 1.5rem; display: flex; flex-direction: column; gap: 2.5rem; }
.meet__head { display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center; }
.meet__media { display: flex; justify-content: center; flex-shrink: 0; }
.meet__vignette {
  width: 240px;
  height: 240px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  display: block;
}
.meet__intro { display: flex; flex-direction: column; gap: 0.75rem; }
.meet__rest { display: flex; flex-direction: column; gap: 2rem; }
.meet__copy { display: flex; flex-direction: column; gap: 1.25rem; }
.meet__eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.85rem; font-weight: 700; color: var(--color-accent); }
.meet__h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  color: var(--color-fg);
  white-space: nowrap;
}
.meet__h2-script { color: var(--color-accent); }
.meet__lead {
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--color-fg);
  margin: 0;
  font-weight: 500;
}
.meet__lead strong { color: var(--color-accent); font-weight: 700; }
.meet__body { font-size: 1rem; line-height: 1.65; color: var(--color-fg); }
.meet__body p { margin: 0 0 0.9rem; }
.meet__body strong { color: var(--color-accent); font-weight: 700; }
.meet__pull {
  font-family: var(--font-heading);
  font-size: 1.15rem !important;
  line-height: 1.35 !important;
  color: var(--color-accent) !important;
  font-style: italic;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--color-accent);
  background: #fef4ee;
  border-radius: 0 10px 10px 0;
  margin: 1.5rem 0 !important;
}
.meet__stats {
  list-style: none; padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.meet__stats li { display: flex; flex-direction: column; gap: 0.2rem; }
.meet__val { font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--color-accent); line-height: 1; }
.meet__lab { font-size: 0.85rem; opacity: 0.75; line-height: 1.3; }
@media (max-width: 720px) {
  .meet__inner { padding: 3.5rem 1.25rem; gap: 2rem; }
  .meet__head { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
  .meet__intro { order: 1; }
  .meet__media { order: 2; }
  .meet__vignette { width: 180px; height: 180px; }
  .meet__stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Section : text-image-split (S5 legacy, conservé) — photo + texte bio
   Modifier .tis--reverse : image à gauche, texte à droite
   ============================================================ */
.tis__inner { max-width: 80rem; margin: 0 auto; padding: 5rem 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.tis--reverse .tis__inner { direction: rtl; }
.tis--reverse .tis__copy, .tis--reverse .tis__media { direction: ltr; }
.tis__copy { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.tis__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent); }
.tis__h2 { font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.1; margin: 0; }
.tis__h2 .hl { color: var(--color-accent); }
.tis__body { font-size: 1rem; line-height: 1.65; }
.tis__body p { margin: 0 0 0.9rem; }
.tis__body strong { color: var(--color-accent); font-weight: 700; }
.tis__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;     /* respecte ratio cutout transparent (pas de crop) */
}
.tis__stats { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(3, auto); gap: 2rem; }
.tis__stats li { display: flex; flex-direction: column; gap: 0.25rem; }
.tis__val { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-accent); }
.tis__lab { font-size: 0.85rem; opacity: 0.8; }
@media (max-width: 900px) {
  .tis__inner { grid-template-columns: 1fr; gap: 2rem; padding: 3.5rem 1.25rem; }
  .tis--reverse .tis__inner { direction: ltr; }
  .tis__stats { gap: 1.25rem; }
}

/* ============================================================
   Section : Témoignages carrousel (S6) — scroll-snap horizontal
   ============================================================ */
.tcc { padding: 4rem 0; }
.tcc__inner { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.tcc__header { text-align: center; margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.tcc__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent); }
.tcc__h2 { font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0; line-height: 1.1; max-width: 38rem; }
.tcc__track {
  display: flex; gap: 1.5rem; overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 0 1.5rem;
  padding: 0.5rem 1.5rem 2rem;
  scrollbar-width: thin;
}
.tcc__track::-webkit-scrollbar { height: 8px; }
.tcc__track::-webkit-scrollbar-thumb { background: color-mix(in srgb, currentColor 25%, transparent); border-radius: 999px; }
.tcc__card {
  flex: 0 0 min(85%, 22rem);
  scroll-snap-align: center;
  background: #fff;
  border-radius: 14px;
  padding: 1.75rem;
  display: flex; flex-direction: column; gap: 1rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  border-top: 4px solid var(--color-accent);
}
.tcc__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  border: 3px solid var(--color-accent);
}
.tcc__quote { font-size: 0.95rem; line-height: 1.55; margin: 0; font-style: italic; flex: 1; }
.tcc__quote::before { content: "« "; color: var(--color-accent); font-weight: 700; font-style: normal; }
.tcc__quote::after  { content: " »"; color: var(--color-accent); font-weight: 700; font-style: normal; }
.tcc__cite { display: flex; flex-direction: column; font-style: normal; gap: 0.1rem; }
.tcc__name { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-accent); }
.tcc__role { font-size: 0.85rem; opacity: 0.75; }

/* ============================================================
   Section : capture-form-ac (S7) — form AC embed
   ============================================================ */
.capture-wrap { max-width: var(--max-width-small); margin: 0 auto; padding: 4rem 1.5rem; }
.capture__intro {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--color-fg);
}
/* Override AC form embed — préfixe #inscription pour BEAT la spécificité ID AC.
   AC génère #_form_<hash>_ (spécificité 0,1,0,0) avec `background: white !important`.
   Mon sélecteur #inscription [id*="_form_"] = 0,1,1,0 → gagne. */
#inscription ._form,
#inscription ._form *,
#inscription [id*="_form_"],
#inscription [id*="_form_"] *,
#inscription [class*="_form"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
#inscription ._form,
#inscription ._inline-form,
#inscription ._form-content,
#inscription ._form_element,
#inscription ._field-wrapper,
#inscription ._row,
#inscription [id*="_form_"] {
  border: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  font-family: var(--font-body) !important;
}
#inscription ._form_element { margin-bottom: 1.25rem !important; }
.sec--p3 ._form_element { margin-bottom: 1rem !important; padding: 0 !important; }
.sec--p3 ._form_element label,
.sec--p3 ._form_element ._form-label { display: block !important; margin-bottom: 0.4rem !important; }

/* Tous les textes du form en BLANC (sauf input/button qu'on traite à part) */
#inscription ._form,
#inscription ._form *:not(input):not(button):not(._submit),
#inscription [id*="_form_"] *:not(input):not(button):not(._submit) {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}
#inscription ._form label,
#inscription ._form-label,
#inscription ._form ._form_element > label,
#inscription ._form ._form_element > div:first-child {
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  display: block !important;
  margin-bottom: 0.4rem !important;
}

/* Inputs : fond BLANC opaque (lisibilité max), border noire fine, texte saisi NOIR
   (cohérent avec le mini form du hero S1)
   Hack :not(#x) pour boost spécificité au-dessus des sélecteurs AC */
#inscription:not(#x) ._form input[type="text"],
#inscription:not(#x) ._form input[type="email"],
#inscription:not(#x) ._form input[type="tel"],
#inscription:not(#x) [id*="_form_"] input[type="text"],
#inscription:not(#x) [id*="_form_"] input[type="email"] {
  border: 2px solid #000 !important;
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
  font-size: 1rem !important;
  background: rgba(255,255,255,0.95) !important;
  background-color: rgba(255,255,255,0.95) !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  text-shadow: none !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
  caret-color: #000 !important;
}
#inscription:not(#x) ._form input::placeholder {
  color: rgba(0,0,0,0.5) !important;
  text-shadow: none !important;
  -webkit-text-fill-color: rgba(0,0,0,0.5) !important;
}
#inscription:not(#x) ._form input:focus {
  border-color: #6e2dbd !important;
  box-shadow: 0 0 0 4px rgba(110,45,189,0.2) !important;
}

/* Wrapper du bouton : centré */
#inscription ._form ._button-wrapper,
#inscription ._form ._form_element:last-child {
  text-align: center !important;
}

/* Bouton submit : gradient purple charte, centré */
#inscription ._form ._button-wrapper ._submit,
#inscription ._form ._submit._submit,
#inscription form[id^="_form_"] button[type="submit"] {
  background: linear-gradient(135deg, #6e2dbd 0%, #af81e4 100%) !important;
  background-image: linear-gradient(135deg, #6e2dbd 0%, #af81e4 100%) !important;
  background-color: #6e2dbd !important;
  color: #fff !important;
  font-family: 'Bebas Neue', system-ui, sans-serif !important;
  font-size: 1.15rem !important;
  padding: 1rem 2rem !important;
  border-radius: 12px !important;
  border: none !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
  cursor: pointer !important;
  width: auto !important;
  margin: 0.75rem auto 0 !important;
  display: inline-block !important;
}
#inscription ._form ._button-wrapper ._submit:hover,
#inscription ._form ._submit._submit:hover {
  background: linear-gradient(135deg, #562394 0%, #6e2dbd 100%) !important;
  background-image: linear-gradient(135deg, #562394 0%, #6e2dbd 100%) !important;
  transform: translateY(-1px);
}

/* ============================================================
   Section : footer (S7)
   ============================================================ */
.footer {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  text-align: center;
  opacity: 0.6;
  padding: 2rem 0 1.5rem;
  color: var(--color-fg);
}