/* La feuille de style de goddessbusiness.com.

   🔴 CE FICHIER EST UNE TRANSPOSITION, PAS UNE CREATION. Il reproduit le
   dessin du site Wix servi jusqu'au 04/09 : les couleurs, les deux polices,
   l'ordre et l'allure des sections. Il a remplace une premiere version qui
   reprenait la charte du site jumeau `gravitybrand.agency` — prune sur
   blanc, Archivo, aucune image — et qui ne ressemblait a rien de ce que les
   visiteuses connaissent. Le plan de migration disait « transposer, la
   refonte est hors scope » ; la refonte s'est faite quand meme, par le seul
   fait de forker la feuille de style du voisin.

   🔑 LES VALEURS VIENNENT DE MESURES, pas d'un oeil. Relevees au navigateur
   sur le site en ligne le 2026-09-04 et consignees dans
   `_design_accueil_releve_2026-09-04.md`, a cote de l'export :
     lavande    rgb(236,218,255)   fond de section et fond des boutons
     anthracite rgb(35,35,35)      la section « Struggling »
     dore       rgb(191,173,127)   filet et details
     titres     Poppins SemiBold — h1 75/105, h2 50/70, h4 30/30
     corps      Futura LT Book 26/36.4  (ici Jost, cf fonts.css)
     bouton     fond lavande, texte noir, rayon 20px, texte en capitales

   ⚠️ Le site Wix reste publie environ un mois apres la bascule : tant qu'il
   l'est, toute valeur douteuse se REMESURE au lieu de se deviner. Apres, il
   n'y aura plus de source.

   MOBILE D'ABORD. Wix servait deux mises en page distinctes ; ici une seule
   grille fluide, ce qui est un ecart assume et invisible au lecteur. */

:root {
  --lavande: #ECDAFF;
  --lavande-pale: #F6EEFF;
  --anthracite: #232323;
  --dore: #BFAD7F;
  --encre: #000000;
  --encre-2: #3A3A3A;
  --blanc: #FFFFFF;
  --ligne: #E4E4E4;

  --titre: "Poppins", "Segoe UI", system-ui, sans-serif;
  --texte: "Jost", "Century Gothic", "Segoe UI", system-ui, sans-serif;

  --r: 20px;               /* le rayon des boutons Wix, mesure */
  --large: 1160px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-weight: 400;
  /* 26px sur grand ecran comme Wix, mais degressif : 26px sur un telephone
     donnerait sept mots par ligne. */
  font-size: clamp(1.0625rem, 0.85rem + 0.75vw, 1.4rem);
  line-height: 1.4;
}

img, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  margin: 0 0 .6em;
  line-height: 1.4;
}
h1 { font-size: clamp(2.4rem, 1.2rem + 4.2vw, 4.7rem); line-height: 1.15; }
h2 { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.125rem); line-height: 1.4; }
h3 { font-size: clamp(1.35rem, 1.05rem + .9vw, 1.875rem); line-height: 1.2; }
h4 { font-size: clamp(1.25rem, 1rem + .8vw, 1.875rem); line-height: 1.1; }

p { margin: 0 0 1.1em; }
a { color: inherit; }

.wrap { width: min(100% - 2.5rem, var(--large)); margin-inline: auto; }

section { padding: clamp(3rem, 8vw, 5.5rem) 0; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--anthracite);
  color: #fff; padding: .8rem 1.1rem; z-index: 50;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- en-tete : le logo blanc se pose SUR la photo du heros ------- */
.masthead {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  padding: .9rem 0;
}
.masthead .wrap { display: flex; align-items: center; gap: 1.5rem; }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { width: 74px; height: auto; display: block; }
.nav { margin-left: auto; display: flex; gap: 1.6rem; align-items: center; }
.nav a {
  font-family: var(--titre); font-size: .8rem; letter-spacing: .09em;
  text-transform: uppercase; text-decoration: none; color: #fff;
  padding: .55rem .3rem;
}
.nav a:hover, .nav a.here { color: var(--lavande); }

/* Sur toutes les pages SAUF l'accueil, il n'y a pas de photo derriere : le
   bandeau redevient opaque et l'encre redevient noire. */
body:not(.accueil) .masthead { position: static; background: var(--blanc); }

