/* Majordome.Agency . /start . refonte V6 (02/09, brief Chef d'Atelier) --- 3 defauts corriges :
   (1) Inter Tight partout (fonctionnel) + Fraunces (display) uniquement --- l'ancienne police
   PlexMono est retiree de la page, plancher 12px respecte partout (aucune taille sous .75rem) ;
   (2) vrai hero 2 colonnes >=900px via grid-template-areas sur .sf-hero (H1+Sans+bandeau a
   gauche, carte formulaire ancree a droite) --- pas une colonne mobile etiree ; (3) les 3
   preuves passent en format Avant/Aujourd'hui (A->B), une 3e carte (cabinet AXA, anonyme)
   complete LandQuire + Celia, rangee 3 colonnes des 900px.
   Tokens repris de site.css :root deja charge par la page (--papier --parchemin --parch-deep
   --encre --encre-soft --cuivre --cuivre-text --ligne --serif --sans --ease), aucun token
   invente. --vert et --rouge ne sont plus des couleurs de marque (direction 02/09) : le seul
   etat d'erreur du formulaire passe en encre gras, pas en rouge. Cuivre reserve a l'accent H1
   (impose par la copy) + CTA + filet ornemental --- jamais sur un tag, un kicker ou une
   attribution (regle Zander R2, "l'accent ne se pose jamais sur du texte"). Bouton en
   --cuivre-text (pas --cuivre) : papier-sur-cuivre = 3.42:1 (echoue AA texte normal),
   papier-sur-cuivre-text = 5.83:1 (passe). Radius family : 16/10/99. Ombres alpha <=0.16.
   Grille 8pt (exceptions 4/12 comme le reste du site). Fichier scope (.sf-*), site.css et
   les 12 autres pages non touches. */

.sf-shell{max-width:520px;margin:0 auto;padding:24px 24px 56px;text-align:center}

.sf-masthead{display:flex;align-items:center;justify-content:center;gap:12px;
  border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);padding:12px 0}
.sf-masthead .sf-rule{width:22px;height:1px;background:var(--ligne)}
.sf-mark{width:20px;height:20px;color:var(--encre);flex:none}
.sf-wordmark{font-family:var(--serif);font-weight:560;font-size:1rem;color:var(--encre);
  font-variation-settings:'opsz' 24}
.sf-wordmark em{font-style:normal;color:var(--cuivre-text)}

/* --- hero : mobile = flux naturel (h1 -> sans -> form -> bandeau, ordre DOM) ;
   >=900px = grille 2 colonnes par zones nommees, independante de l'ordre DOM. --- */
.sf-hero{display:block}

.sf-h1{grid-area:h1;font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.14;
  letter-spacing:-.01em;color:var(--encre);margin-top:12px;max-width:27ch;
  margin-left:auto;margin-right:auto}
.sf-accent{font-style:italic;font-weight:600;color:var(--cuivre-text)}

.sf-sans{grid-area:sans;list-style:none;margin:16px auto 0;padding:0;display:grid;gap:8px;max-width:34ch}
.sf-sans li{font-family:var(--sans);font-size:.88rem;line-height:1.38;color:var(--encre-soft)}
.sf-sans b{color:var(--encre);font-weight:700}

/* ponytail: 3 shared hero support-lines (subtitle / "what it is" / trailing note), one ruleset
   reused across all 4 pages via grid-area only --- no new component, just 3 placements of the
   same paragraph style. sub = before .sf-sans ; what = before .sf-sans (start/btp/en-trades) ;
   post = after .sf-sans (en/start only, "sous le sous-titre"). Row order fixed in the 900px
   grid below : h1, sub, what, sans, post, trust --- matches mobile DOM order on every page. */
.sf-hero-sub,.sf-hero-what,.sf-hero-post{font-family:var(--sans);color:var(--encre-soft);
  max-width:40ch;margin-left:auto;margin-right:auto}
.sf-hero-sub{grid-area:sub;margin-top:16px;font-size:1rem;line-height:1.5}
.sf-hero-what{grid-area:what;margin-top:12px;font-size:.88rem;line-height:1.5}
.sf-hero-post{grid-area:post;margin-top:12px;font-size:.88rem;line-height:1.5}

.sf-form.optin-form{grid-area:form;margin:16px auto 0;max-width:440px;text-align:left;
  background:var(--parch-deep);border-radius:16px;padding:24px;
  box-shadow:0 12px 30px rgba(60,50,30,.12)}
