/* 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; }
/* Le titre dessine comme une couverture typographique : fond lavande, chaque
   ligne sur son bloc violet (box-decoration-break), en TEXTE. Il remplace
   l'image sur la page de l'article ; l'image reste pour le blog. */
.titre-typo { background: var(--lavande); padding: clamp(2rem, 7vw, 4.5rem) clamp(1.2rem, 5vw, 3.5rem);
  margin: 0 0 1.4rem; line-height: 1.45; }
.titre-typo span { background: #6A59A5; color: #fff; padding: .05em .3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Les tableaux d'article (article A, 18/09 : le premier tableau du site).
   🔑 LE CONTENEUR DEFILE, PAS LA PAGE : un tableau a quatre colonnes ne tient
   pas sur 375 px, et une page qui defile en largeur casse toute la lecture. */
.tableau { overflow-x: auto; margin: 1.6rem 0; -webkit-overflow-scrolling: touch; }
.tableau table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .92em; }
.tableau th, .tableau td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--ligne);
  vertical-align: top; }
.tableau th { font-family: var(--titre); font-weight: 600; background: var(--lavande-pale); }

/* 🔑 LES TABLEAUX S'EMPILENT SUR TELEPHONE, ET C'EST UNE CORRECTION D'HONNETETE.
   Un tableau de trois colonnes fait 480 px : dans 375 px il defilait a
   l'interieur de son cadre, SANS indice visible. Sur l'article D, la colonne
   ainsi cachee portait « Doesn't delete the file » — la lectrice repartait
   avec des adresses ou ecrire et sans la correction centrale de l'article
   (dereferencer n'est pas effacer). Un livrable qu'on ne voit qu'a moitie
   n'est pas un livrable incomplet : il est faux.
   Sous 700 px, chaque ligne devient donc une carte et chaque cellule porte
   son intitule, repris du <th> par `data-intitule` (pose a l'ecriture de
   l'article). Rien ne defile, rien n'est hors ecran. */
