/* ============================================================================
   Page publique « Devenir créatrice » (/devenir-creatrice)
   Styles sortis du <style> inline du template pour suivre la convention
   « une feuille par page » et profiter du cache-busting asset().
   ============================================================================ */

.creatrice-page {
  /* Hauteur du header fixe (html_sections/header.html) : le hero doit
     commencer dessous, sinon le titre passe sous la barre de navigation. */
  --c-header-h: 91px;
  /* #555 d'origine tombait sous 3:1 de contraste sur fond noir : les
     mentions secondaires restent discrètes mais lisibles. */
  --c-faint: rgba(255, 255, 255, 0.5);
  --c-accent: linear-gradient(135deg, var(--rose), var(--rouge-passion));
  --c-rose-soft: rgba(255, 62, 181, 0.1);
  --c-rose-line: rgba(255, 62, 181, 0.22);
}

/* body est en display:flex (base.css) : sans width:100% explicite les
   sections ne rétrécissent pas correctement en mobile. */
.creatrice-page > section {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Remise à zéro des styles typographiques globaux (typography.css) qui
   ajoutent marges, padding et dégradé à tous les h1/h2/ul. */
.creatrice-page h1,
.creatrice-page h2 {
  margin: 0;
  padding: 0;
}
.creatrice-page ul {
  margin: 0;
  padding: 0;
}
.creatrice-page li { margin: 0; }

/* Classe utilitaire : texte en dégradé de marque */
.c-grad {
  background: var(--c-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------------------------------------------------------------- Hero --- */
.c-hero {
  padding: calc(var(--c-header-h) + clamp(48px, 8vw, 96px)) 24px clamp(56px, 8vw, 88px);
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.c-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 140vw);
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(255, 62, 181, 0.14) 0%, rgba(227, 0, 73, 0.05) 40%, transparent 70%);
  pointer-events: none;
}
.c-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* typography.css applique le dégradé à TOUT h1 : le titre entier devenait
   rose et l'accent « vrai revenu » ne ressortait plus. Titre blanc, seul
   le span garde le dégradé. */
.creatrice-page .c-hero-title {
  background: none;
  color: var(--blanc);
  -webkit-text-fill-color: currentColor;
  font-size: clamp(2.1rem, 6vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 20px;
  text-wrap: balance;
}
.c-hero-sub {
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  color: var(--gris-perle);
  line-height: 1.65;
  max-width: 500px;
  margin: 0 0 28px;
  text-wrap: pretty;
}
.c-hero-highlight {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 62, 181, 0.12), rgba(227, 0, 73, 0.07));
  border: 1px solid var(--c-rose-line);
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 32px;
}
.c-hero-highlight .pct {
  font-size: 1.6rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- CTA ----- */
/* « a. » requis : buttons.css cible a.btn:link (0-2-1), qui battait
   .creatrice-page .c-cta (0-2-0) — même spécificité ici, chargée après. */
.creatrice-page a.c-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 16px 40px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.c-cta-arrow { transition: transform 0.2s ease; }
.c-cta:hover .c-cta-arrow { transform: translateX(3px); }

/* ----------------------------------------------------------- Sections ---- */
.c-section { padding: clamp(56px, 8vw, 88px) 24px; }
.c-section--alt { background: var(--charbon); }
.c-head {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}
.c-eyebrow {
  display: inline-block;
  color: var(--rose);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.creatrice-page .c-title {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.c-sub {
  color: var(--gris-perle);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 10px 0 0;
}

/* Cartes génériques : même surface, même rayon, même survol partout */
.c-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: border-color 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}
.c-card:hover {
  border-color: var(--c-rose-line);
  background-color: rgba(255, 255, 255, 0.055);
  transform: translateY(-3px);
}
.c-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--rose);
  background: var(--c-rose-soft);
  border: 1px solid rgba(255, 62, 181, 0.18);
}