.sf-field{margin-top:12px}
.sf-field:first-child{margin-top:0}
.sf-field label{display:block;font-family:var(--sans);font-weight:600;font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--encre-soft);margin-bottom:8px}
.sf-field input{width:100%;font-family:var(--sans);font-size:1rem;color:var(--encre);
  background:var(--papier);border:1px solid var(--ligne);border-radius:10px;
  padding:16px;min-height:44px;box-sizing:border-box;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.sf-field input::placeholder{color:var(--encre-soft);opacity:.65}
.sf-field input:focus{outline:none;border-color:var(--cuivre);box-shadow:0 0 0 4px rgba(184,116,73,.14)}
.sf-field input:focus-visible{outline:2px solid var(--cuivre);outline-offset:2px}

.sf-error{margin-top:8px;min-height:1em;font-size:.75rem;font-weight:600;color:var(--encre)}

.sf-cta{width:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:600;font-size:.88rem;color:var(--papier);
  background:var(--cuivre-text);border:0;border-radius:10px;padding:16px 24px;min-height:44px;
  margin-top:16px;cursor:pointer;box-shadow:0 8px 20px rgba(138,82,39,.16);text-decoration:none;
  transition:transform .3s var(--ease),background .3s var(--ease);box-sizing:border-box}
.sf-anchor{max-width:280px;margin-left:auto;margin-right:auto}
.sf-cta:hover{background:var(--encre);transform:translateY(-1px)}
.sf-cta:active{transform:scale(.98)}
.sf-cta:focus-visible{outline:2px solid var(--cuivre);outline-offset:3px}

.sf-note{margin-top:8px;font-family:var(--sans);font-size:.75rem;line-height:1.5;
  color:var(--encre-soft)}

.sf-proof{grid-area:trust;margin-top:16px;font-family:var(--sans);font-weight:600;font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--encre-soft);line-height:1.55;
  max-width:38ch;margin-left:auto;margin-right:auto}

/* --- 3 preuves A/B : empilees mobile, rangee 3 colonnes des 900px --- */
.sf-proofs{margin-top:24px;display:grid;gap:12px}

.sf-kicker{margin:0 0 8px;font-family:var(--sans);font-weight:600;font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--encre-soft)}

.sf-card{border-radius:16px;padding:16px;text-align:left}
.sf-card-celia,.sf-card-axa{display:flex;gap:12px;align-items:flex-start;background:var(--parch-deep)}
.sf-avatar{width:56px;height:56px;border-radius:99px;object-fit:cover;flex:none;
  box-shadow:0 4px 12px rgba(60,50,30,.16)}
.sf-card-body{min-width:0}
.sf-ab{margin:0;max-width:38ch;font-family:var(--sans);font-size:.78rem;
  line-height:1.48;color:var(--encre-soft)}
.sf-card-celia .sf-ab{margin-bottom:8px}
.sf-quote{margin:0;max-width:34ch;font-family:var(--serif);font-style:italic;
  font-size:.78rem;line-height:1.4;color:var(--encre)}
.sf-quote cite{display:block;margin-top:4px;font-style:normal;font-family:var(--sans);
  font-weight:600;font-size:.75rem;letter-spacing:.03em;color:var(--encre-soft)}


.sf-card-fund{background:var(--encre);text-align:left;padding:16px}
.sf-fund-logo{display:block;width:auto;height:24px;margin-bottom:12px;opacity:.96}
.sf-card-fund .sf-kicker{color:var(--parch-deep)}
.sf-card-fund .sf-ab-dark{color:var(--parch-deep)}
.sf-card-fund .sf-ab-dark b{font-weight:600;color:var(--papier)}

/* ponytail: mechanism-proof card (option A reframe, /btp + /en/trades) --- reuses .sf-card +
   .sf-kicker + .sf-ab as-is, only adds the parch-deep fill (.sf-card-celia/.sf-card-axa already
   set that background but come coupled to the flex+avatar layout this variant doesn't need). */
.sf-card-mech{background:var(--parch-deep)}

.sf-ornament{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;
  color:var(--cuivre)}
.sf-ornament .l{width:32px;height:1px;background:var(--cuivre)}
.sf-ornament .d{width:5px;height:5px;border-radius:99px;background:var(--cuivre)}

.sf-invite{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.05rem;
  line-height:1.44;color:var(--encre-soft);margin:16px auto 0;max-width:36ch}

.sf-desc{font-family:var(--sans);font-size:1rem;line-height:1.5;color:var(--encre-soft);
  margin:24px auto 0;max-width:40ch}

/* ponytail: .sf-gets reuses .sf-kicker + .sf-sans typography as-is (zero duplicated rule),
   only adds the post-proofs spacing /start doesn't need (no "walk away with" block there).
   Used by /btp, /en/start, /en/trades (propagation 02/09, brief Chef d'Atelier). */
