/* MonRFS : Confiez-nous, retour a la direction artistique du site (18/10/2026).
   Decision d'Elise du 18/10 : garder la disposition et les six compositions d'ambiance,
   mais une seule famille (Open Sans) et les seuls jetons de couleur MonRFS, apercu compris.
   Charge EN DERNIER par confiez-nous-votre-projet.html uniquement. Aucun autre fichier modifie.
   Jetons releves sur https://monrfs.com/v2/assets/css/main.css le 18/10/2026. La page ne charge
   pas main.css : les jetons sont redeclares ici, a l'identique. */

/* 1. Jetons MonRFS. Deux noms entrent en collision avec les variables propres a la page
      (--blue et --lavender y designent d'autres teintes) : ils sont prefixes --mrfs-. */
html body.cfx-page {
  --mrfs-blue: #6b8df2;
  --blue-action: #4b63b8;
  --blue-action-deep: #34467f;
  --mint: #50d7a1;
  --mint-text: #1f865d;
  --mint-soft: rgba(80, 215, 161, 0.1);
  --turquoise: #1FCAC5;
  --violet: #6558d3;
  --violet-deep: #4133B7;
  --violet-soft: #f1eeff;
  --mrfs-lavender: #ecf0ff;
  --text: #2d3940;
  --text-mid: #4a5568;
  --text-muted: #666;
  --text-soft: #5f6b73;
  --surface-warm: #fafbff;
  --border: #e4e9f7;
  --warm: #f4ebe4;
  --warm-deep: #e8d5c4;
  --dark: #1e2a35;
  --font: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* 2. Variables de la page ramenees aux jetons, par ROLE. */
  --bg: #fff;
  --bg-alt: var(--surface-warm);
  --surface: #fff;
  --ink: var(--text);
  --ink-soft: var(--text-mid);
  --muted: var(--text-soft);
  --muted-soft: var(--text-soft);
  --line: var(--border);
  --line-soft: var(--border);
  --blue: var(--blue-action);
  --blue-soft: var(--mrfs-lavender);
  --blue-deep: #3f519b;
  --green: var(--mint-text);
  --green-soft: var(--mint-soft);
  --gold: var(--blue-action);
  --gold-soft: var(--mrfs-lavender);
  --rose: var(--violet);
  --rose-soft: var(--violet-soft);
  --peach: var(--warm-deep);
  --peach-soft: var(--warm);
  --lavender: var(--violet);
  --lavender-soft: var(--violet-soft);
  --clinique-violet: var(--violet);
  --clinique-violet-soft: var(--violet-soft);
  --clinique-mint: var(--mint);
  font-family: var(--font);
  color: var(--text);
}

/* 3. Une seule famille sur toute la page, apercu compris. Les icones Phosphor gardent leur
      police d'icones. !important : il faut passer devant un attribut style et 100 Ko de
      regles heritees qui nomment Cormorant, Inter, Pacifico, Fraunces, Mulish, Jost, Archivo,
      Pinyon Script et Source Sans 3. */