@media (max-width: 700px) {
  .tableau { overflow-x: visible; }
  .tableau table { min-width: 0; display: block; }
  .tableau thead { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tableau tbody, .tableau tr, .tableau td { display: block; }
  .tableau tr { border: 1px solid var(--ligne); border-radius: 8px;
    padding: .2rem .2rem .4rem; margin: 0 0 .9rem; }
  .tableau td { border-bottom: 0; padding: .5rem .7rem; }
  .tableau td[data-intitule]::before {
    content: attr(data-intitule); display: block;
    font-family: var(--titre); font-weight: 600; font-size: .82em;
    color: var(--encre-2); margin-bottom: .15rem;
  }

  /* 🔑 UNE CELLULE VIDE EST UN CHAMP A REMPLIR, PAS UN TROU. Deux de nos
     tableaux sont des formulaires : « Offer 1 / Offer 2 » dans A, « What mine
     says » dans ①, colonnes laissees vides EXPRES pour que la lectrice les
     remplisse en face de deux agences. En tableau, une colonne vide se lit
     comme une colonne a remplir. Empilee en carte, l'etiquette suivie de rien
     se lit comme une page cassee. D'ou un filet pointille a la place du vide :
     il dit « ecris ici ». Le vide reste le contenu — on ne le comble pas avec
     du texte. (Releve par REDACTION le 22/09 minuit, sur A et ①.) */
  /* ⚠️ ET SEULEMENT SI TOUTE LA COLONNE EST VIDE. Une colonne vide de bout en
     bout est un champ ; une cellule vide ISOLEE dans une colonne par ailleurs
     remplie n'en est pas un. Dans A, ligne « You keep », la colonne « The
     question to ask » est vide parce qu'il n'y a pas de question a poser sur
     cette ligne — un filet y inviterait la lectrice a ecrire une question que
     nous n'avons pas. Ces cellules-la ne rendent rien du tout en carte. La
     distinction est calculee a l'ecriture de l'article, pas devinable en CSS.
     (Releve par REDACTION le 23/09 00h04, un seul cas dans tout le lot.) */
  .tableau td.champ { padding-bottom: .7rem; }
  .tableau td.champ::after {
    content: ""; display: block; height: 1.15em;
    border-bottom: 1px dashed var(--encre-2); opacity: .55;
  }
  .tableau td.cellule-vide { display: none; }

  /* Ligne de suite (« meme question, autre reponse ») : en cartes, elle se
     colle a la carte du dessus au lieu de flotter sans sa question. La carte
     d'origine perd son bord bas ; la suite perd son bord haut et prend un
     filet pointille, qui dit « autre reponse a la meme question ». T1, 06/10. */
  .tableau tr:has(+ tr.suite) { margin-bottom: 0; border-bottom: 0;
    border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .tableau tr.suite { border-top: 1px dashed var(--ligne);
    border-top-left-radius: 0; border-top-right-radius: 0; }
}
.encart { margin-top: 3rem; padding: 1.6rem 1.8rem; border-radius: 10px;
  background: var(--lavande-pale); }
.encart-titre { font-family: var(--titre); font-weight: 600; margin-bottom: .5rem; }
.encart .apres { margin: 1.2rem 0 0; }
.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%; }

/* Le parcours en quatre etapes. Une seule colonne, des champs assez hauts
   pour le pouce : la moitie des candidates arrivent depuis Instagram, donc
   depuis un telephone. */
/* 🔴 `hidden` DOIT GAGNER SUR `.btn`. Les boutons sont en `inline-flex` : sans
   cette ligne, le bouton « Back » reste visible a l'etape 1, ou il ne mene
   nulle part. Vu sur la preversion le 17/09, pas dans le code. */
.parcours [hidden] { display: none !important; }
.parcours { width: min(100%, 38rem); margin: 0 auto; }
.parcours-avance { font-family: var(--titre); font-size: .78rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--encre-2); margin-bottom: 1.2rem; }
.parcours .etape { border: 0; padding: 0; margin: 0; }
.parcours legend { font-family: var(--titre); font-size: 1.5rem; margin-bottom: .6rem; }
.parcours label { display: block; margin: 1.4rem 0 .4rem; font-weight: 600; font-size: .95rem; }
.parcours input[type="text"], .parcours input[type="email"], .parcours input[type="tel"],
.parcours input[type="number"], .parcours select, .parcours input[type="file"] {
  width: 100%; padding: .85rem 1rem; font: inherit; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: 8px;
}
.parcours input:focus-visible, .parcours select:focus-visible {
  outline: 2px solid var(--lavande-fonce, #6A59A5); outline-offset: 1px;
}
.parcours .case { display: flex; gap: .6rem; align-items: flex-start;
  font-weight: 400; margin-top: 1.4rem; }
.parcours .case input { margin-top: .2rem; }
.parcours-erreur { margin-top: 1.2rem; color: #9A1B3C; font-size: .95rem; }
.parcours-boutons { margin-top: 2rem; justify-content: flex-start; }
.parcours-fin h2 { margin-bottom: .6rem; }
.parcours-fin .btn-row { justify-content: flex-start; margin-top: 1.6rem; }

/* ---------- 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; }
}

/* ---------- les composants d'article ------------------------------------ */
/* 🔑 POURQUOI ILS EXISTENT, et ce qui a ete MESURE avant de les ecrire.
   Les vingt articles migres de Wix ne contiennent que `<p>`, `<h2>/<h3>`,
   parfois un `<ul>` (9 sur 20) et un bouton. Zero `blockquote`, zero tableau,
   zero encadre — et cette feuille ne stylait AUCUN des trois. Un article dont
   la colonne vertebrale est une question par section rendait donc ses cinq
   questions en blockquote par defaut du navigateur, c'est-a-dire en rien.
   Simon, 11/09 : « on ne peut pas juste donner un bloc de texte et esperer que
   ca se passe bien ».

   ⚠️ AUCUNE COULEUR NOUVELLE. Tout sort des variables deja posees. Le dore
   portait la mention « ne sert QU'ICI » a la FAQ : il sert aussi ici, et c'est
   un choix argumente, pas un oubli. Le carre dore numerote EST l'idiome du
   site pour « une liste numerotee de questions » — et un article intitule
   « les 5 choses a verifier » est exactement ca. Reutiliser l'idiome est le
   contraire d'en inventer un.

   🔴 CE QUE CES COMPOSANTS NE FONT PAS : aucune animation, aucun replie,
   aucun script. `.revele` existe deja pour le mouvement et n'est pas etendu
   aux articles : un lecteur qui scanne ne doit jamais attendre qu'un bloc
   apparaisse pour lire la phrase suivante. */

/* Le sommaire d'ouverture : la promesse rendue visible ET cliquable. */
.sommaire {
  background: var(--lavande-pale);
  border-left: 3px solid var(--dore);
  padding: 1.4rem 1.5rem 1.2rem;
  margin: 2rem 0 2.5rem;
}
.sommaire p {
  font-family: var(--titre); font-weight: 600;
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--encre); margin: 0 0 .9rem;
}
.sommaire ol { margin: 0; padding-left: 1.3rem; }
.sommaire li { margin-bottom: .45em; color: var(--encre); }
.sommaire a { color: var(--encre); text-decoration: none;
  border-bottom: 1px solid var(--dore); }
.sommaire a:hover { background: var(--lavande); }

/* Le titre numerote : le carre dore de la FAQ, en plus petit. */
.tete { display: grid; gap: .8rem; align-items: center;
  grid-template-columns: 46px 1fr; margin-top: 2.2em; }
.tete h2 { margin: 0; }
.tete .numero {
  width: 46px; height: 46px; font-size: 1.35rem;
}

/* L'encadre « Ask » : le geste que la lectrice emporte. Cinq par article,
   un par question, et ils doivent se lire seuls si elle ne scanne que ca. */
.demande {
  background: var(--lavande-pale);
  border-left: 3px solid var(--dore);
  margin: 1.8rem 0; padding: 1.1rem 1.3rem;
}
.demande p {
  font-family: var(--titre); font-weight: 600; font-size: 1.02rem;
  line-height: 1.45; color: var(--encre); margin: 0;
}
.demande .etiquette {
  display: block; font-size: .72rem; letter-spacing: .11em;
  text-transform: uppercase; font-weight: 600; color: var(--encre-2);
  margin-bottom: .4rem;
}

/* L'encadre date : il porte des chiffres, donc il porte sa peremption, et il
   est detachable — supprimer ce seul bloc retire tout pourcentage de la page. */
.perissable {
  border: 1px solid var(--ligne); background: var(--blanc);
  padding: 1.4rem 1.5rem; margin: 2rem 0;
}
.perissable h3 { margin: 0 0 .8rem; font-size: 1.15rem; }
.perissable p { font-size: .95em; }
.perissable p:last-child { margin-bottom: 0; }
.perissable .date-dite {
  font-family: var(--titre); font-size: .74rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--encre-2);
  border-top: 1px solid var(--ligne); padding-top: .8rem; margin-top: 1rem;
}