/* La pastille « Apply now » de l'en-tete. Elle est lavande sur les deux
   fonds, donc elle ne depend pas de la page — contrairement a la marque, qui
   change d'encre. */
.btn-nav { padding: .6rem 1.5rem; font-size: .74rem; }

/* ---------- le heros : photo plein cadre, texte en surimpression ------- */
.hero {
  position: relative; min-height: min(88vh, 780px);
  display: flex; align-items: center;
  padding: clamp(7rem, 16vw, 10rem) 0 clamp(3rem, 8vw, 5rem);
  color: #fff; text-align: center; overflow: hidden;
}
.hero-fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
/* 🔑 Un voile sombre, et il n'est pas decoratif : le titre est blanc sur une
   photo claire, et sans voile le contraste tombe sous le seuil lisible. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.30) 45%, rgba(0,0,0,.52));
}
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--lavande); }
.hero .sous {
  font-family: var(--titre); font-size: clamp(1.05rem, .9rem + .5vw, 1.7rem);
  margin: 0 0 1.1rem;
}
.hero .lede { max-width: 44rem; margin: 0 auto 2rem; color: #F2F2F2; }

/* 🔑 LE BANDEAU DES PAGES INTERIEURES EST ANTHRACITE, ET C'EST RELEVE, PAS
   CHOISI. `/blog` et `/application-form` du site Wix ouvrent toutes deux sur
   une bande rgb(35,35,35) portant la marque en blanc puis le titre en blanc,
   centres. La premiere transposition l'avait faite lavande pale et alignee a
   gauche — c'est ce qui rendait la marque blanche invisible sur du blanc a
   l'apercu du 04/09. */
