/* Habillage Façonné — identité de la marketplace (DESIGN.md) : terre cuite, bois brûlé, lin ; Bitter + Karla */
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/bitter-latin.woff2) format('woff2'); }
@font-face { font-family: 'Bitter'; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url(../fonts/bitter-italic-latin.woff2) format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/karla-latin.woff2) format('woff2'); }

.outil-faconne {
  --o-primary: #A8461F;
  --o-primary-dark: #8C3817;
  --o-accent: #D08355;
  --o-dark: #2B2420;
  --o-on-dark: #D9CDBB;
  --o-bg: #EFE6D8;
  --o-ink: #2B2420;
  --o-hero-bg: #A8461F;
  --o-hero-ink: #FBF8F2;
  --o-hero-sub: #F3DCCB;
  --o-font-head: 'Bitter', Georgia, serif;
  --o-font-body: 'Karla', 'Segoe UI', system-ui, sans-serif;
  --text-soft: #5A5049;
  --border: #E0D4C2;
  background: #FBF8F2;
  color: #2B2420;
}
.outil-faconne h1, .outil-faconne h2, .outil-faconne h3 { font-weight: 600; letter-spacing: -.01em; }
.outil-faconne .eyebrow, .outil-faconne .o-tag { font-family: 'Karla', sans-serif; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; }
.outil-faconne .o-logo { font-weight: 600; font-size: 1.45rem; }
.outil-faconne .o-logo em { font-style: italic; color: var(--o-primary); }
.outil-faconne .o-header { background: rgba(251,248,242,.94); }
.outil-faconne .o-nav a { font-family: 'Karla', sans-serif; }
.outil-faconne .btn { font-family: 'Karla', sans-serif; font-weight: 700; }

/* Hero terre cuite, comme l'accueil de la marketplace */
.outil-faconne .o-hero::after { background: #FBF8F2; opacity: .08; }
.outil-faconne .o-hero::before { background: #2B2420; opacity: .16; }
.outil-faconne .o-hero h1 em { font-style: italic; color: #FBF8F2; }
.outil-faconne .o-hero .o-tag { background: rgba(251,248,242,.16); color: #FBF8F2; }
.outil-faconne .o-hero .o-tag::before { background: #FBF8F2; }
.outil-faconne .o-hero .btn-primary { background: #FBF8F2; color: #2B2420; box-shadow: 0 10px 26px rgba(43,36,32,.25); }
.outil-faconne .o-hero .btn-primary:hover { background: #fff; }
.outil-faconne .o-hero .btn-soft { background: transparent; color: #FBF8F2; border-color: rgba(251,248,242,.5); }
.outil-faconne .o-hero .btn-soft:hover { background: rgba(251,248,242,.12); color: #FBF8F2; border-color: #FBF8F2; }
.outil-faconne .o-video { border-color: rgba(251,248,242,.3); background: #FBF8F2; box-shadow: 0 30px 70px rgba(43,36,32,.35); }

.outil-faconne .card, .outil-faconne .o-feature, .outil-faconne .o-step, .outil-faconne .form-card, .outil-faconne .o-demo-box { background: #FBF8F2; border-radius: 14px; }
.outil-faconne .bg-soft .card, .outil-faconne .bg-soft .o-feature, .outil-faconne .bg-soft .o-step { background: #FBF8F2; }
.outil-faconne .o-step::before { border-radius: 50%; }
.outil-faconne .o-feature::before { background: #7C8B65; }
.outil-faconne .o-ic { border-radius: 50%; background: #F2DDCF; }
.outil-faconne .o-dark .eyebrow { color: #D08355; }
.outil-faconne .o-footer { background: #2B2420; color: #C9BCA9; }
.outil-faconne .o-story { max-width: 820px; margin-inline: auto; text-align: center; }
.outil-faconne .o-story p { font-size: 1.12rem; color: var(--text-soft); margin-top: 18px; }