/* Deux clauses cote a cote : l'une defendable, l'autre non. Le lecteur voit
   la difference avant de lire la phrase qui l'explique. */
.duel { display: grid; gap: 1rem; margin: 1.8rem 0; }
@media (min-width: 40rem) { .duel { grid-template-columns: 1fr 1fr; } }
.duel > div { border: 1px solid var(--ligne); padding: 1.1rem 1.2rem; }
.duel h4 {
  font-family: var(--titre); font-size: .95rem; margin: 0 0 .5rem;
}
.duel p { font-size: .93em; margin: 0; }
.duel .oui { border-top: 3px solid var(--dore); }
.duel .non { border-top: 3px solid var(--anthracite); }

/* La phrase qui ferme. Une seule par article, sinon elle ne ferme rien. */
.chute {
  background: var(--anthracite); color: #fff;
  padding: 1.6rem 1.6rem; margin: 2.5rem 0;
}
.chute p {
  font-family: var(--titre); font-weight: 600;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.4;
  color: #fff; margin: 0;
}
.chute strong { color: var(--lavande); }
/* Un lien dans le bloc sombre : le violet des liens d'article (#6B4B96) y
   serait quasi illisible sur l'anthracite. Il prend le lavande du gras de ce
   meme bloc. Premier lien de chute du site : l'entrant red flags -> S3, 04/10. */
.chute a { color: var(--lavande); }

/* Le filet de fin de section, discret, pour que le scroll sente les paliers. */
.doc hr {
  border: 0; border-top: 1px solid var(--ligne); margin: 3rem 0;
}

/* Et le defaut, pour que plus jamais un `blockquote` ne rende rien. */
.doc blockquote {
  margin: 1.8rem 0; padding-left: 1.2rem;
  border-left: 3px solid var(--ligne); color: var(--encre-2);
}

/* La liste a cocher et le modele a copier (article C). Deux LIVRABLES que la
   lectrice emporte : ils doivent se lire et se copier sur un telephone. La
   case est dessinee en CSS (::before), donc elle ne part pas dans le
   presse-papiers ; le modele est du texte courant, sans guillemets decoratifs,
   pour qu'une selection longue le copie tel quel. */