/* ------------------------------------------------------- Revenue card ---- */
.rev-card {
  max-width: 520px;
  margin: 0 auto;
  background: var(--noir);
  border: 1px solid var(--c-rose-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(255, 62, 181, 0.25);
}
.rev-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(255, 62, 181, 0.1), rgba(227, 0, 73, 0.05));
  padding: 18px 24px;
  border-bottom: 1px solid var(--c-rose-line);
}
.rev-header-label {
  font-size: 11px;
  color: var(--rose);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rev-header-note { font-size: 0.8rem; color: var(--c-faint); }
.rev-amount {
  font-size: clamp(2rem, 6vw, 2.6rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  padding: 16px 24px 4px;
  background: linear-gradient(135deg, var(--rose), var(--rouge-passion));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rev-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
}
/* :last-of-type ne ciblait rien (le dernier <div> est .rev-total) : la
   dernière ligne gardait une bordure collée à celle du total. */
.rev-row:has(+ .rev-total) { border-bottom: none; }
.rev-row .c-icon { width: 34px; height: 34px; border-radius: 10px; }
.rev-row-label { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--gris-perle); }
.rev-row-amt,
.rev-total-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rev-row-amt { font-size: 0.98rem; font-weight: 700; }
.rev-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(255, 62, 181, 0.06);
  border-top: 1px solid var(--c-rose-line);
}
.rev-total-label { font-size: 0.9rem; color: var(--rose); font-weight: 700; margin-bottom: 2px; }
.rev-total-gross { font-size: 0.78rem; color: var(--c-faint); }
.rev-total-amt { font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 900; }
.rev-footnote {
  max-width: 520px;
  margin: 16px auto 0;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--c-faint);
  font-style: italic;
}

/* -------------------------------------------------------------- Steps ---- */
.c-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}
.c-step { padding: 28px 24px; }
.c-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--c-accent);
  border-radius: 50%;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 16px;
  color: var(--blanc);
  box-shadow: 0 6px 18px rgba(255, 62, 181, 0.3);
}
.c-step-title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--blanc); }
.c-step-body { font-size: 0.88rem; color: var(--gris-perle); line-height: 1.6; }
.c-step-note {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--rose);
  background: var(--c-rose-soft);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ----------------------------------------------------------- Payments ---- */
.c-payment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.c-payment-card { padding: 24px 22px; }
.c-payment-card .c-icon { margin-bottom: 14px; }
.c-payment-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; color: var(--blanc); }
.c-payment-desc { font-size: 0.85rem; color: var(--gris-perle); line-height: 1.55; }

/* ---------------------------------------------------------- Discretion -- */
.c-disc-box {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255, 62, 181, 0.04);
  border: 1px solid rgba(255, 62, 181, 0.16);
  border-radius: 18px;
  padding: clamp(22px, 4vw, 32px);
}
.c-disc-title { font-size: 1rem; font-weight: 700; margin-bottom: 16px; color: var(--blanc); }
.c-disc-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.c-disc-list li {
  font-size: 0.92rem;
  color: var(--gris-perle);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.55;
}
.c-disc-list .c-icon { width: 28px; height: 28px; border-radius: 8px; }

/* ---------------------------------------------------------------- FAQ ---- */
.c-faq-list { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.c-faq-list details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.c-faq-list details:hover { border-color: rgba(255, 255, 255, 0.14); }
.c-faq-list details[open] { border-color: var(--c-rose-line); background: rgba(255, 62, 181, 0.03); }
.c-faq-list summary {
  padding: 18px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blanc);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  list-style: none;
  border-radius: 16px;
}
.c-faq-list summary::-webkit-details-marker { display: none; }
.c-faq-list summary:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }
/* « + » qui pivote en « × » : un seul glyphe, pas de saut de largeur */
.c-faq-list summary::after {
  content: '+';
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-rose-soft);
  color: var(--rose);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.25s ease;
}
.c-faq-list details[open] summary::after { transform: rotate(45deg); }
.c-faq-body { padding: 0 20px 18px; font-size: 0.88rem; color: var(--gris-perle); line-height: 1.7; }

/* ----------------------------------------------------------- Final CTA --- */
.c-final {
  padding: clamp(64px, 10vw, 104px) 24px;
  text-align: center;
  border-top: 1px solid var(--border);
  overflow: hidden;
}
.c-final::before {
  content: '';
  position: absolute;
  inset: auto 50% 0 auto;
  transform: translateX(50%);
  width: min(800px, 140vw);
  height: 360px;
  background: radial-gradient(ellipse at bottom, rgba(255, 62, 181, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.c-final > * { position: relative; }
.creatrice-page .c-final-title {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.c-final-sub { color: var(--gris-perle); font-size: 1rem; margin: 0 0 32px; }

/* ------------------------------------------------------------- Mobile ---- */
@media (max-width: 560px) {
  .creatrice-page { --c-header-h: 75px; }
  .c-section, .c-hero, .c-final { padding-left: 16px; padding-right: 16px; }
  .creatrice-page a.c-cta { width: 100%; padding: 16px 24px; }
  .c-hero-highlight { padding: 12px 20px; }
  .rev-header, .rev-row, .rev-total { padding-left: 16px; padding-right: 16px; }
  .c-head { margin-bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .c-card,
  .c-cta,
  .c-cta-arrow,
  .c-faq-list details,
  .c-faq-list summary::after { transition: none; }
  .c-card:hover,
  .c-cta:hover .c-cta-arrow { transform: none; }
}