html body.cfx-page,
html body.cfx-page *:not(.ph):not(.ph-duotone):not(.ph-fill):not(.ph-light):not(.ph-thin):not(.ph-bold),
html body.cfx-page *:not(.ph):not(.ph-duotone):not(.ph-fill):not(.ph-light):not(.ph-thin):not(.ph-bold)::before,
html body.cfx-page *:not(.ph):not(.ph-duotone):not(.ph-fill):not(.ph-light):not(.ph-thin):not(.ph-bold)::after {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
html body.cfx-page ::selection { background: var(--mrfs-lavender); color: var(--text); }

/* 4. En-tete de la page (hors bandeau de site, inchange). */
html body.cfx-page .cfx-copy {
  --hgu-titre: var(--text);
  --hgu-soft: var(--text-mid);
  --hgu-accent: var(--blue-action);
  --hgu-accent2: var(--mint-text);
  --hgu-kw: var(--blue-action);
}
html body.cfx-page .cfx-copy .hgu-kw,
html body.cfx-page .section-head h2 em { color: var(--blue-action); }
html body.cfx-page .cfx-copy :is(.hgu-lead, .hgu-price),
html body.cfx-page .cfx-reassurance,
html body.cfx-page .cfx-preview-label { color: var(--text-mid); }
html body.cfx-page .cfx-copy .hgu-price strong { color: var(--text); }
html body.cfx-page .cfx-reassurance i { color: var(--blue-action); }
html body.cfx-page .cfx-copy .hgu-cta { background: var(--blue-deep); }
html body.cfx-page .cfx-copy .hgu-cta:hover { background: var(--blue-action-deep); }
html body.cfx-page .cfx-copy .hgu-cta.hgu-ghost,
html body.cfx-page .cfx-service-paths .hgu-ghost { background: #fff; color: var(--blue-deep); border-color: var(--border); }

/* 5. Selecteur d'ambiance : pastilles aux accents des six ambiances. */
html body.cfx-page .cfx-preview-group .hgu-ambiance-box { --hgu-titre: var(--text); --hgu-soft: var(--text-mid); }
html body.cfx-page .cfx-preview-group :is(.hgu-ambiance-hint, .hgu-micro) { color: var(--text-mid); }
html body.cfx-page .cfx-preview-group .hgu-ambiance-tag { color: var(--blue-deep); }
html body.cfx-page .cfx-preview-group .hgu-cdot { border-color: var(--border); color: var(--text); }
html body.cfx-page .cfx-preview-group .hgu-cdot:hover { border-color: var(--cdot); }
html body.cfx-page .cfx-preview-group .hgu-cdot.is-active { border-color: var(--cdot); background: var(--mrfs-lavender); color: var(--blue-deep); box-shadow: inset 0 0 0 1px var(--cdot); }
html body.cfx-page .cfx-preview-group .hgu-cdot.is-active::before { background: var(--cdot); }
html body.cfx-page .hgu-cdot[data-go="clinique"] { --cdot: var(--blue-action); }
html body.cfx-page .hgu-cdot[data-go="nature"] { --cdot: var(--mint-text); }
html body.cfx-page .hgu-cdot[data-go="bienetre"] { --cdot: var(--warm-deep); }
html body.cfx-page .hgu-cdot[data-go="salon"] { --cdot: var(--violet); }
html body.cfx-page .hgu-cdot[data-go="sport"] { --cdot: var(--turquoise); }
html body.cfx-page .hgu-cdot[data-go="premium"] { --cdot: var(--dark); }
/* Le sable de Bien-etre est trop pale pour se detacher seul du blanc : un liseré le cerne. */
html body.cfx-page .hgu-cdot[data-go="bienetre"]::before { box-shadow: inset 0 0 0 1px var(--text-soft); }
html body.cfx-page .hgu-udot[data-go="clinique"] { --dot: var(--blue-action); }
html body.cfx-page .hgu-udot[data-go="nature"] { --dot: var(--mint-text); }
html body.cfx-page .hgu-udot[data-go="bienetre"] { --dot: var(--warm-deep); }
html body.cfx-page .hgu-udot[data-go="salon"] { --dot: var(--violet); }
html body.cfx-page .hgu-udot[data-go="sport"] { --dot: var(--turquoise); }
html body.cfx-page .hgu-udot[data-go="premium"] { --dot: var(--dark); }
html body.cfx-page .hgu-uindic-label { color: var(--text); }

/* 6. Apercu « votre futur site » : fenetre de navigateur. */
html body.cfx-page .cfx-preview .cfx-window { background: var(--surface-warm); color: var(--text-soft); border-bottom-color: var(--border); }
html body.cfx-page .cfx-preview .cfx-window-note { color: var(--text-soft); }
html body.cfx-page .cfx-window-dots i { background: var(--border); box-shadow: inset 0 0 0 1px var(--text-soft); }

/* 7. Les six ambiances : memes compositions et memes photos, differenciees par un accent pris
      dans la palette et par le traitement typographique en Open Sans (poids, taille, casse,
      interlettrage). Seules les couleurs et la typo changent ici ; positions et grilles intactes. */
html body.cfx-page .cfx-ambiences .cfx-demo {
  --a-ink: var(--text); --a-muted: var(--text-mid); --a-color: var(--blue-action);
  --a-paper: #fff; --a-line: var(--border); --a-cta-ink: #fff;
  --a-font: 'Open Sans', sans-serif; --a-body: 'Open Sans', sans-serif;
}
html body.cfx-page .cfx-ambiences .cfx-demo-cta { color: var(--a-cta-ink); }
html body.cfx-page .cfx-ambiences .cfx-demo-links,
html body.cfx-page .cfx-ambiences .cfx-demo-bottom { font-weight: 600; }

/* Clinique : bleu d'action, titre net et serre, petites capitales de navigation. */
html body.cfx-page .cfx-ambiences[data-u="clinique"] .cfx-demo { --a-ink: var(--blue-deep); --a-color: var(--blue-action); --a-paper: #fff; --a-line: var(--border); }
html body.cfx-page .cfx-ambiences[data-u="clinique"] .cfx-demo-title { font-weight: 700; letter-spacing: -.03em; }
html body.cfx-page .cfx-ambiences[data-u="clinique"] .cfx-demo-brand { font-weight: 700; }
html body.cfx-page .cfx-ambiences[data-u="clinique"] .cfx-demo-links,
html body.cfx-page .cfx-ambiences[data-u="clinique"] .cfx-demo-bottom { text-transform: uppercase; letter-spacing: .08em; font-size: 9px; }
html body.cfx-page .cfx-ambiences[data-u="clinique"] .cfx-demo-cta { font-weight: 700; }

/* Nature : menthe sur voile menthe, titre leger et ample. */
html body.cfx-page .cfx-ambiences[data-u="nature"] .cfx-demo { --a-ink: var(--text); --a-muted: var(--text-mid); --a-color: var(--mint-text); --a-paper: var(--mint-soft); --a-line: var(--border); }
html body.cfx-page .cfx-ambiences[data-u="nature"] .cfx-demo-copy { background: linear-gradient(var(--mint-soft), var(--mint-soft)), #fff; }
html body.cfx-page .cfx-ambiences[data-u="nature"] .cfx-demo-title { font-weight: 300; letter-spacing: -.02em; }
html body.cfx-page .cfx-ambiences[data-u="nature"] .cfx-demo-cta { font-weight: 700; }

/* Bien-etre : sable chaud, texte sombre, titre tres leger, lien souligne. */
html body.cfx-page .cfx-ambiences[data-u="bienetre"] .cfx-demo { --a-ink: var(--text); --a-muted: var(--text-mid); --a-color: var(--text); --a-paper: var(--warm); --a-line: var(--warm-deep); }
html body.cfx-page .cfx-ambiences[data-u="bienetre"] .cfx-demo-title { font-weight: 300; letter-spacing: -.01em; }
html body.cfx-page .cfx-ambiences[data-u="bienetre"] .cfx-demo-cta { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }
html body.cfx-page .cfx-ambiences[data-u="bienetre"] .cfx-demo-brand i { color: var(--text-mid); }

/* Salon : violet, titre violet profond, pastille d'appel violette. */
html body.cfx-page .cfx-ambiences[data-u="salon"] .cfx-demo { --a-ink: var(--violet-deep); --a-muted: var(--text-mid); --a-color: var(--violet); --a-paper: var(--violet-soft); --a-line: var(--border); }
html body.cfx-page .cfx-ambiences[data-u="salon"] .cfx-demo-title { font-weight: 400; letter-spacing: -.02em; }
html body.cfx-page .cfx-ambiences[data-u="salon"] .cfx-demo-cta { font-weight: 600; }

/* Sport : capitales tres grasses en encre sombre, turquoise en aplat (jamais en texte). */
html body.cfx-page .cfx-ambiences[data-u="sport"] .cfx-demo { --a-ink: var(--dark); --a-muted: var(--text-mid); --a-color: var(--turquoise); --a-cta-ink: var(--dark); --a-paper: var(--surface-warm); --a-line: var(--border); }
html body.cfx-page .cfx-ambiences[data-u="sport"] .cfx-demo-title { font-weight: 800; letter-spacing: -.03em; }
html body.cfx-page .cfx-ambiences[data-u="sport"] .cfx-demo-brand { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
html body.cfx-page .cfx-ambiences[data-u="sport"] .cfx-demo-brand i { color: var(--dark); }
html body.cfx-page .cfx-ambiences[data-u="sport"] .cfx-demo-cta { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
html body.cfx-page .cfx-ambiences[data-u="sport"] .cfx-demo-bottom { border-top: 2px solid var(--turquoise); text-transform: uppercase; letter-spacing: .06em; font-size: 9px; }

/* Premium : cadre sombre, panneau blanc, titre fin, violet profond en filet. */
html body.cfx-page .cfx-ambiences[data-u="premium"] .cfx-demo { --a-ink: var(--dark); --a-muted: var(--text-mid); --a-color: var(--violet-deep); --a-paper: var(--dark); --a-line: var(--text-mid); }
html body.cfx-page .cfx-ambiences[data-u="premium"] .cfx-demo-brand { color: #fff; font-weight: 300; text-transform: uppercase; letter-spacing: .22em; font-size: 13px; }
html body.cfx-page .cfx-ambiences[data-u="premium"] .cfx-demo-brand i { color: var(--mrfs-lavender); }
html body.cfx-page .cfx-ambiences[data-u="premium"] :is(.cfx-demo-links, .cfx-demo-bottom) { color: var(--mrfs-lavender); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }
html body.cfx-page .cfx-ambiences[data-u="premium"] .cfx-demo-copy { background: #fff; padding-left: 18px; }
html body.cfx-page .cfx-ambiences[data-u="premium"] .cfx-demo-title { font-weight: 300; letter-spacing: -.03em; font-size: 33px; line-height: 1.05; }
html body.cfx-page .cfx-ambiences[data-u="premium"] .cfx-demo-cta { color: var(--violet-deep); border-color: var(--violet-deep); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
@media (max-width: 760px) {
  html body.cfx-page .cfx-ambiences[data-u="premium"] .cfx-demo-copy { padding-left: 14px; }
  html body.cfx-page .cfx-ambiences[data-u="premium"] .cfx-demo-title { font-size: 30px; }
}
@media (max-width: 360px) {
  html body.cfx-page .cfx-ambiences[data-u="premium"] .cfx-demo-title { font-size: 27px; }
}

/* 8. Reste de la page : couleurs ecrites en dur dans les regles heritees. */
html body.cfx-page #realisations { border-top-color: var(--border); }
html body.cfx-page #realisations .cl2-real-card { border-color: var(--border); }
html body.cfx-page .marquee { background: var(--mrfs-lavender); border-color: var(--border); color: var(--blue-deep); }
html body.cfx-page .marquee-item { color: var(--blue-deep); font-style: normal; font-weight: 600; font-size: 15px; letter-spacing: 0; }
html body.cfx-page .marquee-item .star { color: var(--blue-action); }
html body.cfx-page .btn.primary,
html body.cfx-page .opt-chip.selected { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
html body.cfx-page .btn.primary:hover { background: var(--blue-action-deep); border-color: var(--blue-action-deep); }
html body.cfx-page .solution-pill.pill-diy { background: var(--mrfs-lavender); color: var(--blue-action); }
html body.cfx-page .explain-status-text { color: var(--text-soft); }
html body.cfx-page .wizard-step-indicator em { font-size: 15px; font-weight: 600; font-style: normal; color: var(--text); }
html body.cfx-page .form-section-num { font-style: normal; font-weight: 700; color: var(--blue-action); }
html body.cfx-page .section-head p > a:not([class]) { color: var(--blue-action); }

/* Blocs sombres (envoi du brief, promesse) : marine du site, accents menthe et lavande. */
html body.cfx-page :is(.send-block, .promise-banner) {
  background: linear-gradient(135deg, var(--dark) 0%, var(--blue-deep) 100%);
  color: #fff;
}
html body.cfx-page :is(.send-block, .promise-banner)::before,
html body.cfx-page :is(.send-block, .promise-banner)::after { color: var(--mrfs-blue); }
html body.cfx-page .promise-banner::before { background: var(--mint-soft); color: var(--mrfs-blue); }
html body.cfx-page :is(.send-block, .promise-banner) h3 { color: #fff; font-weight: 600; letter-spacing: -.02em; }
html body.cfx-page :is(.send-block, .promise-banner) h3 em { color: var(--mint); font-style: normal; font-weight: 700; }
html body.cfx-page :is(.send-block, .promise-banner) p,
html body.cfx-page .send-block .send-fineprint { color: var(--mrfs-lavender); }
html body.cfx-page .send-block .send-fineprint { font-style: normal; }
html body.cfx-page .send-block [style*="Cormorant"] { color: var(--mint) !important; font-style: normal !important; font-weight: 600; font-size: 14px !important; letter-spacing: .04em !important; }
html body.cfx-page .send-block .btn:not(.blue) { background: #fff; color: var(--text); border-color: #fff; }
html body.cfx-page .send-block .btn.blue { background: var(--blue-action); border-color: var(--blue-action); color: #fff; }
html body.cfx-page .send-block .btn:hover { background: var(--blue-action-deep); border-color: var(--blue-action-deep); color: #fff; }

/* 9. Pied de site : ses titres de colonne sont des h3, que la regle du chrome (ecrite pour h4)
      ne couvre pas ; ils heritaient de l'encre de la page, sombre sur sombre (1,22:1). On leur
      rend le blanc que le chrome donne a ses titres. Rien d'autre du pied n'est modifie. */
html body.cfx-page .sc-footer h3 { color: #fff; }

/* 10. Autres blocs sombres et elements reveles a l'interaction (calculateur, confirmation,
       maquette, brouillon) : le jaune et le creme herites passent a la menthe et a la lavande. */
html body.cfx-page .roi-calculator { background: linear-gradient(135deg, var(--dark) 0%, var(--blue-deep) 100%); color: #fff; }
html body.cfx-page .roi-calculator::before { background: var(--mint-soft); }
html body.cfx-page .roi-calc-head h4 { color: #fff; font-weight: 600; }
html body.cfx-page .roi-calc-head p { color: var(--mrfs-lavender); font-style: normal; }
html body.cfx-page .roi-input-group label { color: var(--mrfs-lavender); }
html body.cfx-page .roi-value { color: var(--mint); font-style: normal; font-weight: 700; }
html body.cfx-page .roi-input-row input[type="range"]::-webkit-slider-thumb { background: var(--mint); border-color: var(--dark); }
html body.cfx-page .roi-input-row input[type="range"]::-moz-range-thumb { background: var(--mint); border-color: var(--dark); }
html body.cfx-page .roi-input-row input[type="range"]:focus-visible { outline-color: var(--mint); }
html body.cfx-page .confirm-icon { color: #fff; }
html body.cfx-page .promise-step .num { background: var(--mint); color: var(--dark); }
html body.cfx-page .draft-toast .toast-clear { background: var(--mint-soft); color: var(--mint); }
html body.cfx-page .mk-footer-lines { color: var(--mrfs-lavender); }
html body.cfx-page .mockup-dot { background: var(--border); }
html body.cfx-page .mockup-dot:nth-child(1) { background: var(--violet); }
html body.cfx-page .mockup-dot:nth-child(2) { background: var(--mrfs-blue); }
html body.cfx-page .mockup-dot:nth-child(3) { background: var(--mint); }

/* 11. Open Sans chasse plus large que les familles retirees : on ajuste la taille des titres
       Clinique et Salon pour garder leur coupe d'origine (deux lignes sur ordinateur). */
html body.cfx-page .cfx-ambiences[data-u="clinique"] .cfx-demo-title { font-size: 27px; line-height: 1.12; }
html body.cfx-page .cfx-ambiences[data-u="salon"] .cfx-demo-title { font-size: 29px; line-height: 1.1; }
html body.cfx-page .soin-badge { letter-spacing: .04em; }
@media (max-width: 760px) {
  html body.cfx-page .cfx-ambiences[data-u="clinique"] .cfx-demo-title { font-size: 23px; }
  html body.cfx-page .cfx-ambiences[data-u="salon"] .cfx-demo-title { font-size: 25px; }
}
@media (max-width: 360px) {
  html body.cfx-page .cfx-ambiences[data-u="clinique"] .cfx-demo-title { font-size: 21px; }
  html body.cfx-page .cfx-ambiences[data-u="salon"] .cfx-demo-title { font-size: 23px; }
}

/* 12. Dans l'apercu, un ancien moteur d'univers remappe ces memes variables par color-mix :
       on les ramene aux jetons ici aussi. */
html body.cfx-page .cfx-preview[data-u] {
  --bg: #fff; --bg-alt: var(--surface-warm); --surface: #fff;
  --ink: var(--text); --ink-soft: var(--text-mid); --muted: var(--text-soft);
  --line: var(--border); --line-soft: var(--border);
  --blue: var(--blue-action); --blue-deep: #3f519b; --blue-soft: var(--mrfs-lavender);
  --gold: var(--blue-action); --gold-soft: var(--mrfs-lavender);
  --green: var(--mint-text); --green-soft: var(--mint-soft);
  --rose: var(--violet); --rose-soft: var(--violet-soft);
}