.doc ul.coches { list-style: none; padding-left: 0; }
.doc ul.coches li { position: relative; padding-left: 1.9rem; margin: .45rem 0; }
.doc ul.coches li::before {
  content: ""; position: absolute; left: 0; top: .2em;
  width: 1.05em; height: 1.05em; border: 2px solid var(--encre-2); border-radius: 3px;
}
.doc blockquote.modele {
  color: var(--encre); background: #F6F1FC;
  border-left-color: #7B5EA7; padding: 1.1rem 1.2rem;
  overflow-wrap: anywhere; user-select: text; -webkit-user-select: text;
}
.doc blockquote.modele p { margin: 0 0 .8rem; }
.doc blockquote.modele p:last-child { margin-bottom: 0; }

/* ---------- les figures d'article --------------------------------------- */
/* 🔑 POURQUOI DU SVG DESSINE, ET PAS DES PHOTOS. Simon, 11/09 : « ce serait
   pas sympa de rajouter quelques images pour appuyer le propos ? ». Le propos
   de l'article ① est arithmetique et contractuel : une base de calcul, une
   duree, un partage de propriete. Une photo de creatrice n'appuie RIEN de
   tout ca — elle decore, et sur ce sujet elle decore mal : la page parle
   d'argent et de clauses a quelqu'un qui se demande si on va l'arnaquer.

   Ce qui appuie vraiment : montrer le calcul, montrer le calendrier, montrer
   qui garde quoi. D'ou trois figures DESSINEES, en SVG inline :
     - aucun fichier a heberger, aucune licence a verifier, aucun poids ;
     - net a toutes les tailles et sur tous les ecrans ;
     - elles heritent de la palette et des polices de la page, donc elles ne
       peuvent pas se desynchroniser d'elle ;
     - et le texte qu'elles contiennent est du VRAI texte : selectionnable,
       lisible par un lecteur d'ecran, indexable.

   ⚠️ MISE EN PAGE VERTICALE PAR CONSTRUCTION. Une frise horizontale devient
   illisible sous 400 px : les trois figures empilent donc leurs elements de
   haut en bas, et le texte ne descend jamais sous ~11 px sur un telephone.
   C'est la raison des `viewBox` hautes plutot que larges.

   🔴 CE QU'ELLES NE FONT PAS : aucune n'affiche un taux que nous pratiquons
   (D130 — aucun pourcentage de GBA sur les articles). La figure 1 applique
   UN SEUL taux d'exemple a DEUX bases : ce qu'elle demontre est l'effet de la
   base, jamais le niveau d'un taux. */

.figure { margin: 2.2rem 0; }
/* 🔑 `max-width` EST LA REGLE QUI REND LES FIGURES LISIBLES, et elle vient
   d'une mesure, pas d'un gout. Un cadre dessine en 700 unites se ramene a 0,48
   sur un telephone de 375 px : le texte de 17 unites s'y affiche a 8 px, a cote
   d'un corps a 17 px. Les figures sont donc dessinees en 400 unites et ne sont
   JAMAIS agrandies au-dela : 400 px sur grand ecran (donc 14 px de texte, comme
   le corps), et 0,84 sur telephone (donc ~12 px). Elargir ce cadre, c'est
   retrecir le texte des schemas. */
.figure svg { width: 100%; max-width: 400px; height: auto; display: block;
  margin-inline: auto; }
.figure figcaption {
  font-family: var(--titre); font-size: .78rem; letter-spacing: .04em;
  color: var(--encre-2); margin-top: .7rem;
  border-top: 1px solid var(--ligne); padding-top: .6rem;
}
/* Les classes de texte dans les SVG, pour que la typo suive la page. */
.f-titre { font-family: var(--titre); font-weight: 600; fill: var(--encre); }
.f-etiq  { font-family: var(--titre); font-weight: 600; fill: var(--encre-2);
           letter-spacing: .06em; }
.f-txt   { font-family: var(--texte); fill: var(--encre-2); }
.f-fort  { font-family: var(--titre); font-weight: 600; fill: var(--encre); }
.f-clair { fill: #FFFFFF; }

/* Sous 40rem, la figure deborde le gabarit pour recuperer la marge : 40 px de
   plus, c'est un cran de lisibilite sur le texte des schemas, qui est le seul
   endroit de la page ou la taille ne suit pas celle du corps. */
@media (max-width: 40rem) {
  .figure { margin-left: -1.25rem; margin-right: -1.25rem; }
  .figure figcaption { margin-left: 1.25rem; margin-right: 1.25rem; }
}