.sf-gets{margin-top:24px}
.sf-gets .sf-sans{margin-top:16px}

@media(min-width:900px){
  .sf-shell{max-width:1120px;padding:48px 32px 72px}

  .sf-hero{display:grid;grid-template-columns:1.15fr 440px;column-gap:64px;
    grid-template-areas:"h1 form" "sub form" "what form" "sans form" "trust form";
    align-items:start;text-align:left}
  /* ponytail: per-page row list (via the data-page already on <body>) instead of leaving
     unused named rows in the shared template --- an empty row still claims space because the
     form's spanning cell distributes its height across every row it crosses (seen live on
     /btp: a dead gap where the unused "sans" row sat). */
  [data-page="start-en"] .sf-hero{grid-template-areas:"h1 form" "sans form" "post form" "trust form"}
  [data-page="start-en-b"] .sf-hero{grid-template-areas:"h1 form" "sans form" "post form" "trust form"}
  [data-page="btp"] .sf-hero,[data-page="trades-en"] .sf-hero{
    grid-template-areas:"h1 form" "sub form" "what form" "trust form"}
  .sf-h1{font-size:2.6rem;line-height:1.08;letter-spacing:-.01em;max-width:19ch;margin:0}
  .sf-hero-sub,.sf-hero-what,.sf-hero-post{margin-left:0;margin-right:0;max-width:44ch}
  .sf-hero-sub{margin-top:24px}
  .sf-hero-what,.sf-hero-post{margin-top:12px}
  .sf-sans{margin:24px 0 0}
  .sf-proof{margin:24px 0 0;text-align:left}
  .sf-form.optin-form{margin:0;padding:32px}
  .sf-field input,.sf-cta{min-height:56px}

  .sf-proofs{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px;max-width:none}
  .sf-card{padding:24px}
  .sf-card-celia,.sf-card-axa{flex-direction:column}
  .sf-avatar{width:56px;height:56px}

  .sf-desc{margin-top:64px;max-width:56ch}
  .sf-gets{margin-top:64px;text-align:left}
  .sf-gets .sf-sans{grid-template-columns:repeat(3,1fr);gap:24px;max-width:none;margin:24px 0 0}
  .sf-ornament{margin-top:32px}
  .sf-invite{margin-top:24px;max-width:44ch}
}

@media(prefers-reduced-motion:reduce){.sf-cta,.sf-field input{transition:none}}

/* ============================================================================
   Portfolio long-forme (03/09) --- page principale + les 5 dossiers versent la copy
   finale (COPY-FINALE.md, DOSSIER-V-ISF.md) dans cette meme grammaire. Ajouts strictement
   limites a ce que la landing courte n'avait pas : une barre de nav, un rythme de sections,
   3 niveaux de titre, un paragraphe de corps long, un prix barre, un bandeau. Zero couleur
   nouvelle (aucun hex ajoute, uniquement les tokens de site.css), zero police nouvelle
   (Fraunces + Inter Tight), meme famille de radius 16/10/99, meme grille 8pt, meme plancher
   typographique 12px. Le texte long passe a gauche : de la prose centree sur 4 000 mots ne
   se lit pas --- c'est la seule regle de la landing courte qui ne se transpose pas.
   ============================================================================ */

.sf-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  max-width:1120px;margin:0 auto;padding:12px 24px;border-bottom:1px solid var(--ligne)}
.sf-brand{display:flex;align-items:center;gap:8px;text-decoration:none}

.sf-shell.sf-long{text-align:left}
.sf-section{margin-top:64px;padding:0}   /* site.css pose section{padding:76px 0} */
.sf-section:first-child{margin-top:32px}
/* la landing courte centre tout (margin auto) : en long-forme tout se cale a gauche */
.sf-long .sf-h1,.sf-long .sf-hero-sub,.sf-long .sf-hero-what,.sf-long .sf-proof,
.sf-long .sf-invite,.sf-long .sf-sans{margin-left:0;margin-right:0}
.sf-long .sf-invite{max-width:56ch;padding-left:16px;border-left:2px solid var(--cuivre)}
.sf-hero-block .sf-proof{max-width:56ch}

.sf-h2{font-family:var(--serif);font-weight:600;font-size:1.35rem;line-height:1.18;
  letter-spacing:-.01em;color:var(--encre);margin:12px 0 0;max-width:26ch}
.sf-h3{font-family:var(--serif);font-weight:600;font-size:1.08rem;line-height:1.3;
  color:var(--encre);margin:32px 0 0;max-width:34ch}
.sf-h3-tight{margin-top:8px}
.sf-p{font-family:var(--sans);font-size:1rem;line-height:1.6;color:var(--encre-soft);
  margin:12px 0 0;max-width:62ch}