.hero-seul {
  min-height: 0; color: #fff; text-align: center;
  background: var(--anthracite); padding: clamp(3rem, 8vw, 4.5rem) 0;
}
.hero-seul::after { display: none; }
.hero-seul h1 { color: #fff; }
.hero-seul .lede { color: #D8D8D8; max-width: 40rem; margin-inline: auto; }
.marque-bandeau { width: 74px; height: auto; display: block; margin: 0 auto 1.2rem; }

/* ---------- boutons ---------------------------------------------------- */
/* 🔑 IL Y A DEUX BOUTONS, PAS UN, et c'est mesure sur le site vivant le
   04/09 : lavande a encre noire dans l'en-tete et sur la photo du heros,
   NOIR A ENCRE BLANCHE partout plus bas. La premiere transposition n'en
   connaissait qu'un, le lavande, et il devenait invisible des qu'il tombait
   sur une section lavande — ce qui arrive deux fois sur l'accueil. */
.btn {
  display: inline-block; text-decoration: none;
  background: #000; color: #fff;
  font-family: var(--titre); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase;
  padding: .95rem 2.2rem; border-radius: var(--r); border: 1px solid #000;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: #2B2B2B; border-color: #2B2B2B; }

/* Le bouton lavande : l'en-tete et le heros, la ou le fond est sombre. */
.btn-nav, .hero .btn {
  background: var(--lavande); color: var(--encre); border-color: var(--lavande);
}
.btn-nav:hover, .hero .btn:hover { background: #DCC2FF; border-color: #DCC2FF; }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color: currentColor; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.doc .btn-row { justify-content: flex-start; }

/* ---------- sections ---------------------------------------------------- */
.center { text-align: center; }
.center .lede { max-width: 46rem; margin-inline: auto; }
.lede { color: var(--encre-2); }

/* 🔑 LE FRAGMENT VIOLET DES TITRES. Chaque grand titre du site Wix porte une
   partie de sa phrase dans un violet a lui — « Our OnlyFans Management
   *Solutions.* », « Check out our *FAQ.* ». Ce n'est pas un ornement isole :
   c'est le meme geste que le « financial freedom? » lavande du heros, et
   c'est ce qui donne au site son rythme. Mesure sur la page vivante le
   04/09 : rgb(106, 89, 165). */
.accent { color: #6A59A5; }
.sombre .accent, .band .accent { color: var(--lavande); }


/* La section « Struggling with OnlyFans? » : fond anthracite, quatre icones. */
.sombre { background: var(--anthracite); color: #fff; }
.sombre h2, .sombre h4 { color: #fff; }
.sombre p { color: #D8D8D8; }

.grille-4 { display: grid; gap: 2.5rem 2rem; margin-top: 3rem; text-align: center; }
@media (min-width: 34rem) { .grille-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .grille-4 { grid-template-columns: repeat(4, 1fr); } }
.grille-4 img { width: 56px; height: 56px; margin: 0 auto 1rem; display: block; }
.grille-4 p { font-size: .95em; margin: 0; }

/* La section « Solutions » : fond lavande, six cartes illustrees. */
.lavande { background: var(--lavande); }
.cards { display: grid; gap: 1.6rem; margin-top: 3rem; }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .cards.c3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--blanc); border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column; text-align: left; }
/* 🔑 LE BANDEAU EST UN BLOC VIOLET PLEIN SOUS L'ILLUSTRATION, et il
   porte le titre ET la description. Mesure a la source le 2026-09-04 :

     image        223 x 278
     bandeau      223 x 146, plein, #6A59A5
     titre        blanc, Poppins SemiBold 14 px, centre, a 7 px du haut
     description  blanche, Poppins ExtraLight 11 px, centree

   🪞 JE L'AVAIS EU JUSTE, PUIS JE L'AI DEFAIT. Une premiere transposition
   posait bien un bandeau violet plein ; je l'ai remplace par un titre en
   surimpression sur l'illustration avec un voile degrade, en croyant
   corriger. Simon a renvoye la capture : « ca tu l'as mal refait aussi ».

   🔴 POURQUOI LA COULEUR ETAIT INTROUVABLE. Le bandeau n'est pas un fond
   CSS : c'est une IMAGE VECTORIELLE (`wixui-vector-image`), un simple
   rectangle SVG dont le `fill` calcule vaut `rgb(106, 89, 165)`. Aucun
   element de la page ne porte cette couleur en `background-color` — j'ai
   balaye les 1382 elements, puis les couches de fond de Wix, puis les
   pseudo-elements, pour ne rien trouver. La reponse etait dans le `fill`
   d'un `<path>`.

   ⚠️ L'illustration est en `contain` et non `cover` : nos exports font
   460x421 (paysage) et un `cover` dans un cadre 223/278 (portrait) les
   rognait severement — c'est ce qui donnait des cartes presque blanches. */
.card img {
  width: 100%; aspect-ratio: 223 / 278; object-fit: contain;
  background: var(--blanc); display: block;
}
.carte-texte {
  background: #6A59A5; color: #fff; text-align: center;
  /* 7 px de haut et 26 px de bas sur une carte de 224 : proportionnel ici. */
  padding: 3% 3% 11%; flex: 1;
}
/* ⚠️ LES TAILLES SONT PROPORTIONNELLES, PAS ABSOLUES, et c'est un ecart
   assume. Wix sert une grille figee : cartes de 224 px, titre 14 px,
   description 11 px — soit 6,25 % et 4,9 % de la largeur de carte. Notre
   grille est fluide et nos cartes font pres de 380 px sur un grand ecran :
   y poser 14 px donnerait un titre deux fois plus petit, en proportion, que
   sur le site d'origine. Le `clamp` part donc des valeurs MESUREES sur
   telephone (ou nos cartes retrouvent la largeur de Wix) et grandit avec
   l'ecran pour garder le RAPPORT, qui est ce que l'oeil compare. */
.carte-texte h3 {
  font-size: clamp(14px, .55rem + .85vw, 21px); font-weight: 600;
  letter-spacing: .01em; color: #fff; margin: 0 0 .5em;
}
.carte-texte p {
  font-size: clamp(11px, .45rem + .65vw, 16px); font-weight: 300;
  line-height: 1.5; color: #fff; margin: 0;
}

/* Les trois etapes du processus. */
.steps3 { display: grid; gap: 2.6rem; margin-top: 3rem; text-align: center; }
@media (min-width: 56rem) { .steps3 { grid-template-columns: repeat(3, 1fr); gap: 2.2rem; } }
.step img { width: 120px; height: auto; margin: 0 auto 1.2rem; display: block; }
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--encre-2); margin: 0; font-size: .95em; }

/* Les deux temoignages, avec leurs videos. */
.band { background: var(--anthracite); color: #fff; }
.band h2, .band h3 { color: #fff; }
.band p { color: #D8D8D8; }
.temoignages { display: grid; gap: 2.5rem; margin-top: 3rem; }
@media (min-width: 52rem) { .temoignages { grid-template-columns: repeat(2, 1fr); } }
.temoignage { text-align: left; }
.temoignages { align-items: start; }
.temoignage video {
  /* 🔑 Une hauteur bornee, et ce n'est pas cosmetique : les deux temoignages
     n'ont pas le meme format (1025 et 908 de haut pour 600 de large), donc
     sans borne l'un descend plus bas que l'autre et les deux titres ne sont
     plus alignes. Wix les servait deja a la meme taille. */
  width: 100%; max-width: 300px; height: 480px;
  object-fit: cover; border-radius: 10px; display: block;
  margin-bottom: 1.2rem; background: #111;
}
.temoignage h3 { color: var(--lavande); margin-bottom: .5rem; }
.temoignage p { margin: 0; font-size: .95em; }

.note { font-size: .95em; color: var(--encre-2); margin-top: 1.6rem; }
.sombre .note, .band .note { color: #C9C9C9; }

/* La section « What types of creators » : photo a cote du texte. */
.duo { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 54rem) { .duo { grid-template-columns: 1fr 1fr; text-align: left; } }
.duo img { border-radius: 10px; width: 100%; display: block; }

/* ---------- le blog ----------------------------------------------------- */
.liste-articles { list-style: none; padding: 0; margin: 2.5rem 0 0;
  display: grid; gap: 2.2rem; text-align: left; }
@media (min-width: 46rem) { .liste-articles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .liste-articles { grid-template-columns: repeat(3, 1fr); } }
.article-vignette img { width: 100%; border-radius: 8px; display: block;
  margin-bottom: 1rem; aspect-ratio: 4 / 3; object-fit: cover; }
.article-vignette h2, .article-vignette h3 {
  font-size: 1.15rem; line-height: 1.3; margin-bottom: .4rem; }
.article-vignette a { text-decoration: none; }
.article-vignette a:hover { color: #7B5EA7; }
.article-vignette p { font-size: .93em; color: var(--encre-2); margin: 0; }
.meta { font-family: var(--titre); font-size: .78rem; letter-spacing: .05em;
  color: #6B6B6B; margin-bottom: .5rem; text-transform: uppercase; }

/* ---------- un article -------------------------------------------------- */
.doc { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }
.doc h1 { margin-bottom: .4em; }
.doc h2 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem); margin-top: 2.2em; }
.doc h3 { margin-top: 1.8em; }
.doc p, .doc li { color: var(--encre-2); }
.doc ul, .doc ol { padding-left: 1.2rem; margin: 0 0 1.2em; }
.doc li { margin-bottom: .5em; }
.doc img { border-radius: 8px; margin: 1.8rem 0; }
.doc a { color: #6B4B96; }
.couverture { width: 100%; border-radius: 10px; margin: 1.5rem 0 2rem; display: block; }
.apres { margin-top: 2rem; }
.fil { font-family: var(--titre); font-size: .78rem; letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: 1.2rem; display: inline-block; }

/* ---------- le formulaire ----------------------------------------------- */
.form-section { padding-top: 0; }
.embed { width: min(100%, 44rem); margin: 0 auto; border: 1px solid var(--ligne);
  border-radius: 10px; overflow: hidden; background: var(--blanc); }
.embed iframe { display: block; border: 0; width: 100%; }

/* ---------- la FAQ ------------------------------------------------------ */
/* 🔑 CE N'EST PAS UN ACCORDEON, et c'est releve, pas suppose. Les huit
   questions du site Wix sont TOUTES VISIBLES, chacune precedee d'un carre
   dore de 100 px portant son numero en Poppins SemiBold 50 px noir, sans
   arrondi. La premiere transposition en avait fait un `<details>` replie :
   plus lisible peut-etre, mais ce n'est pas ce que la page montre, et une
   migration n'est pas le moment de trancher ca. Le dore ne sert QU'ICI —
   c'est la seule teinte du releve qui n'etait posee nulle part avant. */
.faq { width: min(100%, 52rem); margin: 2.5rem auto 0; text-align: left; }
.question { display: grid; gap: 1.1rem; margin-bottom: 2rem; }
@media (min-width: 40rem) {
  .question { grid-template-columns: 100px 1fr; gap: 1.6rem; align-items: start; }
}
.numero {
  background: var(--dore); color: #000;
  font-family: var(--titre); font-weight: 600; font-size: 2.4rem;
  width: 100px; height: 100px; display: flex;
  align-items: center; justify-content: center;
}
.question h3 { font-size: 1.12rem; line-height: 1.35; margin: 0 0 .55rem; }
.question p { margin: 0; color: var(--encre-2); font-size: .95em; }

/* ---------- le pied ----------------------------------------------------- */
.foot { background: var(--anthracite); color: #fff; padding: 3.5rem 0 2.5rem;
  margin-top: 0; }
.foot .cols { display: grid; gap: 1.6rem; }
@media (min-width: 40rem) { .foot .cols { grid-template-columns: repeat(2, auto);
  justify-content: space-between; } }
.foot .cols > div { display: flex; flex-direction: column; gap: .55rem; }
.foot a { color: #E2E2E2; text-decoration: none; font-size: .95rem; }
.foot a:hover { color: var(--lavande); }
.legal { margin: 2.5rem 0 0; font-size: .82rem; color: #9A9A9A; }

/* ---------- l'apparition au defilement --------------------------------- */
/* 🔑 RELEVE SUR LE SITE VIVANT, ET LE PREMIER RELEVE ETAIT FAUX.

   J'avais transpose `transition: opacity 300ms cubic-bezier(.39,.11,.37,.99)`
   en croyant tenir l'animation d'apparition. C'etait la transition
   d'OUVERTURE DE L'ACCORDEON DE LA FAQ : les elements qui la portent sont
   les reponses (« We work in a partnership, so t... »), pas des blocs
   reveles au defilement. Simon a dit deux fois que ca ne marchait pas, et
   il parlait des « effets de MOUVEMENT » — le mot etait dans sa phrase.

   La vraie animation ne vit dans aucune feuille de style : Wix la pose par
   l'API Web Animations, invisible a l'inspection du CSS. Elle se lit avec
   `document.getAnimations()`, et elle vaut, mesuree le 2026-09-04 :

       de   opacity: 0   translateY(60px)
       vers opacity: 1   translateY(0)
       1200 ms, cubic-bezier(.445, .05, .55, .95)

   Ce n'est donc pas un fondu court : c'est une MONTEE d'une seconde et
   demie, 60 px, avec le fondu par-dessus. Et une CASCADE de 500 ms separe
   les trois etapes (delais mesures : 1 ms, 500 ms, 1000 ms) — d'ou
   `.retard-1` et `.retard-2`.

   🔴 QUELS BLOCS, exactement : les 26 animations du site vivant portent
   sur les 4 cartes « Struggling », les 2 notes, les 3 etapes et les 2
   temoignages. PAS sur les huit questions de la FAQ, PAS sur le bloc
   « creatrices » — j'en avais anime 9 de trop. Controle positif de cette
   absence : la meme liste contenait bien les autres blocs.

   🔴 LA CLASSE `.js` EST LA CLE DE VOUTE, et elle est posee par
   `reveler.js`, pas par le HTML. Sans elle, la regle qui cache ne s'applique
   jamais et TOUT LE CONTENU RESTE VISIBLE. Un ornement n'a pas le droit de
   retenir le texte en otage : si le script ne s'execute pas, rien ne se
   cache. */
.js .revele {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1200ms cubic-bezier(.445, .05, .55, .95),
              transform 1200ms cubic-bezier(.445, .05, .55, .95);
}
.js .revele.vu { opacity: 1; transform: translateY(0); }
.js .revele.retard-1 { transition-delay: 500ms; }
.js .revele.retard-2 { transition-delay: 1000ms; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* Et surtout : rien ne reste cache. `reveler.js` ne pose deja pas la
     classe `js` dans ce cas ; cette ligne est la ceinture en plus des
     bretelles, pour le lecteur qui change de reglage page ouverte. */
  .js .revele { opacity: 1 !important; transform: none !important; }
}