.sf-p.sf-lede{font-size:1.05rem;color:var(--encre-soft)}
.sf-long .sf-p b,.sf-long .sf-ab b{color:var(--encre);font-weight:700}
.sf-repere{margin:0;font-family:var(--sans);font-weight:700;font-size:.88rem;
  line-height:1.4;color:var(--encre)}
.sf-repere + .sf-ab{margin-top:8px}

.sf-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.sf-cta-inline{width:auto;display:inline-flex;margin-top:24px}
.sf-btns .sf-cta-inline{margin-top:0}
.sf-cta.sf-cta-small{min-height:44px;padding:12px 18px;margin-top:0;font-size:.75rem}
.sf-cta-ghost{background:transparent;color:var(--encre);border:1px solid var(--ligne);
  box-shadow:none}
.sf-cta-ghost:hover{background:transparent;border-color:var(--cuivre-text);color:var(--cuivre-text)}

.sf-bullets{max-width:none;margin:16px 0 0;padding:0}
.sf-bullets li{position:relative;padding-left:16px}
.sf-bullets li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:99px;background:var(--cuivre)}

.sf-teaser-foot{margin:12px 0 0;font-family:var(--sans);font-size:.75rem;letter-spacing:.03em;
  color:var(--encre-soft)}
.sf-teaser-foot em{font-style:normal;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.sf-link{font-weight:600;color:var(--cuivre-text);text-decoration:underline;
  text-underline-offset:3px}
.sf-link:hover{color:var(--encre)}
.sf-status{font-weight:700;color:var(--encre)}

.sf-cartouche{margin:24px 0 0;display:flex;gap:16px;align-items:flex-start;
  background:var(--parch-deep)}
.sf-quote-lg{font-size:1.08rem;line-height:1.5;max-width:52ch;margin:0}
.sf-dossier .sf-quote-lg{margin-top:16px}

.sf-step{margin-top:24px}
.sf-step-line{margin:8px 0 0;font-family:var(--serif);font-style:italic;font-size:.95rem;
  line-height:1.4;color:var(--encre-soft)}
.sf-price{margin:16px 0 0;font-family:var(--serif);font-size:1.6rem;line-height:1.1;
  color:var(--encre)}
.sf-price s{font-size:1rem;color:var(--encre-soft);margin-right:8px}
.sf-price b{font-weight:600;color:var(--cuivre-text)}
.sf-step .sf-note{margin-top:12px}
.sf-chemin{margin-top:24px;font-size:.95rem}

.sf-faq{margin-top:32px}
.sf-qa{margin-top:32px}
.sf-qa .sf-h3{margin-top:0;max-width:44ch}

.sf-bandeau{margin:64px 0 0;padding:24px;background:var(--parch-deep);
  border-top:1px solid var(--cuivre);border-bottom:1px solid var(--cuivre);
  font-family:var(--sans);font-weight:600;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.55;color:var(--encre);text-align:center}

.sf-final{background:var(--encre);border-radius:16px;padding:32px 24px}
.sf-final .sf-kicker{color:var(--cuivre-pale)}
.sf-final .sf-h2{color:var(--papier)}
.sf-final .sf-p,.sf-final .sf-note{color:var(--parch-deep)}

.sf-dossier .sf-h1{max-width:24ch}
.sf-dossier .sf-h2{margin-top:40px}
.sf-avatar-lg{width:72px;height:72px;margin-top:24px}
.sf-passerelle{padding:16px;border-radius:16px;background:var(--parch-deep);max-width:56ch}

@media(min-width:640px){
  .sf-shell.sf-long{max-width:660px;padding:32px 32px 64px}
  .sf-nav{padding:16px 32px}
}
@media(min-width:900px){
  .sf-shell.sf-long{max-width:960px}
  .sf-section{margin-top:96px}
  .sf-h2{font-size:2rem;line-height:1.1}
  .sf-h3{font-size:1.25rem}
  .sf-hero-block .sf-h1{max-width:22ch}
  .sf-hero-block .sf-hero-sub,.sf-hero-block .sf-hero-what,.sf-hero-block .sf-proof{margin-left:0}
  .sf-cartouche{margin-top:32px;padding:32px}
  .sf-step{max-width:720px}
  .sf-faq{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 48px}
  .sf-qa{margin-top:0}
  .sf-bandeau{margin-top:96px;padding:32px}
  .sf-final{padding:48px}
  .sf-avatar-lg{width:88px;height:88px}
}
.sf-num{font-family:var(--serif);font-weight:400;color:var(--cuivre-text)}